Treemap
Nested parts of a whole as rectangles — storage by project then by kind — a click zooming into a part.
Web only — React, from @krizaka/charts/treemap. Beta: its API may still change in a minor version.
When to use
- A hierarchy of amounts: storage by project and kind, credits by team and model.
When not to use
- A single level of a few parts.Use instead: Pie and donut chart
- Flows from one level to the next.Use instead: Sankey
Installation
Install
npm install @krizaka/chartsImport
import { Treemap } from "@krizaka/charts/treemap";Examples
Storage by project
A workspace's storage by project, then by kind of file.
Storage by project
Treemap, 4. Documentary “Fleuve” 546 GB (51%), Weekly vlog 271 GB (25%), Course “Colour” 195 GB (18%), Archive 61 GB (5.7%). Total 1,073 GB.
| Project › kind | Size | % |
|---|---|---|
| Documentary “Fleuve” › Rushes | 412 GB | 38% |
| Documentary “Fleuve” › Exports | 96 GB | 8.9% |
| Documentary “Fleuve” › Audio | 38 GB | 3.5% |
| Weekly vlog › Rushes | 188 GB | 18% |
| Weekly vlog › Exports | 71 GB | 6.6% |
| Weekly vlog › Thumbnails | 12 GB | 1.1% |
| Course “Colour” › Lessons | 143 GB | 13% |
| Course “Colour” › Exports | 52 GB | 4.8% |
| Archive | 61 GB | 5.7% |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
datarequired | readonly TreemapNode[] | — | The top-level parts. |
titlerequired | string | — | What the chart shows, in a few words: its accessible name, and its heading unless hideTitle. |
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 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". |
pathLabel | string | — | The headers of the data table. |
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). |
valueLabel | string | — | The header of the values. |
Accessibility
- 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.
- Labels inside a rectangle take the text colour with the better contrast on its fill (computed, not assumed).
Keyboard
| Keys | 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. |
Best practices
- Two levels read best; a third shows on zoom.
- Name the parts briefly: the labels are inside the rectangles.
Related components
Generated from the code of @krizaka/ui 2.4.0: its meta.ts, its examples and its types.Edit this documentation on GitHub