Fix panel rendering timeout

- minor code cleanups

dist/README.md

@@ -1,7 +1,8 @@
 # Statusmap panel for Grafana
 
 ![Statusmap sample panel](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/flant-statusmap-panel.png)
-(https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/flant-statusmap-panel-dark.png)
+
+![Statusmap sample panel with dark theme](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/flant-statusmap-panel-dark.png)
 
 
 ## Features

dist/module.js

@@ -1,13 +1,13 @@
 'use strict';
 
-System.register(['app/plugins/sdk', './color_legend', './status_heatmap_ctrl'], function (_export, _context) {
+System.register(['app/plugins/sdk', './status_heatmap_ctrl'], function (_export, _context) {
   "use strict";
 
   var loadPluginCss, StatusHeatmapCtrl;
   return {
     setters: [function (_appPluginsSdk) {
       loadPluginCss = _appPluginsSdk.loadPluginCss;
-    }, function (_color_legend) {}, function (_status_heatmap_ctrl) {
+    }, function (_status_heatmap_ctrl) {
       StatusHeatmapCtrl = _status_heatmap_ctrl.StatusHeatmapCtrl;
     }],
     execute: function () {

dist/module.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/module.js"],"names":["loadPluginCss","StatusHeatmapCtrl","dark","light"],"mappings":";;;;;;;;AAAQA,mB,kBAAAA,a;;AAECC,uB,wBAAAA,iB;;;;AAETD,oBAAc;AACZE,cAAM,sDADM;AAEZC,eAAO;AAFK,OAAd;;2BAOEF,iB","file":"module.js","sourcesContent":["import {loadPluginCss} from 'app/plugins/sdk';\nimport './color_legend';\nimport { StatusHeatmapCtrl } from './status_heatmap_ctrl';\n\nloadPluginCss({\n  dark: 'plugins/flant-statusmap-panel/css/statusmap.dark.css',\n  light: 'plugins/flant-statusmap-panel/css/statusmap.light.css'\n});\n\n\nexport {\n  StatusHeatmapCtrl as PanelCtrl\n};\n"]}
+{"version":3,"sources":["../src/module.js"],"names":["loadPluginCss","StatusHeatmapCtrl","dark","light"],"mappings":";;;;;;;;AAAQA,mB,kBAAAA,a;;AACCC,uB,wBAAAA,iB;;;;AAETD,oBAAc;AACZE,cAAM,sDADM;AAEZC,eAAO;AAFK,OAAd;;2BAMEF,iB","file":"module.js","sourcesContent":["import {loadPluginCss} from 'app/plugins/sdk';\nimport { StatusHeatmapCtrl } from './status_heatmap_ctrl';\n\nloadPluginCss({\n  dark: 'plugins/flant-statusmap-panel/css/statusmap.dark.css',\n  light: 'plugins/flant-statusmap-panel/css/statusmap.light.css'\n});\n\nexport {\n  StatusHeatmapCtrl as PanelCtrl\n};\n"]}

dist/status_heatmap_ctrl.js

@@ -1,6 +1,6 @@
 'use strict';
 
-System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/kbn', './rendering', './options_editor', './color_mode_discrete'], function (_export, _context) {
+System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/kbn', './color_legend', './rendering', './options_editor', './color_mode_discrete'], function (_export, _context) {
   "use strict";
 
   var MetricsPanelCtrl, _, contextSrv, kbn, rendering, statusHeatmapOptionsEditor, ColorModeDiscrete, CANVAS, SVG, VALUE_INDEX, TIME_INDEX, panelDefaults, renderer, colorSchemes, colorModes, opacityScales, StatusHeatmapCtrl;
@@ -44,7 +44,7 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
       contextSrv = _appCoreCore.contextSrv;
     }, function (_appCoreUtilsKbn) {
       kbn = _appCoreUtilsKbn.default;
-    }, function (_rendering) {
+    }, function (_color_legend) {}, function (_rendering) {
       rendering = _rendering.default;
     }, function (_options_editor) {
       statusHeatmapOptionsEditor = _options_editor.statusHeatmapOptionsEditor;
@@ -109,7 +109,7 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
       { name: 'Blues', value: 'interpolateBlues', invert: 'dark' }, { name: 'Greens', value: 'interpolateGreens', invert: 'dark' }, { name: 'Greys', value: 'interpolateGreys', invert: 'dark' }, { name: 'Oranges', value: 'interpolateOranges', invert: 'dark' }, { name: 'Purples', value: 'interpolatePurples', invert: 'dark' }, { name: 'Reds', value: 'interpolateReds', invert: 'dark' },
 
       // Sequential (Multi-Hue)
-      { name: 'BuGn', value: 'interpolateBuGn', invert: 'dark' }, { name: 'BuPu', value: 'interpolateBuPu', invert: 'dark' }, { name: 'GnBu', value: 'interpolateGnBu', invert: 'dark' }, { name: 'OrRd', value: 'interpolateOrRd', invert: 'dark' }, { name: 'PuBuGn', value: 'interpolatePuBuGn', invert: 'dark' }, { name: 'PuBu', value: 'interpolatePuBu', invert: 'dark' }, { name: 'PuRd', value: 'interpolatePuRd', invert: 'dark' }, { name: 'RdPu', value: 'interpolateRdPu', invert: 'dark' }, { name: 'YlGnBu', value: 'interpolateYlGnBu', invert: 'dark' }, { name: 'YlGn', value: 'interpolateYlGn', invert: 'dark' }, { name: 'YlOrBr', value: 'interpolateYlOrBr', invert: 'dark' }, { name: 'YlOrRd', value: 'interpolateYlOrRd', invert: 'darm' }];
+      { name: 'BuGn', value: 'interpolateBuGn', invert: 'dark' }, { name: 'BuPu', value: 'interpolateBuPu', invert: 'dark' }, { name: 'GnBu', value: 'interpolateGnBu', invert: 'dark' }, { name: 'OrRd', value: 'interpolateOrRd', invert: 'dark' }, { name: 'PuBuGn', value: 'interpolatePuBuGn', invert: 'dark' }, { name: 'PuBu', value: 'interpolatePuBu', invert: 'dark' }, { name: 'PuRd', value: 'interpolatePuRd', invert: 'dark' }, { name: 'RdPu', value: 'interpolateRdPu', invert: 'dark' }, { name: 'YlGnBu', value: 'interpolateYlGnBu', invert: 'dark' }, { name: 'YlGn', value: 'interpolateYlGn', invert: 'dark' }, { name: 'YlOrBr', value: 'interpolateYlOrBr', invert: 'dark' }, { name: 'YlOrRd', value: 'interpolateYlOrRd', invert: 'dark' }];
       colorModes = ['opacity', 'spectrum', 'discrete'];
       opacityScales = ['linear', 'sqrt'];
 
@@ -123,6 +123,7 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
 
           _this.onRenderComplete = function (data) {
             _this.graph.chartWidth = data.chartWidth;
+            _this.renderingCompleted();
           };
 
           _this.calculateInterval = function () {
@@ -344,6 +345,7 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
           _this.events.on('init-edit-mode', _this.onInitEditMode);
           _this.events.on('render', _this.onRender);
           _this.events.on('refresh', _this.postRefresh);
+          // custom event from rendering.js
           _this.events.on('render-complete', _this.onRenderComplete);
           return _this;
         }

src/module.js

@@ -1,5 +1,4 @@
 import {loadPluginCss} from 'app/plugins/sdk';
-import './color_legend';
 import { StatusHeatmapCtrl } from './status_heatmap_ctrl';
 
 loadPluginCss({
@@ -7,7 +6,6 @@ loadPluginCss({
   light: 'plugins/flant-statusmap-panel/css/statusmap.light.css'
 });
 
-
 export {
   StatusHeatmapCtrl as PanelCtrl
 };

src/status_heatmap_ctrl.js

@@ -3,6 +3,7 @@ import _ from 'lodash';
 import { contextSrv } from 'app/core/core';
 import kbn from 'app/core/utils/kbn';
 
+import './color_legend';
 import rendering from './rendering';
 // import aggregates, { aggregatesMap } from './aggregates';
 // import fragments, { fragmentsMap } from './fragments';
@@ -88,7 +89,7 @@ const colorSchemes = [
   { name: 'YlGnBu', value: 'interpolateYlGnBu', invert: 'dark' },
   { name: 'YlGn', value: 'interpolateYlGn', invert: 'dark' },
   { name: 'YlOrBr', value: 'interpolateYlOrBr', invert: 'dark' },
-  { name: 'YlOrRd', value: 'interpolateYlOrRd', invert: 'darm' }
+  { name: 'YlOrRd', value: 'interpolateYlOrRd', invert: 'dark' }
 ];
 
 let colorModes = ['opacity', 'spectrum', 'discrete'];
@@ -132,11 +133,13 @@ export class StatusHeatmapCtrl extends MetricsPanelCtrl {
     this.events.on('init-edit-mode', this.onInitEditMode);
     this.events.on('render', this.onRender);
     this.events.on('refresh', this.postRefresh);
+    // custom event from rendering.js
     this.events.on('render-complete', this.onRenderComplete);
   }
 
   onRenderComplete = (data) => {
     this.graph.chartWidth = data.chartWidth;
+    this.renderingCompleted();
   };
 
   // override calculateInterval for discrete color mode