杨
数据可视化设计系统BFF

研发效能看板

把 CI、缺陷与发布数据汇成一张可下钻的看板,帮助团队定位交付瓶颈。

角色
前端负责人
周期
2024-06 ~ 2024-12
技术栈
React · D3 · Node.js · PostgreSQL
研发效能看板截图

背景

团队每周要手工汇总 CI 成功率、缺陷密度与发布频率,数据分散在三个系统里,口径经常不一致。目标是做一个统一口径、可下钻的效能看板。

我的职责

  • 设计指标模型与数据口径,和 QA、SRE 对齐定义
  • 负责全部前端实现与图表组件库
  • 搭建 BFF 聚合层,控制查询成本

方案与取舍

图表没有引入完整图表库,而是基于 D3 的 scale 与 path 生成器写了 6 个轻量组件:折线、堆叠柱、热力图、散点、子弹图与迷你趋势图。这样可以把交互和设计令牌完全统一,首屏只加载需要的图表代码。

结果与复盘

上线后周会准备时间从 2 小时降到 10 分钟,指标口径争议明显减少。复盘:早期过度追求图表样式,后来把「能否回答一个问题」作为每个图表的准入条件,删掉了三分之一的图。