日历热力图
Calendar HeatmapPreview
GitHub 贡献风格的热力图，展示每日支出强度。每个单元格代表一天，按支出金额着色。
图表类型
| 属性 | 值 |
|---|---|
| 库 | Apache ECharts，通过 BaseChart |
| 坐标系 | calendar |
| 系列类型 | 日历坐标上的 heatmap |
| 源文件 | src/components/panels/CalendarHeatmapPanel.tsx |
显示内容
全年（或多月）的日历网格，每个日单元格按支出金额着色。低支出日为深色（面板标题颜色），中等支出日转为警告色（琥珀色），高支出日为危险色（红色）。
主要功能
| 功能 | 详情 |
|---|---|
| 颜色范围 | 面板标题色（低）到警告色（中）到危险色（高） |
| 可视化图例 | 水平，居中在图表底部 |
| 每周从周一开始 | firstDay: 1 |
| 天标签 | 日、一、二、三、四、五、六 |
| 月标签 | 短月份名称；一月显示年份指示器（如 Jan '26） |
| 自动日期范围 | 从第一个和最后一个数据点自动检测 |
视觉细节
- 单元格边框：面板背景色，2px 宽（在单元格之间创建间距）
- 分割线：面板边框色，1px
- 年标签：柔和文本色，等宽字体，10px
- 月标签：次要文本色，等宽字体，10px
- 天标签：柔和文本色，等宽字体，9px
- 可视化图例项：12px 宽，80px 高
- 悬停强调：8px 阴影模糊
提示框
显示日期和 NZD 支出金额。零支出的日子显示"无支出"而非金额。
2026-01-15
$142.50交互操作
- 悬停 —— 悬停的日单元格有阴影强调效果
- 可视化图例 —— 底部的渐变图例显示从最小值到最大值的颜色刻度
数据来源
| 状态管理 | 字段 |
|---|---|
mockDailySpending | 来自 src/mocks/personalData.ts 的模拟数据 |
useFinanceStore | isMockMode 标志 |
useChartTheme | bgPanelHeader、warning、danger 用于颜色范围；边框和文本颜色 |
数据格式为 [日期字符串, 金额] 元组数组。日期范围和最大值从数据中自动计算。