Skip to content

Heatmap

DataMIT
View in Storybook

Cell-grid heatmap with color ramp legend — usage, density, and correlation matrices.

bun add @otfdashkit/ui

Preview

Heatmap
Loading Storybook preview…

Code

import { 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.

PropTypeDefaultDescription
datarequiredHeatmapDay[]
cellSizenumber11
classNamestring
colorScalestring[]
endDateDate
formatTooltip(day: HeatmapDay) => string
gapnumber3
showDayLabelsbooleantrue
showLegendbooleantrue
showMonthLabelsbooleantrue
weeksnumber53