Heatmap
One cell per value, shaded with the accent.
import
import { Heatmap } from '@joshicodes/cock';Year
fit fills the width; on a narrow screen the grid scrolls instead of shrinking.
Behaviour
- `fit` fills the width, down to `minCell`; past that the grid scrolls instead of becoming unreadable.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of Heatmap
| Prop | Type | Default |
|---|---|---|
data required One number per cell, filled column by column. | number[] | — |
rows Cells per column; 7 gives one week per column. | number | 7 |
cellSize Cell edge in pixels. Ignored with `fit`. | number | 11 |
fit Stretch the cells so the grid fills its container's width. | boolean | false |
minCell Smallest a cell may get while fitting. Below that the grid scrolls. | number | 7 |
gap | number | 3 |
levels Number of colour steps above zero. | number | 4 |
max Value that counts as full colour. Defaults to the largest value. | number | — |
describe Tooltip text for a cell. | (value: number, index: number) => string | (value) => String(value) |
legend | boolean | true |
label Summary for screen readers. | string | — |
class | string | — |