Components
HeatmapCalendar
A year of activity as a grid of weeks, like the GitHub contribution graph.
A calendar heatmap of the year — a grid of weeks, like the GitHub contribution graph. Each day's value becomes a colour level; months run above the grid, weekdays down the left.
Example
<HeatmapCalendar
values={{ "2026-02-14": 3, "2026-02-15": 7 }}
color="var(--accent)"
legend
summary
/>values is a map of «day → number». A missing day counts as zero: there is no need to list all 365.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
values* | Record<string, number> | — | Values by day, in YYYY-MM-DD form. |
from / to | Date | — | The interval bounds. Defaults to the last 365 days up to today. |
color | string | var(--accent) | The base colour: levels are that colour at increasing opacity. |
levels | number | 4 | How many colour levels, not counting empty. |
cellSize | number | 12 | The side of a cell in pixels. |
weekStart | number | 1 | Which day the week starts on: 1 is Monday. |
legend | boolean | false | A «less → more» legend under the grid. |
summary | boolean | false | A summary: total, active days, longest streak. |
onSelectDay | (cell) => void | — | A click on a cell. |
values*Record<string, number>Values by day, in YYYY-MM-DD form.
from / toDateThe interval bounds. Defaults to the last 365 days up to today.
colorstringdefaults to: var(--accent)
The base colour: levels are that colour at increasing opacity.
levelsnumberdefaults to: 4
How many colour levels, not counting empty.
cellSizenumberdefaults to: 12
The side of a cell in pixels.
weekStartnumberdefaults to: 1
Which day the week starts on: 1 is Monday.
legendbooleandefaults to: false
A «less → more» legend under the grid.
summarybooleandefaults to: false
A summary: total, active days, longest streak.
onSelectDay(cell) => voidA click on a cell.
Levels by quantile
A day with any non-zero value gets at least the first level: a day on which something happened does not look empty.
The grid, separately
import {
buildHeatmap, // weeks, months, thresholds, summary
quantileThresholds, // level thresholds by quantile
activityStreaks, // the current and the longest streak
trailingRange, // «the last N days, including today»
} from "@toimetdev/pathlogs-core";