grafana mysql插件_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 组件渲染代码内使用该参数,圆的半径动态的传入

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插件动态数据相关推荐

mysql 百度地图插件_GitHub - huizhong/grafana-baidumap-panel: Grafana 百度地图插件
Baidumap Panel Plugin for Grafana Grafana的百度地图插件,基于WorldMap修改.主要的可视化功能有:更换AK.添加/删除控件.更换主题.更改地图级别,测距工 ...
自己做一个table插件 (一)Ajax获取数据后动态生成table
今天我给大家带来一个简单的JQ插件,Ajax获取数据后动态生成table.当然,有这种功能的插件有很多.著名的有DataTable.JqGrid--它们虽然功能丰富,成熟,拿来做二次开发是一个不错的选 ...
excel连接mysql插件_Excel插件之连接数据数据库秒数处理，办公轻松化
接上文,对excel连接数据库需求的进一步优化: 1.通过mysql for excel 插件的思路,了解到一个新的插件 sqlcel,通过这个插件excel连接数据库,可以将数据库中的数据导入exc ...
MySQL审计之插件
通过审计插件可以记录服务器活动,记录谁连接到服务器,运行了什么查询,访问了哪些表,能存储到日志文件或发送到本地syslogd守护进程.目前可用的插件有mariaDB的插件.percona的插件.和ma ...
yum安装Apache、PHP、Mysql及扩展插件
yum安装Apache.PHP.Mysql及扩展插件环境:CentOS 6.3 最小化安装参考 https://www.cnblogs.com/ylnic/archive/2011/03/27/19 ...
mysql安装innodb插件
1.可以用 show engines;或者show plugins;来查看 mysql> show plugins; +----------------------------+-------- ...
制作一个谷歌浏览器插件，实现网页数据爬虫
一.什么是浏览器插件浏览器插件,基于浏览器的原有功能,另外增加新功能的工具,是可定制浏览体验的小型软件程序,让用户可以根据个人需要或偏好来定制浏览器. 如拦截网页中的广告.划词翻译.倍速视频等等. ...
虚幻4连接mysql蓝图教程_ue4商城资源MySQL Integration数据库集成插件
Unreal Engine虚幻游戏引擎素材资源 Unreal Engine Marketplace –MySQL Integration MySQL集成 MySQL集成是一个插件,允许您将UE4项目与 ...
连接mysql插件_MySQL 插件之连接控制插件(Connection-Control)
插件介绍 MySQL 5.7.17 以后提供了Connection-Control插件用来控制客户端在登录操作连续失败一定次数后的响应的延迟.该插件可有效的防止客户端暴力登录的风险(攻击).该插件包含 ...

grafana mysql插件_grafana插件动态数据

grafana mysql插件_grafana插件动态数据相关推荐

最新文章

热门文章