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 rangeStep = Math.floor(legendWidth / valuesNumber); //let valuesRange = d3.range(0, legendWidth, rangeStep);
-    var 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(CoreEvents.graphHover, this.onGraphHover.bind(this), this.scope);
-          appEvents.on('graph-hover-clear', this.onGraphHoverClear.bind(this), this.scope); // Register selection listeners
+          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
             });

src/color_legend.ts

@@ -5,7 +5,8 @@ import * as d3ScaleChromatic from './libs/d3-scale-chromatic/index';
 import {contextSrv} from 'app/core/core';
 import {tickStep} from 'app/core/utils/ticks';
 import coreModule from 'app/core/core_module';
-import { BucketMatrix } from './statusmap_data';
+import { StatusHeatmapCtrl } from "./module";
+import { PanelEvents } from './libs/grafana/events/index';
 
 const LEGEND_STEP_WIDTH = 2;
 
@@ -22,7 +23,7 @@ coreModule.directive('optionsColorLegend', function() {
 
       render();
 
-      ctrl.events.on('render', function() {
+      ctrl.events.on(PanelEvents.render, function() {
         render();
       });
 
@@ -51,11 +52,11 @@ coreModule.directive('statusHeatmapLegend', function() {
     restrict: 'E',
     template: '<div class="status-heatmap-color-legend"><svg width="100px" height="6px"></svg></div>',
     link: function(scope, elem, attrs) {
-      let ctrl = scope.ctrl;
+      let ctrl:StatusHeatmapCtrl = scope.ctrl;
       let panel = scope.ctrl.panel;
 
       render();
-      ctrl.events.on('render', function() {
+      ctrl.events.on(PanelEvents.render, function() {
         render();
       });
 
@@ -83,14 +84,6 @@ coreModule.directive('statusHeatmapLegend', function() {
             }
           }
 
-          // console.log("legend state:", {
-          //   rangeFrom: rangeFrom,
-          //   rangeTo: rangeTo,
-          //   maxValue: maxValue,
-          //   minValue: minValue,
-          //   colorMode: panel.color.mode
-          // });
-
           if (panel.color.mode === 'spectrum') {
             let colorScheme = _.find(ctrl.colorSchemes, {value: panel.color.colorScheme});
             drawColorLegend(elem, colorScheme, rangeFrom, rangeTo, maxValue, minValue);
@@ -109,7 +102,7 @@ coreModule.directive('statusHeatmapLegend', function() {
 
 function drawColorLegend(elem, colorScheme, rangeFrom: number, rangeTo:number, maxValue: number, minValue:number) {
   let legendElem = $(elem).find('svg');
-  let legend = d3.select(legendElem.get(0));
+  let legend: any = d3.select(legendElem.get(0));
   clearLegend(elem);
 
   let legendWidth = Math.floor(legendElem.outerWidth()) - 30;  // narrow legendWidth by 30px to get space for first and last tick values
@@ -265,8 +258,7 @@ function drawDiscreteLegendValues(elem, colorOptions, legendWidth) {
 
   let valuesNumber = thresholds.length;
   let rangeStep  = Math.floor(legendWidth / valuesNumber);
-  let valuesRange = d3.range(0, legendWidth, rangeStep);
+  //let valuesRange = d3.range(0, legendWidth, rangeStep);
-
 
   let legendValueScale = d3.scaleLinear()
     .domain([0, valuesNumber])
@@ -283,7 +275,7 @@ function drawDiscreteLegendValues(elem, colorOptions, legendWidth) {
     .tickValues(d3.range(0, valuesNumber, 1)) //thresholdValues)
     .tickSize(2)
     .tickFormat((t) => {
-      let i = Math.floor(t);
+      let i = Math.floor(t.valueOf());
       let v = thresholdTooltips[i];
       if (v != undefined) {
         return ""+v;

src/libs/grafana/events/appEvents.ts

@@ -0,0 +1,4 @@
+export interface AppEvent<T> {
+    readonly name: string;
+    payload?: T;
+}

src/libs/grafana/events/events.ts

@@ -0,0 +1,16 @@
+import {AppEvent} from './appEvents';
+
+export interface GraphHoverPayload {
+    pos: any;
+    panel: {
+        id: number;
+    };
+}
+
+export var graphHover:(AppEvent<GraphHoverPayload>|string) = {name: 'graph-hover'};
+export var graphHoverClear:(AppEvent<any>|string) = {name: 'graph-hover-clear'};
+
+export function fallbackToStringEvents() {
+    graphHover = 'graph-hover';
+    graphHoverClear = 'graph-hover-clear';
+}

src/libs/grafana/events/index.ts

@@ -0,0 +1,3 @@
+import * as CoreEvents from './events';
+import * as PanelEvents from './panelEvents';
+export { CoreEvents, PanelEvents }

src/libs/grafana/events/panelEvents.ts

@@ -0,0 +1,29 @@
+import { AppEvent } from './appEvents';
+
+export interface DataQueryError {
+    data?: {
+        message?: string;
+        error?: string;
+    };
+    message?: string;
+    status?: string;
+    statusText?: string;
+    refId?: string;
+    cancelled?: boolean;
+}
+
+export var refresh:(AppEvent<undefined>|string) = {name: 'refresh'};
+export var render:(AppEvent<any>|string) = {name: 'render'};
+export var dataError:(AppEvent<DataQueryError>|string) = {name: 'data-error'};
+export var dataReceived:(AppEvent<any[]>|string) = {name: 'data-received'};
+export var dataSnapshotLoad:(AppEvent<any[]>|string) = {name: 'data-snapshot-load'};
+export var editModeInitialized:(AppEvent<undefined>|string) = {name: 'init-edit-mode'};
+
+export function fallbackToStringEvents() {
+    refresh = 'refresh';
+    render = 'render';
+    dataError = 'data-error';
+    dataReceived = 'data-received';
+    dataSnapshotLoad = 'data-snapshot-load';
+    editModeInitialized = 'init-edit-mode';
+}

src/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.
+

src/libs/polygrafill/funcs.ts

@@ -0,0 +1,23 @@
+import { Emitter } from 'app/core/utils/emitter';
+
+// 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.
+export function hasAppEventCompatibleEmitter(emitter: Emitter):boolean {
+    let receiveEvents = 0;
+    let eventId: any = {name: "non-existed-event-id"};
+    let eventId2: any = {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;
+}

src/libs/polygrafill/index.ts

@@ -0,0 +1,2 @@
+import * as Polygrafill from './funcs';
+export { Polygrafill };

src/module.ts

@@ -15,8 +15,11 @@ import {loadPluginCss} from 'app/plugins/sdk';
 // Types
 import { MetricsPanelCtrl } from 'app/plugins/sdk';
 import { AnnotationsSrv } from 'app/features/annotations/annotations_srv';
+import { CoreEvents, PanelEvents } from './libs/grafana/events/index';
 import { Bucket, BucketMatrix } from './statusmap_data';
 import rendering from './rendering';
+import { Polygrafill } from './libs/polygrafill/index';
+
 
 import {ColorModeDiscrete} from "./color_mode_discrete";
 
@@ -60,6 +63,8 @@ loadPluginCss({
   light: 'plugins/flant-statusmap-panel/css/statusmap.light.css'
 });
 
+export var renderComplete:any = {name:'statusmap-render-complete'}; // eventFactory('statusmap-render-complete');
+
 class StatusHeatmapCtrl extends MetricsPanelCtrl {
   static templateUrl = 'module.html';
 
@@ -134,6 +139,12 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
   constructor($scope: any, $injector: auto.IInjectorService, timeSrv, private annotationsSrv: AnnotationsSrv, $window, datasourceSrv, public variableSrv: any, templateSrv) {
     super($scope, $injector);
 
+    if(!Polygrafill.hasAppEventCompatibleEmitter(this.events)){
+      CoreEvents.fallbackToStringEvents();
+      PanelEvents.fallbackToStringEvents();
+      renderComplete = renderComplete.name;
+    }
+
     migratePanelConfig(this.panel);
     _.defaultsDeep(this.panel, this.panelDefaults);
 
@@ -171,14 +182,14 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
     
     this.timeSrv = timeSrv;
 
-    this.events.on('render', this.onRender.bind(this));
+    this.events.on(PanelEvents.render, this.onRender.bind(this));
-    this.events.on('data-received', this.onDataReceived.bind(this));
+    this.events.on(PanelEvents.dataReceived, this.onDataReceived.bind(this));
-    this.events.on('data-error', this.onDataError.bind(this));
+    this.events.on(PanelEvents.dataError, this.onDataError.bind(this));
-    this.events.on('data-snapshot-load', this.onDataReceived.bind(this));
+    this.events.on(PanelEvents.dataSnapshotLoad, this.onDataReceived.bind(this));
-    this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
+    this.events.on(PanelEvents.editModeInitialized, this.onInitEditMode.bind(this));
-    this.events.on('refresh', this.postRefresh.bind(this));
+    this.events.on(PanelEvents.refresh, this.postRefresh.bind(this));
     // custom event from rendering.js
-    this.events.on('render-complete', this.onRenderComplete.bind(this));
+    this.events.on(renderComplete, this.onRenderComplete.bind(this));
 
     this.onCardColorChange = this.onCardColorChange.bind(this);
   }

src/rendering.ts

@@ -8,7 +8,8 @@ import * as d3ScaleChromatic from './libs/d3-scale-chromatic/index';
 import {StatusmapTooltip} from './tooltip';
 import {AnnotationTooltip} from './annotations';
 import { Bucket, BucketMatrix } from './statusmap_data';
-import { StatusHeatmapCtrl } from './module';
+import { StatusHeatmapCtrl, renderComplete } from './module';
+import { CoreEvents, PanelEvents } from './libs/grafana/events/index';
 
 let MIN_CARD_SIZE = 5,
     CARD_H_SPACING = 2,
@@ -90,7 +91,7 @@ export class StatusmapRenderer {
     this.padding = { left: 0, right: 0, top: 0, bottom: 0 };
     this.margin = { left: 25, right: 15, 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);
 
@@ -100,9 +101,9 @@ export class StatusmapRenderer {
 
     // Shared crosshair and tooltip    this.empty = true;
 
-    appEvents.on('graph-hover', this.onGraphHover.bind(this), this.scope);
+    appEvents.on( CoreEvents.graphHover, this.onGraphHover.bind(this), this.scope);
 
-    appEvents.on('graph-hover-clear', this.onGraphHoverClear.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));
@@ -400,7 +401,7 @@ export class StatusmapRenderer {
 
     this._renderAnnotations();
 
-    this.ctrl.events.emit('render-complete', {
+    this.ctrl.events.emit(renderComplete, {
       "chartWidth": this.chartWidth
     });
   }
@@ -608,7 +609,7 @@ export class StatusmapRenderer {
   }
 
   onMouseLeave(e) {
-    appEvents.emit('graph-hover-clear');
+    appEvents.emit(CoreEvents.graphHoverClear);
     this.clearCrosshair();
     this.annotationTooltip.destroy();
   }
@@ -674,7 +675,7 @@ export class StatusmapRenderer {
     pos.panelRelY = Math.max(event.offsetY / this.height, 0.001);
 
     // broadcast to other graph panels that we are hovering
-    appEvents.emit('graph-hover', {pos: pos, panel: this.panel});
+    appEvents.emit(CoreEvents.graphHover, {pos: pos, panel: this.panel});
   }
 
   limitSelection(x2) {

tsconfig.json

@@ -35,7 +35,7 @@
     "downlevelIteration": true,
     "noUnusedLocals": true,
     "pretty": true,
-    "typeRoots": ["./node_modules/@types"] //,/* ,"src/types"*/
+    "typeRoots": ["./node_modules/@types" ] // , "./src/types" ]
     //"types": [
     //  "lodash"
     //]