Heatmap
DataMITCell-grid heatmap with color ramp legend — usage, density, and correlation matrices.
bun add @otfdashkit/ui
Preview
HeatmapData
Loading Storybook preview…
Code
@otfdashkit/uiimport { Heatmap } from '@otfdashkit/ui'
const HEATMAP_DATA = (() => {
const out: { date: string; value: number }[] = []
let seed = 42
const rng = () => { seed = (seed * 9301 + 49297) % 233280; return seed / 233280 }
const today = new Date('2026-04-29')
const start = new Date(today); start.setDate(start.getDate() - 365)
const cursor = new Date(start)
while (cursor <= today) {
const dow = cursor.getDay()
const isWeekend = dow === 0 || dow === 6
out.push({
date: `${cursor.getFullYear()}-${String(cursor.getMonth() + 1).padStart(2, '0')}-${String(cursor.getDate()).padStart(2, '0')}`,
value: Math.max(0, Math.round(rng() * (isWeekend ? 6 : 22))),
})
cursor.setDate(cursor.getDate() + 1)
}
return out
})()
export function Example() {
return (
<div className="p-4">
<Heatmap
data={HEATMAP_DATA}
endDate={new Date('2026-04-29')}
weeks={53}
cellSize={11}
gap={3}
/>
</div>
)
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.
Props
Props declared in the Heatmap source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| datarequired | HeatmapDay[] | ||
| cellSize | number | 11 | |
| className | string | ||
| colorScale | string[] | ||
| endDate | Date | ||
| formatTooltip | (day: HeatmapDay) => string | ||
| gap | number | 3 | |
| showDayLabels | boolean | true | |
| showLegend | boolean | true | |
| showMonthLabels | boolean | true | |
| weeks | number | 53 |