HeatGrid

Shows a value per day as shaded cells, week by week.

SourcePackage @kerf-js/veneer

Preview

tsx

import { HeatGrid } from '@kerf-js/veneer'export function Deploys() {  return (  <HeatGrid    title="Deploys per day"    description="Last 26 weeks"    data={DEPLOY_HEAT}    weeks={DEPLOY_WEEKS}    unit="deploys"  />  )}const wobble = (i: number) =>  (Math.sin(i * 12.9898) * 43758.5453) % 1const WEEK_DAYS = [3, 5, 4, 6, 3, 0, 1]const DEPLOY_WEEKS = Array.from(  { length: 26 },  (_, w) => `W${w + 19}`,)const DEPLOY_HEAT = DEPLOY_WEEKS.map((_, w) =>  WEEK_DAYS.map((d, i) =>    d === 0      ? 0      : Math.max(          0,          Math.round(            d * (0.7 + w * 0.04) + wobble(w * 7 + i) * 3,          ),        ),  ),)

Installation

npm install @kerf-js/veneer

Usage

tsx

import { HeatGrid } from '@kerf-js/veneer'<HeatGrid  title="Deploys per day"  description="Last 26 weeks"  data={DEPLOY_HEAT}  weeks={DEPLOY_WEEKS}  unit="deploys"/>

Accessibility

Every chart has a text alternative and a table view of its numbers, so nothing depends on seeing the marks. See Chart for its keyboard support.

API Reference

Prop	Type	Default	Description
`title`	`string`	—	The heading.
`level`	`2 \| 3 \| 4 \| 6 \| 5`	—	The title's heading level: one below the heading the chart sits under. Default 3, a chart in a page section.
`description`	`unknown`	—	One supporting line under the title.
`toolbar`	`unknown`	—	Beside the view toggle: a layout switch, a range picker.
`state`	`"error" \| "loading" \| "empty"`	—	Replaces the plot, in the same frame. With no data the frame shows `empty` on its own.
`loading`	`string`	—	Shows that work is under way.
`empty`	`{ title: string; detail?: unknown; }`	—	The title and detail shown in place of the plot when there is no data.
`error`	`{ title: string; detail?: unknown; }`	—	A message that marks the field invalid and says why.
`action`	`unknown`	—	The next step under an empty or error state: a Retry button.
`data`	`number[][]`	—	The series to draw.
`summary`	`string \| ((c: { data: number[][]; title: string; }) => string)`	—	One sentence for screen readers and the page; generated from the data when absent.
`weeks`	`string[]`	—	One label per column.
`days`	`string[]`	—	Labels for the rows. Defaults to the days of the week.
`unit`	`string`	—	What a cell counts.

RelatedTile map