Heatmap | MDK

Heatmap — a generic grid of value-coloured cells on a low→high gradient. Presentational and domain-agnostic: pass a row-major matrix of cells and an optional…

Heatmap — a generic grid of value-coloured cells on a low→high gradient.

Presentational and domain-agnostic: pass a row-major matrix of cells and an optional [min, max] range (auto-derived otherwise). Use renderCell to overlay domain content (socket borders, selection, tooltips) without forking the primitive — the grid still owns each cell's background colour. Pair with {@link HeatmapLegend} for a gradient scale.

import { Heatmap } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`data`	Required	`HeatmapCell[][]`	—	Rows of cells (row-major). Rows may be ragged.
`min`	Optional	`number \| undefined`	—	Range floor; auto-derived from the finite values when omitted.
`max`	Optional	`number \| undefined`	—	Range ceiling; auto-derived from the finite values when omitted.
`colors`	Optional	`readonly string[] \| undefined`	—	Gradient stops low→high. Defaults to the cold→hot `HEATMAP_GRADIENT`.
`emptyColor`	Optional	`string \| undefined`	—	Colour used for `null` cells.
`showValues`	Optional	`boolean \| undefined`	—	Render each cell's value/label as text.
`renderCell`	Optional	`((cell: HeatmapCell, context: HeatmapCellContext) => React.ReactNode) \| undefined`	—	Override the cell's inner content — e.g. to overlay socket borders, selection, or tooltips for a PDU grid. The primitive still owns the cell's background colour (passed via `context.color`).
`ariaLabel`	Optional	`string \| undefined`	—	Accessible label for the grid.
`className`	Optional	`string \| undefined`	—	—

Usage

A generic grid of value-coloured cells on a low→high gradient, plus a matching HeatmapLegend. Presentational and domain-agnostic — pass a row-major matrix of cells and an optional [min, max] range (auto-derived otherwise).

Use renderCell to overlay domain content (e.g. PDU socket borders, selection, tooltips) without forking the primitive; the grid still owns each cell's background colour.

Heatmap props

Prop	Type	Required	Default	Description
`data`	`HeatmapCell[][]`	yes	—	Row-major matrix of cells (`{ value, label?, key? }`); rows may be ragged
`min`	`number`	no	auto	Range floor (maps to the first gradient stop)
`max`	`number`	no	auto	Range ceiling (maps to the last stop)
`colors`	`readonly string[]`	no	`HEATMAP_GRADIENT`	Gradient stops low→high
`emptyColor`	`string`	no	`#000000`	Colour for `null` cells
`showValues`	`boolean`	no	`false`	Render each cell's value/label as text
`renderCell`	`(cell, ctx) => ReactNode`	no	—	Override cell content; `ctx` is `{ color, row, col }`
`ariaLabel`	`string`	no	`"Heatmap"`	Accessible label for the grid
`className`	`string`	no	—	Additional class for the root element

HeatmapLegend props

Prop	Type	Required	Default	Description
`min`	`number \| string`	yes	—	Low-end value or pre-formatted label
`max`	`number \| string`	yes	—	High-end value or pre-formatted label
`unit`	`string`	no	—	Unit suffix appended to `min`/`max`
`label`	`string`	no	—	Heading above the gradient bar
`colors`	`readonly string[]`	no	`HEATMAP_GRADIENT`	Gradient stops low→high
`className`	`string`	no	—	Additional class for the root element

Notes

The colour scale is exported as getHeatmapColor(value, min, max, stops?) and the default palette as HEATMAP_GRADIENT (cold→hot: blue → green → yellow → red) from @tetherto/mdk-react-devkit.
null values render emptyColor and no text.
Values outside [min, max] are clamped to the end stops.

Example

/** * Runnable example for Heatmap + HeatmapLegend. */import { Heatmap, HeatmapLegend } from "@tetherto/mdk-react-devkit"const rows = [  [{ value: 20 }, { value: 35 }, { value: 50 }, { value: 42 }],  [{ value: 60 }, { value: 72 }, { value: null }, { value: 55 }],  [{ value: 44 }, { value: 81 }, { value: 66 }, { value: 30 }],]export const HeatmapExample = () => (  <div className="mdk-example-row">    <Heatmap data={rows} showValues />    <HeatmapLegend label="Temperature" min={20} max={81} unit="°C" />  </div>)