Data viz
Heatmap
For density — magnitude encoded as color across a grid. A contribution calendar reads activity over a year at a glance; a labeled matrix compares values across two categories. Both share one stepped color scale derived from the accent, so they sit beside the rest of the family.
npx shadcn@latest add @orbit/heatmapOverview
Activity per day, laid into week columns. Hover a cell for the exact count.
Variants
The calendar lays days into week columns for a time-of-activity view. The matrix is a labeled grid for comparing a value across two named axes. A single variant prop switches between them.
Color scale
Empty days stay a neutral gray; everything else blends from a pale tint up to the full accent across four steps — one hue, light to dark, never a rainbow. Pass any accent and the whole scale re-derives.
In context
The calendar paired with the headline stats it summarizes — the classic activity panel.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "calendar" | "matrix" | "calendar" | calendar lays days into week columns; matrix is a labeled row × column grid with printed values. |
| accent | string | "var(--pri)" | The single hue the four-step ramp is derived from via color-mix (any token). |
| showLegend | boolean | true | Less → More ramp legend under the grid. |
| weeks | number[][] | — | Calendar week columns, 7 values each (index 0 = Sunday). |
| monthLabels | string[] | — | Calendar month tags, one per week column (empty string for none). |
| dayLabels | string[] | ["", "Mon", "", "Wed", "", "Fri", ""] | Day-of-week gutter labels for the calendar. |
| rows / cols | string[] | — | Matrix row and column names. |
| values | number[][] | — | Matrix values, one array per row. |
| max | number | data max | Scale maximum the buckets divide against. |
| formatTip | (v: number, row: string, col: string) => string | — | Tooltip text. Defaults: “N contributions” (calendar), “Row · Col: N” (matrix). |
| ariaLabel | string | — | Plain-language summary for the grid's role=“img”. |
| …rest | HTMLAttributes<HTMLDivElement> | — | Forwarded to the root div, including ref and className. |
Usage
Heatmaps trade precision for pattern — they answer “where is it dense?” at a glance. Pair them with exact figures when the reader needs the number.
Use it to spot patterns
Streaks, gaps, hot rows and cold columns jump out of a heatmap in a way a table never shows.
Rely on color for exact values
Eyes can’t read a precise number from a shade. Put the figure in the cell or the tooltip.
Keep a neutral “empty”
Zero should read as absent, not as the lightest active step — a distinct gray prevents confusion.
Use a rainbow scale
A single-hue ramp keeps order legible; multi-hue scales imply categories that aren’t there.
Keyboard & accessibility
The grid renders as a labelled image with exact values on hover; magnitude is backed by the ramp legend and the printed values in the matrix.