Heatmap

When things happen: a grid of cells, one blue from light to dark for how many, the empty cell grey, the scale under it.

ui.heatmapcomponents/ui/heatmap.tsx

Use case

For the AI

Use it for a count by two times: orders by weekday and hour, visits by week and day, calls by hour. Each cell answers the pointer and the keyboard with its row, column and value and lifts with a ring. One hue only, light to dark: a heatmap is never a rainbow (chart-card.heatmap).

Use it when

Orders or calls by weekday and hour
Activity by week across a year

Use something else when

A total per day only: Bar chart
A value over continuous time: Area chart

Examples

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Code

Import

import { Heatmap } from "@/components/ui/heatmap"

Usage

<Heatmap
  rows={["lun.", "mar.", "mer.", "jeu.", "ven.", "sam.", "dim."]}
  columns={hours}
  values={ordersByDayAndHour}
  columnStep={2}
  less="Moins"
  more="Plus"
  aria-label="Quand les commandes arrivent"
/>

Rules

One hue, light to dark (SEQUENTIAL); never a categorical palette.
Label every row; label every few columns with columnStep when they crowd.
Pass less and more in the client's language for the scale.