temp/UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
packages/skin/ui/src/heatmap.ts
+46
View File
@@ -0,0 +1,46 @@
import { h } from '@ui-arch/frame';
import type { HeatmapProps } from './types.js';
// 缺省：最近 12 周、格子 11px、周一为首行——与国内日历习惯一致
const WEEKS = 12;
const CELL = 11;
const DAY = 86_400_000;
const LEVELS = 4; // 非零分四档，加上「零」共五档
/*** 补零与日期键：热力图的键必须与外部数据同一格式（YYYY-MM-DD） ***/
const pad = (n: number): string => String(n).padStart(2, '0');
const keyOf = (d: Date): string => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
/*** 日历热力图：按周列 × 星期行铺格子，颜色深浅表示当天数值；不画坐标轴，靠 title 看具体日期与数量 ***/
export function heatmap(props: HeatmapProps): HTMLElement {
const weeks = props.weeks ?? WEEKS;
const cell = props.cellSize ?? CELL;
const counts = new Map<string, number>();
for (const item of props.values) counts.set(item.date, (counts.get(item.date) ?? 0) + item.count); // 同一天多条求和，不覆盖
const max = Math.max(1, ...counts.values()); // 分母：至少 1，避免全零时除零
// 末列对齐到「本周」：先取今天，再回退到本周末，保证最后一列是完整 7 行
const today = new Date();
today.setHours(0, 0, 0, 0);
const end = new Date(today.getTime() + (6 - ((today.getDay() + 6) % 7)) * DAY); // 周一起算的第 6 天（周日）
const start = new Date(end.getTime() - (weeks * 7 - 1) * DAY);
const grid = h('div', { class: 'ua-heat-grid', role: 'img', 'aria-label': props.ariaLabel ?? `最近 ${weeks} 周活跃度` });
grid.style.gridTemplateRows = `repeat(7, ${cell}px)`; // 七行对应周一到周日，行高与格子边长同源
for (let i = 0; i < weeks * 7; i += 1) {
const d = new Date(start.getTime() + i * DAY);
const n = counts.get(keyOf(d)) ?? 0;
const level = n === 0 ? 0 : Math.min(LEVELS, Math.ceil((n / max) * LEVELS)); // 归一成四档，最大那天必落在最高档
const box = h('span', { class: `ua-heat-cell is-${level}` });
box.style.width = `${cell}px`;
box.style.height = `${cell}px`;
box.title = props.formatValue ? props.formatValue(n, keyOf(d)) : `${keyOf(d)} · ${n}`; // 悬停看明细：热力图本身不标数字
grid.append(box);
}
const legend = h(
'div',
{ class: 'ua-heat-legend' },
h('span', { class: 'ua-heat-hint' }, props.legendText ?? '少'),
...[0, 1, 2, 3, 4].map((lv) => h('span', { class: `ua-heat-cell is-${lv}` })),
h('span', { class: 'ua-heat-hint' }, '多'),
);
return h('div', { class: 'ua-heat' }, grid, legend);
}
packages/skin/ui/src/index.ts
+1
View File
@@ -84,3 +84,4 @@ export { signaturePad } from './signaturePad.js';
export { loading } from './loading.js';
export { relativeTime } from './relativeTime.js';
export { sparkline } from './sparkline.js';
export { heatmap } from './heatmap.js';
packages/skin/ui/src/types.ts
+10
View File
@@ -1097,3 +1097,13 @@ export interface SparklineProps {
marker?: boolean; // 是否标记末点；缺省 true（一眼看出当前值位置）
ariaLabel?: string; // 可访问名；缺省「趋势图」（趋势无法只靠图形传达，请把结论写进旁边文案）
}
/*** 日历热力图入参 ***/
export interface HeatmapProps {
values: { date: string; count: number }[]; // 每一项 = 某天与当天数值；date 用 YYYY-MM-DD，同日多条自动求和
weeks?: number; // 显示最近多少周；缺省 12
cellSize?: number; // 格子边长（px）；缺省 11
legendText?: string; // 图例左端文案；缺省「少」（右端固定「多」）
ariaLabel?: string; // 可访问名；缺省「最近 N 周活跃度」
formatValue?: (count: number, date: string) => string; // 悬停提示文案；缺省「日期 · 数量」
}
packages/skin/ui/ua.manifest.json
+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"
]
}
]
}
packages/skin/ui/ui.css
+53
View File
@@ -5808,3 +5808,56 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
.ua-spark-dot {
fill: currentColor;
}
/* ---- 日历热力图：格子按列排（一周一列），深浅四档 + 零档；色阶全部由 accent 与透明度档派生 ---- */
.ua-heat {
display: inline-flex;
flex-direction: column;
gap: var(--ua-space-2);
}
.ua-heat-grid {
display: grid;
grid-auto-flow: column; /* 先竖后横：一列就是一周 */
grid-template-columns: repeat(auto-fill, auto);
gap: var(--ua-space-1);
}
.ua-heat-cell {
display: block;
width: var(--ua-space-3);
height: var(--ua-space-3);
border-radius: var(--ua-radius-sm);
}
/* 五档色阶：0 档是凹陷底（无活动），1-4 档 accent 浓度递增 */
.ua-heat-cell.is-0 {
background: var(--ua-color-surface-inset);
}
.ua-heat-cell.is-1 {
background: color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-soft), transparent);
}
.ua-heat-cell.is-2 {
background: color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-tint), transparent);
}
.ua-heat-cell.is-3 {
background: color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-mid), transparent);
}
.ua-heat-cell.is-4 {
background: var(--ua-color-accent);
}
.ua-heat-legend {
display: flex;
align-items: center;
gap: var(--ua-space-1);
}
.ua-heat-hint {
color: var(--ua-color-text-faint);
font-size: var(--ua-font-size-xs);
}