Components
BarChart
CONSTRAINED SCALE — BarChart.tsx draws both bars against a hard-coded divisor of 20 ((item.total / 20) * 100 into a 100px SVG), so:
- values above 20 overflow the viewport and clip into identical full-height bars, and
completedis not drawn as a fraction oftotal; the two are independent bars that happen to overlap.
Every story here therefore stays inside 0–20. Feeding it large counts (88 of anything) renders a wall of identical bars.
This example is composed with Storybook args. Open the interactive workbench to change its props and inspect the generated API controls.
Import
import { BarChart } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
data | — | [] | One entry per bar: { day, total, completed }. completed is drawn as its own bar overlapping total, not as a fraction of it, so values above ~20 collapse into a wall of identical bars. |
Examples
Full Completion
<BarChart
data={[
{ day: 'Sun', total: 12, completed: 12 },
{ day: 'Mon', total: 12, completed: 12 },
{ day: 'Tue', total: 12, completed: 12 },
]}
/>At Scale Ceiling
At the top of the usable range — anything above 20 clips.
<BarChart
data={[
{ day: 'Sun', total: 20, completed: 20 },
{ day: 'Mon', total: 20, completed: 10 },
{ day: 'Tue', total: 20, completed: 1 },
]}
/>