Referencing External Javascript - (SystemJS) this is undefined

Grafana Plugin Development
1

Hi,

I’m trying to develop my fist plug-in for Grafana which will incorporate a Plotly heatmap.

Taking inspiration from https://github.com/NatelEnergy/grafana-plotly-panel I’ve included plotly.js in an dist/external file.

However when I reference Plotly with an import…

import * as Plotly from './external/plotly'

I’m getting an error:

(SystemJS) this is undefined
Error loading http://grafana.staged-by-discourse.com/public/plugins/myplugin/module.js

import {PanelCtrl} from 'app/plugins/sdk';
import _ from 'lodash';
import * as Plotly from './external/plotly'

const panelDefaults = {
  message: 'Bar Foo'
}

export class HeatmapControl extends PanelCtrl {
  constructor($scope, $injector) {
    super($scope, $injector);    
    _.defaults(this.panel, panelDefaults);
    
    this.events.on('init-edit-mode', this.onInitEditMode.bind(this));        
    this.events.on('panel-initialized', this.render.bind(this));
    this.events.on('panel-teardown', this.onPanelTeardown.bind(this));
  }

  onInitEditMode() {
    this.addEditorTab('Options', 'public/plugins/unify-group-plotly-heatmap-panel/editor.html', 2);
  }

  onPanelTeardown() {
    //Clean up code goes here.
  }

  render() {
    console.log("render");
  }
}

HeatmapControl.templateUrl = 'module.html';
2

My bad. T’was a problem with the npm-scripts not copying everything to the plugins directory!

1 Like