Calendar heatmap

Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.

Build the "Calendar heatmap" pattern (@codeatlasdev/ui demo #198, charts/heatmap) in my app.

Call get_demo({ ids: ["#198"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Showing activity over a year, like contributions, logins or deploys per day.

Keep these library parts, with the props and tokens the demo uses:
- Card from "@codeatlasdev/ui"
- HeatmapChart, CalendarHeatmapPoint from "@codeatlasdev/ui/charts"

Behaviour to keep:
- `<HeatmapChart variant="calendar"`
- `data` is `CalendarHeatmapPoint[]` built with `Array.from({ length: 258 }` as `[ 'YYYY-MM-DD', value ]` pairs
- `range={['2026-01-01', '2026-09-15']}`
- `tooltipFormatter={(v) => `${v} commits`}`
- `height="160px"` inside `<Card full>`

Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.

Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours.

Library parts

• Card @codeatlasdev/ui
• HeatmapChart @codeatlasdev/ui/charts

How it is built

• `<HeatmapChart variant="calendar"`
• `data` is `CalendarHeatmapPoint[]` built with `Array.from({ length: 258 }` as `[ 'YYYY-MM-DD', value ]` pairs
• `range={['2026-01-01', '2026-09-15']}`
• `tooltipFormatter={(v) => `${v} commits`}`
• `height="160px"` inside `<Card full>`

Related

• #200 Year toggle component/chart
• #199 Hour by day matrix component/chart
• #205 Dashboard component/chart
• #190 Horizontal bars component/chart
• #191 Stacked bars component/chart
• #192 Grouped and stacked component/chart