Data display
Calendar heatmap
Activity per day over recent weeks, in the data scale.
import { CalendarHeatmap } from '@jsonresume/ui'Source(opens in a new tab)
Examples
Show data
| Date | Count |
|---|---|
| 2026-04-26 | 4 applications |
| 2026-04-27 | 5 applications |
| 2026-04-28 | 6 applications |
| 2026-04-29 | 7 applications |
| 2026-05-07 | 4 applications |
| 2026-05-08 | 5 applications |
| 2026-05-09 | 6 applications |
| 2026-05-10 | 7 applications |
| 2026-05-18 | 4 applications |
| 2026-05-19 | 5 applications |
| 2026-05-20 | 6 applications |
| 2026-05-21 | 7 applications |
| 2026-05-29 | 4 applications |
| 2026-05-30 | 5 applications |
| 2026-05-31 | 6 applications |
| 2026-06-01 | 7 applications |
| 2026-06-09 | 4 applications |
| 2026-06-10 | 5 applications |
| 2026-06-11 | 6 applications |
| 2026-06-12 | 7 applications |
| 2026-06-20 | 4 applications |
| 2026-06-21 | 5 applications |
| 2026-06-22 | 6 applications |
| 2026-06-23 | 7 applications |
| 2026-07-01 | 4 applications |
| 2026-07-02 | 5 applications |
| 2026-07-03 | 6 applications |
| 2026-07-04 | 7 applications |
| 2026-07-12 | 4 applications |
| 2026-07-13 | 5 applications |
| 2026-07-14 | 6 applications |
| 2026-07-15 | 7 applications |
| 2026-07-23 | 4 applications |
| 2026-07-24 | 5 applications |
| 2026-07-25 | 6 applications |
| 2026-07-26 | 7 applications |
| 2026-08-03 | 4 applications |
| 2026-08-04 | 5 applications |
| 2026-08-05 | 6 applications |
| 2026-08-06 | 7 applications |
| 2026-08-14 | 4 applications |
| 2026-08-15 | 5 applications |
| 2026-08-16 | 6 applications |
| 2026-08-17 | 7 applications |
| 2026-08-25 | 4 applications |
| 2026-08-26 | 5 applications |
| 2026-08-27 | 6 applications |
| 2026-08-28 | 7 applications |
| 2026-09-05 | 4 applications |
| 2026-09-06 | 5 applications |
| 2026-09-07 | 6 applications |
| 2026-09-08 | 7 applications |
| 2026-09-16 | 4 applications |
| 2026-09-17 | 5 applications |
| 2026-09-18 | 6 applications |
| 2026-09-19 | 7 applications |
| 2026-09-24 | 1 applications |
| 2026-09-25 | 2 applications |
| 2026-09-26 | 3 applications |
| 2026-09-27 | 4 applications |
| 2026-09-28 | 5 applications |
| 2026-09-29 | 6 applications |
| 2026-09-30 | 7 applications |
| 2026-10-05 | 1 applications |
| 2026-10-06 | 2 applications |
| 2026-10-07 | 3 applications |
| 2026-10-08 | 4 applications |
| 2026-10-09 | 5 applications |
| 2026-10-10 | 6 applications |
| 2026-10-11 | 7 applications |
| 2026-10-16 | 1 applications |
| 2026-10-17 | 2 applications |
| 2026-10-18 | 3 applications |
| 2026-10-19 | 4 applications |
| 2026-10-20 | 5 applications |
| 2026-10-21 | 6 applications |
| 2026-10-22 | 7 applications |
calendar-heatmap/applications.tsx
import { CalendarHeatmap } from '@jsonresume/ui';
// Deterministic sample data: a busier stretch in the last month.
const end = new Date('2026-10-23T00:00:00Z');
const data: Record<string, number> = {};
for (let i = 0; i < 182; i++) {
const d = new Date(end);
d.setUTCDate(d.getUTCDate() - i);
const n = (i * 7919) % 11;
if (n > 6 || (i < 30 && n > 3)) data[d.toISOString().slice(0, 10)] = n - 3;
}
export default function CalendarHeatmapApplications() {
return (
<CalendarHeatmap
label="Applications sent"
data={data}
end={end}
formatCount={(n) => `${n} applications`}
/>
);
}Accessibility
- Summarised as one image label; active days are listed in "Show data".
Props
<CalendarHeatmap>
| Prop | Type | Default | Description |
|---|---|---|---|
| data required | Record<string, number> | – | Counts per day, keyed YYYY-MM-DD. |
| label required | string | – | |
| end | Date | new Date() | Last day shown (defaults to today); the map covers weeks weeks ending here. |
| formatCount | ((n: number) => string) | (n) => `${n}` | e.g. (n) => ${n} applications |
| weeks | number | 26 |