簡介

前一篇文章，筆者探討了如何使用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 組件渲染代碼內使用該參數,圓的半徑動態的傳入

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}`}

>

{/* 修改后代碼 */}

{radii.map((radius, index) => {

return ;

})}

{/*

修改前代碼

*/}

總結

以上是生活随笔為你收集整理的grafana mysql插件_grafana插件动态数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。