ActivityHeatmap

GitHub-style weekly activity grid. Renders the last N weeks as Mon–Sun columns with quartile-based opacity per cell.

Preview

Usage

import { ActivityHeatmap } from '@ramtt/ui'

<ActivityHeatmap
  data={[{ date: '2026-04-15', value: 3 }, { date: '2026-04-16', value: 1 }]}
  weeks={26}
  showDayLabels
  showMonthLabels
/>

Props

Prop	Type	Default	Description
data*	`HeatmapDataPoint[]`	—	ISO date + numeric value per day
weeks	`number`	26	Number of week columns to render
color	`string`	'var(--chart-1)'	Base cell color (opacity scales by quartile)
emptyColor	`string`	'var(--n200)'	Color for zero-activity cells
showDayLabels	`boolean`	false	Render Mon/Wed/Fri labels on the left
showMonthLabels	`boolean`	false	Render month labels above the grid
onCellHover	`(point: HeatmapDataPoint \| null) => void`	—	Hover callback