Treemap

Parts of a whole when there are many: each tile is sized by its share, laid out to stay square.

import { Treemap } from '@alea/pro';

Examples

Storage by folder

Each tile's area is its share. Tiles stay as square as possible.

Storage used

Tokens

The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.

Color

--alea-accent-on…
--alea-focus…

Type

--alea-font-family-body…

Motion

--alea-motion-duration-fast…
--alea-motion-duration-slow…
--alea-motion-spring…

Props

`Treemap` props

Parts of a whole when there are many: each tile's area is its share (storage by folder, revenue by product).

Prop	Type	Default	Description
`data`required	`{ label: string; value: number; color?: string \| undefined; }[]`	-	Items with a value; each gets an area proportional to it.
`className`	`string`	-	Extra class names for the root element.
`description`	`ReactNode`	-	One sentence on what the data shows; read before the chart.
`height`	`number`	`300`	Height in px. Default 300.
`isLoading`	`boolean`	-	Shows a shimmering placeholder while data loads.
`showTable`	`boolean`	`true`	Shows the table toggle. Default true.
`title`	`ReactNode`	-	The title shown above it and read by screen readers.
`valueFormat`	`((v: number) => string)`	-	Formats values (axis, tooltip, table).

Specs

Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.

States: Keyboard focusPressed (CSS)
Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-chart-svgwrap.alea-chart-svg.alea-treemap.alea-treemap-tile.alea-treemap-label.alea-treemap-value
Data attributes: data-dim

The chart is a figure named by its title and described by its description; the picture has a text summary.
Tab to the chart, then arrow keys move through the data and each value is announced; Escape leaves.
The table toggle shows the same data as a real table for everyone who can't use the picture.

Keyboard

Key	Does
`Tab`	Focuses the chart
`Left` or `Right arrow`	Previous or next value
`Home` or `End`	First or last value
`Escape`	Clears the selection

Do and don't

Use it for many parts of one whole, like spend by team.
Label the larger tiles and keep the rest in the tooltip and the table.

Don't

Don't use it to compare exact values: use a bar chart.
Don't use it for negative values.