Referencing External Javascript - (SystemJS) this is undefined


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

Taking inspiration from 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://localhost:3000/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);'init-edit-mode', this.onInitEditMode.bind(this));   'panel-initialized', this.render.bind(this));'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() {

HeatmapControl.templateUrl = 'module.html';

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

1 Like