Components
RectangleChart
FRACTIONS, NOT COUNTS — each datum is a 0–1 fill ratio, applied directly as y={(1 - value) * 100}% / height={value * 100}%.
Passing raw counts (12, 41, …) produces negative offsets and heights in the thousands of percent, so every cell clips to solid.
Cells are laid out a week at a time, seven per row.
This example is composed with Storybook args. Open the interactive workbench to change its props and inspect the generated API controls.
Import
import { RectangleChart } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
data | — | [] | Density values from 0 to 1, one per cell. The chart does no normalising — feed it fractions, not counts. |
Examples
Flat
Empty And Full
The two ends of the range, so the empty and full cells are both visible.
Multiple Weeks
Five weeks — the day labels render on the row starting at index 28.
<RectangleChart
data={[
0.2,
0.55,
0.35,
0.8,
0.45,
0.95,
0.6,
0.3,
0.4,
0.7,
0.65,
0.5,
0.85,
0.15,
0.9,
0.25,
0.6,
0.45,
0.75,
0.35,
0.55,
0.1,
0.8,
0.5,
0.7,
0.4,
0.6,
0.3,
0.65,
0.45,
0.85,
0.2,
0.55,
0.75,
0.5,
]}
/>