Data & Charts
Heatmap
A grid of rounded cells whose shade shows how much happened — commits per day, tickets per hour, deploys per week.
Usage
Commits
Last 12 weeks
361 commits by 8 contributors
Installation
npm install @wunderui/reactThen import what you need:
import { Heatmap, HeatmapCell, HeatmapProps } from "@wunderui/react"Examples
By weekday and hour
A second colour from the chart spectrum and a label on every row and column.
Support tickets
By weekday and hour · Last 4 weeks
Fixed cell size
14 px cells, four levels and no legend — a compact strip under a headline number.
Deploys to production
18 weeks
184
deploys · 10.2 a week
API Reference
| Prop | Type | Default |
|---|---|---|
| data | number[][] | — |
| rowLabels | string[] | — |
| columnLabels | string[] | — |
| max | number | largest value |
| levels | number | 5 |
| color | string | var(--primary) |
| cellSize | number | fills the width |
| gap | number | 3 |
| legend | boolean | true |
| valueFormatter | (value: number) => ReactNode | — |
| cellLabel | (row: number, column: number) => string | — |
| tooltip | boolean | true |
| onCellHover | (cell: { row, column, value } | null) => void | — |
| animate | boolean | true |