Plugin grafana panel type

Hi everyone!

I’m trying to devellope a plugin for grafana, a graph which display time series and allows to display events on it by checking checkboxes. (like that we can display part or all type of events)

I have the error ‘Unable to dynamically transpile ES module A loader plugin needs to be configured via SystemJS.config({ transpiler: 'transpiler-module' }). Instantiating http://localhost:8080/public/plugins/grafana-checkbox-panel/module.js Loading plugins/grafana-checkbox-panel/module’.

and grunt put me an warning too ’
Running “babel:dist” (babel) task
Warning: src/graph.js: Unexpected token (14:6) Use --force to continue.’

I made a file module.js, because I know that grafana goes on it. I tried to take example on the chartpie and to check documentation, but I don’t get what’s wrong here :s

I did a repository on github https://github.com/Jojo211/Grafana-Plugin.

I go step by step but here I’m blocked :confused:

Could you tell me what are the parameters scope and injector passed to the constructor ??

I hope someone can help me ! :confused:

Best regards !!

import angular from "angular";
import kbn from "app/core/utils/kbn";
import $ from "jquery";
import "jquery.flot";
import "jquery.flot.time"; 
import {MetricsPanelCtrl} from 'app/plugins/sdk';
import TimeSeries from 'app/core/time_series';

export class graph extends MetricsPanelCtrl {

  constructor($scope, $injector, $rootScope) {
    super($scope, $injector);
    };

var dataset = {    // here is line 14 where the warning comes from 
		
			'Donnees1':{
					label: "Données1",
					data: [[1988, 483994], [1989, 479060], [1990, 457648], [1991, 401949], [1992, 424705], [1993, 402375], [1994, 377867], [1995, 357382], [1996, 337946], [1997, 336185], [1998, 328611], [1999, 329421], [2000, 342172], [2001, 344932], [2002, 387303], [2003, 440813], [2004, 480451], [2005, 504638], [2006, 528692]]
					},
			'Donnees2':{
					label: "Données2",
					data: [[1988, 2341], [1989, 1234123], [1990, 23144], [1991, 23432], [1992, 32345], [1993, 402375], [1994, 377867], [1995, 357382], [1996, 337946], [1997, 336185], [1998, 328611], [1999, 329421], [2000, 342172], [2001, 344932], [2002, 387303], [2003, 440813], [2004, 480451], [2005, 504638], [2006, 528692]]
					},
			'Donnees3':{
					label: "Données3",
					data: [[1988, 656654], [1989, 456436], [1990, 45643], [1991, 546346], [1992, 456346], [1993, 4564356], [1994, 546346], [1995, 56346], [1996, 337946], [1997, 336185], [1998, 328611], [1999, 329421], [2000, 342172], [2001, 344932], [2002, 387303], [2003, 440813], [2004, 480451], [2005, 504638], [2006, 528692]]
					},
			
		};
		

			
		var panneset = {
			"Type1": [{color: "black", lineWidth: 1, xaxis: { from: 1997, to: 1997 }},{color: "black", lineWidth: 1, xaxis: { from: 1994, to: 1994 }}],	

			"Type2": [{color: "#purple", lineWidth: 1, xaxis: { from: 1998, to: 1998 }},{color: "purple", lineWidth: 1, xaxis: { from: 2000, to: 2000 }}],
				
			"Tpye3": [{color: "#B00", lineWidth: 1, xaxis: { from: 2003, to: 2003 }},{color: "#B00", lineWidth: 1, xaxis: { from: 1992, to: 1992 }}, {color: "#B00", lineWidth: 1, xaxis: { from: 1995, to: 1995 }}, {color: "#B00", lineWidth: 1, xaxis: { from: 2005, to: 2005 }},{color: "#B00", lineWidth: 1, xaxis: { from: 2001, to: 2001 }} ]								
		};

		var checkboxlabels = {
			"Type1": {
				label: "Type 1"
				},
			"Type2": {
				label: "Type 2"
				},
			"Tpye3": {
				label: "Type 3"
			}			
		};
		
		// hard-code color indices to prevent them from shifting as
		// countries are turned on/off

		var i = 0;
		$.each(dataset, function(key, val) {
			val.color = i;
			++i;
		});

