插件〉Flow

面板

社区

Flow

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

Flow

SVG 流程图可视化

Flow 插件在 SVG 图表上提供并排指标可视化。您提供 SVG 图表以及有关您希望图表如何运行的配置。然后，该面板将这些与您的时间序列数据结合起来，使您的图表栩栩如生。

示例 1

example1

示例 2

example2

示例 3

example3

目标受众

详细说明分布式系统中数据流的仪表盘很快就会变得很大，并且通常会受益于某种架构图的引导。此面板旨在支持这些图表。您可以在 draw.io 等丰富的编辑器中创建 SVG，然后通过 yaml 配置关联数据系列和阈值。除了用数据注释图表外，您还可以添加链接，允许您点击不同的窗口小部件并深入了解所选组件的“展开”视图。

想象一下带有详细信息层的玻璃驾驶舱；每一层都提供越来越详细的系统健康信息。在创建此类仪表盘套件时，您通常会遇到许多类似的小部件，这些小部件受益于共享相同的阈值配置。此面板通过允许您在面板内以及跨面板共享阈值和链接来积极地支持这一点。它甚至更进一步，允许您根据 Grafana 变量选择定制阈值集。这确实有助于使阈值在所有情况下都相关。

该面板不仅限于最后值。我们已经为提取时间范围付出了代价，因此此面板允许您在任何时间点查看图表。来回拖动时间滑块以查看您的流程如何演变。Grafana 没有为此产生开销，因为数据系列已经提取；我们只是更改了感兴趣的点。

功能集

插件内容由三个数据文件定义

SVG：这定义了流程图，其中可控小部件通过单元格 ID 识别。
PanelConfig：在 yaml 中定义，这将上述单元格 ID 与时间序列、阈值、链接和可视化配置相关联。
SiteConfig：在 yaml 中定义，这提供了跨面板共享配置，例如阈值、链接、颜色等。

数据文件可以粘贴到面板中，但也可以从外部 URL（例如 github）加载。首次渲染时，面板显示最后值处的流程图。即时间窗口的结束。但这是可以移动的。面板底部的 Time-Slider 允许遍历完整的时间序列，以便您可以查看流程在时间窗口内的演变方式。

支持的可视化效果为

标签内容
标签颜色
填充颜色
描边颜色
链接
连接器流程动画
填充级别
定制 SVG 元素属性驱动

请注意，面板中没有内置的工具提示支持，但可以在 SVG 中定义，并且由于底层框架的缘故，将在面板上悬停时显示。要在 draw.io 中设置工具提示，选择小部件 -> 编辑 -> 编辑工具提示；或选择小部件 -> <ALT><SHFT>T。

入门

在您的仪表盘中创建一个 Flow 面板。初始设置通过 url 加载此存储库中的第一个示例。它还启用了测试时间序列增强。这些测试时间序列确保初始仪表盘具有一些要显示的数据。它为您提供了开箱即用的工作示例。

探索

缩放
- 更改 Grafana 面板的大小和形状。查看 SVG 自动缩放以填充内容，同时保持纵横比。
时间滑块
- 前后拖动时间滑块。根据定义的阈值查看流程标签、标签颜色、填充颜色发生变化。
- 打开面板编辑器并禁用时间滑块以查看 SVG 扩展到其他空间并恢复到最后值。
链接
- 将鼠标悬停在单元格上。您会看到光标变成指针。点击并跳转到关联的链接。
- 将鼠标悬停在“Active Workers”单元格上。请注意，鼠标不会发生变化，因为没有关联的链接。
SVG 和配置引用
- 编辑 SVG 引用，您会看到 SVG 消失。将其改回，您会看到它重新出现。
- 编辑面板配置引用，您会看到注释消失。将其改回，您会看到它重新出现。
- 将链接更改为第二个示例。这展示了一个总线中间件示例，并演示了共享 siteConfig 文件的使用。
- 将链接更改为第三个示例。这展示了一系列交互式队列。所有单元格都已赋予 threadHighlighting 标签，并且启用了高亮显示图例，允许突出显示不同的数据集以发现关联。
  - svg: https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg3.svg
  - panelConfig: https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/panelConfig3.yaml
- 将链接更改为第四个示例。这展示了带有流动动画的连接器。流动速度由传入的数据动态控制。无论何时定义流动动画，面板左下角都会显示暂停/播放按钮。前后移动时间滑块以查看流动速率的调整。
  - svg: https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg4.svg
  - panelConfig: https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/panelConfig4.yaml
