Heatmap

Usage

import { Heatmap } from '@wdzyi/ui';

<Heatmap
  title='Activity'
  days={[
    { date: '2026-11-02', value: 6 },
    { date: '2026-11-03', value: 11 },
    { date: '2026-11-04', value: 0 },
  ]}
  describe={(count) => `${count} payments`}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

daysHeatmapDay[]

A square each: its date, as 2026-11-06, and its value. Days run oldest first, one after another.

titlestring

Heads the card.

views, view, onViewChangestring[], string, (view: string) => void

The switch in the header, such as two kinds of activity. Swap the days’ values when one’s chosen, and the change ripples across the squares.

valuenumber = the total of every day

The big number, which counts to each new value.

change, changeLabelnumber, string

How far the big number moved, as a fraction, then quieter words beside it. The words go when the card is narrow.

format(value: number) => string = whole numbers

How the big number reads.

describe(value: number) => string = the number

How a day reads in the tooltip, such as 12 payments.

heightnumber = 200

The plot’s height in px. In a card with a height of its own, the plot fills what’s left.

Notes

• The four busy steps are split at the quarters of the days that had anything, so one big day can’t wash out the rest. A day with nothing is the faintest step.
• The squares light up in a wave from the top left the first time it’s seen, and a new view ripples across them the same way, twice as fast. The busiest day’s foil arrives once the wave reaches it.
• The squares take their size from the height, between 8 and 16px, and the width decides how many weeks fit, keeping the most recent. Month names give way when they’d touch.
• Left and right move a week, up and down a day, and each is read out. With reduced motion, the squares are lit from the start.
• Values are sample data.