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 GitHub - Jojo211/Grafana-Plugin: A graph time series based which allows to display annotation for show ponctual events..
I go step by step but here I’m blocked 
Could you tell me what are the parameters scope and injector passed to the constructor ??
I hope someone can help me !
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';
