iter(g277): 新增日历热力图组件
This commit is contained in:
@@ -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"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user