grafana插件动态数据

简介

前一篇文章，笔者探讨了如何使用grafana创建插件，以及制作配置面板，本文介绍如何把sql查询结果内的数据显示到pannel面板内。

数据准备

mysql 数据源

drop table if EXISTS  `table1`;
CREATE TABLE `table1` (
    `id` INT ( 11 ) NOT NULL AUTO_INCREMENT,
    `create_time` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE        CURRENT_TIMESTAMP COMMENT '销售记录的月份',
    `value` INT ( 11 ) DEFAULT 0 COMMENT '值',
PRIMARY KEY ( `id` ) 
) ENGINE = INNODB AUTO_INCREMENT = 4 DEFAULT CHARSET = utf8;

insert into table1 (`create_time`,`value`) VALUES 
        ("2020-10-18 00:00:00",1),
        ("2020-10-19 00:00:00",2),
        ("2020-10-20 00:00:00",60);

操作步骤

• 新建pannel查询，在dashboard上新建上一篇文章创建好的pannel，编辑sql语句，填入如下sql：

SELECT
  create_time AS "time",
  `value` AS `value`
FROM table1
--  WHERE
--  $__timeFilter(create_time)

• 数据源的查询结果在插件内可以通过data传递给pannel组件,在SimplePanel.tsx文件内添加如下代码，读取查询结果number类型的列的最后一个数据。

const radii = data.series
 .map(series => series.fields.find(field => field.type === 'number'))
 .map(field => field?.values.get(field.values.length - 1));

• 在SimplePanel.tsx 组件渲染代码内使用该参数,圆的半径动态的传入

      <svg
        className={styles.svg}
        width={width}
        height={height}
        xmlns="http://www.w3.org/2000/svg"
        xmlnsXlink="http://www.w3.org/1999/xlink"
        viewBox={`-${width / 2} -${height / 2} ${width} ${height}`}
      >
        {/* 修改后代码 */}
      <g fill={color}>
        {radii.map((radius, index) => {
          return <circle r={radius} />;
        })}
      </g>
        {/* 
        修改前代码
        <g>
        <circle style={{ fill: color }} r={100} />
        </g> */}
      </svg>

完整代码