数据可视化设计系统BFF
研发效能看板
把 CI、缺陷与发布数据汇成一张可下钻的看板,帮助团队定位交付瓶颈。
- 角色
- 前端负责人
- 周期
- 2024-06 ~ 2024-12
- 技术栈
- React · D3 · Node.js · PostgreSQL
背景
团队每周要手工汇总 CI 成功率、缺陷密度与发布频率,数据分散在三个系统里,口径经常不一致。目标是做一个统一口径、可下钻的效能看板。
我的职责
- 设计指标模型与数据口径,和 QA、SRE 对齐定义
- 负责全部前端实现与图表组件库
- 搭建 BFF 聚合层,控制查询成本
方案与取舍
图表没有引入完整图表库,而是基于 D3 的 scale 与 path 生成器写了 6 个轻量组件:折线、堆叠柱、热力图、散点、子弹图与迷你趋势图。这样可以把交互和设计令牌完全统一,首屏只加载需要的图表代码。
结果与复盘
上线后周会准备时间从 2 小时降到 10 分钟,指标口径争议明显减少。复盘:早期过度追求图表样式,后来把「能否回答一个问题」作为每个图表的准入条件,删掉了三分之一的图。