Component

Heatmap

Two-axis intensity grid for compact activity and density summaries.

Heatmap should use one accent scale with restrained contrast. Use it when relative density matters more than exact values.
data
DOM renderImage render
HeatmapDefault

Run intensity

ready
MonTueWedThuFriAM1220283644Mid1725334149PM2230386454

Playground

Controls update query params directly. Complex slots use item-owned examples so component states stay deterministic, linkable, and screenshot-ready.

Loading playground

Rendered matrix

Every state maps to the same component render route through the state query param.

Default

Labeled intensity grid with values.

Run intensity

ready
MonTueWedThuFriAM1220283644Mid1725334149PM2230386454
Render state

Quiet

Values hidden for denser overview cards.

Run intensity

ready
MonTueWedThuFriAMMidPM
Render state

Sunken

Sunken plot surface for dashboard wells.

Run intensity

ready
MonTueWedThuFriAM1220283644Mid1725334149PM2230386454
Render state

Compact

Headerless intensity grid for compact generated panels.
WedThuFriAMMidPM
Render state

Loading

Stable loading state for async generated output.

Run intensity

loading
Loading data
Render state

Empty

No-data state inside the heatmap shell.

Run intensity

empty
No data
Render state

Error

Failed data state with an explicit message.

Run intensity

error
Could not load run intensity.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
title *string-Chart title.
descriptionstring-Muted supporting copy.
cellsreadonly HeatmapCell[][]Two-axis intensity cells.
showValuesbooleantrueShows cell values.
state'ready' | 'loading' | 'empty' | 'error'readyAsync data state.
heightnumber220Grid stage height.
surface'raised' | 'sunken' | 'transparent'raisedGrid stage surface.