HeatmapViewer
A heatmap dashboard: drawing and frame pickers, shade-by, filters, a date slider and a metrics panel around a schematic.
Loading the heatmap…
Loading the heatmap…
Loading the heatmap…
In context
Loading the heatmap…
The painter
Paint cells, name them to make a region, and the viewer reads the layout.
Frames (1)
A frame is the rectangle of the canvas the plot shows. Use the Frame tool to drag one out; move it by its body, resize it by its handles, Delete removes it.Brushes (2)
Your own categories for this layout. Pick the active brush for new regions.Tracing image
Regions (3)
Loading the heatmap…
Props
| Prop | Type | Required | Default |
|---|---|---|---|
source | HeatmapViewerSource | undefined | No | — |
heatmap | HeatmapViewerDef | undefined | No | — |
defaultHeatmapId | string | undefined | No | — |
title | ReactNode | No | Heatmap |
renderNarrative | ((ctx: HeatmapViewerNarrativeContext) => ReactNode) | undefined | No | — |
allowExpand | boolean | undefined | No | true |
pollMs | number | undefined | No | 15000 |
data-rebar-* attributes
data-rebar-component="heatmap-viewer" on the root <section>; data-rebar-state="expanded" while full screen. Parts: header, freshness, brushes, brush-chip (with data-brush), filters, wayback, milestones, milestone, wayback-note, layout (with data-placement), plot, metrics-panel, subject, metrics-picker, panel-heading, metric-row (with data-metric, and data-shading on the one shading the drawing), narrative, error, computing, not-computed.
Migrating to Ant Design
Not codemod-covered — Ant Design ships no schematic or BI-dashboard component. The module is composed of Select, MultiSelect, SegmentedControl, Table, Popover and Checkbox, which map to their AntD equivalents individually, around the owned-SVG SchematicHeatmap.