fix(dashboard): 修复图表 Legend 图标显示不一致并提升文字渲染清晰度#168
Merged
Conversation
- 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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
修复 Dashboard 页面图表 Legend 图标的三个显示问题,并提升整体文字渲染清晰度。
修复的问题
Legend 图标不一致 — 应统一显示实心圆,但部分图表显示为空心圆或椭圆
boxWidth未设置boxHeight,Chart.js 在right布局下将圆点拉伸为椭圆;冗余的pointStyleWidth参数干扰布局引擎COMMON_LEGEND增加boxHeight: 10正方形约束,移除pointStyleWidth供应商分布图出现 "undefined" 图例项 — 历史数据中存在无效 vendor 值未被过滤
if (!v)仅过滤 falsy 值,字符串"undefined"/"null"可通过isValidLabel()工具函数(含typeof类型检查),四处 chart builder 统一应用文字渲染模糊 — macOS 深色背景下默认 subpixel antialiasing 导致色散
antialiased字体平滑 +optimizeLegibilityPingFang 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 图标均显示为实心圆🤖 Generated with Claude Code, CodeX, Gemini
Co-Authored-By: Aurelius Huangthreefish.ai@gmail.com