fix: remove messages 'Using strings as events are deprecated'

dist/color_legend.js

@@ -1,9 +1,9 @@
 "use strict";
 
-System.register(["lodash", "jquery", "d3", "./libs/d3-scale-chromatic/index", "app/core/core", "app/core/utils/ticks", "app/core/core_module"], function (_export, _context) {
+System.register(["lodash", "jquery", "d3", "./libs/d3-scale-chromatic/index", "app/core/core", "app/core/utils/ticks", "app/core/core_module", "./libs/grafana/events/index"], function (_export, _context) {
   "use strict";
 
-  var _, $, d3, d3ScaleChromatic, contextSrv, tickStep, coreModule, LEGEND_STEP_WIDTH;
+  var _, $, d3, d3ScaleChromatic, contextSrv, tickStep, coreModule, PanelEvents, LEGEND_STEP_WIDTH;
 
   function drawColorLegend(elem, colorScheme, rangeFrom, rangeTo, maxValue, minValue) {
     var legendElem = $(elem).find('svg');
@@ -120,8 +120,8 @@ System.register(["lodash", "jquery", "d3", "./libs/d3-scale-chromatic/index", "a
     }
 
     var valuesNumber = thresholds.length;
-    var rangeStep = Math.floor(legendWidth / valuesNumber);
-    var valuesRange = d3.range(0, legendWidth, rangeStep);
+    var rangeStep = Math.floor(legendWidth / valuesNumber); //let valuesRange = d3.range(0, legendWidth, rangeStep);
+
     var legendValueScale = d3.scaleLinear().domain([0, valuesNumber]).range([0, legendWidth]);
     var thresholdValues = [];
     var thresholdTooltips = [];
@@ -133,7 +133,7 @@ System.register(["lodash", "jquery", "d3", "./libs/d3-scale-chromatic/index", "a
 
     var xAxis = d3.axisBottom(legendValueScale).tickValues(d3.range(0, valuesNumber, 1)) //thresholdValues)
     .tickSize(2).tickFormat(function (t) {
-      var i = Math.floor(t);
+      var i = Math.floor(t.valueOf());
       var v = thresholdTooltips[i];
 
       if (v != undefined) {
@@ -300,6 +300,8 @@ System.register(["lodash", "jquery", "d3", "./libs/d3-scale-chromatic/index", "a
       tickStep = _appCoreUtilsTicks.tickStep;
     }, function (_appCoreCore_module) {
       coreModule = _appCoreCore_module.default;
+    }, function (_libsGrafanaEventsIndex) {
+      PanelEvents = _libsGrafanaEventsIndex.PanelEvents;
     }],
     execute: function () {
       LEGEND_STEP_WIDTH = 2;
@@ -315,7 +317,7 @@ System.register(["lodash", "jquery", "d3", "./libs/d3-scale-chromatic/index", "a
             var ctrl = scope.ctrl;
             var panel = scope.ctrl.panel;
             render();
-            ctrl.events.on('render', function () {
+            ctrl.events.on(PanelEvents.render, function () {
               render();
             });
 
@@ -350,7 +352,7 @@ System.register(["lodash", "jquery", "d3", "./libs/d3-scale-chromatic/index", "a
             var ctrl = scope.ctrl;
             var panel = scope.ctrl.panel;
             render();
-            ctrl.events.on('render', function () {
+            ctrl.events.on(PanelEvents.render, function () {
               render();
             });
 
@@ -379,14 +381,7 @@ System.register(["lodash", "jquery", "d3", "./libs/d3-scale-chromatic/index", "a
                   } else {
                     rangeFrom = 0;
                   }
-                } // console.log("legend state:", {
-                //   rangeFrom: rangeFrom,
-                //   rangeTo: rangeTo,
-                //   maxValue: maxValue,
-                //   minValue: minValue,
-                //   colorMode: panel.color.mode
-                // });
-
+                }
 
                 if (panel.color.mode === 'spectrum') {
                   var colorScheme = _.find(ctrl.colorSchemes, {

dist/libs/grafana/events/appEvents.js

@@ -0,0 +1,11 @@
+"use strict";
+
+System.register([], function (_export, _context) {
+  "use strict";
+
+  return {
+    setters: [],
+    execute: function () {}
+  };
+});
+//# sourceMappingURL=appEvents.js.map

dist/libs/grafana/events/appEvents.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"appEvents.js"}

dist/libs/grafana/events/events.js

@@ -0,0 +1,29 @@
+"use strict";
+
+System.register([], function (_export, _context) {
+  "use strict";
+
+  var graphHover, graphHoverClear;
+
+  function fallbackToStringEvents() {
+    _export("graphHover", graphHover = 'graph-hover');
+
+    _export("graphHoverClear", graphHoverClear = 'graph-hover-clear');
+  }
+
+  _export("fallbackToStringEvents", fallbackToStringEvents);
+
+  return {
+    setters: [],
+    execute: function () {
+      _export("graphHover", graphHover = {
+        name: 'graph-hover'
+      });
+
+      _export("graphHoverClear", graphHoverClear = {
+        name: 'graph-hover-clear'
+      });
+    }
+  };
+});
+//# sourceMappingURL=events.js.map

dist/libs/grafana/events/events.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/libs/grafana/events/events.ts"],"names":["fallbackToStringEvents","graphHover","graphHoverClear","name"],"mappings":";;;;;;;AAYO,WAASA,sBAAT,GAAkC;AACrC,0BAAAC,UAAU,GAAG,aAAb;;AACA,+BAAAC,eAAe,GAAG,mBAAlB;AACH;;oCAHeF,sB;;;;;4BAHLC,U,GAAkD;AAACE,QAAAA,IAAI,EAAE;AAAP,O;;iCAClDD,e,GAAyC;AAACC,QAAAA,IAAI,EAAE;AAAP,O","sourcesContent":["import {AppEvent} from './appEvents';\n\nexport interface GraphHoverPayload {\n    pos: any;\n    panel: {\n        id: number;\n    };\n}\n\nexport var graphHover:(AppEvent<GraphHoverPayload>|string) = {name: 'graph-hover'};\nexport var graphHoverClear:(AppEvent<any>|string) = {name: 'graph-hover-clear'};\n\nexport function fallbackToStringEvents() {\n    graphHover = 'graph-hover';\n    graphHoverClear = 'graph-hover-clear';\n}\n"],"file":"events.js"}

dist/libs/grafana/events/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+System.register(["./events", "./panelEvents"], function (_export, _context) {
+  "use strict";
+
+  var CoreEvents, PanelEvents;
+  return {
+    setters: [function (_events) {
+      CoreEvents = _events;
+    }, function (_panelEvents) {
+      PanelEvents = _panelEvents;
+    }],
+    execute: function () {
+      _export("CoreEvents", CoreEvents);
+
+      _export("PanelEvents", PanelEvents);
+    }
+  };
+});
+//# sourceMappingURL=index.js.map

dist/libs/grafana/events/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/libs/grafana/events/index.ts"],"names":["CoreEvents","PanelEvents"],"mappings":";;;;;;;;AAAYA,MAAAA,U;;AACAC,MAAAA,W;;;4BACHD,U;;6BAAYC,W","sourcesContent":["import * as CoreEvents from './events';\nimport * as PanelEvents from './panelEvents';\nexport { CoreEvents, PanelEvents }"],"file":"index.js"}

dist/libs/grafana/events/panelEvents.js

@@ -0,0 +1,53 @@
+"use strict";
+
+System.register([], function (_export, _context) {
+  "use strict";
+
+  var refresh, render, dataError, dataReceived, dataSnapshotLoad, editModeInitialized;
+
+  function fallbackToStringEvents() {
+    _export("refresh", refresh = 'refresh');
+
+    _export("render", render = 'render');
+
+    _export("dataError", dataError = 'data-error');
+
+    _export("dataReceived", dataReceived = 'data-received');
+
+    _export("dataSnapshotLoad", dataSnapshotLoad = 'data-snapshot-load');
+
+    _export("editModeInitialized", editModeInitialized = 'init-edit-mode');
+  }
+
+  _export("fallbackToStringEvents", fallbackToStringEvents);
+
+  return {
+    setters: [],
+    execute: function () {
+      _export("refresh", refresh = {
+        name: 'refresh'
+      });
+
+      _export("render", render = {
+        name: 'render'
+      });
+
+      _export("dataError", dataError = {
+        name: 'data-error'
+      });
+
+      _export("dataReceived", dataReceived = {
+        name: 'data-received'
+      });
+
+      _export("dataSnapshotLoad", dataSnapshotLoad = {
+        name: 'data-snapshot-load'
+      });
+
+      _export("editModeInitialized", editModeInitialized = {
+        name: 'init-edit-mode'
+      });
+    }
+  };
+});
+//# sourceMappingURL=panelEvents.js.map

dist/libs/grafana/events/panelEvents.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/libs/grafana/events/panelEvents.ts"],"names":["fallbackToStringEvents","refresh","render","dataError","dataReceived","dataSnapshotLoad","editModeInitialized","name"],"mappings":";;;;;;;AAqBO,WAASA,sBAAT,GAAkC;AACrC,uBAAAC,OAAO,GAAG,SAAV;;AACA,sBAAAC,MAAM,GAAG,QAAT;;AACA,yBAAAC,SAAS,GAAG,YAAZ;;AACA,4BAAAC,YAAY,GAAG,eAAf;;AACA,gCAAAC,gBAAgB,GAAG,oBAAnB;;AACA,mCAAAC,mBAAmB,GAAG,gBAAtB;AACH;;oCAPeN,sB;;;;;yBAPLC,O,GAAuC;AAACM,QAAAA,IAAI,EAAE;AAAP,O;;wBACvCL,M,GAAgC;AAACK,QAAAA,IAAI,EAAE;AAAP,O;;2BAChCJ,S,GAA8C;AAACI,QAAAA,IAAI,EAAE;AAAP,O;;8BAC9CH,Y,GAAwC;AAACG,QAAAA,IAAI,EAAE;AAAP,O;;kCACxCF,gB,GAA4C;AAACE,QAAAA,IAAI,EAAE;AAAP,O;;qCAC5CD,mB,GAAmD;AAACC,QAAAA,IAAI,EAAE;AAAP,O","sourcesContent":["import { AppEvent } from './appEvents';\n\nexport interface DataQueryError {\n    data?: {\n        message?: string;\n        error?: string;\n    };\n    message?: string;\n    status?: string;\n    statusText?: string;\n    refId?: string;\n    cancelled?: boolean;\n}\n\nexport var refresh:(AppEvent<undefined>|string) = {name: 'refresh'};\nexport var render:(AppEvent<any>|string) = {name: 'render'};\nexport var dataError:(AppEvent<DataQueryError>|string) = {name: 'data-error'};\nexport var dataReceived:(AppEvent<any[]>|string) = {name: 'data-received'};\nexport var dataSnapshotLoad:(AppEvent<any[]>|string) = {name: 'data-snapshot-load'};\nexport var editModeInitialized:(AppEvent<undefined>|string) = {name: 'init-edit-mode'};\n\nexport function fallbackToStringEvents() {\n    refresh = 'refresh';\n    render = 'render';\n    dataError = 'data-error';\n    dataReceived = 'data-received';\n    dataSnapshotLoad = 'data-snapshot-load';\n    editModeInitialized = 'init-edit-mode';\n}\n"],"file":"panelEvents.js"}

dist/libs/polygrafill/README.md

@@ -0,0 +1,8 @@
+1. @grafana/data is not supported in grafana 5.x and 6.2. The workaround is
+the module `./libs/grafana/events` that include copy-pasted events
+from @grafana/data and app/core from grafana sources.
+
+2. Newly Grafana versions flood Console with
+"Usage strings as events is deprecated ..." messages.
+This module has a function to detect if Grafana’s Emitter support AppEvent style event ids.
+

dist/libs/polygrafill/funcs.js

@@ -0,0 +1,38 @@
+"use strict";
+
+System.register([], function (_export, _context) {
+  "use strict";
+
+  // Old Grafana releases use strings as event ids and
+  // new event ids in form of object {name: "event-id"} are not
+  // supported properly: first defined listener will receive
+  // all emitted events despite of the value in 'name' field.
+  //
+  // This method detects this behaviour and return true
+  // only for new Grafana versions.
+  function hasAppEventCompatibleEmitter(emitter) {
+    var receiveEvents = 0;
+    var eventId = {
+      name: "non-existed-event-id"
+    };
+    var eventId2 = {
+      name: "non-existed-event-id-2"
+    };
+    emitter.on(eventId, function () {
+      receiveEvents++;
+    });
+    emitter.emit(eventId);
+    emitter.emit(eventId2);
+    emitter.removeAllListeners(eventId); // New Grafana versions should receive one event.
+
+    return receiveEvents == 1;
+  }
+
+  _export("hasAppEventCompatibleEmitter", hasAppEventCompatibleEmitter);
+
+  return {
+    setters: [],
+    execute: function () {}
+  };
+});
+//# sourceMappingURL=funcs.js.map

dist/libs/polygrafill/funcs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/libs/polygrafill/funcs.ts"],"names":["hasAppEventCompatibleEmitter","emitter","receiveEvents","eventId","name","eventId2","on","emit","removeAllListeners"],"mappings":";;;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,WAASA,4BAAT,CAAsCC,OAAtC,EAAgE;AACnE,QAAIC,aAAa,GAAG,CAApB;AACA,QAAIC,OAAY,GAAG;AAACC,MAAAA,IAAI,EAAE;AAAP,KAAnB;AACA,QAAIC,QAAa,GAAG;AAACD,MAAAA,IAAI,EAAE;AAAP,KAApB;AACAH,IAAAA,OAAO,CAACK,EAAR,CAAWH,OAAX,EAAoB,YAAU;AAC1BD,MAAAA,aAAa;AAChB,KAFD;AAGAD,IAAAA,OAAO,CAACM,IAAR,CAAaJ,OAAb;AACAF,IAAAA,OAAO,CAACM,IAAR,CAAaF,QAAb;AACAJ,IAAAA,OAAO,CAACO,kBAAR,CAA2BL,OAA3B,EATmE,CAWnE;;AACA,WAAOD,aAAa,IAAI,CAAxB;AACH;;0CAbeF,4B","sourcesContent":["import { Emitter } from 'app/core/utils/emitter';\n\n// Old Grafana releases use strings as event ids and\n// new event ids in form of object {name: \"event-id\"} are not\n// supported properly: first defined listener will receive\n// all emitted events despite of the value in 'name' field.\n//\n// This method detects this behaviour and return true\n// only for new Grafana versions.\nexport function hasAppEventCompatibleEmitter(emitter: Emitter):boolean {\n    let receiveEvents = 0;\n    let eventId: any = {name: \"non-existed-event-id\"};\n    let eventId2: any = {name: \"non-existed-event-id-2\"};\n    emitter.on(eventId, function(){\n        receiveEvents++;\n    });\n    emitter.emit(eventId);\n    emitter.emit(eventId2);\n    emitter.removeAllListeners(eventId);\n\n    // New Grafana versions should receive one event.\n    return receiveEvents == 1;\n}\n"],"file":"funcs.js"}

dist/libs/polygrafill/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+System.register(["./funcs"], function (_export, _context) {
+  "use strict";
+
+  var Polygrafill;
+  return {
+    setters: [function (_funcs) {
+      Polygrafill = _funcs;
+    }],
+    execute: function () {
+      _export("Polygrafill", Polygrafill);
+    }
+  };
+});
+//# sourceMappingURL=index.js.map

dist/libs/polygrafill/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/libs/polygrafill/index.ts"],"names":["Polygrafill"],"mappings":";;;;;;;;AAAYA,MAAAA,W;;;6BACHA,W","sourcesContent":["import * as Polygrafill from './funcs';\nexport { Polygrafill };"],"file":"index.js"}

dist/module.js

@@ -1,9 +1,9 @@
 "use strict";
 
-System.register(["lodash", "./color_legend", "./options_editor", "./tooltip_editor", "./panel_config_migration", "app/core/utils/kbn", "app/plugins/sdk", "./statusmap_data", "./rendering", "./color_mode_discrete"], function (_export, _context) {
+System.register(["lodash", "./color_legend", "./options_editor", "./tooltip_editor", "./panel_config_migration", "app/core/utils/kbn", "app/plugins/sdk", "./libs/grafana/events/index", "./statusmap_data", "./rendering", "./libs/polygrafill/index", "./color_mode_discrete"], function (_export, _context) {
   "use strict";
 
-  var _, optionsEditorCtrl, tooltipEditorCtrl, migratePanelConfig, kbn, loadPluginCss, MetricsPanelCtrl, Bucket, BucketMatrix, rendering, ColorModeDiscrete, VALUE_INDEX, TIME_INDEX, colorSchemes, colorModes, opacityScales, StatusHeatmapCtrl;
+  var _, optionsEditorCtrl, tooltipEditorCtrl, migratePanelConfig, kbn, loadPluginCss, MetricsPanelCtrl, CoreEvents, PanelEvents, Bucket, BucketMatrix, rendering, Polygrafill, ColorModeDiscrete, VALUE_INDEX, TIME_INDEX, colorSchemes, colorModes, opacityScales, renderComplete, StatusHeatmapCtrl;
 
   function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
@@ -43,11 +43,16 @@ System.register(["lodash", "./color_legend", "./options_editor", "./tooltip_edit
     }, function (_appPluginsSdk) {
       loadPluginCss = _appPluginsSdk.loadPluginCss;
       MetricsPanelCtrl = _appPluginsSdk.MetricsPanelCtrl;
+    }, function (_libsGrafanaEventsIndex) {
+      CoreEvents = _libsGrafanaEventsIndex.CoreEvents;
+      PanelEvents = _libsGrafanaEventsIndex.PanelEvents;
     }, function (_statusmap_data) {
       Bucket = _statusmap_data.Bucket;
       BucketMatrix = _statusmap_data.BucketMatrix;
     }, function (_rendering) {
       rendering = _rendering.default;
+    }, function (_libsPolygrafillIndex) {
+      Polygrafill = _libsPolygrafillIndex.Polygrafill;
     }, function (_color_mode_discrete) {
       ColorModeDiscrete = _color_mode_discrete.ColorModeDiscrete;
     }],
@@ -149,6 +154,11 @@ System.register(["lodash", "./color_legend", "./options_editor", "./tooltip_edit
         light: 'plugins/flant-statusmap-panel/css/statusmap.light.css'
       });
 
+      _export("renderComplete", renderComplete = {
+        name: 'statusmap-render-complete'
+      }); // eventFactory('statusmap-render-complete');
+
+
       _export("PanelCtrl", _export("StatusHeatmapCtrl", StatusHeatmapCtrl =
       /*#__PURE__*/
       function (_MetricsPanelCtrl) {
@@ -244,6 +254,13 @@ System.register(["lodash", "./color_legend", "./options_editor", "./tooltip_edit
             seriesFilterIndex: -1
           });
 
+          if (!Polygrafill.hasAppEventCompatibleEmitter(_this.events)) {
+            CoreEvents.fallbackToStringEvents();
+            PanelEvents.fallbackToStringEvents();
+
+            _export("renderComplete", renderComplete = renderComplete.name);
+          }
+
           migratePanelConfig(_this.panel);
 
           _.defaultsDeep(_this.panel, _this.panelDefaults);
@@ -276,20 +293,20 @@ System.register(["lodash", "./color_legend", "./options_editor", "./tooltip_edit
           _this.annotationsSrv = annotationsSrv;
           _this.timeSrv = timeSrv;
 
-          _this.events.on('render', _this.onRender.bind(_assertThisInitialized(_this)));
+          _this.events.on(PanelEvents.render, _this.onRender.bind(_assertThisInitialized(_this)));
 
-          _this.events.on('data-received', _this.onDataReceived.bind(_assertThisInitialized(_this)));
+          _this.events.on(PanelEvents.dataReceived, _this.onDataReceived.bind(_assertThisInitialized(_this)));
 
-          _this.events.on('data-error', _this.onDataError.bind(_assertThisInitialized(_this)));
+          _this.events.on(PanelEvents.dataError, _this.onDataError.bind(_assertThisInitialized(_this)));
 
-          _this.events.on('data-snapshot-load', _this.onDataReceived.bind(_assertThisInitialized(_this)));
+          _this.events.on(PanelEvents.dataSnapshotLoad, _this.onDataReceived.bind(_assertThisInitialized(_this)));
 
-          _this.events.on('init-edit-mode', _this.onInitEditMode.bind(_assertThisInitialized(_this)));
+          _this.events.on(PanelEvents.editModeInitialized, _this.onInitEditMode.bind(_assertThisInitialized(_this)));
 
-          _this.events.on('refresh', _this.postRefresh.bind(_assertThisInitialized(_this))); // custom event from rendering.js
+          _this.events.on(PanelEvents.refresh, _this.postRefresh.bind(_assertThisInitialized(_this))); // custom event from rendering.js
 
 
-          _this.events.on('render-complete', _this.onRenderComplete.bind(_assertThisInitialized(_this)));
+          _this.events.on(renderComplete, _this.onRenderComplete.bind(_assertThisInitialized(_this)));
 
           _this.onCardColorChange = _this.onCardColorChange.bind(_assertThisInitialized(_this));
           return _this;

dist/rendering.js

@@ -1,9 +1,9 @@
 "use strict";
 
-System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/core", "d3", "./libs/d3-scale-chromatic/index", "./tooltip", "./annotations"], function (_export, _context) {
+System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/core", "d3", "./libs/d3-scale-chromatic/index", "./tooltip", "./annotations", "./module", "./libs/grafana/events/index"], function (_export, _context) {
   "use strict";
 
-  var _, $, moment, kbn, appEvents, contextSrv, d3, d3ScaleChromatic, StatusmapTooltip, AnnotationTooltip, MIN_CARD_SIZE, CARD_H_SPACING, CARD_V_SPACING, CARD_ROUND, DATA_RANGE_WIDING_FACTOR, DEFAULT_X_TICK_SIZE_PX, DEFAULT_Y_TICK_SIZE_PX, X_AXIS_TICK_PADDING, Y_AXIS_TICK_PADDING, MIN_SELECTION_WIDTH, Statusmap, StatusmapRenderer;
+  var _, $, moment, kbn, appEvents, contextSrv, d3, d3ScaleChromatic, StatusmapTooltip, AnnotationTooltip, renderComplete, CoreEvents, PanelEvents, MIN_CARD_SIZE, CARD_H_SPACING, CARD_V_SPACING, CARD_ROUND, DATA_RANGE_WIDING_FACTOR, DEFAULT_X_TICK_SIZE_PX, DEFAULT_Y_TICK_SIZE_PX, X_AXIS_TICK_PADDING, Y_AXIS_TICK_PADDING, MIN_SELECTION_WIDTH, Statusmap, StatusmapRenderer;
 
   function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
@@ -68,6 +68,11 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
       StatusmapTooltip = _tooltip.StatusmapTooltip;
     }, function (_annotations) {
       AnnotationTooltip = _annotations.AnnotationTooltip;
+    }, function (_module) {
+      renderComplete = _module.renderComplete;
+    }, function (_libsGrafanaEventsIndex) {
+      CoreEvents = _libsGrafanaEventsIndex.CoreEvents;
+      PanelEvents = _libsGrafanaEventsIndex.PanelEvents;
     }],
     execute: function () {
       MIN_CARD_SIZE = 5;
@@ -192,14 +197,14 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
             top: 10,
             bottom: 20
           };
-          this.ctrl.events.on('render', this.onRender.bind(this));
+          this.ctrl.events.on(PanelEvents.render, this.onRender.bind(this));
           this.ctrl.tickValueFormatter = this.tickValueFormatter.bind(this); /////////////////////////////
           // Selection and crosshair //
           /////////////////////////////
           // Shared crosshair and tooltip    this.empty = true;
 
-          appEvents.on('graph-hover', this.onGraphHover.bind(this), this.scope);
-          appEvents.on('graph-hover-clear', this.onGraphHoverClear.bind(this), this.scope); // Register selection listeners
+          appEvents.on(CoreEvents.graphHover, this.onGraphHover.bind(this), this.scope);
+          appEvents.on(CoreEvents.graphHoverClear, this.onGraphHoverClear.bind(this), this.scope); // Register selection listeners
 
           this.$heatmap.on('mousedown', this.onMouseDown.bind(this));
           this.$heatmap.on('mousemove', this.onMouseMove.bind(this));
@@ -484,7 +489,7 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
 
             this._renderAnnotations();
 
-            this.ctrl.events.emit('render-complete', {
+            this.ctrl.events.emit(renderComplete, {
               "chartWidth": this.chartWidth
             });
           }
@@ -698,7 +703,7 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
         }, {
           key: "onMouseLeave",
           value: function onMouseLeave(e) {
-            appEvents.emit('graph-hover-clear');
+            appEvents.emit(CoreEvents.graphHoverClear);
             this.clearCrosshair();
             this.annotationTooltip.destroy();
           }
@@ -769,7 +774,7 @@ System.register(["lodash", "jquery", "moment", "app/core/utils/kbn", "app/core/c
 
             pos.panelRelY = Math.max(event.offsetY / this.height, 0.001); // broadcast to other graph panels that we are hovering
 
-            appEvents.emit('graph-hover', {
+            appEvents.emit(CoreEvents.graphHover, {
               pos: pos,
               panel: this.panel
             });