Merge pull request #13 from flant/fix_dark_theme_colors

Support for dark theme

.gitignore

@@ -1,2 +1,4 @@
 node_modules
 .jshintrc
+.idea
+.sass-cache

Gruntfile.js

@@ -53,7 +53,8 @@ module.exports = (grunt) => {
     sass: {
       dist: {
         files: {
-          'dist/css/status-heatmap.css': 'src/css/status-heatmap.scss'
+          'dist/css/statusmap.dark.css': 'src/css/statusmap.dark.scss',
+          'dist/css/statusmap.light.css': 'src/css/statusmap.light.scss'
         }
       }
     }

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/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) {

src/css/_statusmap.scss

@@ -1,12 +1,10 @@
-$font-size-sm: 12px !default;
-
-
 .status-heatmap-canvas-wrapper {
   // position: relative;
   cursor: crosshair;
 
   .datapoints-warning span {
-  background-color: white;
+  background-color: $warning-bg;
+  color: $text-color;
   padding: 1px;
   }
 }
@@ -16,14 +14,14 @@ $font-size-sm: 12px !default;
 
   .axis .tick {
     text {
-      fill: #52545c;
+      fill: $text-color;
-      color: #52545c;
+      color: $text-color;
-      font-size: 11px;
+      font-size: $font-size-tick;
     }
 
     line {
       opacity: 0.4;
-      stroke: #767980;
+      stroke: $text-color-weak;
     }
   }
 
@@ -37,20 +35,27 @@ $font-size-sm: 12px !default;
   }
 }
 
-.status-heatmap-tooltip {
+.statusmap-tooltip {
   white-space: nowrap;
   font-size: $font-size-sm;
-  background-color: #dde4ed;
+  background-color: $graph-tooltip-bg;
+  color: $text-color;
+
+  .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;
+  fill: $text-color-weak;
 }
 
 .status-heatmap-crosshair {
   line {
-    stroke: darken(red,15%);
+    stroke: darken($red,15%);
     stroke-width: 1;
   }
 }
@@ -61,14 +66,11 @@ $font-size-sm: 12px !default;
   stroke: rgba(102, 102, 102, 0.8);
 }
 
+
 .status-heatmap-legend-wrapper {
-  // @include clearfix();
   margin: 0 10px;
-  //padding-top: 10px;
 
   svg {
-    //width: 100%;
-    //max-width: 1300px;
     height: 24px;
     float: left;
     white-space: nowrap;
@@ -85,19 +87,19 @@ $font-size-sm: 12px !default;
 
   .axis .tick {
     text {
-      fill: #52545c;
+      fill: $text-color;
-      color: #52545c;
+      color: $text-color;
-      font-size: 11px;
+      font-size: $font-size-tick;
     }
 
     line {
       opacity: 0.4;
-      stroke: #767980;
+      stroke: $text-color-weak;
     }
 
     .domain {
       opacity: 0.4;
-      stroke: #767980;
+      stroke: $text-color-weak;
     }
   }
 }

src/css/_variables.dark.scss

@@ -0,0 +1,9 @@
+// Dark variables
+$text-color: #d8d9da; // $gray-4
+$text-color-weak: #8e8e8e; // $gray-2
+$graph-tooltip-bg: #141414; // $dark-1
+$warning-bg: #333333; // $dark-4
+
+$theme-name: dark;
+$white: #fff;
+$red: #d44a3a;

src/css/_variables.light.scss

@@ -0,0 +1,10 @@
+// Light variables
+$text-color: #52545c; // $gray-1
+$text-color-weak: #767980; // $gray-2
+$graph-tooltip-bg: #dde4ed; // $gray-5
+$warning-bg: #e9edf2; // $gray-6
+
+$theme-name: light;
+$white: #fff;
+$red: #d44939;
+

src/css/_variables.scss

@@ -0,0 +1,3 @@
+$font-size-sm: 12px !default;
+$font-size-tick: 11px;
+

src/css/statusmap.dark.scss

@@ -0,0 +1,3 @@
+@import "variables";
+@import "variables.dark";
+@import "statusmap"

src/css/statusmap.light.scss

@@ -0,0 +1,3 @@
+@import "variables";
+@import "variables.light";
+@import "statusmap"

src/module.js

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

src/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": {

src/status_heatmap_ctrl.js

@@ -9,7 +9,6 @@ import rendering from './rendering';
 // import { labelFormats } from './xAxisLabelFormats';
 import {statusHeatmapOptionsEditor} from './options_editor';
 import {ColorModeDiscrete} from "./color_mode_discrete";
-import './css/status-heatmap.css!';
 
 const CANVAS = 'CANVAS';
 const SVG = 'SVG';

src/tooltip.js

@@ -42,7 +42,7 @@ export class StatusHeatmapTooltip {
   add() {
     this.tooltip = d3.select("body")
       .append("div")
-      .attr("class", "heatmap-tooltip graph-tooltip grafana-tooltip");
+      .attr("class", "statusmap-tooltip graph-tooltip grafana-tooltip");
   }
 
   destroy() {
@@ -79,7 +79,7 @@ export class StatusHeatmapTooltip {
     let time = this.dashboard.formatDate(+x, tooltipTimeFormat);
 
     let tooltipHtml = `<div class="graph-tooltip-time">${time}</div>
-      <div class="status-heatmap-histogram"></div>`;
+      <div class="statusmap-histogram"></div>`;
 
     if (this.panel.color.mode === 'discrete') {
       let statuses = this.panelCtrl.discreteHelper.convertValuesToTooltips(values);
@@ -94,7 +94,7 @@ export class StatusHeatmapTooltip {
         name: <b>${y}</b> <br>
         ${statusesHtml}
         <ul>
-          ${_.join(_.map(statuses, v => `<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>`), "")}
+          ${_.join(_.map(statuses, v => `<li style="background-color: ${v.color}" class="discrete-item">${v.tooltip}</li>`), "")}
         </ul>
       </div>`;
     } else {