CalendarHeatmap
52-week × 7-day grid heatmap colored by intensity — handy for activity or commit statistics.
Basic usage
data is [{ date: 'YYYY-MM-DD', value: number }]. thresholds defaults to [1, 3, 6, 10], producing 5 color tiers (including 0).
5月6月7月8月9月10月11月12月1月2月3月4月5月
日一二三四五六
少多
<CfCalendarHeatmap :data="data" /><CfCalendarHeatmap data={data} />API
| Prop | Type | Default | Description |
|---|---|---|---|
data | HeatmapDay[] | — | List of date + value pairs; missing dates count as 0 |
startDate | string | Date | today - 1 year | Range start |
endDate | string | Date | today | Range end |
thresholds | number[] | [1, 3, 6, 10] | Ascending intensity thresholds; tier count = length + 1 |
HeatmapDay
| Field | Type | Description |
|---|---|---|
date | string | YYYY-MM-DD date |
value | number | Value for that day |
反馈与讨论
CalendarHeatmap · Discussion