插件〉流程

面板

社区

流程

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

流程

SVG 流程图可视化

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

示例 1

example1

示例 2

example2

示例 3

example3

目标受众

详细说明分布式系统流程的仪表板很快就变得很大，通常可以从某种架构图表中获得一些引导。此面板旨在支持这些图表。您可以在 rich editor（例如 draw.io）中创建 SVG，然后通过 yaml 配置将数据系列和阈值关联起来。除了用数据注释图表外，您还可以添加链接，允许您点击不同的小部件并深入了解所选组件的“展开”视图。

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

该面板不仅限于仅显示最后值。我们已经支付了拉取时间范围的成本，因此此面板允许您在任何这些时间点查看图表。通过时间滑块来回移动以查看您的流程演变。这不需要 grafana 负载，因为数据系列已经检索到；我们只是在改变兴趣点。

功能集

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

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

数据文件可以粘贴到面板中，也可以从外部URL（如github）加载。面板首次渲染时显示的是last-values流程图，即时间窗口的末端。但这是可以移动的。面板底部的“时间滑块”允许遍历整个时间序列，以便您可以看到流程如何在时间窗口内演变。

支持的可视化包括

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

请注意，面板中不内置对工具提示的支持，但可以在SVG中定义，并在面板悬停时由底层框架显示。要在draw.io中设置工具提示，请选择“部件 -> 编辑 -> 编辑工具提示”；或按<ALT><SHFT>T。

入门指南

在您的仪表板上创建一个流程面板。初始设置通过urls加载此存储库中的第一个示例。它还启用了test-timeseries-enrichment。这些测试时间序列确保初始仪表板有一些数据可以显示。它为您提供了一个即开即用的示例。

探索

缩放
- 更改Grafana面板的大小和形状。查看SVG自动缩放以填充内容，同时保持宽高比。
时间滑块
- 拖动时间滑块前后。查看流程标签、标签颜色、填充颜色根据定义的阈值变化。
- 打开面板编辑器并禁用时间滑块，查看SVG扩展到额外空间并恢复到last values。
链接
- 将鼠标移至单元格上。查看光标变为指针。单击并跳转到相关链接。
- 将鼠标移至“活动工作者”单元格上。注意鼠标没有变化，因为没有相关链接。
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如何变为未标注。重新选择，并看到颜色和值恢复。
调试：注意，以下步骤都需要您打开浏览器控制台。
- 数据：按按钮并展开调试数据原始和调试数据丰富的两行日志。原始视图是Grafana发送到面板的时间序列。丰富视图是在包含测试数据后数据。在丰富视图中，每个使用的时间序列都有一个对应的时间序列，并且时间序列还显示了基于时间滑块位置选择的值索引。
- 映射：按按钮，您将获得抽象和详细日志行。抽象行显示了SVG单元ID是如何分配给时间序列的。详细行提供了所有SVG映射信息。
- 单位：按按钮并展开显示每个潜在单位的分类 -> 子分类 -> {文本，值}的日志行。在yaml配置中输入的单位字符串是这里显示的值。
- 颜色：按按钮并查看可用的Grafana主题色调。每种色调都有多种阴影。这些颜色名称可以直接用于yaml。或者，您可以输入短十六进制、长十六进制、rgb或hsl。所有这些格式都将被识别，并且与渐变选择一起工作。如果您想输入HTML颜色名称，它们将通过SVG传递，但面板无法理解，因此渐变将没有效果。
- SVG：按按钮并查看正在显示的序列化SVG。将其复制出来以与传入的SVG模板进行比较或保存为快照图像。
- 时间：按按钮来测量下一次渲染过程。这允许您看到时间是如何消耗的
  - toDataFrame：面板只理解dataframe格式，因此第一步是将传入数据转换为这种格式。如果您不确定接收到的格式是什么，请在查询检查器中运行查询并查看响应。例如，dataframe将包含一个字段数组，而时间序列将包含一个数据点或点数组。请注意，移动时间滑块需要刷新渲染过程，并且面板无法判断接收到的数据是否是刷新获取的结果。因此，此步骤必须在每次移动时间滑块时重复。但是，如果传入的数据不是dataframe格式，这一步骤将非常昂贵。
  - 转换：这会将数据框架转换为该面板插值所需的格式。这是一个轻量级的数组重构。
  - seriesExtend：这会添加测试时间序列。只有当面板选项中启用了测试时间序列时，您才会看到它。
  - seriesInterpolate：此功能将每个时间数组进行插值，以确定给定时间滑块位置的正确索引。
  - svgUpdate：此功能将标签和阈值设置应用到文档中。
  - createJsx：此功能从svg文档html创建JSX。