- 将链接更改为第五个示例。这展示了动态填充级别和定制属性驱动。它展示了元素旋转和缩放，以及根据一组传入的 mathjs 公式动态计算值的标签。前后移动时间滑块以查看所有驱动器的运行情况。
  - svg: https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg5.svg
  - panelConfig: https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/panelConfig5.yaml
测试数据生成
- 取消选择生成，您会看到 SVG 更改为未注释状态。重新选择，您会看到颜色和值恢复。
调试：请注意，所有这些步骤都需要您打开浏览器控制台。
- 数据：按下按钮并展开 Debugging Data raw 和 Debugging Data enriched 的两行日志。原始视图是 Grafana 发送到面板的时间序列数据。增强视图是在包含测试数据后的数据。在增强视图中，每个使用的时间序列都有一个对应的 time 系列，并且 time 系列还显示了根据时间滑块位置选择的 valuesIndex。
- 映射：按下按钮，您将获得抽象和详细的日志行。abstract 行显示如何将 SVG 单元格 ID 分配给时间序列。verbose 行提供所有 SVG 映射信息。
- 单位：按下按钮并展开日志行，显示每个潜在单位的类别 -> 子类别 -> {文本，值}。您在 yaml 配置中输入的单位字符串是此处显示的 values。
- 颜色：按下按钮，查看可用的 Grafana 主题色调。每个色调都有多个色阶。这些颜色名称可以直接在 yaml 中使用。或者，您可以输入短十六进制、长十六进制、rgb 或 hsl。所有这些格式都将被识别，因此也可以与 gradient 一起使用。如果您想改为输入 html 颜色名称，它们将传递到 SVG，但面板不会理解它们，因此 gradient 将不起作用。
- SVG：按下按钮，查看正在显示的序列化 svg。将其复制出来以与传入的 svg 模板进行比较，或保存为快照图像。
- 时间：按下按钮以检测下一个渲染过程。这使您可以查看时间花在哪里。
  - toDataFrame：面板仅理解 DataFrame 格式，因此第一步是将传入的数据转换为这种格式。如果您不确定正在接收哪种格式，请在 查询检查器 中运行查询并查看响应。即 DataFrame 将包含一个 fields 数组，而时间序列将包含一个 datapoints 或 points 数组。请注意，移动时间滑块需要一个新的渲染过程，并且面板无法判断接收到的数据是否是新获取的结果。因此，每次时间滑块移动时都必须重复此步骤。但是，只有当传入的数据不是 DataFrame 格式时，它才会很耗时。
  - transform：这将 DataFrame 转换为此面板插值所需的形式。它是一个轻量级的数组重组。
  - seriesExtend：这添加了测试时间序列。只有在面板选项中启用了测试时间序列时，您才会看到此项。
  - seriesInterpolate：这会对每个时间数组进行插值，以确定给定时间滑块位置的正确索引。
  - svgUpdate：这将标签和阈值设置应用于文档。
  - createJsx：这根据 svg 文档 html 创建 JSX。

使用 draw.io 创建 SVG

可以使用任何工具维护 SVG，但draw.io 是所有这些示例中使用的工具。draw.io 可在线使用，也可作为应用程序下载。启动在线版本时，请记住包含 ?p=svgdata 作为参数。这将加载 svgdata 插件并确保您的单元格 ID 将保存在 SVG 文件中。通过应用程序，您可以通过转到 Extras->plugins->Add->svgdata.js 来获得相同的结果。使用该插件，可以通过选择单元格，然后 Edit->Edit Data->双击 ID 值->编辑 ID 来原位编辑任何 ID。

请注意，draw.io 的 ID 在后台会添加 cell- 前缀。为了方便起见，panelConfig yaml 允许设置前缀，以便实际的 yaml 数据可以引用您输入的 ID。您可以在映射数据中看到差异，因为它显示了您的 ID 以及完整的 svg ID。

SVG 可以直接输入到面板中，也可以通过 URL 引用。

使用 YAML 配置流程图

与其他配置格式相比，YAML 提供了一些有用的功能。（1）它可以被注释。（2）它支持锚点和别名。这两个功能对于长期可维护性都非常有用。yaml 文件可以直接输入到面板中，也可以通过 URL 引用。

panelConfig 详细说明了将要驱动的 SVG ID 集以及如何驱动它们。它特定于面板。

