Beta
Heat Calendar
Weeks of activity as a sequential single-hue grid — magnitude is the alpha of one hue, with per-cell hover counts.
Heat Calendar
Weeks of activity as a sequential single-hue grid — magnitude is the alpha of one hue, with per-cell hover counts.
When to use it
For counts over time where the pattern matters more than any individual day, such as activity streaks and publishing cadence. A single hue with alpha for magnitude keeps it readable for colour-blind viewers, which multi-hue heat scales do not.
Install
Adds Heat Calendar and its dependencies to your project through the shadcn CLI.
$ npx shadcn@latest add https://www.ssicevs.com/r/heat-calendar.jsonProps · HeatCalendar
| Prop | Type | Default |
|---|---|---|
| title? | string | "Ship activity" |
| unit? | string | "ships" |
| weeks? | number | 12 |
| maxCount? | numberCount a cell at intensity 1.0 represents — hover shows `intensity × maxCount`. | 14 |
| values? | number[][]`values[week][day]` intensities in 0..1 (7 days per week). Defaults to a deterministic demo field. | — |
| color? | string | "#4790E4" |
Generated from the component source. Run npm run props:extract after changing a signature.