使用draw.io创建您的SVG

任何工具都可以用来维护您的SVG，但draw.io是所有这些示例中使用的工具。draw.io可在网上使用，也可作为应用程序下载。启动在线版本或桌面应用程序时，您必须确保通过转到额外选项->插件->添加->svgdata.js添加svgdata插件。该插件确保单元格ID被保存到SVG文件中。请注意，在2024年9月之前，可以通过带有参数?p=svgdata的在线版本启动，以自动启用插件。现在这个尾缀不再起作用，因此您必须像刚才描述的那样添加插件。

可以通过选择单元格然后编辑->编辑数据->双击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的唯一原因是在维护一系列面板时。在检索文件之前，将用Grafana变量替换panelConfig和siteConfig URL。这为您提供了多站点配置的一定程度。

也可以使用Grafana变量来扩展阈值定义。例如，如果您有一个环境变量，您可以在开发环境和生产环境中不同地扩展阈值。

这些链接带您到文档化的yaml文件

环境设置与编辑工作流

通过以下方式使用三个IDE作为一个整体的集合来创建面板是最佳的

安装draw.io应用程序，并通过转到额外选项->插件->添加->svgdata.js添加svgdata插件。使用应用程序而不是在线版本，可以更轻松地从本地磁盘加载和保存。
为您的svg和yaml文件创建一个github仓库。这提供了许多东西，但真正重要的是提供了一个中央枢纽，从那里可以加载和编辑文件。
安装VSCode用于查看和编辑上述仓库。它提供了yaml语法高亮显示，并提供了一个复制svg并将其粘贴到面板中的地方。
使用上述设置，遵循以下迭代工作流程
- draw.io：编辑svg ->另存为svg。注意：如果使用Flow动画或包含嵌入图像的部件，您必须选择导出为 -> SVG...而不是仅仅保存。
- vscode: 复制svg -> 将其粘贴到Grafana面板中
- vscode: 编辑panelConfig yaml -> 复制yaml -> 将yaml粘贴到Grafana面板中
- 重复使用此工作流程，所有三个编辑器（draw.io/vscode/grafana）都保持打开状态，仅作为专业窗口。尽管您可以直接在Grafana面板中编辑yaml或svg，但您会发现将它们复制/粘贴到面板中并使用GitHub仓库作为底层主要版本要简单得多。

第一个面板

一旦您熟悉了控件，创建您的第一个合适的面板将归结为以下过程

在draw.io中创建一个SVG并编辑单元格ID为有意义的名称。最初保持最小化。
复制一个示例panelConfig，因为它是通过使用testData的cellIds设置的。将cellIds编辑为与您的SVG ID匹配。
创建您的Flow面板并将其设置为从SVG和您的panelConfig驱动。
查看您的SVG以正确的单位响应测试数据。
在单独的时间序列面板中开发您的时间序列查询，直到您对结果满意。记住在您的Flow面板中使用时将时间序列别名为有意义的名称。
将您的查询复制到Flow面板中。
按“调试数据”以查看您的查询时间序列进入面板。
更改您的面板配置dataRef以将单元格ID映射到您的时间序列名称。
使用时间滑块查看您的值是否正确地在SVG中回显。
重复上述步骤。

功能探索

所有面板功能的API详细说明在yaml_defs中。这些功能也在配置仪表板中进行了演示。在下面的数据文件列中链接了用于这些仪表板的关联SVG和yaml文件，它们是探索功能驱动的良好起点。请注意，当您点击SVG链接时，您最初会停留在预览选项卡。只需切换到代码选项卡即可复制SVG。

