XHeatmap — Contribution Heatmap

A Gitee-style contribution heatmap component. It aggregates daily contributions by week and shows the contribution count via color intensity. When no data is provided, it auto-generates a random example for the past year, so you can preview it purely on the front end.

Live Demo

贡献热力图共 2036 次贡献

一

三

五

少多

<!-- No data passed: auto-generates a random example for the past year -->
<XHeatmap color="#1f6feb" />

Passing custom data:

<XHeatmap :data="[
  { date: '2026-01-01', count: 5 },
  { date: '2026-01-02', count: 0 }
]" color="#1f6feb" />

Props

Prop	Type	Default	Description
data	Array<{ date, count }>	null	Contribution data; auto-generates a random example for the past year when omitted
color	string	'#216e39'	The deepest color (level 4). The other 4 levels are computed by blending this color toward white; defaults to Gitee's green

Usage Notes

• Color levels: the passed color is the deepest color; the component blends it toward white at 0.25/0.5/0.75/1 to generate a 5-level scale (level 0 is the empty-cell gray #ebedf0).
• Level thresholds: 0 → empty; 1~3 → light; 4~7 → medium-light; 8~12 → medium-dark; >12 → deepest.
• Aligned to start on Monday; missing dates show as empty cells.
• The header shows the total contribution count across the selected date range.