Calendar Heatmap

Calendar HeatmapPreview

A GitHub-contributions-style heatmap showing daily spending intensity. Each cell represents one day, colored by how much was spent.

Chart Type

Property	Value
Library	Apache ECharts via BaseChart
Coordinate system	calendar
Series type	heatmap on calendar coordinate
Source file	src/components/panels/CalendarHeatmapPanel.tsx

What It Shows

A full-year (or multi-month) calendar grid where each day cell is colored by spending amount. Low spending days are dark (panel header color), medium days shift to the warning color (amber), and high spending days are colored danger (red).

Key Features

Feature	Detail
Color range	Panel header (low) to warning (medium) to danger (high)
Visual map legend	Horizontal, centered at the bottom of the chart
Week starts Monday	firstDay: 1
Day labels	S, M, T, W, T, F, S
Month labels	Short month names; January shows year indicator (e.g. Jan '26)
Auto date range	Detected from the first and last data points

Visual Details

• Cell border: panel background color, 2px width (creates spacing between cells)
• Split line: panel border color, 1px
• Year label: muted text, mono font, 10px
• Month label: secondary text, mono font, 10px
• Day label: muted text, mono font, 9px
• Visual map item: 12px wide, 80px tall
• Hover emphasis: 8px shadow blur

Tooltip

Displays the date and spending amount in NZD. Days with zero spending show "No spend" instead of a dollar amount.

2026-01-15
$142.50

Interactivity

• Hover -- shadow emphasis on the hovered day cell
• Visual map -- gradient legend at the bottom showing the color scale from min to max

Data Source

Store	Fields
mockDailySpending	Mock data from src/mocks/personalData.ts
useFinanceStore	isMockMode flag
useChartTheme	bgPanelHeader, warning, danger for color range; border and text colors

Data format is an array of [date_string, amount] tuples. The date range and maximum value are computed automatically from the data.