A measure across two dimensions — activity by weekday and hour — in one sequential hue, with a step legend.

WebBêtaGraphiques

Web uniquement — React, depuis @krizaka/charts/heatmap. Bêta : son API peut encore changer à une version mineure.

Quand l’utiliser

When something happens: uploads by weekday and hour, errors by service and day.
A matrix of two categorical dimensions with a value in each cell.

Quand ne pas l’utiliser

One value per day over a year.À la place : Calendar heatmap
Exact values matter more than the pattern.À la place : Bar chart

Installation

Installer

npm install @krizaka/charts

Importer

import { Heatmap } from "@krizaka/charts/heatmap";

Exemples

Activity by hour

Uploads by weekday and hour of the day: when a community is awake.

Uploads by day and hour

Last 4 weeks, Montréal time

Heatmap, 8 × 7. Peak 73 (Sat, 18:00), 56 with a value.

Uploads by day and hour — data
Day / Hour	00:00	03:00	06:00	09:00	12:00	15:00	18:00	21:00
Mon	6	9	12	31	23	44	47	50
Tue	13	16	8	27	30	40	43	46
Wed	9	12	15	23	26	47	50	42
Thu	16	8	11	30	22	43	46	49
Fri	12	15	7	26	29	50	42	45
Sat	12	15	18	35	38	70	73	65
Sun	19	11	14	42	45	66	69	72

Props

Prop	Type	Défaut	Description
`data`requis	`readonly T[]`	—	One row per cell.
`title`requis	`string`	—	What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.
`value`requis	`string \| ((datum: T, index: number) => number)`	—	The field of the cell's value.
`x`requis	`string \| ((datum: T, index: number) => unknown)`	—	The field of the column (an hour, a day) and of the row (a weekday, a team).
`y`requis	`string \| ((datum: T, index: number) => unknown)`	—	The field of the row (a weekday, a team).
`brand`	`BrandId`	—	The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it when the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).
`className`	`string`	—	A class on the figure (layout: margins, grid placement).
`dataTable`	`boolean`	—	The "Show data" button (the table is in the page for screen readers either way). Default true.
`description`	`ReactNode`	—	A sentence under the title: the period, the unit, the source.
`empty`	`ReactNode`	—	What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of @krizaka /ui fits.
`error`	`ReactNode`	—	The data could not be loaded: `true` says the default words, a node says yours (a retry button…).
`exportable`	`boolean \| readonly ExportFormat[]`	—	Export buttons: `true` for PNG, SVG and CSV, or the formats you want.
`format`	`ValueFormat`	—	How the values, the columns and the rows are written.
`height`	`number`	—	The height of the plot in pixels. Default 280 (a sparkline: 32).
`hideTitle`	`boolean`	—	Visually hide the title (it stays the chart's accessible name): a card that already has its heading.
`id`	`string`	—	The id of the figure.
`labels`	`ChartLabelsInput`	—	The words, translated: the buttons, the states, the written summary.
`live`	`boolean`	—	Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.
`loading`	`boolean`	—	The data is on its way: a skeleton of the chart, announced once.
`locale`	`Locale`	—	The locale of every figure and date (`"fr-FR"`). Default `"en-US"`.
`renderer`	`Renderer`	—	`svg` (default): sharp, exportable as SVG. `canvas`: for tens of thousands of marks.
`style`	`CSSProperties`	—	Inline style on the figure (layout only: colours come from the tokens).
`summary`	`"hidden" \| "visible"`	—	The written summary: read by screen readers only (`"hidden"`, default), or shown under the chart (`"visible"`).
`summaryText`	`string`	—	Your own summary instead of the generated one (still read first by screen readers).
`xCategories`	`readonly unknown[]`	—	The order of the columns and the rows. Default: as they first appear.
`xFormat`	`CategoryFormat`	—	How the columns are written.
`xLabel`	`string`	—	The headers of the data table.
`yCategories`	`readonly unknown[]`	—	The order of the rows. Default: as they first appear.
`yFormat`	`CategoryFormat`	—	How the rows are written.
`yLabel`	`string`	—	The header of the rows in the data table.

Accessibilité

The plot is a group named by the title and described by a summary written from the data, read before anything else.
The data table is always in the page for assistive technology; “Show data” reveals it for everyone.
The engine (ECharts core and this one chart type) loads when the chart nears the screen; a skeleton of the same height holds its place, so nothing shifts.
Under reduced motion the chart is drawn without animation.
The cells are walked row by row; each is read with its row, column and value.

Clavier

Touches	Action
`Tab`	Moves the focus to the plot (one tab stop), then to the data and export buttons.
`Arrow keys`	Walk the items one by one: each is announced and highlighted, its tooltip shown.
`Home / End`	Jump to the first or the last item.
`Esc`	Hides the tooltip and clears the highlight.

Bonnes pratiques

Give the order of the rows and columns (xCategories, yCategories): weekdays in order, not as they appear.
Keep empty cells empty: a missing value is not a zero.

Générée depuis le code de @krizaka/ui 2.4.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Heatmap