Grafana Plotly 面板插件使用教程

1. 项目的目录结构及介绍

grafana-plotly-panel/
├── CHANGELOG.md
├── LICENSE
├── README.md
├── dist/
├── img/
├── package.json
├── src/
│   ├── module.ts
│   ├── plugin.json
│   ├── types.ts
│   └── utils.ts
├── tsconfig.json
└── webpack.config.js

• CHANGELOG.md: 记录项目的更新日志。
• LICENSE: 项目的开源许可证。
• README.md: 项目的介绍和使用说明。
• dist/: 编译后的文件存放目录。
• img/: 项目中使用的图片资源。
• package.json: 项目的依赖和脚本配置。
• src/: 源代码目录。
  • module.ts: 主要逻辑模块。
  • plugin.json: 插件的配置文件。
  • types.ts: 类型定义文件。
  • utils.ts: 工具函数文件。
• tsconfig.json: TypeScript 配置文件。
• webpack.config.js: Webpack 打包配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 src/module.ts，这个文件包含了插件的主要逻辑和初始化代码。在启动 Grafana 时，Grafana 会加载这个文件并执行其中的初始化代码。

// src/module.ts
import { PanelPlugin } from '@grafana/data';
import { PlotlyPanel } from './PlotlyPanel';
import { PlotlyPanelEditor } from './PlotlyPanelEditor';
import { defaults, PlotlyPanelOptions } from './types';

export const plugin = new PanelPlugin<PlotlyPanelOptions>(PlotlyPanel)
  .setDefaults(defaults)
  .setEditor(PlotlyPanelEditor);

3. 项目的配置文件介绍

项目的配置文件主要是 src/plugin.json，这个文件定义了插件的基本信息和配置选项。

{
  "type": "panel",
  "name": "Plotly Panel",
  "id": "natel-plotly-panel",
  "info": {
    "description": "A Grafana panel plugin to render plotly charts",
    "author": {
      "name": "Natel Energy"
    },
    "keywords": ["plotly", "chart", "panel"],
    "logos": {
      "small": "img/plotly_logo.svg",
      "large": "img/plotly_logo.svg"
    },
    "links": [
      {"name": "Website", "url": "https://github.com/NatelEnergy/grafana-plotly-panel"},
      {"name": "License", "url": "https://github.com/NatelEnergy/grafana-plotly-panel/blob/master/LICENSE"}
    ],
    "version": "0.0.1",
    "updated": "2021-05-01"
  },
  "dependencies": {
    "grafanaVersion": "7.0.x",
    "plugins": []
  }
}

• type: 插件类型，这里是 panel。
• name: 插件名称。
• id: 插件的唯一标识符。
• info: 插件的详细信息，包括描述、作者、关键词、图标、链接、版本和更新日期。
• dependencies: 插件的依赖信息，包括 Grafana 版本和依赖的其他插件。

以上是 Grafana Plotly 面板插件的基本使用教程，希望对你有所帮助。