siteConfig 详细说明了您在一套面板中使用的常见设置。它提供了一种定义系统级主题的方法，因此所有面板都以类似的方式响应，并且可以通过单点进行维护。您不必使用 siteConfig。所有参数都可以在 panelConfig 中定义。使用 siteConfig 的唯一原因是当您维护一套面板时。panelConfig 和 siteConfig URL 将在获取文件之前替换 Grafana 变量。这为您提供了一定程度的多站点可配置性。

Grafana 变量也可用于缩放阈值定义。即，如果您有 environment 变量，则可以在开发和生产环境中以不同的方式缩放阈值。

这些链接将带您到 yaml 文件，其中记录了每个设置。

第一个面板

一旦您熟悉了控件，创建您的第一个正式面板就归结为以下过程。

在 draw.io 中，创建一个 SVG 并将单元格 ID 编辑为有意义的名称。首先保持其最小化。
复制一个示例 panelConfig，因为它已设置了使用 testData 的 cellId。将 cellID 编辑为与您的 SVG ID 匹配。
创建您的 Flow 面板并将其设置为由您的 SVG 和 panelConfig 驱动。
查看您的 SVG 以正确的单位响应测试数据。
在它自己的时间序列面板中开发您的时间序列查询，直到您对结果满意为止。请记住将时间序列的别名更改为有意义的名称，因为您将在 Flow 面板中使用它。
将您的查询复制到 Flow 面板中。
按下“调试数据”以查看您的查询时间序列传递到面板。
更改您的 panel config dataRef 以将单元格 ID 映射到您的时间序列名称。
使用时间滑块查看您的值是否正确地回显在 SVG 中。
重复/重复。

想要进行更改？

转到Grafana 入门指南，开始下载分叉并设置您的测试环境。设置完成后，您会发现可用的仪表板（源自预配目录），它们充当功能演示。

在 Grafana Cloud 上安装 Flow

有关更多信息，请访问有关插件安装的文档。

更改日志

1.16.4 SVG 'marker' 元素支持

此更改允许使用所有 marker 元素属性。之前由于底层 SVG 净化中的错误，它们被错误地删除了。随着定制驱动程序的可用性，'markers' 的使用变得突出。

流程动画速度偏差

向流程动画驱动程序添加了一个新术语，该术语将幂曲线应用于流速。之前流程动画速度随数据线性变化。现在速度可以根据您的选择进行变化。

panelConfig 中的新配置项

panelConfig:cells.cell-name.flowAnim.biasPower

1.16.3 SVG 格式支持

使用 SVG 进行后期格式化以提高可读性可能会导致标签位置发生偏移。现在通过限制 style->whitespace 如何动态应用于标签的范围来修复此问题。

1.16.2 动画播放/暂停按钮可选

添加了新的面板级开关，允许移除动画播放/暂停控件。

定制公式修复

定制公式仅在单元格还包含定制属性 'get' 或 'set' 时才会运行。此限制已移除，因此现在可以独立使用公式来计算新数据项，以便在其他驱动程序中使用。

1.16.1 单数据点 DataFrame

添加了对不包含关联时间数组的传入数据的支持，数组中只有一个数据点。

定制属性驱动程序

基于 mathjs 的新驱动程序，用于 SVG 元素属性。这允许客户端执行定制操作，例如根据传入数据转换其形状元素。多个传入数据源可以在 mathjs 公式中组合以导出新值，这些值可用于驱动属性或作为任何其他固定驱动程序（例如标签、标签颜色等）的来源。为了确保 javascript 无法注入到插件中，实施了以下定制属性限制

无法驱动以 'on' 开头的属性值。
只能添加 'transform'、'transform-origin'、'visibility' 属性。
如果属性在初始化时通过 dompurify 解析 SVG 后仍然存在，则可以驱动任何其他属性值。

panelConfig 中的新配置项

panelConfig:cells.cell-name.bespoke
panelConfig:cells.cell-name.bespokeDataRef
panelConfig:cells.cell-name.label.bespokeDataRef
panelConfig:cells.cell-name.labelColor.bespokeDataRef
panelConfig:cells.cell-name.fillColor.bespokeDataRef
panelConfig:cells.cell-name.strokeColor.bespokeDataRef
panelConfig:cells.cell-name.flowAnim.bespokeDataRef
panelConfig:cells.cell-name.fillLevel.bespokeDataRef

TimeSlider 时间范围与时间偏移兼容

更正了时间滑块时间范围的初始化方式，以便在与面板查询选项时间偏移结合使用时能够正确运行。

