Preview Updated 2026-05-10

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月

日一二三四五六

少多

<script setup lang="ts">
import { CfCalendarHeatmap, type HeatmapDay } from '@chufix-design/vue';

function genYearOfData(): HeatmapDay[] {
  const out: HeatmapDay[] = [];
  const today = new Date();
  for (let i = 0; i < 365; i++) {
    const d = new Date(today);
    d.setDate(d.getDate() - i);
    const seed = (d.getFullYear() * 137 + d.getMonth() * 31 + d.getDate()) % 100;
    let v = 0;
    if (seed > 30) v = Math.floor((seed - 30) / 12);
    out.push({
      date: `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`,
      value: v,
    });
  }
  return out;
}

const data = genYearOfData();
</script>

<template>
  <CfCalendarHeatmap :data="data" />
</template>

<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