GrafanaPluginTemplate

This plugin is a template to help you get started with writing a plugin for Grafana in TypeScript.

This template plugin includes:

• A basic Grunt script to build the plugin. Builds TypeScript and copies the required files to the dist directory.

Getting Started

1. Make a subdirectory named after your plugin in the data/plugins subdirectory in your Grafana instance. It does not really matter what the directory name is. When the plugin is installed via the grafana cli, it will create a directory named after the plugin id field in the plugin.json file.

2. Copy the files in this project into your new plugin subdirectory.

3. npm install grunt-cli, grunt-contrib-clean, grunt-typescript, and grunt-contrib-watch

grunt watch will build the TypeScript files and copy everything to the dist directory automatically when a file changes. This is useful for when working on the code.

Changes should be made in the src directory. The build task transpiles the TypeScript code into JavaScript and copies it to the dist directory. Grafana will load the JavaScript from the dist directory and ignore the src directory.

Preparing To Publish Your Plugin On Grafana.com

• The plugin id field in the plugin.json file should be unique and should follow the plugin naming convention: yourorgname-pluginname-datasource.
• If the plugin supports annotations, then change the annotations field in the plugin.json file to true.
• Image links in the plugin are relative to the plugin.json file.
• Everywhere a class is named ChangeMyName, change it your plugin name.
• Commit the dist directory to Git. Grafana cannot build plugins when loading them and will load the JavaScript in the dist directory if it exists.
• The README.md should not contain HTML, only Markdown.
• If the README.md file contains links to images, they should be the GitHub link to the image. For example: https://raw.githubusercontent.com/yourorg/pluginname-datasource/master/src/img/image_name.png

Grafana SDK Mocks

The Grafana SDK Mocks package contains mocks for the Grafana classes that a plugin needs to build in TypeScript. It also contains some of the commonly used util classes that are used in plugins. This allows you to write unit tests for your plugin.

It is already included in the package.json but if you need to add it again then the command is:

npm install --save-dev grafana/grafana-sdk-mocks

It also contains a TypeScript Typings file - common.d.ts that you can refer to in your classes that use classes or functions from core Grafana. Use the following triple slash directive to use Grafana classes in your code. The directive will point the TypeScript compiler at the mocks package so that it can find the files it needs to build. Place the directive at the top of all your TypeScript files:

///<reference path="../node_modules/grafana-sdk-mocks/app/headers/common.d.ts" />