要探索每个功能，将SVG和yaml数据复制/粘贴到您的面板中。这为您提供了一个工作的起点，您可以从中探索，同时阅读相关的API。探索这些功能最好是通过遵循上述环境设置和编辑工作流程。对于大多数功能，通过移动时间滑块来查看功能最佳。

功能	描述	设置	数据文件
背景颜色	通常背景颜色保持不变，但面板yaml可以定义darkTheme和lightTheme颜色。如果存在yaml字段，则背景颜色由它驱动。转到用户 -> 个人资料以从深色主题更改到浅色主题。		svg, panelConfig
定制驱动	定制驱动演示了如何通过mathjs公式驱动任何svg属性。有关详细信息，请参阅下面的定制驱动示例。	变量 `myVar`	svg，面板配置
复合颜色	这展示了复合颜色，根据数据引用的聚合来驱动单元格颜色字段的能力。面板显示了基于聚合函数 'max' 和 'min' 驱动的 labelColor、fillColor 和 strokeColor。默认情况下，阈值继承其数组位置作为其顺序，但可以显式设置顺序项。'inverse' 方框展示了逆序阈值，导致最小数据显示为最大颜色。当单色驱动与复合驱动一起定义时，单色驱动位于元素 0 处。这在 'both' 单元格中得到了演示。		svg，面板配置
小数点	这展示了面板级别的小数点覆盖。每个方框在单元格级别有不同的小数点设置，最后一个方框在单元格级别未定义，因此回退到面板级别的默认值。		svg，面板配置
填充水平	填充水平由 SVG clip-path 功能支持。yaml 将数据映射到填充百分比，然后驱动一个应用的 clip-path rect 以实现所需的填充水平。面板展示了以下功能：(1) 不同的椭圆、rect 和 path 形状都被正确填充。(2) 四个矩形十字架展示了四种填充方向。(3) 'blue' 展示了在 SVG 中定义的静态填充颜色。(4) 底部四个矩形显示了百分比上限、可选的 'off' 设置和自有数据引用。请注意，具有复杂内部细节的形状，如 DB 和 circle-inner-cross，由于包含多个路径元素，因此它们无法完美渲染，因为它们包含多个重叠的 clip 和填充区域。		svg，面板配置
流量动画	draw.io 有一个名为 'flow animation' 的线属性。当选中时，该线以特定方向和速率动画，以可视化流量。为了在面板中提供这些动画，您必须使用 draw.io 的 `导出为 -> SVG` 而不是 `保存`。yaml 数据假设基于符号的方向性，但可以通过将其标记为单向来自定义。动画持续时间由三个边界定义：关闭、低和高。当 yaml 数据中出现动画时，在底部的左下角可见一个控件。这取决于可见性，位于 timeSlider -> highlighter -> own 部分。面板选项还允许选择初始动画状态。		svg，面板配置
链接	这显示了带有绝对和相对链接、有时间和无时间的窗口小部件。第三行显示了在站点和面板配置中定义的变量替换。第四行显示了 `${cell.name}` 保留变量替换。这个 yaml 只在这个存储库的配置设置下工作，因为相对链接必须指向同一站点中的内容。它包含在这里是因为它确实提供了一套工作示例，有助于演示如何配置功能。请注意，要使时间变量转发正常工作，`from` 和 `to` 变量必须在原始 URL 中。		svg，面板配置，站点配置
描边颜色	这演示了描边颜色。它展示了形状和线条如何根据阈值和传入数据来着色其描边组件。		svg，面板配置
线程高亮	这演示了线程高亮。单元格被标记为属性类型和技术类型，允许在这些维度上突出显示数据。这背后的意图是为了更容易地发现相关性。		svg，面板配置
单位	这演示了正常单位及其与Grafana缩放相关的自定义单位，这些自定义单位是通过使用unitsPostfix yaml字段指定的。它展示了正常的ASCII字符和Unicode字符。		svg，面板配置
值映射	这演示了通过基于范围的替换在面板配置级别和站点配置级别进行值映射。Grafana变量替换应用于“低”状态下的文本值。	变量 `exampleVar`	svg，面板配置，站点配置
缩放、平移和捏合	这演示了缩放、平移和捏合的可配置性，它支持启用以及轮激活键。激活键很有帮助，因为仪表板滚动和面板缩放之间存在利益冲突。	平移/缩放已启用	svg，面板配置

定制驱动示例

该面板以下列方式演示了定制驱动

左上角矩形 - 与左上角周围的数据缩放
中间矩形 - 通过Grafana变量替换演示了由定制数据驱动的矩形标签。
左下角范围环 - 与中心周围的数据缩放，标签再次由值别名驱动的 bespokeDataRef 驱动。
中间时钟 - 手围绕中心旋转，展示了命名空间与正常描边颜色驱动的结合。第二个时钟利用与第一个时钟相同的公式，但使用不同的数据，这是由于在每时钟常数中设置的数据Ref名称。
中间底部的箭头 - 显示基于数据的头部（即方向）的可配置性。
左边的“矩形列” - 显示所有正常的驱动都由在驱动级别定义的 bespokeDataRefs 驱动。
右边的“矩形列” - 显示所有正常的驱动都由在单元格级别定义的 bespokeDataRefs 驱动。
右螺旋桨 - 显示两条路径，每条路径对应一个叶片，围绕一个设定原点旋转，两者都带有连贯的填充级别驱动。

故障排除常见问题

当我编辑SVG并重新保存后，什么也不工作了？
- 这很可能是由于在draw.io中没有加载svgdata插件，导致所有ID都被从SVG中移除。如果不确定，请查看两个SVG版本的差异。
我的标签没有被驱动，尽管“调试映射”显示它被正确映射？
- 这很可能是由于SVG中有一个多行标签。多行不可驱动。您的标签可以是多词的，但不能包含<CRs>。
我添加了一个矩形，并且它正确地映射到了yaml，但标签没有显示？
- 仅仅添加一个矩形是不够的。您还必须在其中双击并输入一些文本来添加标签。然后标签就可以被驱动。
我的流程动画在draw.io中看起来很好，但在面板中不工作？
- 这很可能是由于您保存SVG的方式造成的。流程动画必须从draw.io“导出为svg”，而不能只是“保存为svg”。
我的小部件在draw.io中渲染良好，但在面板中缺少细节或者根本不存在？
- 这很可能是由于您保存SVG的方式造成的。更复杂的小部件必须从draw.io“导出为svg”，而不能只是“保存为svg”。
我的时间序列稀疏，通常最后一个值是null，导致小部件没有显示标签值？
- 默认情况下，“数据点”选择是“最后一个”，但可以将其更改为“最后一个非null”。在“最后一个非null”模式下，数据点会从当前时间回溯，直到遇到非null的数据值。

想要进行更改？

前往Grafana入门指南，开始下载分支并设置测试环境。一旦设置完成，您将找到可用的仪表板（来自配置目录），它们充当功能演示。

在Grafana Cloud上安装Flow

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

变更日志

1.16.6 YAML maxAliasCount

yaml加载器递归别名计数已从库默认值增加100倍，以允许更大、更复杂的配置，同时不会使仪表板暴露在不合理的负载之下。

下载徽章修复

根据最近的GitHub更改，已修复下载徽章。

1.16.5 SVG格式化支持改进

在最新版本的draw.io（v24.7.8）中编辑的图表格式化导致了标签布局问题；尤其是如果标签是多词的话。现在通过在初始化时删除标签中的多个空格并进一步限制应用空格样式'pre'，应该已修复此问题。

时间滑块标签

对时间滑块时区应用和标签定位进行了改进，以消除在不使用浏览器时间或24小时时钟时出现的伪影。

入门文档改进

文档中增加了三个新章节。

环境设置与编辑工作流

功能探索

故障排除常见问题

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 单数据点dataFrames

已添加对传入数据的支持，该数据没有相关的时间数组，只有数组中的单个数据点。

特制属性驱动器

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

不允许以'on'开头的属性值。
只能添加'transform'、'transform-origin'、'visibility'属性。
任何其他属性值都可以驱动，前提是在svg解析后仍然存在该属性。

panelConfig中的新配置术语