		var markings = [];
		var data = [];


		var options = {
			//bars: { show: true, barWidth: 0.5, fill: 0.9 },
			xaxis: { ticksDecimals: 0 },
			yaxis: { min: 0 },
			grid: { markings: markings }
		};

		
		// insert checkboxes for panneset
		var choiceContainerPanne = $("#choicepanne");
		$.each(checkboxlabels, function(key, val) {
			choiceContainerPanne.append("<br/><input type='checkbox' name='" + key +
				"' id='id" + key + "'></input>" +
				"<label for='id" + key + "'>"
				+ val.label + "</label>");
		});
		
		// insert checkboxes for dataset
		var choiceContainerData = $("#choicedata");
		$.each(dataset, function(key, val) {
			choiceContainerData.append("<br/><input type='checkbox' name='" + key +
				"' id='id" + key + "'></input>" +
				"<label for='id" + key + "'>"
				+ val.label + "</label>");
		});

		choiceContainerPanne.find("input").click(plotAccordingToChoices);
		choiceContainerData.find("input").click(plotAccordingToChoices);


		function plotAccordingToChoices() {


			choiceContainerData.find("input:checked").each(function () {
				var key = $(this).attr("name");
				if (key && dataset[key]) {

					data.push(dataset[key]);
				}		
			});
			
			choiceContainerPanne.find("input:checked").each(function () {
				var key = $(this).attr("name");
				if (key && panneset[key]) {
				for (var i in panneset[key]){ // on tente le for each pour la tableau pannesets[key].option
					markings.push(panneset[key][i]);
					}
				}		

			});
					
			if (data.length > 0) {
				$.plot("#placeholder", data, options);
				markings.splice(0,markings.length);
				data.splice(0,data.length);

			}
		}
		plotAccordingToChoices();
  }
  
  graph.templateUrl = 'module.html';

please use webpack to transpile & bundle the plugin:

Example here:

Hi Torkel !

Sorry, I don’t really get what I have to do with that. I downloaded the zip file and unzip it. I downloaoded influxdb nightly and I tried to run influxd -config on my command line (Win 10) located on the folder but it doesn’t give anythink :confused:

Can you help me a little more plz ?

Dear Torkel,

I found the application webpack to bundel my plugin. I wrote the config file,

const path = require('path');
const webpack = require('webpack');
//const CopyWebpackPlugin = require('copy-webpack-plugin');
//const CleanWebpackPlugin = require('clean-webpack-plugin');
//const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin');

const packageJson = require('./package.json');


module.exports = {
  node: {
fs: 'empty',
  },
  context: path.join(__dirname, 'src'),
  entry: {
module: './module.js',
  },
  devtool: 'source-map',
  output: {
filename: '[name].js',
path: path.join(__dirname, 'dist'),
libraryTarget: 'amd',
  },
  //option:{mode:development},
performance: {hints: false},
  externals: [
//'lodash',
'jquery',
'flot',
function(context, request, callback) {
  var prefix = 'app/';
  if (request.indexOf(prefix) === 0) {
    return callback(null, request);
  }
  callback();
},
  ],
  
  resolve: {
extensions: ['.ts', '.tsx', '.js'],
	},
  module: {
rules: [
  {
    test: /\.js$/,
    loaders: [
      {
        loader: 'babel-loader',
        options: {presets: ['env']},
      },
		],
  },
  {
    test: /\.css$/,
    use: [{ loader: "style-loader" }, { loader: "css-loader" }]
  },
  {
    test: /\.(jpg|gif|png|svg)$/,
    loader: "file-loader"
  },
  {
    test: /\.(ttf|woff|woff2|eot)/,
    loader: "file-loader"
  }
],
  },
  // webpack se lancera tout le temps en mode watch
  watch: true
};

But I have the following error when I want to build :

ERROR in ./graph.js
Module build failed (from …/node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users******\Desktop\grafana-5.2.4.windows-amd64 (1)\grafana-5.2.4\data\plugins\jojo-checkbox-panel\src\graph.js: var is a reserved word (56:2)

Every expression out of the constructor is considered as a reserved word.

Grafana put me the same error.

Someone can figure out what’s wrong here :s

Thanks a lot !