Phlowchart

概述
安装
更新日志
相关内容

Grafana Phlowchart 面板

描述：Phlowchart Grafana 面板可用于从有向图数据渲染交互式流程图。有向图包含顶点和边。Phlowchart 支持不同类型的顶点。可在下方找到类型的详细信息。此面板依赖于 Infinity 数据源插件。

技术栈：ReactJS、NodeJS、Grafana toolkit、Yarn、ReactFlow、DagreJS。
核心概念 Grafana 确实提供了节点图面板作为可视化有向图数据的一种方式，但它目前处于 Beta 阶段，并且支持的可视化功能非常基础。因此需要开发能够为有向图提供丰富可视化功能的面板。此面板尝试使用 ReactFlow 和 DagreJS 来实现此目标。
状态：支持 10 种不同类型顶点的初始版本。

截图:

Screenshot 1

有关上述图表的数据，请参阅 sample_data 文件夹中的 nodes.json 和 edges.json 文件。

依赖项

安装

在 Grafana Cloud / 本地 Grafana 上安装插件 - https://grafana.org.cn/docs/grafana/latest/plugins/installation/

配置

构建一个具有两个 API 端点的 Web 服务 - 一个提供顶点数据，另一个提供连接有向图中顶点的边数据

顶点 API 端点应返回类似于下方所示的响应

[
   {
      "id": "1",
      "type": "twoTextFourNumber",
      "title": "Vertex title 1",
      "sub_text": "Vertex sub text 1",
      "number1": 80,
      "number2": 45,
      "number3": 39,
      "number4": 4,
      "url": "http://www.domain.com/path/subpath/1"
   },
   {
      "id": "2",
      "type": "twoTextTwoNumber",
      "title": "Vertex title 2",
      "sub_text": "Vertex sub text 2",
      "number1": 116,
      "number2": 5,
      "number3": null,
      "number4": null,
      "url": "http://www.domain.com/path/subpath/2"
   },
   {
      "id": "3",
      "type": "oneTextThreeNumber",
      "title": "Vertex title 3",
      "sub_text": null,
      "number1": 93,
      "number2": 44,
      "number3": 32,
      "number4": null,
      "url": "http://www.domain.com/path/subpath/3"
   }
]

下表描述了顶点 JSON 对象模型的属性

属性名称	类型	描述
id	字符串	顶点的唯一标识符。此标识符用作定义连接有向图顶点的边时的 source 和 target 属性。
type	字符串	这是顶点最重要的属性。它定义了特定顶点的渲染方式。有关支持的值，请参阅下方的支持的顶点类型部分。
title	字符串	此属性指定顶点的主要文本。
sub_text	字符串	此属性指定顶点的次要文本。此属性适用于具有两个文本属性的顶点类型。
number1	数字	此属性指定顶点的第一个数字。此属性适用于显示一个或多个数字的顶点类型。
number2	数字	此属性指定顶点的第二个数字。此属性适用于显示一个或多个数字的顶点类型。
number3	数字	此属性指定顶点的第三个数字。此属性适用于显示一个或多个数字的顶点类型。
number4	数字	此属性指定顶点的第四个数字。此属性适用于显示一个或多个数字的顶点类型。
url	字符串	此属性将包含用户点击顶点后将被导向的 URL。这为查看有向图可视化的用户提供了“下钻”的方式。

重要说明：无论顶点类型如何，所有顶点都必须包含所有 9 个属性。不适用于某种顶点类型的属性应赋值为“null”，如上面示例所示。即使为此类属性分配了非 null 值，它们也不会作为顶点的一部分进行渲染。

边 API 端点应返回类似于下方所示的响应

[
   {
      "id": "1-2",
      "source": "1",
      "target": "2"
   },
   {
      "id": "2-3",
      "source": "2",
      "target": "3"
   }
]

下表描述了边 JSON 对象模型的属性

属性名称	类型	描述
id	字符串	边的唯一标识符。这在边集合中必须是唯一值。
source	字符串	作为边源顶点的“id”属性。箭头连接线将从源顶点流向目标顶点。
target	字符串	作为边目标顶点的“id”属性。箭头连接线将从源顶点流向目标顶点。

以上将按照面板的默认配置进行渲染，如下所示

Sample Graph

使用 infinity 插件调用 Web 服务并将数据传递给 Phlowchart 插件。在 infinity 数据源中，将顶点 API 端点配置为第一个系列，将边 API 端点配置为第二个系列。Phlowchart 插件将根据顶点的属性渲染有向图。

Infinity 数据源配置

Infinity Data Source Configuration

上图显示了 Infinity 数据源的示例配置。需要考虑以下几点

类型必须选择为 JSON
必须创建两个系列 - 一个用于顶点，另一个用于边。HTTP 请求（HTTP 方法、头、查询参数）的配置将取决于所消费的 Web 服务的实现方式。
将格式选择为 Table 或 Data Frame

支持的顶点类型

支持以下顶点类型，并可在顶点 JSON 数据的“type”属性中指定

类型名称	描述	示例图片
twoTextFourNumber	显示两个文本值和四个数字值
twoTextThreeNumber	显示两个文本值和三个数字值
twoTextTwoNumber	显示两个文本值和两个数字值
twoTextOneNumber	显示两个文本值和一个数字值
oneTextFourNumber	显示一个文本值和四个数字值
oneTextThreeNumber	显示一个文本值和三个数字值
oneTextTwoNumber	显示一个文本值和两个数字值
oneTextOneNumber	显示一个文本值和一个数字值
oneText	显示一个文本值
twoText	显示两个文本值