HeatmapChart

An NxM cell-matrix chart — the shape a risk register's impact x likelihood heatmap needs, but generic: rows and columns are just data[row][col], and a cell's colour (tone) and "over a threshold" ring are entirely the caller's own data, not a severity scale this component invents.

No Attio widget in the workspace this was checked against (Reports/Dashboards surfaces bar/line/ number report tiles, not a matrix chart) matches this shape closely enough to measure a pixel value from, so the cell colours reuse the same soft-tint color-mix recipe Badge's own soft() helper and StatCard's delta pill already use, against the token contract's existing success/ warning/orange/danger roles — no new value.

Installation

npm install @crisp-ui-kit/crisp

Usage

import { HeatmapChart } from "@crisp-ui-kit/crisp";

<HeatmapChart
  data={[
    [{ value: 2, tone: "warning" }, { value: 0 }],
    [{ value: 1, tone: "danger", ring: true }, { value: 3, tone: "orange" }],
  ]}
  rowAxis={{ high: "High", low: "Low", title: "Impact" }}
  colAxis={{ low: "Low", high: "High", title: "Likelihood" }}
  onCellClick={(row, col) => navigate(`/risks?impact=${row}&likelihood=${col}`)}
/>;

A cell with value > 0 is a real <button> by default (isCellClickable); a value of 0 renders a plain, non-interactive cell — there's nowhere useful for an empty cell to open. onCellClick absent turns every cell non-interactive regardless.

Props

HeatmapCell = { value, tone?, ring? } — tone is one of "neutral" | "success" | "warning" | "orange" | "danger" (default "neutral", typically for a value of 0). HeatmapAxis = { low, high, title? } — a heatmap's axis reads by its two extremes and what they mean, not a tick per row/column.