#199
Hour by day matrix
A matrix heatmap of task counts by hour of day (24 columns) and weekday (7 rows).
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Hour by day matrix" pattern (@codeatlasdev/ui demo #199, charts/heatmap) in my app.
Call get_demo({ ids: ["#199"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Spotting busy periods in a day-by-hour grid, like support load or traffic.
Keep these library parts, with the props and tokens the demo uses:
- Card from "@codeatlasdev/ui"
- HeatmapChart, MatrixHeatmapPoint from "@codeatlasdev/ui/charts"
Behaviour to keep:
- `<HeatmapChart variant="matrix"`
- `matrixData` is `MatrixHeatmapPoint[]` of `[h, d, Math.max(0, Math.min(10, v))]` triples, 24 hours by 7 days
- `xCategories={hours}` built from `String(i).padStart(2, '0') + ':00'` (24 labels)
- `yCategories={days}` with `'Mon'` to `'Sun'`
- `tooltipFormatter={(v) => `${v} tasks`}`
- `height="320px"` 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="matrix"`
- `matrixData` is `MatrixHeatmapPoint[]` of `[h, d, Math.max(0, Math.min(10, v))]` triples, 24 hours by 7 days
- `xCategories={hours}` built from `String(i).padStart(2, '0') + ':00'` (24 labels)
- `yCategories={days}` with `'Mon'` to `'Sun'`
- `tooltipFormatter={(v) => `${v} tasks`}`
- `height="320px"` inside `<Card full>`
Related
Loading source.