1.15.0

此版本从未发布，但包含 1.16.0 的早期版本，该版本基于客户端定义的 javascript 创建定制驱动程序。在更高版本中，该驱动程序完全用客户端定义的 mathjs 重写。

1.14.0 文本数据阈值支持

这增加了使用正则表达式模式配置文本数据阈值的功能。siteConfig 和 panelConfig 中的新配置项

siteConfig:thresholdPatterns
panelConfig:cells.cell-name.labelColor.thresholdPatterns
panelConfig:cells.cell-name.labelColor.thresholdPatternsRef
panelConfig:cells.cell-name.strokeColor.thresholdPatterns
panelConfig:cells.cell-name.strokeColor.thresholdPatternsRef
panelConfig:cells.cell-name.fillColor.thresholdPatterns
panelConfig:cells.cell-name.fillColor.thresholdPatternsRef

在同一选项卡中链接

这增加了配置链接以在同一选项卡中打开而不是在新选项卡中打开的功能。可以在单元格、面板或站点级别设置。siteConfig 和 panelConfig 中的新配置项

siteConfig:linkWindow
panelConfig:linkWindow
panelConfig:cells.cell-name.link.sameTab

链接变量

这增加了定义链接 URL 替换以简化经常重复的基本 URL 或参数集的功能。siteConfig 和 panelConfig 中的新配置项

linkVariables

缩放平移捏合轮激活

这增加了需要按住激活键（例如“Alt”）才能进入面板缩放的功能。面板缩放和仪表盘滚动之间存在冲突，可以使用此功能避免冲突。siteConfig 和 panelConfig 中的新配置项

zoomPanPinch

复合颜色

此功能允许根据数据引用输入数组驱动 labelColor、strokeColor 或 fillColor。即，您可以根据一组输入选择最差或最佳颜色。为了支持这一点，已向“阈值”添加了一个名为“顺序”的新字段。它默认为阈值数组索引，但可以在 yaml 中显式驱动。此术语用于比较来自不同数据引用的阈值。总的来说，不需要它，但它的包含意味着没有隐式排序需要跨越所有阈值定义。新配置项

cells.cell-name.labelColors
cells.cell-name.strokeColors
cells.cell-name.fillColors

1.13.0 填充级别

添加了对驱动填充级别的支持。yaml 定义了数据到百分比填充的映射。在幕后，它是使用 SVG 剪辑路径功能实现的。计算形状的边界框，并在 SVG 中添加一个额外的剪辑路径矩形。然后，此矩形根据传入数据进行驱动。新配置项

cells.cell-name.fillLevel

描边颜色

添加了对驱动描边颜色的支持。即，为形状和连接的结构线着色。yaml 驱动程序的本质与 fillColor 驱动程序相同。新配置项

cells.cell-name.strokeColor

Grafana 变量替换在 ValueMappings 中

添加了对将 valueMappings 文本通过 Grafana 变量替换传递的支持。即，用变量值替换时间序列的所有值：单元格 abc：valueMappings：- {text = "${myVariableName}"}

1.12.0 URL Grafana 变量

添加了对 SVG URL 中 Grafana 变量的支持。在此之前，这仅在 YAML URL 中可用。它还更正了所有 URL 变量的变量更改检测逻辑，以确保在相关变量更改时获取新的获取。

字符串数据

这增加了对标签驱动的字符串时间序列的支持。颜色仍然可以通过为颜色使用数字时间序列和为标签文本使用字符串时间序列来驱动。这也与值映射兼容。

相对链接

添加了对相对链接的支持。之前仅支持绝对链接。

1.11.0 流程动画

添加了对 draw.io 线流程动画的支持。在 draw.io 中，选择“流程动画”的线以及生成的 SVG“导出为 SVG”（不仅仅是保存为 SVG）会导致可通过“方向”和“持续时间”属性控制的动画线。此更改添加了 yaml 配置以根据数据驱动这些动画。当存在此类配置时，始终会在面板中添加播放/暂停按钮，以确保所有用户都能使用该面板。新配置项

cells.cell-name.flowAnimation

除了预置仪表盘外，示例 4 中还演示了上述功能

svg：https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg4.svg
panelConfig：https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/panelConfig4.yaml

添加了新的测试数据以促进流程动画的测试

test.testDataBaseOffset
test.testDataExtendedZero

一个数据点插值修复

修复了时间序列插值的一个错误，该错误导致时间序列只有一个数据点时没有数据。

