Support for dark theme

- dark theme colors
- dark theme screenshot

dist/README.md

@@ -1,6 +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)
+
 
 ## Features
 

dist/css/status-heatmap.css.map

@@ -1,7 +0,0 @@
-{
-"version": 3,
-"mappings": "AAGA,8BAA+B;EAE7B,MAAM,EAAE,SAAS;EAEjB,uDAAyB;IACzB,gBAAgB,EAAE,KAAK;IACvB,OAAO,EAAE,GAAG;;AAId,qBAAsB;EACpB,QAAQ,EAAE,QAAQ;EAGhB,sCAAK;IACH,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,IAAI;EAGjB,sCAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,OAAO;EAKnB,yBAAI;IACF,cAAc,EAAE,IAAI;IAEpB,8BAAK;MACH,cAAc,EAAE,cAAc;;AAKpC,uBAAwB;EACtB,WAAW,EAAE,MAAM;EACnB,SAAS,EAzCI,IAAI;EA0CjB,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,OAAO;;AAGhB,8BAA+B;EAC7B,IAAI,EAAE,OAAO;;AAIb,8BAAK;EACH,MAAM,EAAE,OAAe;EACvB,YAAY,EAAE,CAAC;;AAInB,yBAA0B;EACxB,YAAY,EAAE,CAAC;EACf,IAAI,EAAE,wBAAwB;EAC9B,MAAM,EAAE,wBAAwB;;AAGlC,8BAA+B;EAE7B,MAAM,EAAE,MAAM;EAGd,kCAAI;IAGF,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,MAAM;EAIrB,2DAA6B;IAC3B,UAAU,EAAE,GAAG;EAGjB,4DAA8B;IAC5B,OAAO,EAAE,YAAY;EAIrB,+CAAK;IACH,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,IAAI;EAGjB,+CAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,OAAO;EAGjB,kDAAQ;IACN,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,OAAO",
-"sources": ["../../src/css/status-heatmap.scss"],
-"names": [],
-"file": "status-heatmap.css"
-}

dist/css/statusmap.dark.css

