components / heatmap
heatmap.
year activity grid — 12 mini month grids of day cells tinted by value (contribution-graph style), with a less-to-more legend. generalized from the justin06lee.dev year view.
Jan
S
M
T
W
T
F
S
Feb
S
M
T
W
T
F
S
Mar
S
M
T
W
T
F
S
Apr
S
M
T
W
T
F
S
May
S
M
T
W
T
F
S
Jun
S
M
T
W
T
F
S
Jul
S
M
T
W
T
F
S
Aug
S
M
T
W
T
F
S
Sep
S
M
T
W
T
F
S
Oct
S
M
T
W
T
F
S
Nov
S
M
T
W
T
F
S
Dec
S
M
T
W
T
F
S
lessmore
installation
bunx @justin06lee/chrome@latest add heatmapprops
| name | type | default | description |
|---|---|---|---|
| values * | Record<string, number> | - | value per "YYYY-MM-DD". |
| year * | number | - | |
| levels | number | 5 | intensity steps incl. empty. |
| max | number | - | bucketing cap; defaults to max value. |
| today | string | - | "YYYY-MM-DD" to ring. |
| onSelectDay | (date: string) => void | - | makes cells clickable. |
| title | (date: string, value: number) => string | - | cell tooltip formatter. |
| monthHref | (month: HeatmapMonth) => string | - | when set, month labels link to the returned href. HeatmapMonth is { index (0 = jan), year, label }. |
| linkComponent | React.ElementType | 'a' | anchor element/component for month links — pass your router's Link. |