Skip to content

fix(dashboard): 修复图表 Legend 图标显示不一致并提升文字渲染清晰度#168

Merged
ThreeFish-AI merged 1 commit into
feature/1.x.xfrom
vk/fa46-
Apr 15, 2026
Merged

fix(dashboard): 修复图表 Legend 图标显示不一致并提升文字渲染清晰度#168
ThreeFish-AI merged 1 commit into
feature/1.x.xfrom
vk/fa46-

Conversation

@ThreeFish-AI

@ThreeFish-AI ThreeFish-AI commented Apr 15, 2026

Copy link
Copy Markdown
Owner

Summary

修复 Dashboard 页面图表 Legend 图标的三个显示问题,并提升整体文字渲染清晰度。

修复的问题

  1. Legend 图标不一致 — 应统一显示实心圆,但部分图表显示为空心圆或椭圆

    • 根因:boxWidth 未设置 boxHeight,Chart.js 在 right 布局下将圆点拉伸为椭圆;冗余的 pointStyleWidth 参数干扰布局引擎
    • 修复:COMMON_LEGEND 增加 boxHeight: 10 正方形约束,移除 pointStyleWidth
  2. 供应商分布图出现 "undefined" 图例项 — 历史数据中存在无效 vendor 值未被过滤

    • 根因:原 if (!v) 仅过滤 falsy 值,字符串 "undefined" / "null" 可通过
    • 修复:新增 isValidLabel() 工具函数(含 typeof 类型检查),四处 chart builder 统一应用
  3. 文字渲染模糊 — macOS 深色背景下默认 subpixel antialiasing 导致色散

    • 修复:CSS 添加 antialiased 字体平滑 + optimizeLegibility
    • Chart.js 字体回退链补充 PingFang SC / Microsoft YaHei 中文字体
    • 显式声明 devicePixelRatio 确保 Retina 屏清晰渲染

技术决策

经评估 Chart.js vs ECharts vs ApexCharts,确认所有问题均可在 Chart.js 内通过定向修复解决,无需迁移图表库(遵循最小干预原则)。

变更文件

  • src/coding/proxy/server/dashboard.py — 唯一修改文件(+18 / -7)

Test plan

  • 访问 /dashboard 页面,检查四个图表的 Legend 图标均显示为实心圆
  • 确认供应商分布图中不再出现 "undefined" 图例项
  • 在 Retina 屏幕下验证中文标签和数字清晰锐利
  • 测试 Legend 交互:单击、Ctrl+单击、Shift+单击功能正常

🤖 Generated with Claude Code, CodeX, Gemini
Co-Authored-By: Aurelius Huangthreefish.ai@gmail.com

- COMMON_LEGEND 增加 boxHeight 约束防止椭圆,移除冗余 pointStyleWidth
- 模型 Token 图 generateLabels 显式重置圆点属性防 right 布局覆盖
- 新增 isValidLabel 工具函数过滤 undefined/null 等无效 vendor 数据
- CSS 添加 antialiased 字体平滑及中文字体回退链优化 Retina 清晰度

🤖 Generated with [Claude Code](https://github.com/claude), [CodeX](https://openai.com), [Gemini](https://github.com/apps/gemini-code-assist)
Co-Authored-By: Aurelius Huang<threefish.ai@gmail.com>
@ThreeFish-AI
ThreeFish-AI merged commit 8f370aa into feature/1.x.x Apr 15, 2026
6 checks passed
@ThreeFish-AI ThreeFish-AI changed the title 如图所示,整个页面中的文字似乎显示得不太清晰,是不是使用的组件支持的文字效果不好?看看有没有更新的技术,让页面显示得更清晰、更简约、更好看。 (vibe-kanban) fix(dashboard): 修复图表 Legend 图标显示不一致并提升文字渲染清晰度 Apr 15, 2026
@ThreeFish-AI
ThreeFish-AI deleted the vk/fa46- branch April 16, 2026 01:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant