ACE.SVG

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

基于 React 的 Grafana SVG 面板插件

Screenshot of plugin

这是适用于 Grafana 10.x+ 的 SVG 面板插件

为什么又来一个 SVG 面板插件？

是的，我确实考虑过将其命名为 YASPP... 现有的 SVG 面板插件都使用了 7.0 版本之前的 Angular 面板 API。我希望能够利用新的数据 API 中的所有功能，以及迁移到 React 可能带来的性能提升。我还在某种程度上采用了与一些其他 SVG 插件不同的方向/理念。

它是如何工作的？

本插件的用户需要拥有在矢量设计软件（参见 Inkscape、Adobe Illustrator 或 draw.io 等网页工具）中创建的、可进行动画处理的 SVG 图形。
用户将现有的 SVG 布局上传到插件中，然后启用“点击映射”功能，以便轻松地将任意组、路径或文本 span 的 ID 映射到命名令牌。
然后，用户在 init 函数中执行额外的设置任务，该函数在每次加载 SVG 面板时都会被调用。
最后，用户可以使用 render 函数（面板每次接收到新数据时调用）中通过命名令牌访问 SVG 的元素。
用户在 render 或 init 函数中的代码可以访问所有映射的元素、根 SVG 文档、一个临时状态存储以及面板的 DataFrames。

此项目的目标是什么？

成为在 Grafana 中可视化任意 SVG 图形和动画的最高性能方式
不碍事 - 本插件将专注于提供简单、显而易见的工具，以减少将静态 SVG 图形转换为数据驱动的可视化的阻力，同时不限制您的选择。
保持专注 - 本插件不会尝试成为一个在线图形编辑器。

入门指南

创建一个新面板并选择 ACE.SVG 作为可视化类型
将您的 SVG 源文件粘贴到“SVG Document”选项卡编辑器中。
使用“SVG Mapping”选项卡中的“点击映射”功能将 SVG 元素映射到变量。
在“User JS Init”选项卡编辑器中编写您希望在仪表盘加载时运行一次的代码。
在“User JS Render”选项卡编辑器中编写您希望在接收到数据时运行的代码。
充分利用浏览器 JS 控制台和 console.log() 来探索插件和 SVG.js 的功能。

执行环境接口

插件在 Init 和 Render 函数的执行上下文中提供了几个访问 SVG 文档和 Grafana 的接口。以下是每个接口的详细信息，请记住您始终可以使用浏览器 JS 控制台和 console.log() 来获取更多详细信息。

svgmap 是一个 JS 对象，其中每个映射的 SVG.js 元素都作为属性可用。示例：如果您有一个 svgid 为 'rect4524' 并提供了映射名称 bigSquare，您可以通过 svgmap.bigSquare 访问该元素上的 SVG.js 方法。svgmap 也包含在 options.svgMappings 中。
data 是 Grafana 传递给面板用于渲染的原始对象，它包含 DataFrames，其中包含活动查询和时间范围选择的所有时序数据。这个接口有点复杂和冗长，因此我们将添加辅助方法来简化常见用例。Grafana DataFrame 文档
options 是由仪表盘管理用于存储面板状态的原始面板 options 对象。它包含 SVG 和函数的源代码，以及任何映射或其他配置数据。虽然您可以使用此接口手动访问面板的所有内容，但最常见的用例是从 Init 函数向其添加属性，供 Render 函数后续使用。例如，如果面板中有一个常见的动画，您可以在 Init 中创建一个函数来设置它，并将其作为属性附加到 options 对象上，以便您可以在 Render 函数中使用它并保持逻辑流程清晰。
svgnode 是对 SVG.js 对象的引用。
context 是一个最初为空的对象，传递给 init 函数。init 函数可以存储您希望在 init 和渲染之间保留的任何上下文或状态。这不是必需的，但对于某些高级用例（例如，init 函数中的 svg 生成器）来说，能够在 init 和 render 之间（以及在不同的渲染调用之间）传递数据会很有用。

'data' 对象既包含查询定义，也包含查询结果。对于用户初始化函数，很可能（尚）没有结果，但应该存在查询定义。这对于某些初始渲染目的可能有用，但建议谨慎使用，因为查询可能会更新（例如当用户正在更新查询时），所以在此处完成的任何操作可能也应在 update 函数中完成。