DrilldownHeatmap

Live preview

Loading example…

Heatmap you can dive into: click (or press Enter on) a cell to open the matrix behind it. The breadcrumb above climbs back to any earlier level.

Import

import { DrilldownHeatmap } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/heatmap-chart.

Usage

<DrilldownHeatmap
  title="Ocupación de sillas por hora y día"
  rows={days}
  columns={hours}
  values={occupancy}
  scale="sequential"
  valueFormat={percent}
  domain={[0, 100]}
  cellLabels={false}
  gap={3}
  radius={4}
  legend
  tooltip
  animate
  loading={false}
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`title` *	`string`		Accessible name when a level has no `title`.
`root` *	`HeatmapLevel`
`breadcrumbLabel`	`string`	`"Path"`	Accessible name of the breadcrumb landmark.
`onLevelChange`	`((path: readonly HeatmapLevel[]) => void)`
`center`	`number`		Neutral value of a diverging scale.
`legend`	`boolean`		Color key (gradient bar or range swatches).
`animate`	`boolean`
`className`	`string`
`tooltip`	`boolean`
`height`	`number \| "fill"`		Height of the drawing in px or “fill”; 34 px per row plus the column header by default.
`aspectRatio`	`number`		Width / height ratio; sizes the drawing from the container width.
`loading`	`boolean`
`labels`	`Partial<HeatmapLabels>`
`radius`	`number`
`renderer`	`"canvas" \| "svg"`		“canvas” paints the cells on a canvas, for matrices with tens of thousands of cells. Labels, tooltip, focus ring and keyboard stay SVG/HTML.
`scale`	`"sequential" \| "diverging"`		“sequential” (empty to brand) or “diverging” (low hue, neutral at `center`, brand).
`colors`	`ScaleColors`		Override the scale colors (CSS colors or tokens).
`ranges`	`readonly ColorRange[]`		Stepped coloring by ranges or thresholds; replaces the continuous scale.
`shape`	`"rect" \| "hex"`		“hex” draws a honeycomb: pointy-top hexagons with odd rows shifted half a cell.
`cellLabels`	`boolean`		Values inside the cells (only where they fit).
`gap`	`number`		Gap between cells in pixels.

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/heatmap-chart/drilldown-heatmap.tsx