Компоненты
HeatmapCalendar
Год активности сеткой недель, как график вкладов на GitHub.
Календарная теплокарта года — сетка недель, как график вкладов на GitHub. Значение каждого дня превращается в уровень цвета; над сеткой — месяцы, слева — дни недели.
Пример
<HeatmapCalendar
values={{ "2026-02-14": 3, "2026-02-15": 7 }}
color="var(--accent)"
legend
summary
/>values — карта «день → число». Отсутствующий день считается нулём: перечислять все 365 дней не нужно.
Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
values* | Record<string, number> | — | Значения по дням в формате YYYY-MM-DD. |
from / to | Date | — | Границы интервала. По умолчанию — последние 365 дней до сегодня. |
color | string | var(--accent) | Базовый цвет: уровни — это он с растущей непрозрачностью. |
levels | number | 4 | Сколько уровней цвета, не считая пустого. |
cellSize | number | 12 | Сторона клетки в пикселях. |
weekStart | number | 1 | С какого дня начинается неделя: 1 — понедельник. |
legend | boolean | false | Легенда «меньше → больше» под сеткой. |
summary | boolean | false | Сводка: всего, активных дней, лучшая серия. |
onSelectDay | (cell) => void | — | Клик по клетке. |
values*Record<string, number>Значения по дням в формате YYYY-MM-DD.
from / toDateГраницы интервала. По умолчанию — последние 365 дней до сегодня.
colorstringпо умолчанию: var(--accent)
Базовый цвет: уровни — это он с растущей непрозрачностью.
levelsnumberпо умолчанию: 4
Сколько уровней цвета, не считая пустого.
cellSizenumberпо умолчанию: 12
Сторона клетки в пикселях.
weekStartnumberпо умолчанию: 1
С какого дня начинается неделя: 1 — понедельник.
legendbooleanпо умолчанию: false
Легенда «меньше → больше» под сеткой.
summarybooleanпо умолчанию: false
Сводка: всего, активных дней, лучшая серия.
onSelectDay(cell) => voidКлик по клетке.
Уровни по квантилям
День с любым ненулевым значением получает как минимум первый уровень: день, в котором что-то было, не выглядит пустым.
Сетка отдельно
import {
buildHeatmap, // недели, месяцы, пороги, сводка
quantileThresholds, // пороги уровней по квантилям
activityStreaks, // текущая и самая длинная серия
trailingRange, // «последние N дней, включая сегодня»
} from "@toimetdev/pathlogs-core";