Grafana 的气泡图面板

概述

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

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

要求

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

屏幕截图

组颜色方案	渐变颜色方案	唯一颜色方案

渐变颜色方案	阈值颜色方案	渐变颜色方案

分组

此面板提供两种用于分组圆圈的选项：“名称”和“标签”。当选择“名称”选项时，利用组分隔符（默认值：逗号）拆分名称，并根据数据命名约定建立分层分组。在数据源查询中，使用以可配置组分隔符分隔的不同标签名称的别名来确定层次结构顺序。此动态功能允许您通过调整别名中标签名称的顺序来控制图表上圆圈的组织。例如，如果您的数据涉及数据中心和主机，并且您的别名结构为 $tag_dc,$tag_host，则图表将自动将所有主机圆圈分组在数据中心圆圈下。

或者，当选择“标签”选项时，使用下拉菜单选择标签并自定义分组顺序。当处理没有正确定义的名称或别名的系列时，这种灵活性特别有用，从而可以更好地控制图表上圆圈的组织。

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

选项

气泡图设置

###

• 标签 - 选择要在气泡图圆圈中显示的标签。
• 计算 - 用于聚合数据的缩减函数。
• 单位 - 要显示的单位。
• 小数位数 - 要显示的小数位数。
• 组分隔符 - 用于分组的别名中的标签值分隔符。

颜色方案

• 多种颜色方案。
  • 组 - 在分组方案中，圆圈根据其组层次结构着色。
    • 颜色 - 组层次结构的起始和结束颜色范围。
  • 阈值 - 在阈值方案中，圆圈根据阈值着色。
    • 阈值 - 阈值。
    • 颜色 - 颜色应用于不同的阈值。
  • 渐变 - 在渐变方案中，圆圈根据组件值着色。
    • 阈值 - 阈值。
    • 颜色 - 渐变比例的起始和结束颜色范围。
  • 唯一 - 在唯一方案中，不同的颜色应用于各个圆圈。

兼容性

已针对以下数据库进行测试

• 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
  

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

构建

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

npm install
npm run build

对于开发，您可以运行

npm run dev

Docker 支持

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

docker-compose up

然后浏览至 https://127.0.0.1:3000

升级影响

D3 Pack 布局对称性中的更改

在最新版本的 D3 中，包布局对称性已更新，以适应更多数量的圆圈。从此插件的 Angular 版本 (v1.*.*) 迁移的用户可能会观察到布局上的差异。以前，D3 以螺旋形式组织圆圈，但现在它更密集地打包圆圈，从而增强了整体排列。