@@ -0,0 +1,66 @@
+.status-heatmap-canvas-wrapper {
+  cursor: crosshair; }
+  .status-heatmap-canvas-wrapper .datapoints-warning span {
+    background-color: #333333;
+    color: #d8d9da;
+    padding: 1px; }
+
+.status-heatmap-panel {
+  position: relative; }
+  .status-heatmap-panel .axis .tick text {
+    fill: #d8d9da;
+    color: #d8d9da;
+    font-size: 11px; }
+  .status-heatmap-panel .axis .tick line {
+    opacity: 0.4;
+    stroke: #8e8e8e; }
+  .status-heatmap-panel svg {
+    pointer-events: none; }
+    .status-heatmap-panel svg rect {
+      pointer-events: visiblePainted; }
+
+.statusmap-tooltip {
+  white-space: nowrap;
+  font-size: 12px;
+  background-color: #141414;
+  color: #d8d9da; }
+  .statusmap-tooltip .discrete-item {
+    color: #52545c;
+    padding: 1px;
+    font-weight: bold;
+    text-shadow: 0 0 0.2em #FFF, 0 0 0.2em #FFF, 0 0 0.2em #FFF; }
+
+.statusmap-histogram rect {
+  fill: #8e8e8e; }
+
+.status-heatmap-crosshair line {
+  stroke: #9f3023;
+  stroke-width: 1; }
+
+.status-heatmap-selection {
+  stroke-width: 1;
+  fill: rgba(102, 102, 102, 0.4);
+  stroke: rgba(102, 102, 102, 0.8); }
+
+.status-heatmap-legend-wrapper {
+  margin: 0 10px; }
+  .status-heatmap-legend-wrapper svg {
+    height: 24px;
+    float: left;
+    white-space: nowrap; }
+  .status-heatmap-legend-wrapper .status-heatmap-color-legend {
+    margin-top: 4px; }
+  .status-heatmap-legend-wrapper .status-heatmap-legend-values {
+    display: inline-block; }
+  .status-heatmap-legend-wrapper .axis .tick text {
+    fill: #d8d9da;
+    color: #d8d9da;
+    font-size: 11px; }
+  .status-heatmap-legend-wrapper .axis .tick line {
+    opacity: 0.4;
+    stroke: #8e8e8e; }
+  .status-heatmap-legend-wrapper .axis .tick .domain {
+    opacity: 0.4;
+    stroke: #8e8e8e; }
+
+/*# sourceMappingURL=statusmap.dark.css.map */

dist/css/statusmap.dark.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAAA,8BAA+B;EAE7B,MAAM,EAAE,SAAS;EAEjB,uDAAyB;IACzB,gBAAgB,ECDL,OAAO;IDElB,KAAK,ECLM,OAAO;IDMlB,OAAO,EAAE,GAAG;;AAId,qBAAsB;EACpB,QAAQ,EAAE,QAAQ;EAGhB,sCAAK;IACH,IAAI,ECfG,OAAO;IDgBd,KAAK,EChBE,OAAO;IDiBd,SAAS,EEjBE,IAAI;EFoBjB,sCAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,ECrBM,OAAO;ED0BvB,yBAAI;IACF,cAAc,EAAE,IAAI;IAEpB,8BAAK;MACH,cAAc,EAAE,cAAc;;AAKpC,kBAAmB;EACjB,WAAW,EAAE,MAAM;EACnB,SAAS,EEvCI,IAAI;EFwCjB,gBAAgB,ECrCC,OAAO;EDsCxB,KAAK,ECxCM,OAAO;ED0ClB,iCAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,8CAA8C;;AAI/D,yBAA0B;EACxB,IAAI,EClDY,OAAO;;ADsDvB,8BAAK;EACH,MAAM,EAAE,OAAgB;EACxB,YAAY,EAAE,CAAC;;AAInB,yBAA0B;EACxB,YAAY,EAAE,CAAC;EACf,IAAI,EAAE,wBAAwB;EAC9B,MAAM,EAAE,wBAAwB;;AAIlC,8BAA+B;EAC7B,MAAM,EAAE,MAAM;EAEd,kCAAI;IACF,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,MAAM;EAIrB,2DAA6B;IAC3B,UAAU,EAAE,GAAG;EAGjB,4DAA8B;IAC5B,OAAO,EAAE,YAAY;EAIrB,+CAAK;IACH,IAAI,ECxFG,OAAO;IDyFd,KAAK,ECzFE,OAAO;ID0Fd,SAAS,EE1FE,IAAI;EF6FjB,+CAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC9FM,OAAO;EDiGrB,kDAAQ;IACN,OAAO,EAAE,GAAG;IACZ,MAAM,ECnGM,OAAO",
+"sources": ["../../src/css/_statusmap.scss","../../src/css/_variables.dark.scss","../../src/css/_variables.scss"],
+"names": [],
+"file": "statusmap.dark.css"
+}

dist/css/statusmap.light.css

@@ -1,7 +1,8 @@
 .status-heatmap-canvas-wrapper {
   cursor: crosshair; }
   .status-heatmap-canvas-wrapper .datapoints-warning span {
-    background-color: white;
+    background-color: #e9edf2;
+    color: #52545c;
     padding: 1px; }
 
 .status-heatmap-panel {
@@ -18,17 +19,22 @@
     .status-heatmap-panel svg rect {
       pointer-events: visiblePainted; }
 
-.status-heatmap-tooltip {
+.statusmap-tooltip {
   white-space: nowrap;
   font-size: 12px;
   background-color: #dde4ed;
   color: #52545c; }
+  .statusmap-tooltip .discrete-item {
+    color: #52545c;
+    padding: 1px;
+    font-weight: bold;
+    text-shadow: 0 0 0.2em #FFF, 0 0 0.2em #FFF, 0 0 0.2em #FFF; }
 
-.status-heatmap-histogram rect {
+.statusmap-histogram rect {
   fill: #767980; }
 
 .status-heatmap-crosshair line {
-  stroke: #b30000;
+  stroke: #9e2f22;
   stroke-width: 1; }
 
 .status-heatmap-selection {
@@ -57,4 +63,4 @@
     opacity: 0.4;
     stroke: #767980; }
 
-/*# sourceMappingURL=status-heatmap.css.map */
+/*# sourceMappingURL=statusmap.light.css.map */

dist/css/statusmap.light.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAAA,8BAA+B;EAE7B,MAAM,EAAE,SAAS;EAEjB,uDAAyB;IACzB,gBAAgB,ECDL,OAAO;IDElB,KAAK,ECLM,OAAO;IDMlB,OAAO,EAAE,GAAG;;AAId,qBAAsB;EACpB,QAAQ,EAAE,QAAQ;EAGhB,sCAAK;IACH,IAAI,ECfG,OAAO;IDgBd,KAAK,EChBE,OAAO;IDiBd,SAAS,EEjBE,IAAI;EFoBjB,sCAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,ECrBM,OAAO;ED0BvB,yBAAI;IACF,cAAc,EAAE,IAAI;IAEpB,8BAAK;MACH,cAAc,EAAE,cAAc;;AAKpC,kBAAmB;EACjB,WAAW,EAAE,MAAM;EACnB,SAAS,EEvCI,IAAI;EFwCjB,gBAAgB,ECrCC,OAAO;EDsCxB,KAAK,ECxCM,OAAO;ED0ClB,iCAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,8CAA8C;;AAI/D,yBAA0B;EACxB,IAAI,EClDY,OAAO;;ADsDvB,8BAAK;EACH,MAAM,EAAE,OAAgB;EACxB,YAAY,EAAE,CAAC;;AAInB,yBAA0B;EACxB,YAAY,EAAE,CAAC;EACf,IAAI,EAAE,wBAAwB;EAC9B,MAAM,EAAE,wBAAwB;;AAIlC,8BAA+B;EAC7B,MAAM,EAAE,MAAM;EAEd,kCAAI;IACF,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,MAAM;EAIrB,2DAA6B;IAC3B,UAAU,EAAE,GAAG;EAGjB,4DAA8B;IAC5B,OAAO,EAAE,YAAY;EAIrB,+CAAK;IACH,IAAI,ECxFG,OAAO;IDyFd,KAAK,ECzFE,OAAO;ID0Fd,SAAS,EE1FE,IAAI;EF6FjB,+CAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC9FM,OAAO;EDiGrB,kDAAQ;IACN,OAAO,EAAE,GAAG;IACZ,MAAM,ECnGM,OAAO",
+"sources": ["../../src/css/_statusmap.scss","../../src/css/_variables.light.scss","../../src/css/_variables.scss"],
+"names": [],
+"file": "statusmap.light.css"
+}

dist/module.js

@@ -1,14 +1,22 @@
 'use strict';
 
-System.register(['./color_legend', './status_heatmap_ctrl'], function (_export, _context) {
+System.register(['app/plugins/sdk', './color_legend', './status_heatmap_ctrl'], function (_export, _context) {
   "use strict";
 
-  var StatusHeatmapCtrl;
+  var loadPluginCss, StatusHeatmapCtrl;
   return {
-    setters: [function (_color_legend) {}, function (_status_heatmap_ctrl) {
+    setters: [function (_appPluginsSdk) {
+      loadPluginCss = _appPluginsSdk.loadPluginCss;
+    }, function (_color_legend) {}, function (_status_heatmap_ctrl) {
       StatusHeatmapCtrl = _status_heatmap_ctrl.StatusHeatmapCtrl;
     }],
     execute: function () {
+
+      loadPluginCss({
+        dark: 'plugins/flant-statusmap-panel/css/statusmap.dark.css',
+        light: 'plugins/flant-statusmap-panel/css/statusmap.light.css'
+      });
+
       _export('PanelCtrl', StatusHeatmapCtrl);
     }
   };

dist/module.js.map

@@ -0,0 +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"]}

dist/options_editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/options_editor.js"],"names":["statusHeatmapOptionsEditor","restrict","scope","templateUrl","controller","StatusHeatmapOptionsEditorCtrl","kbn","$scope","editor","panelCtrl","ctrl","panel","unitFormats","getUnitFormats","render","subItem","data","unitFormat","value"],"mappings":";;;;;;;;;;;;;AAkBO,WAASA,0BAAT,GAAsC;AAC3C;;AACA,WAAO;AACLC,gBAAU,GADL;AAELC,aAAO,IAFF;AAGLC,mBAAa,mEAHR;AAILC,kBAAYC;AAJP,KAAP;AAMD;;wCAReL,0B;;;;AAlBTM,S;;;;;;;;;;;;;;;;;;;;;gDAEMD,8B;AACX,gDAAYE,MAAZ,EAAoB;AAAA;;AAClBA,iBAAOC,MAAP,GAAgB,IAAhB;AACA,eAAKC,SAAL,GAAiBF,OAAOG,IAAxB;AACA,eAAKC,KAAL,GAAa,KAAKF,SAAL,CAAeE,KAA5B;AACA,eAAKC,WAAL,GAAmBN,IAAIO,cAAJ,EAAnB;;AAEA,eAAKJ,SAAL,CAAeK,MAAf;AACD;;;;wCAEaC,O,EAAS;AACrB,iBAAKJ,KAAL,CAAWK,IAAX,CAAgBC,UAAhB,GAA6BF,QAAQG,KAArC;AACA,iBAAKT,SAAL,CAAeK,MAAf;AACD","file":"options_editor.js","sourcesContent":["import kbn from 'app/core/utils/kbn';\n\nexport class StatusHeatmapOptionsEditorCtrl {\n  constructor($scope) {\n    $scope.editor = this;\n    this.panelCtrl = $scope.ctrl;\n    this.panel = this.panelCtrl.panel;\n    this.unitFormats = kbn.getUnitFormats();\n\n    this.panelCtrl.render();\n  }\n\n  setUnitFormat(subItem) {\n    this.panel.data.unitFormat = subItem.value;\n    this.panelCtrl.render();\n  }\n}\n\nexport function statusHeatmapOptionsEditor() {\n  'use strict';\n  return {\n    restrict: 'E',\n    scope: true,\n    templateUrl: 'public/plugins/flant-statusmap-panel/partials/options_editor.html',\n    controller: StatusHeatmapOptionsEditorCtrl,\n  };\n}\n"]}

dist/plugin.json

@@ -20,12 +20,13 @@
 
     ],
     "screenshots": [
-      {"name": "Panel", "path": "img/flant-statusmap-panel.png"},
+      {"name": "Panel with light theme", "path": "img/flant-statusmap-panel.png"},
+      {"name": "Panel with dark theme", "path": "img/flant-statusmap-panel-dark.png"},
       {"name": "Color mapping", "path": "img/color-mapping.png"},
       {"name": "Queries example", "path": "img/queries-example.png"}
     ],
     "version": "0.0.2",
-    "updated": "2018-10-05"
+    "updated": "2018-10-17"
   },
 
   "dependencies": {

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', './css/status-heatmap.css!'], function (_export, _context) {
+System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/kbn', './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;
@@ -50,7 +50,7 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
       statusHeatmapOptionsEditor = _options_editor.statusHeatmapOptionsEditor;
     }, function (_color_mode_discrete) {
       ColorModeDiscrete = _color_mode_discrete.ColorModeDiscrete;
-    }, function (_cssStatusHeatmapCss) {}],
+    }],
     execute: function () {
       CANVAS = 'CANVAS';
       SVG = 'SVG';

dist/tooltip.js

@@ -88,7 +88,7 @@ System.register(['d3', 'jquery', 'lodash', 'app/core/utils/kbn'], function (_exp
         }, {
           key: 'add',
           value: function add() {
-            this.tooltip = d3.select("body").append("div").attr("class", "heatmap-tooltip graph-tooltip grafana-tooltip");
+            this.tooltip = d3.select("body").append("div").attr("class", "statusmap-tooltip graph-tooltip grafana-tooltip");
           }
         }, {
           key: 'destroy',
@@ -128,7 +128,7 @@ System.register(['d3', 'jquery', 'lodash', 'app/core/utils/kbn'], function (_exp
             var tooltipTimeFormat = 'YYYY-MM-DD HH:mm:ss';
             var time = this.dashboard.formatDate(+x, tooltipTimeFormat);
 
-            var tooltipHtml = '<div class="graph-tooltip-time">' + time + '</div>\n      <div class="status-heatmap-histogram"></div>';
+            var tooltipHtml = '<div class="graph-tooltip-time">' + time + '</div>\n      <div class="statusmap-histogram"></div>';
 
             if (this.panel.color.mode === 'discrete') {
               var statuses = this.panelCtrl.discreteHelper.convertValuesToTooltips(values);
@@ -139,7 +139,7 @@ System.register(['d3', 'jquery', 'lodash', 'app/core/utils/kbn'], function (_exp
                 statusesHtml = "statuses:";
               }
               tooltipHtml += '\n      <div>\n        name: <b>' + y + '</b> <br>\n        ' + statusesHtml + '\n        <ul>\n          ' + _.join(_.map(statuses, function (v) {
-                return '<li style="background-color: ' + v.color + '; padding: 1px; font-weight: bold; text-shadow: 0 0 0.2em #FFF, 0 0 0.2em #FFF, 0 0 0.2em #FFF">' + v.tooltip + '</li>';
+                return '<li style="background-color: ' + v.color + '" class="discrete-item">' + v.tooltip + '</li>';
               }), "") + '\n        </ul>\n      </div>';
             } else {
               if (values.length === 1) {