FlowX

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

FlowX

FlowX Grafana 面板能够渲染源自包含节点和边的有向图数据的交互式流程图。FlowX 支持多种节点类型，每种类型都专为特定用例设计。Grafana 提供了“节点图 (Node Graph)”面板用于可视化有向图数据，但其可视化能力相当有限。为了满足对有向图进行更高级和丰富可视化表示的需求，开发了此面板。它利用 ReactFlow 和 DagreJS 提供增强的可视化功能。

安装

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

配置

要使用 FlowX 面板，必须添加两个不同的查询，分别称为“Node”和“Edge”。“Node”查询用于确定我们将绘制的方框、圆形和菱形。“Edge”查询用于确定我们绘制的节点之间的关系。Node 和 Edge 查询中预期的列如下所示。所有列的数据都是可选的（是的，包括 ID；如果出现空行，则将绘制一个没有关系的空节点）。所有列的预期数据类型都是字符串。

Node

下表描述了 Node 查询的预期列

列	支持的值	描述
id		Node 的唯一标识符。每个要绘制的 Node 都必须有一个唯一的 ID。这些 ID 将在“Edge”查询的 Source 或 Target 字段中使用。
type	`title` `one` `two` `three` `four` `circle` `diamond`	确定 Node 的类型。Node 将根据此数据绘制。但是，如果弹出窗口处于活动状态，所有值将显示在弹出窗口中。默认值：`four`
title		Node 的标题。
value1_header		将用于 Node 第一个值的标题。
value1_data		将用于 Node 第一个值的数据。
value1_url		将用于 Node 第一个值的 URL。必须启用“Show Popup”才能使用。
value2_header		将用于 Node 第二个值的标题。
value2_data		将用于 Node 第二个值的数据。
value2_url		将用于 Node 第二个值的 URL。必须启用“Show Popup”才能使用。
value3_header		将用于 Node 第三个值的标题。
value3_data		将用于 Node 第三个值的数据。
value3_url		将用于 Node 第三个值的 URL。必须启用“Show Popup”才能使用。
value4_header		将用于 Node 第四个值的标题。
value4_data		将用于 Node 第四个值的数据。
value4_url		将用于 Node 第四个值的 URL。必须启用“Show Popup”才能使用。
color_condition	`red` `red_blink` `orange` `orange_blink` `yellow` `yellow_blink` `green` `green_blink` `blue` `blue_blink` `gray` `gray_blink`	确定 Node 背景颜色的字段。带有 Blink 的会闪烁。默认值：null
url		可用于 Node 自身 URL 的字段。必须启用“Show Popup”才能使用。
url_label		将替换 Node 自身 URL 的标签。

Edge

下表描述了 Edge 查询的预期列

列	描述
id	Edge 的唯一标识符。每个要绘制的 Edge 都必须有一个唯一的 ID。
source	源 Node ID
target	目标 Node ID

支持的 Node 类型

type	描述
null	默认值，node 类型将设置为 'four'。
title	仅显示 `title` 列的 Node。但如果启用“Show Popup”选项，其他 title, data, url 列将显示在弹出窗口中。
one	显示 `value1_header`, `value1_data` 列的 Node。但如果启用“Show Popup”选项，其他 title, data, url 列将显示在弹出窗口中。
two	显示 `value1_header`, `value1_data`, `value2_header`, `value2_data` 列的 Node。但如果启用“Show Popup”选项，其他 title, data, url 列将显示在弹出窗口中。
three	显示 `value1_header`, `value1_data`, `value2_header`, `value2_data`, `value3_header`, `value3_data` 列的 Node。但如果启用“Show Popup”选项，其他 title, data, url 列将显示在弹出窗口中。
four	显示 `value1_header`, `value1_data`, `value2_header`, `value2_data`, `value3_header`, `value3_data`, `value4_header`, `value4_data` 列的 Node。但如果启用“Show Popup”选项，其他 title, data, url 列将显示在弹出窗口中。
circle	一个圆形 Node，不显示列。但如果启用“Show Popup”选项，其他 title, data, url 列将显示在弹出窗口中。
diamond	一个菱形 Node，不显示列。但如果启用“Show Popup”选项，其他 title, data, url 列将显示在弹出窗口中。

支持的 Node 颜色

color_condition	描述
null	默认值，背景颜色为白色。
red	背景颜色为 #f2495c。
red_blink	在 #f2495c 和白色之间闪烁。
orange	背景颜色为 #ff9830。
orange_blink	在 #ff9830 和白色之间闪烁。
yellow	背景颜色为 #fade2a。
yellow_blink	在 #fade2a 和白色之间闪烁。
green	背景颜色为 #73bf69。
green_blink	在 #73bf69 和白色之间闪烁。
blue	背景颜色为 #5794f2。
blue_blink	在 #5794f2 和白色之间闪烁。
gray	背景颜色为 #ebebeb。
gray_blink	在 #ebebeb 和白色之间闪烁。

FlowX 面板选项

下表描述了 FlowX 面板选项

类别	选项	值	默认值	描述
背景设置	背景颜色	Grafana 调色板	`#ffffff`
背景设置	背景类型	`None` `Dots` `Cross` `Lines`	`无`
背景设置	类型间隙	1 >= `类型间隙` <= 50	`28`
背景设置	类型大小	1 >= `类型大小` <= 10	`1`
背景设置	类型颜色	Grafana 调色板	`#000000`
布局设置	布局方向	从上到下从左到右	`从上到下`
布局设置	显示布局选项	开关	`开`
布局设置	显示迷你地图	开关	`开`
布局设置	显示控件	开关	`开`
布局设置	隐藏归属（Pro）	开关	`关`	如果您已订阅 React Flow Pro，请隐藏归属信息：https://flow.reactjs.ac.cn/pro
布局设置	最大缩放	1 >= `最大缩放` <= 10	`4`
布局设置	最小缩放	0.1 >= `最小缩放` <= 1	`0.1`
节点设置	可拖动节点	开关	`关`
节点设置	显示弹出窗口	开关	`关`	必须启用此选项才能使用 Node 或 Value URL。
边设置	边动画	开关	`开`
边设置	边类型	默认 `Straight` `Step` `Smoothstep` `Simplebezier`	`默认值`
边设置	边粗细	1 >= `边粗细` <= 10	`1`
边设置	边颜色	Grafana 调色板	`#000000`