diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index 8a3eadd..709c8ea 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -15,8 +15,10 @@ export default function Dashboard() { todayCount: 0, trend: [0,0,0,0,0,0,0], trendLabels: ['','','','','','',''], + trendFullDates: ['','','','','','',''], maxTrend: 1 }); + const [tooltip, setTooltip] = useState<{ visible: boolean; x: number; y: number; date: string; count: number }>({ visible: false, x: 0, y: 0, date: '', count: 0 }); const [currentUser, setCurrentUser] = useState(null); const [timeRange, setTimeRange] = useState<'7days' | '1month'>('7days'); @@ -49,12 +51,14 @@ export default function Dashboard() { const daysCount = timeRange === '7days' ? 7 : 30; const trend: number[] = []; const labels: string[] = []; + const fullDates: string[] = []; for (let i = daysCount - 1; i >= 0; i--) { const d = new Date(now); d.setDate(d.getDate() - i); const dateStr = d.toISOString().split('T')[0]; const label = timeRange === '7days' ? `${d.getMonth() + 1}/${d.getDate()}` : `${d.getDate()}`; labels.push(label); + fullDates.push(dateStr); trend.push(userReports.filter(r => r.createdAt === dateStr).length); } const maxTrend = Math.max(...trend, 1); @@ -67,6 +71,7 @@ export default function Dashboard() { todayCount: todayReports.length, trend, trendLabels: labels, + trendFullDates: fullDates, maxTrend }); }, [navigate, timeRange]); @@ -131,7 +136,31 @@ export default function Dashboard() {
{/* SVG Area Chart */} - + { + const svg = e.currentTarget; + const rect = svg.getBoundingClientRect(); + const mouseX = ((e.clientX - rect.left) / rect.width) * 300; + const paddingX = 10; + const chartW = 300 - paddingX * 2; + const n = stats.trend.length; + if (n <= 1) return; + let idx = Math.round(((mouseX - paddingX) / chartW) * (n - 1)); + idx = Math.max(0, Math.min(n - 1, idx)); + const ptX = paddingX + (idx / (n - 1)) * chartW; + const ptY = 8 + (120 - 16) - (stats.maxTrend > 0 ? (stats.trend[idx] / stats.maxTrend) * (120 - 16) : 0); + setTooltip({ + visible: true, + x: (ptX / 300) * rect.width, + y: (ptY / 135) * rect.height, + date: stats.trendFullDates[idx] || '', + count: stats.trend[idx] + }); + }} + onMouseLeave={() => setTooltip(prev => ({ ...prev, visible: false }))} + > @@ -168,17 +197,37 @@ export default function Dashboard() { + {/* Transparent capture layer for reliable mouse events */} + {points.map((p, i) => ( - - {p.count} - 10 ? '7' : '8'} fill="#94A3B8" fontWeight="bold">{p.label} + {/* 7天模式显示圆点和数值；30天模式隐藏 */} + {stats.trend.length <= 10 && ( + <> + + {p.count} + + )} + {/* 标签稀疏化：7天每天显示，30天每隔5天显示 */} + {(stats.trend.length <= 10 || i % 5 === 0) && ( + 10 ? '7' : '8'} fill="#94A3B8" fontWeight="bold">{p.label} + )} ))} ); })()} + {/* Tooltip */} + {tooltip.visible && ( +
+
{tooltip.date}
+
报告数: {tooltip.count}
+
+ )}
diff --git a/工程分析/实现方案-2026-04-19-00-33-44.md b/工程分析/实现方案-2026-04-19-00-33-44.md new file mode 100644 index 0000000..716ba2c --- /dev/null +++ b/工程分析/实现方案-2026-04-19-00-33-44.md @@ -0,0 +1,34 @@ +# 实现方案 —— 2026-04-19-00-33-44 + +## 方案目标 +解决 30 天趋势图表过密问题，通过稀疏化标签 + Tooltip 提升可读性。 + +## 修改点 + +### 修改文件：`src/pages/Dashboard.tsx` + +1. **条件渲染数据点和数值**：在 SVG 的 `points.map()` 中，对圆点和数值文本增加条件判断： + - 7 天模式：正常显示圆点和数值 + - 30 天模式：不显示圆点和数值文本（仅保留折线和面积图） + +2. **稀疏化 X 轴标签**： + - 7 天模式：每天显示标签 + - 30 天模式：每隔 5 天显示一次标签（`i % 5 === 0`） + +3. **SVG 鼠标事件与 Tooltip**： + - 在图表容器上绑定 `onMouseMove` 和 `onMouseLeave` + - 计算鼠标在 SVG 坐标系中的相对位置，映射到最近的数据点索引 + - 用 React state 管理 `tooltipData: { index, x, y, visible }` + - 用绝对定位的 div 渲染 Tooltip，显示日期和数值 + +4. **透明捕获层**：在 SVG 中增加一个覆盖整个图表区域的透明 ``，确保鼠标在空白区域也能触发事件。 + +## 涉及文件及修改点 +| 文件 | 修改点 | +|------|--------| +| `src/pages/Dashboard.tsx` | 条件渲染 circle/text、标签稀疏化、Tooltip state、SVG 鼠标事件、透明捕获层 | + +## 风险与注意事项 +1. Tooltip 坐标计算需考虑 SVG 的 viewBox 到屏幕像素的映射比例。 +2. 鼠标移出 SVG 区域时必须隐藏 Tooltip。 +3. 7 天模式的显示效果必须保持完全不变。 diff --git a/工程分析/测试方案-2026-04-19-00-33-44.md b/工程分析/测试方案-2026-04-19-00-33-44.md new file mode 100644 index 0000000..834f9d1 --- /dev/null +++ b/工程分析/测试方案-2026-04-19-00-33-44.md @@ -0,0 +1,29 @@ +# 测试方案 —— 2026-04-19-00-33-44 + +## 测试目标 +验证 30 天趋势图表稀疏化显示和 Tooltip 交互的正确性。 + +## 测试用例 + +### TC-1：30 天模式不显示圆点和数值 +**步骤**： +1. 进入 Dashboard，点击"最近 30 天"。 +**预期结果**：图表中仅显示面积图和折线，无蓝色圆点和数字 0/1/2... 等数值文本。 + +### TC-2：30 天模式标签稀疏化 +**步骤**： +1. 查看 30 天模式 X 轴。 +**预期结果**：仅显示约 6 个日期标签（每隔 5 天一个），标签不重叠。 + +### TC-3：Tooltip 悬停显示 +**步骤**： +1. 在 30 天模式图表上移动鼠标。 +**预期结果**：鼠标旁出现 Tooltip，显示当前位置的日期和报告数量；移出图表区域后 Tooltip 消失。 + +### TC-4：7 天模式不受影响 +**步骤**： +1. 点击"最近 7 天"。 +**预期结果**：每天显示圆点、数值和标签，无 Tooltip 行为（或 Tooltip 可选），与修改前完全一致。 + +## 测试通过标准 +30 天模式图表清爽可读，Tooltip 交互流畅，7 天模式无变化。 diff --git a/工程分析/经验记录.md b/工程分析/经验记录.md index 2b8b285..cdf5127 100644 --- a/工程分析/经验记录.md +++ b/工程分析/经验记录.md @@ -1281,3 +1281,34 @@ if ((settings.autoInsertDelay || 0) > 0) { - 在使用 SVG 绘制图表时，务必为 X 轴标签预留足够的底部空间（至少文字高度 + 安全间距），不能仅依赖 `overflow-visible`。 - 当图表需要支持多时间维度时，应在数据计算层（useEffect）统一处理，而非在渲染层做条件分支，确保数据与标签同步。 - 增加 grid 列数时，需同步检查响应式断点（`md:`、`lg:`），避免在小屏幕上卡片过度挤压。 + + +--- + +## 记录 41：Dashboard 30 天趋势图表稀疏化与 Tooltip 交互 + +**A. 具体问题** +Dashboard 中"最近 30 天"模式的趋势图表过于密集：30 个蓝色圆点、30 个数值文本、30 个日期标签全部挤在底部，完全无法阅读。 + +**B. 产生问题原因** +1. SVG 图表对 7 天和 30 天采用完全相同的渲染策略，每天都绘制圆点、数值和标签。 +2. 30 天模式下数据点密度是 7 天的 4 倍以上，在固定宽度的 SVG 中必然导致严重重叠。 +3. 缺少悬停交互机制，用户无法在不显示所有数值的情况下查看具体某天的数据。 + +**C. 解决问题方案** +1. **条件渲染圆点和数值**：在 `points.map()` 中增加判断：`stats.trend.length <= 10` 时显示圆点和数值，否则隐藏。7 天模式（7 个点）正常显示，30 天模式（30 个点）只保留折线和面积图。 +2. **稀疏化 X 轴标签**：`stats.trend.length <= 10 || i % 5 === 0`，30 天模式每隔 5 天显示一个标签，从 30 个减少到约 6 个。 +3. **SVG 鼠标事件与 Tooltip**： + - 在 `` 上绑定 `onMouseMove` 和 `onMouseLeave` + - 通过 `getBoundingClientRect()` 将鼠标屏幕坐标映射到 SVG viewBox 坐标 + - 计算最近的数据点索引：`idx = Math.round(((mouseX - paddingX) / chartW) * (n - 1))` + - 用 React state 管理 tooltip 的 `visible/x/y/date/count` + - 用绝对定位的 `div` 渲染 Tooltip，显示完整日期和报告数 +4. **透明捕获层**：在 SVG 中增加覆盖全区域的 ``，确保鼠标在空白区域也能触发事件。 +5. **完整日期存储**：`stats` 中新增 `trendFullDates` 数组，存储 `YYYY-MM-DD` 格式完整日期，供 Tooltip 显示使用。 + +**D. 后续如何避免问题** +- 当图表需要支持多时间维度时，必须考虑不同密度下的渲染策略差异，不能对所有维度一视同仁。 +- SVG 的鼠标事件坐标映射需要注意 `viewBox` 与实际显示尺寸的缩放比例，通过 `getBoundingClientRect()` 做比例换算是可靠方案。 +- Tooltip 等浮动层应使用 `pointer-events-none` 避免干扰下层交互，同时确保在容器 `relative` 定位下正确计算偏移。 +- 透明捕获层是解决 SVG 内部元素间隙导致事件丢失的有效手段，特别是在只有线条/路径的图表中。 diff --git a/工程分析/需求分析-2026-04-19-00-33-44.md b/工程分析/需求分析-2026-04-19-00-33-44.md new file mode 100644 index 0000000..c67bfc9 --- /dev/null +++ b/工程分析/需求分析-2026-04-19-00-33-44.md @@ -0,0 +1,22 @@ +# 需求分析 —— 2026-04-19-00-33-44 + +## 需求来源 +用户发现 Dashboard 中"最近 30 天"模式下的趋势图表过于密集：30 个数据圆点、30 个数值文本、30 个日期标签挤在一起，完全无法阅读。 + +## 需求概述 + +### 需求 1：30 天模式稀疏化显示 +在"最近 30 天"模式下： +- 不绘制每一天的数据圆点 `` 和数值文本 `` +- 仅保留平滑的面积图轮廓和折线 +- X 轴日期标签每隔 5 天显示一次（稀疏化） + +### 需求 2：Tooltip 悬停交互 +- 平时隐藏具体数值 +- 鼠标悬停在曲线区域时，显示浮动 Tooltip，展示该位置对应的日期和报告数量 + +## 涉及文件 +- `src/pages/Dashboard.tsx` + +## 需求影响范围 +仅影响 Dashboard 趋势图表的 SVG 渲染和交互逻辑，7 天模式保持不变。