用D3.js构建一个面板插件gydF4y2Ba

简介gydF4y2Ba

面板是Grafana的构建块，允许您以不同的方式可视化数据。本教程向您介绍如何使用gydF4y2BaD3.jsgydF4y2Ba．gydF4y2Ba

有关面板的更多信息，请参阅关于gydF4y2Ba面板gydF4y2Ba．gydF4y2Ba

在本教程中，你将:gydF4y2Ba

• 构建一个简单的面板插件来可视化条形图。gydF4y2Ba
• 学习如何使用D3.js使用数据驱动转换构建面板。gydF4y2Ba

设置环境gydF4y2Ba

在开始构建插件之前，您需要设置插件开发环境。gydF4y2Ba

为了发现插件，Grafana扫描agydF4y2Ba插件目录gydF4y2Ba，其位置取决于您的操作系统。gydF4y2Ba

1. 创建一个名为gydF4y2Bagrafana-pluginsgydF4y2Ba在你喜欢的工作场所。gydF4y2Ba

2. 找到gydF4y2Ba插件gydF4y2Ba属性，并在配置文件中设置gydF4y2Ba插件gydF4y2Ba属性到你的路径gydF4y2Bagrafana-pluginsgydF4y2Ba目录中。请参阅gydF4y2BaGrafana配置文档gydF4y2Ba获取更多信息。gydF4y2Ba

   [paths] plugins = "/path/to/grafana-plugins"gydF4y2Ba

3. 重新启动Grafana(如果它已经在运行)，以加载新的配置。gydF4y2Ba

替代方法:DockergydF4y2Ba

如果您不想在本地机器上安装Grafana，可以使用gydF4y2Ba码头工人gydF4y2Ba．gydF4y2Ba

使用Docker为插件开发设置Grafana，运行以下命令:gydF4y2Ba

Docker运行-d -p 3000:3000 -v "$(pwd)"/grafana-plugins:/var/lib/grafana/plugins——name=grafana grafana/grafana:7.0.0 .gydF4y2Ba

由于Grafana只在启动时加载插件，所以无论何时添加或删除插件，都需要重新启动容器。gydF4y2Ba

Docker重启grafanagydF4y2Ba

创建一个新插件gydF4y2Ba

现代web开发工具可能很难让你理解。虽然你当然可以编写自己的webpack配置，但在本指南中，你将使用grafana创建插件工具gydF4y2Ba

GrafanagydF4y2Bacreate-plugin工具gydF4y2Ba是一个CLI应用程序，简化了Grafana插件的开发，这样你就可以专注于代码。该工具为您搭建了一个启动器插件和所有必需的配置。gydF4y2Ba

1. 在plugin目录下，使用create-plugin从模板中创建一个插件:gydF4y2Ba

   npx @grafana / create-plugingydF4y2Ba

2. 将目录更改为新创建的插件:gydF4y2Ba

   cd my-plugingydF4y2Ba

3. 安装依赖项:gydF4y2Ba

   线安装gydF4y2Ba

4. 构建插件:gydF4y2Ba

   纱线开发gydF4y2Ba

5. 重新启动Grafana服务器以发现您的插件。gydF4y2Ba

6. 打开Grafana，转到gydF4y2Ba配置gydF4y2Ba->gydF4y2Ba插件gydF4y2Ba．确保你的插件在那里。gydF4y2Ba

默认情况下，每当发现插件时，Grafana都会记录日志:gydF4y2Ba

INFO[01-01|12:00:00]正在注册plugin logger=plugins name=my-plugingydF4y2Ba

数据驱动文件gydF4y2Ba

D3.jsgydF4y2Ba是一个JavaScript库，用于基于数据操作文档。它允许您将任意数据转换为HTML，并且通常用于创建可视化。gydF4y2Ba

等一下。根据数据操作文档?这听起来很像React。事实上，你可以用D3完成的很多事情，你已经可以用React完成了。所以在我们开始看D3之前，让我们看看如何从数据中创建SVG，只使用React。gydF4y2Ba

在gydF4y2BaSimplePanel.tsxgydF4y2Ba,改变gydF4y2BaSimplePanelgydF4y2Ba返回gydF4y2BasvggydF4y2Ba与一个gydF4y2Ba矩形gydF4y2Ba元素。gydF4y2Ba

export const SimplePanel: React。FC = ({options, data, width, height}) => {const theme = useTheme();返回();};gydF4y2Ba

单个矩形可能不太令人兴奋，因此让我们看看如何从数据中创建矩形。gydF4y2Ba

1. 创建一些我们可以可视化的数据。gydF4y2Ba

   Const值= [4,8,15,16,23,42];gydF4y2Ba

