Heatmap

Token-driven matrix where cell colour intensity encodes value.

A token-driven matrix/grid where each cell's colour intensity encodes its value, with row and column headers. Every cell is filled with `--ss-primary` and varies its opacity across a linear scale over the value domain, so the brightest cells are the strongest. `null` values render a blank cell that is excluded from the scale — ideal for a head-to-head win matrix where the diagonal (self) is empty. Every value cell is keyboard-focusable with an accessible tooltip, and empty input shows an em-dash placeholder.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { Heatmap } from 'dssoca';

  const players = ['Ana', 'Bruno', 'Caio', 'Duda'];
  const wins = [
    [null, 5, 7, 9],
    [3, null, 6, 8],
    [2, 4, null, 5],
    [1, 2, 3, null],
  ];
</script>

<Heatmap
  rows={players}
  columns={players}
  values={wins}
  xLabel="Opponent"
  yLabel="Player"
/>

Props

Prop	Type	Default	Description
`rows`	`string[]`	—	Required. Row labels, top→bottom.
`columns`	`string[]`	—	Required. Column labels, left→right.
`values`	`(number \| null)[][]`	—	Required. `values[r][c]`; `null` renders a blank cell excluded from the colour scale (e.g. the diagonal).
`domain`	`[number, number]`	—	Value range mapped to colour intensity; defaults to the [min, max] of all non-null values.
`valueFormat`	`(v: number) => string`	—	Format a cell value for its text + tooltip.
`showValues`	`boolean`	`true`	Render the value text inside each cell.
`xLabel`	`string`	—	X axis caption drawn under the column headers.
`yLabel`	`string`	—	Y axis caption drawn rotated beside the row headers.
`cellSize`	`number`	`48`	Square cell size in px.
`tooltip`	`boolean`	`true`	Reveal a tooltip on hover/focus of a cell. Each value cell is keyboard-focusable.
`summary`	`string`	—	Screen-reader summary + accessible name; auto-generated when absent.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.