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>

完整代码