2. 根据面板的高度，计算出各杆的高度。gydF4y2Ba

   const barHeight = height / values.length;gydF4y2Ba

3. 在SVG组中，gydF4y2BaggydF4y2Ba，创建gydF4y2Ba矩形gydF4y2Ba元素为数据集中的每个值。每个矩形都使用该值作为宽度。gydF4y2Ba

   返回();gydF4y2Ba

4. 重新构建插件并重新加载浏览器以查看所做的更改。gydF4y2Ba

如您所见，React完全能够动态创建HTML元素。事实上，使用React创建元素通常比使用D3创建元素更快。gydF4y2Ba

为什么要用D3呢?在下一步中，我们将了解如何利用D3的数据转换。gydF4y2Ba

使用D3.js转换数据gydF4y2Ba

在这一步中，你将看到如何在使用React渲染数据之前使用D3转换数据。gydF4y2Ba

D3已经与Grafana捆绑在一起，您可以通过导入gydF4y2Bad3gydF4y2Ba包中。但是，在开发过程中我们将需要类型定义。gydF4y2Ba

1. 安装D3类型定义:gydF4y2Ba

   Yarn添加——dev @types/d3gydF4y2Ba

2. 进口gydF4y2Bad3gydF4y2Ba在gydF4y2BaSimplePanel.tsxgydF4y2Ba．gydF4y2Ba

   Import * as d3 from 'd3';gydF4y2Ba

在前面的步骤中，我们必须以像素为单位定义每个条的宽度。相反，我们用gydF4y2Ba尺度gydF4y2Ba从D3库中使每个条的宽度依赖于面板的宽度。gydF4y2Ba

比例尺是将一段值映射到另一段值的函数。在本例中，我们希望将数据集中的值映射到面板中的某个位置。gydF4y2Ba

1. 创建一个比例尺，将数据集中0到最大值之间的值映射到0到面板宽度之间的值。我们将用这个来计算棒子的宽度。gydF4y2Ba

   const scale = d3. scallinear () .domain([0, d3.max(values) || 0.0]) .range([0, width]);gydF4y2Ba

2. 将该值传递给缩放函数以计算条的宽度(单位为像素)。gydF4y2Ba

   返回();gydF4y2Ba

正如你所看到的，即使我们使用React来呈现实际的元素，D3库包含了有用的工具，你可以在呈现数据之前使用它们来转换数据。gydF4y2Ba

添加一个轴gydF4y2Ba

D3工具箱中另一个有用的工具是生成功能gydF4y2Ba轴gydF4y2Ba．在图表中添加坐标轴可以让用户更容易理解每个柱之间的差异。gydF4y2Ba

让我们看看如何使用D3向柱状图添加横轴。gydF4y2Ba

1. 创建一个D3轴。注意，通过使用与之前相同的刻度，我们可以确保条宽与轴上的刻度对齐。gydF4y2Ba

   const轴= d3.axisBottom(scale);gydF4y2Ba

2. 生成轴。虽然D3需要为轴生成元素，但我们可以通过在匿名函数中生成它们来封装它gydF4y2Ba裁判gydF4y2Ba到组元素gydF4y2BaggydF4y2Ba．gydF4y2Ba

    {d3.select(node)。调用(任意轴);}} / >gydF4y2Ba

默认情况下，轴呈现在SVG元素的顶部。我们想要将它移动到底部，但要做到这一点，我们首先需要通过降低每个棒的高度来为它腾出空间。gydF4y2Ba

1. 根据填充高度计算新的杆高。gydF4y2Ba

   Const padding = 20;const chartHeight = height - padding;const barHeight = chartHeight / values.length;gydF4y2Ba

2. 的变换来平移轴gydF4y2BaggydF4y2Ba元素。gydF4y2Ba

    {d3.select(node). gydF4y2Ba

恭喜!您已经创建了一个简单且响应迅速的柱状图。gydF4y2Ba

完整的示例gydF4y2Ba

import React fromimport {PanelProps} from '@grafana/data';import {SimpleOptions} from 'types';import {useTheme} from '@grafana/ui';Import * as d3 from 'd3';interface Props extends PanelProps {} export const SimplePanel: React。FC = ({options, data, width, height}) => {const theme = useTheme();Const值= [4,8,15,16,23,42];const scale = d3. scallinear () .domain([0, d3.max(values) || 0.0]) .range([0, width]);const轴= d3.axisBottom(scale);Const padding = 20; const chartHeight = height - padding; const barHeight = chartHeight / values.length; return (  ); };

总结gydF4y2Ba