Panel: Candlestick bars random width change

概述

Candlestick（蜡烛图）面板是 Grafana 中一种用于可视化金融时间序列数据（如开盘价、收盘价、最高价、最低价）的常用图表。在 SRE 实践中，此类图表常用于监控关键业务指标（如交易延迟、吞吐量）或基础设施资源利用率。图表显示的稳定性和一致性对于快速准确地进行数据分析和故障排查至关重要。本文档描述了一个已知问题：在刷新仪表盘或面板时，Candlestick 图表的柱子宽度会出现不可预期的随机变化，破坏了数据可视化的稳定性和可读性。

核心概念

  • Candlestick 图表（蜡烛图）：一种通过矩形“实体”和“影线”来表示一段时间内价格变动（或指标值范围）的图表类型。实体的宽度通常与时间间隔相关，保持一致有助于用户直观地理解时间尺度。
  • Grafana 面板：Grafana 仪表盘的基本构建模块，用于呈现查询结果（如图表、表格、仪表）。面板的渲染和更新逻辑直接影响用户体验和数据解读的准确性。
  • 面板刷新：Grafana 可根据配置的间隔或用户手动触发，重新查询数据源并更新面板显示。此过程是监控系统实时性的关键。

实践

根据提交的 issue，该问题的复现步骤非常直接：

  1. 创建一个 Candlestick 面板。
  2. 设置数据源和查询，使其显示有效的蜡烛图数据。
  3. 刷新仪表盘或等待自动刷新。

预期行为：每次刷新后，每个时间桶（time bucket）对应的蜡烛图柱子宽度应保持恒定，仅根据时间范围和面板宽度进行均匀缩放。

实际行为：刷新后，柱子宽度会以看似随机的方式改变，导致图表布局混乱（参见 issue 中的截图对比）。此问题在不同浏览器（Firefox、Chrome）和操作系统（macOS）上均可复现，表明其根源更可能在于 Grafana 的前端渲染逻辑或数据处理流程，而非特定环境。

排查与调试建议：

  • 数据源验证：首先确认数据源返回的数据时间戳是否严格单调递增且间隔均匀。数据本身的不规则可能是触发此问题的诱因之一。可以使用调试面板（如 Table 视图）检查原始数据。
  • 浏览器开发者工具：检查浏览器控制台是否有 JavaScript 错误。同时，使用性能分析（Performance）或元素检查器（Elements）工具，对比刷新前后 DOM 结构的差异，特别是代表蜡烛柱子的 SVG 或 Canvas 元素的尺寸属性。
  • Grafana 配置：尝试调整面板的“时间序列”设置，例如将“填充”与“间隙”值进行修改，观察是否影响宽度的稳定性。这可能揭示了布局计算逻辑中的缺陷。

SRE 要点

  • 与可观测性的关联：Grafana 是实现系统可观测性的核心工具之一。可视化组件的任何 bug，如本次的柱子宽度随机变化，都会直接损害“仪表盘”的可靠性。不可靠的视觉呈现可能导致 SRE 工程师误判趋势、漏掉异常或在故障响应（Incident Response）期间被无关的视觉干扰分散注意力。
  • 最佳实践：
    • 版本管理与回归测试：关注 Grafana 的版本更新（如此例中的 v13.0.1），并在升级后对关键仪表盘进行视觉回归测试。可以使用像 reg-suit 或 Grafana 的快照测试功能进行自动化比对。
    • 问题上报与社区参与：遇到此类明确的 UI bug 时，及时在 Grafana 的官方 GitHub 仓库提交 issue（如本次），并提供详细的复现步骤、截图和调试信息（debug JSON 文件），有助于问题的快速定位和修复。
    • 仪表盘 as Code：使用 Grafonnet 等工具以代码形式管理仪表盘，可以在版本控制系统中跟踪配置变更，便于在出现问题时快速回滚或比较差异。
  • 常见反模式：
    • 忽视前端渲染问题：过于关注后端指标而忽略前端展示层的可靠性，可能导致“数据存在但无法正确阅读”的盲区。
    • 依赖单一快照：在故障分析中，仅依赖某个时间点的仪表盘截图，而不考虑图表可能存在的渲染不一致问题，可能导致结论偏差。
  • 相关指标（SLI/SLO）：虽然此 bug 本身不直接影响系统后端的 SLI，但它影响了“监控数据可视化准确性”这一用户层面的可靠性指标。可以考虑为关键监控面板的渲染正确性设立一个 可视化 SLO，例如“核心业务仪表盘在 99% 的查询刷新中，Candlestick 柱子宽度变化不超过阈值 X%”。这可以通过定期运行前端自动化视觉测试来衡量。

该问题的具体讨论和修复进展，可参考 grafana-panel-debugging 和 candlestick-chart 页面。