Heatmap
A grid of rows × columns grouped in bands, each cell coloured by a tone or a value. Sticky headers, a value column, tooltips per cell, a legend and a calendar helper for a year of days.
Part of @tectra-ng/charts (npm install @tectra-ng/charts, also included in tectra-ng).
Basic
groups set the column bands, rows the cells in the same column order, each with a tone and a tooltip; null is an empty slot. The legend lists the tones and ends with the empty item.
Passed Flaky Failed Running Queued No data
Templates
txHeatmapRowHeader draws the sticky row header and txHeatmapRowValue a sticky value column at the end of each row; labels name both header cells. Their widths are the leadWidth and valueWidth tokens.
On time Late No deadline
Interactive
Cells with interactive: true are buttons: they grow on hover and focus, and click, Enter or Space emit cellClick with the row, the cell and the column key.
All on time Some late Missed No deadlines
Value scale
A cell with a value and no tone takes the primary colour, stronger for bigger values in scaleSteps steps; values at scaleMin (0 by default) stay empty. Legend items with a value show the step of that value.
1–30 31–60 61–90 91+ No visits
Calendar
heatmapCalendar(values, { from, to, intl, firstDayOfWeek }) lays dated values out as weeks grouped by month and seven weekday rows, with dated tooltips and accessible names; days outside the range are hidden. Feed the result to the heatmap.
1–3 4–6 7–9 10+ No commits
Scroll
With many rows or columns the grid scrolls inside maxHeight (364px by default) and sideways; the header row, the row headers and the value column stay in place. The scroll region takes the keyboard focus.
Design tokens
dt sets the tokens of one heatmap — the heatmap group of the chart tokens: cell size and radius, column widths, tone colours and the scale colour.
1 3 5 Off
Pass through
pt adds classes and styles to the parts: root, scroll, grid, head, row, lead, groups, group, groupLabel, columns, column, value, cell, legend.