opinion
Heatmap
A grid of shaded cells; a missing figure looks different from a zero.
Tasks done this weekOne row per person, one column per day. Leo is off on Wednesday.
In context
Team loadThe grid on the weekly summary
This weekTasks done, 19 to 23 Oct
Mobile releaseLeo was off on Wednesday, so that cell has no figure rather than a zero.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
data | HeatmapCell[] | Yes | — |
rows | string[] | undefined | No | — |
cols | string[] | undefined | No | — |
title | string | undefined | No | — |
ariaLabel | string | undefined | No | — |
cellSize | number | undefined | No | 32 |
colorScale | ((normalizedValue: number) => string) | undefined | No | (normalizedValue: number): string => { const t = Math.max(0, Math.min(1, normalizedValue)); const percent = Math.round(8 + t * 92); // 8% (near-white) through 100% (the true max value) return "color-mix(in srgb, var(--rebar-color-primary, #0066cc) " + percent + "%, transparent)"; } |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
data-rebar-* attributes
data-rebar-component="heatmap" on the root <figure>; each cell carries data-rebar-part="cell" or "cell-missing", plus data-row/data-col.
Migrating to Ant Design
Not codemod-covered — AntD ships no chart components of its own (it recommends @ant-design/charts, a separate package built on G2Plot); there's no direct 1:1 antd component mapping for a heatmap.