值映射支持

这允许您根据数据匹配条件配置自定义值。即，如果您的数据为 0、1、2，则可以使用此配置将“标签”文本替换为“自动”、“打开”、“关闭”。您可以用于匹配的条件是

精确值匹配
范围匹配
部分范围匹配。

新的 panelConfig 项

cells.cell-name.label.valueMappings
cells.cell-name.label.valueMappingsRef

1.10.0

通过放宽预期的 DOM 元素层次结构来扩展 SVG 形状支持的范围。

1.9.0

以平移/缩放的形式添加辅助功能，以确保 SVG 对最大范围的人员具有可读性。

1.8.0

更正了来自传入 DataFrame 的时间字段的来源。之前它依赖于名称为 toLower('time')。现在它正确地查找类型并在与类型时间第一次匹配时中断。这修复了与 ElasticSearch 等数据源的使用，其中字段名称默认为“@timestamp”。

1.7.0

改进所有方面的缩放，尤其是在 100% 以下的缩放，以便现在正确填充面板并保持纵横比。

更改背景颜色定义，使其应用于可用的 svg 面板区域，而不是实际的 svg 背景。

添加了一个新的 panelConfig 字段“unitsPostfix”。这是一个可选字符串，将在标签值后面添加。它可用于指定自定义单位。在 yaml 中，使用 \u 指定 Unicode 字符。即，“\u03bc”= Mu。新的面板配置项

cells.cell-name.label.unitsPostfix

添加了一个新的 panelConfig 字段“condensed”。此模式在同时启用时间滑块和高亮显示器时，为控件使用更少的垂直空间。新的 panelConfig 项

tagConfig.condensed

1.6.0

为插件登录页面添加了网站、许可证和 yaml 定义的资源链接。

修复了 SVG x 维度小于可用窗口时 x 缩放比例。现在它随窗口缩放，而之前它以两倍的速度缩放，导致它比必要的小得多。

添加了驱动 SVG 背景的功能。新的 panelConfig 项

background.darkThemeColor
background.lightThemeColor 可与普通颜色名称、rgb、十六进制值一起使用。当相关项未定义时，不会驱动背景颜色。

将数据点选择从“last”扩展到“last”或“lastNotNull”。“last”仍然是默认值。当与 graphite 函数“keepLastValue”和“transformNull”结合使用时，“last”提供了对显示的最佳控制。在这些 graphite 函数不可用时，“lastNotNull”在处理稀疏数据时提供一致的显示。“lastNotNull”以与“last”相同的数据点开始，然后向后遍历时间，直到找到非空值。它可以在面板 yaml 中的面板级别配置，并在单元格级别和单元格属性级别覆盖。为了使此功能可测试，已在 yaml 中添加了一个“测试”表，以允许以稀疏模式生成 testData。新的面板配置项

datapoint
cells.cell-name.datapoint
cells.cell-name.label.datapoint
cells.cell-name.labelColor.datapoint
cells.cell-name.fillColor.datapoint
test.testDataSparse

添加了“线程高亮显示”。现在，每个驱动的 SVG 单元格都可以分配一组关联的标签，并且可以从可选的“高亮显示器”图例中选择这些标签。这提供了一种方法来突出相关术语，以帮助发现流程中的相关性。新的面板配置项

tagConfig
cells.tags

1.5.0

修复了 Grafana 变量阈值匹配，以便在给定变量/单元格元组的第一个规则匹配时中断。之前它会继续遍历规则集，这意味着还需要各种否定规则才能达到预期的效果。

修复包含多行文本块的 SVG 的渲染。在 domPurify 步骤之前会破坏内容，导致图像无法渲染。现在通过在 domPurify 净化中使用 PARSER_MEDIA_TYPE：'application/xhtml+xml' 来修复此问题。

修复从参数中获取源时链接时间转发的问题。在此之前，如果 url 中存在 from/to 参数，则可以正常工作，但如果缺少这些参数，它会添加它们但设置为“null”，导致下游仪表板出现不存在的时间窗口。现在，如果 url 中不存在这些值，则不会将它们附加到链接中。

公开 decimalPoints=auto。之前默认值为“0”，并且无法指定 auto。现在将 decimalPoints 设置为 null 将会转发为“auto”。还有一个面板级别的覆盖“cellLabelDecimalPoints”，如果未在单元格级别指定值，则会应用此覆盖。为了保持向后兼容性，如果未在单元格或此面板回退中指定，它仍将默认为“0”。