grafana使用d3开发panel
【摘要】 使用d3创建 panel插件简介本文讲解如何使用d3创建一个panel插件如何创建panel插件参考第本系列文章-第一篇为了简化说明,重新修改SimplePanel.tsx文件,初始化成如下:import React from 'react';import { PanelProps } from '@grafana/data';import { SimpleOptions } from 't...
使用d3创建 panel插件
简介
本文讲解如何使用d3创建一个panel插件
如何创建panel插件参考第本系列文章-第一篇
为了简化说明,重新修改
SimplePanel.tsx
文件,初始化成如下:
import React from 'react';import { PanelProps } from '@grafana/data';import { SimpleOptions } from 'types';import { useTheme } from '@grafana/ui'; interface Props extends PanelProps<SimpleOptions> {}export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => { const theme = useTheme(); const values = [4, 8, 15, 16, 23, 42]; const barHeight = height / values.length; return ( <svg width={width} height={height}> <g> {values.map((value, i) => ( <rect x={0} y={i * barHeight} width={value} height={barHeight - 1} fill={theme.palette.greenBase} /> ))} </g> </svg> ); };
操作步骤
grafana已经绑定了d3我们可以直接访问d3包,但是因为开发的时候要使用d3的类型定义,所以需要安装d3的类型定义
yarn add --dev @types/d3
导入 d3到SimplePanel.tsx.
import * as d3 from 'd3';
利用d3的缩放功能重新适配柱状图,创建一个scale,数值的方位在0max(values),对应实际显示柱状图在0svg的width之间
const scale = d3 .scaleLinear() .domain([0, d3.max(values) || 0.0]) .range([0, width]);
重新编写前端渲染函数,使用scale计算宽度
return ( <svg width={width} height={height}> <g> {/* {values.map((value, i) => ( <rect x={0} y={i * barHeight} width={value} height={barHeight - 1} fill={theme.palette.greenBase} /> ))} */} {values.map((value, i) => ( <rect x={0} y={i * barHeight} width={scale(value)} height={barHeight - 1} fill={theme.palette.greenBase} /> ))} </g> </svg> );
完整
SimplePanel.tsx
代码
import React from 'react';import { PanelProps } from '@grafana/data';import { SimpleOptions } from 'types';import { useTheme } from '@grafana/ui';import * as d3 from 'd3'; interface Props extends PanelProps<SimpleOptions> {}export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => { const theme = useTheme(); const values = [4, 8, 15, 16, 23, 42]; const barHeight = height / values.length; const scale = d3 .scaleLinear() .domain([0, d3.max(values) || 0.0]) .range([0, width]); return ( <svg width={width} height={height}> <g> {/* {values.map((value, i) => ( <rect x={0} y={i * barHeight} width={value} height={barHeight - 1} fill={theme.palette.greenBase} /> ))} */} {values.map((value, i) => ( <rect x={0} y={i * barHeight} width={scale(value)} height={barHeight - 1} fill={theme.palette.greenBase} /> ))} </g> </svg> ); };
编译程序
yarn dev
刷新grafana加载程序,如下图可以看到,柱状图可以自己缩放,适应panel的大小,大大的减少了计算的复杂度
添加宽度标尺子
export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => { const theme = useTheme(); const values = [4, 8, 15, 16, 23, 42]; const padding = 20; const chartHeight = height - padding; const barHeight = chartHeight / values.length; const scale = d3 .scaleLinear() .domain([0, d3.max(values) || 0.0]) .range([0, width]); // 声明一个坐标 const axis = d3.axisBottom(scale); return ( <svg width={width} height={height}> {/* 坐标渲染 */} <g transform={`translate(0, ${chartHeight})`} ref={node => { d3.select(node).call(axis as any); }} /> <g> {values.map((value, i) => ( <rect x={0} y={i * barHeight} width={scale(value)} height={barHeight - 1} fill={theme.palette.greenBase} /> ))} </g> </svg> ); };
最终效果如下图
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)