HeatmapLegend

HeatmapLegend — a gradient bar with low/high scale labels, matching the gradient used by @link Heatmap.

HeatmapLegend — a gradient bar with low/high scale labels, matching the gradient used by {@link Heatmap}.

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

Prop	Status	Type	Default	Description
`min`	Required	`string \| number`	—	Value (or pre-formatted label) at the low end of the scale.
`max`	Required	`string \| number`	—	Value (or pre-formatted label) at the high end of the scale.
`unit`	Optional	`string \| undefined`	—	Unit suffix appended to `min`/`max`.
`label`	Optional	`string \| undefined`	—	Heading above the gradient bar (e.g. "Temperature").
`colors`	Optional	`readonly string[] \| undefined`	—	Gradient stops low→high. Defaults to `HEATMAP_GRADIENT`.
`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>)