Grafana 气泡图面板

概述

此面板旨在以气泡图的形式提供任何组件的集中视图。气泡根据标签值分组聚类，每个气泡的大小和颜色代表时间序列数据的聚合值。

此插件使用基于 D3 的库创建气泡图。它支持自动缩放以根据面板大小调整其大小。如果标签过长，它们将被禁用，仅显示工具提示。

要求

此插件兼容 Grafana 10 及以上版本。

截图

分组配色方案	渐变配色方案	独特配色方案

渐变配色方案	阈值配色方案	渐变配色方案

分组

此面板提供两种分组气泡的选项：'名称 (Name)' 和 '标签 (Label)'。选择 '名称 (Name)' 选项时，使用分组分隔符（默认：逗号）来分割名称并根据数据命名约定建立层次结构分组。在数据源查询中，使用由可配置分组分隔符分隔的不同标签名称别名来确定层次结构顺序。此动态功能允许您通过调整别名中标签名称的顺序来控制图表上气泡的组织方式。例如，如果您的数据同时包含数据中心和主机，并且您的别名结构为 $tag_dc,$tag_host，图表将自动将所有主机气泡分组到数据中心气泡下方。

另外，选择 '标签 (Label)' 选项时，使用下拉菜单选择标签并自定义分组顺序。当处理没有正确定义名称或别名的系列时，这种灵活性特别有用，可以更好地控制图表上气泡的组织。

要处理非时间序列格式的数据，首先使用 Grafana 的 '按值分区 (Partition by values)' 转换将其转换为多系列格式。在图表选项中，选择 '分组依据 (Group by)' 选项为 '标签 (Label)' 并选择适当的标签；它将正确解析数据。

选项

气泡图设置

###

• 标签 (Labels) - 选择要在气泡图气泡中显示的标签。
• 计算 (Calculation) - 用于聚合数据的 reducer 函数。
• 单位 (Unit) - 要显示的单位。
• 小数位数 (Decimals) - 要显示的小数位数。
• 分组分隔符 (Group Separator) - 别名中用于分组的标签值分隔符。

配色方案

• 多种配色方案。
  • 分组 (Group) - 在分组方案中，气泡根据其分组层次结构进行着色。
    • 颜色 (Colors) - 分组层次结构的颜色起始和结束范围。
  • 阈值 (Threshold) - 在阈值方案中，气泡根据阈值进行着色。
    • 阈值 (Thresholds) - 阈值。
    • 颜色 (Colors) - 颜色应用于不同的阈值。
  • 渐变 (Gradient) - 在渐变方案中，气泡根据组件值进行着色。
    • 阈值 (Thresholds) - 阈值。
    • 颜色 (Colors) - 渐变刻度的颜色起始和结束范围。
  • 独特 (Unique) - 在独特方案中，不同的颜色应用于单个气泡。

兼容性

已测试兼容以下数据库

• InfluxDB
• OpenTSDB
• Bosun
• MySQL
  • 对于 MySQL，在指标字段的 SQL 表达式中使用 CONCAT 函数来实现多个分组层次结构。例如 SQL 表达式

  SELECT
  UNIX_TIMESTAMP(date) as time_sec,
  amt as value,
  CONCAT(server, ',', org) as metric
  FROM trade
  WHERE $__timeFilter(date)
  ORDER BY date ASC
  

此方法预计也适用于其他数据库。

构建

此插件依赖于 Plugin Tools。典型的构建顺序如下

npm install
npm run build

对于开发，您可以运行

npm run dev

Docker 支持

为了方便开发和测试，您只需使用包含的 docker-compose.yml 文件执行以下命令

docker-compose up

然后访问 https://:3000

升级影响

D3 Pack 布局对称性的变化

在最新版本的 D3 中，pack 布局对称性已更新，以容纳更多气泡。从 Angular 版本 (v1.*.*) 迁移此插件的用户可能会لاحظ其布局的差异。以前，D3 以螺旋形组织气泡，但现在它将气泡更紧密地打包，从而增强了整体排列。