panelConfig:cells.cell-name.bespoke
panelConfig:cells.cell-name.bespokeDataRef
panelConfig:cells.cell-name.label.bespokeDataRef
面板配置：cells.cell-name.labelColor.bespokeDataRef
面板配置：cells.cell-name.fillColor.bespokeDataRef
面板配置：cells.cell-name.strokeColor.bespokeDataRef
面板配置：cells.cell-name.flowAnim.bespokeDataRef
面板配置：cells.cell-name.fillLevel.bespokeDataRef

与时间移位兼容的时间滑块时间范围

修正了时间滑块时间范围的初始化方式，使其在配合面板查询选项的时间移位时能正确行为。

1.15.0

这个版本从未发布，但包含了一个基于客户端定义的javascript的1.16.0早期版本。在后续版本中，这个驱动被完全重写，仅使用客户端定义的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

复合颜色

这个功能允许根据数据Ref输入数组来驱动labelColor、strokeColor或fillColor。例如，您可以根据一组输入选择最差或最好的颜色。为此，在'threshold'中添加了一个新字段'order'。它默认为阈值数组的索引，但可以在yaml中显式驱动。这是用于比较来自不同数据Ref的阈值的术语。总的来说，它可能不需要，但它的加入意味着不需要对所有阈值定义进行隐式排序。新的配置项

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

1.13.0 填充水平

添加了对驱动填充级别的支持。yaml定义了data->percentage-fill映射。在内部，它使用SVG clip-path功能实现。计算形状的边界框，并向SVG添加一个额外的clip-path rect。然后，根据传入的数据驱动此rect。新的配置项

cells.cell-name.fillLevel

描边颜色

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

cells.cell-name.strokeColor

在ValueMappings中使用Grafana变量替换

添加了对通过Grafana变量替换valueMappings文本的支持。例如，用变量值替换时序中的所有值：cell abc: valueMappings: - {text = "${myVariableName}"}

1.12.0 URL Grafana变量

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

字符串数据

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

相对链接

添加了对相对链接的支持。在此之前，只有绝对链接可用。

1.11.0 流动动画

添加了对draw.io线条流动动画的支持。在draw.io中，当选择“流动动画”并导出为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

一个数据点插值修复

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

值映射支持

这允许您根据数据匹配标准配置自定义值。例如，如果您的数据是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

正确地从传入的数据帧中获取时间字段来源。之前它依赖于名称是小写('time')，现在它正确地查找类型并在第一个匹配类型为time时拆分。这修复了与ElasticSearch等数据源的使用，其中字段名称默认为'@timestamp'。

1.7.0

以各种方式提高缩放能力，尤其是对于小于100%的缩放，现在它可以正确填充面板并保持纵横比。

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

添加了一个新的panelConfig字段'unitsPostfix'。这是一个可选的字符串，将被追加到标签值之后。它可以用于指定自定义单位。在yaml中，Unicode字符用\u指定。例如，"\u03bc" = Mu。新的panel配置术语

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的层面和单元格层面以及单元格属性层面进行配置。为了使此功能可测试，已经添加了一个'test'表到yaml中，允许在稀疏模式下生成testData。新的panel配置术语包括

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

添加“线程突出显示”。每个可驱动的SVG单元现在可以分配一个关联的标签集，这些标签可以从可选的“突出显示”图例中进行选择。这提供了一种将相关术语提出来帮助发现流中的关联的方法。新的面板配置术语包括

标签配置
单元.标签

1.5.0

修复了Grafana变量阈值匹配，使其在给定的变量/单元元组首次匹配规则时断出。在此之前，它会继续遍历规则集，这意味着还需要各种负规则才能达到预期的效果。

修复了包含多行文本块的SVG的渲染。在之前的domPurify步骤中，它会中断内容，导致图像无法渲染。现在通过在domPurify清理中使用PARSER_MEDIA_TYPE: 'application/xhtml+xml'来修复这个问题。

修复了从参数中获取时的链接时间转发。在之前，如果from/to参数存在于url中，则可以正确工作，但如果它们不存在，则会添加它们但设置为'null'，从而导致下游仪表板有一个不存在的时窗。现在，如果值不在url中，则不会将其附加到链接中。

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