Support for dark theme

- dark theme colors
- dark theme screenshot

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;
-      color: #52545c;
-      font-size: 11px;
+      fill: $text-color;
+      color: $text-color;
+      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;
-  color: #52545c;
+  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 {
-  fill: #767980;
+.statusmap-histogram rect {
+  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;
-      color: #52545c;
-      font-size: 11px;
+      fill: $text-color;
+      color: $text-color;
+      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 {