iter(g277): 新增日历热力图组件

This commit is contained in:
HIsheR
2026-10-26 23:03:28 +08:00
parent b37b23c813
commit b5576c7082
12 changed files with 258 additions and 10 deletions
+47 -1
View File
@@ -98,7 +98,8 @@
"signaturePad(props):手写签名板,指针绘制 + DPR 位图,返回 handle(el / clear / toDataURL / isEmpty)",
"loading(props, ...children):区域加载遮罩,内容原地降透明度 + 转圈文案,带延迟出场避免快请求闪烁",
"relativeTime(props):把时间戳渲染成「3 分钟前」并自动刷新,超阈值改显示绝对日期,title 恒给精确值",
"sparkline(props):迷你趋势线,把数值序列压成折线(可填充 + 末点标记),无坐标轴无交互"
"sparkline(props):迷你趋势线,把数值序列压成折线(可填充 + 末点标记),无坐标轴无交互",
"heatmap(props):日历热力图,按周列 × 星期行铺格子、四档浓度表示当天数量,悬停看明细"
],
"keyTypes": [
"ButtonProps",
@@ -4346,6 +4347,51 @@
"改颜色在父级设 color:线、面积、圆点都读 currentColor,放进 card 或表格行自动跟随文字色",
"少于两个点时画不出趋势,组件返回空图——请在外面判空并给「暂无数据」,别让它空着占位"
]
},
{
"id": "heatmap",
"title": "日历热力图 Heatmap",
"demo": "sec-heat",
"props": [
{
"n": "values",
"t": "{ date: string; count: number }[]",
"d": "每一项 = 某天与当天数值;date 用 YYYY-MM-DD,同日多条自动求和"
},
{
"n": "weeks",
"t": "number",
"d": "显示最近多少周;缺省 12"
},
{
"n": "cellSize",
"t": "number",
"d": "格子边长(px);缺省 11"
},
{
"n": "legendText",
"t": "string",
"d": "图例左端文案;缺省「少」(右端固定「多」)"
},
{
"n": "ariaLabel",
"t": "string",
"d": "可访问名;缺省「最近 N 周活跃度」"
},
{
"n": "formatValue",
"t": "(count: number, date: string) => string",
"d": "悬停提示文案;缺省「日期 · 数量」"
}
],
"example": "heatmap({ values: activity, weeks: 12, formatValue: (n, d) => d + ' 提交 ' + n + ' 次' })",
"steps": [
"values 只给「有数据的那几天」即可:缺失的日期自动按 0 渲染,不必把 84 天全部补齐",
"末列永远对齐到本周(周一到周日完整七行),所以数据是滚动的,不会出现半截列",
"同一天多条记录会求和(合并成一个格子),上游按天预聚合也行,两种都吃",
"格子颜色是相对深浅:按序列最大值归一成四档——所以它说的是「哪天更密」,不是绝对值高低",
"默认 12 周、11px 格子;嵌进窄卡片就调小 weeks,看不出格子边界就调大 cellSize"
]
}
]
}