Pesto UI

Heat Grid

A matrix heatmap — activity by day and hour, contributions by week, any dense grid holding one number per cell. Five steps of one tone, with empty cells on the muted fill.

tsx
import { HeatGrid } from "@pestoui/core"

Day by hour

data is rows of numbers. Labels are positional, and a column label sits in a single cell's track, so keep them short. Any value above zero lands on at least the first step.

Tones, sizes and a pinned scale

max fixes the top of the scale so two grids can be compared; without it each grid normalises against its own peak. formatValue shapes the hover title and the spoken range.

Props

PropTypeDefaultDescription
datanumber[][]—Required. Rows of values. Rows may differ in length — short rows leave holes.
maxnumberdata's own maxFixes the top of the scale.
rowLabelsstring[]—Positional; a short array leaves the rest of the matrix unlabelled.
columnLabelsstring[]—Positional, each in a single cell's track — keep them short.
srLabelstring—Names the matrix in the accessible summary, e.g. “Commits per hour”.
formatValue(value: number) => string—Applied to each cell's hover title and to the range in the summary.
tone"selected" | "success" | "warning" | "destructive" | "info" | "muted" | "chart-1" … "chart-5""selected"The colour the five steps are mixed from.
size"sm" | "default" | "lg""default"Cell edge: 12, 16 or 24px. A ceiling — cells shrink before the grid overflows.
PreviousGradient MarkNext Hover Card

Pesto UI · 117 documented components