feat: use grafana-toolkit to build a plugin

- fix linter warnings
- use yarn: remove Gruntfile.js and package-lock.json

++

src/styles/_statusmap.scss

@@ -0,0 +1,156 @@
+.status-heatmap-canvas-wrapper {
+  // position: relative;
+  cursor: crosshair;
+
+  // allow tooltips on hover of warning text
+  .datapoints-warning {
+    pointer-events: none;
+  }
+
+  .datapoints-warning span {
+  background-color: $warning-bg;
+  color: $text-color;
+  padding: 1px;
+  }
+}
+
+.statusmap-panel {
+  position: relative;
+
+  .axis .tick {
+    text {
+      fill: $text-color;
+      color: $text-color;
+      font-size: $font-size-tick;
+    }
+
+    line {
+      opacity: 0.4;
+      stroke: $text-color-weak;
+    }
+  }
+
+  // This hack prevents mouseenter/mouseleave events get fired too often
+  svg {
+    pointer-events: none;
+
+    rect {
+      pointer-events: visiblePainted;
+    }
+  }
+}
+
+.statusmap-tooltip {
+  // from .grafana-tooltip
+  // '.grafana-tooltip a' makes links not readable for tooltip items.
+  position: absolute;
+  padding: 10px;
+  font-weight: 200;
+  border-radius: 5px;
+  max-width: 800px;
+  max-height: 600px;
+  overflow: hidden;
+  line-height: 14px;
+  z-index: 9999;
+
+  // more overrides
+  white-space: nowrap;
+  font-size: $font-size-sm;
+  background-color: $graph-tooltip-bg;
+  color: $text-color;
+
+  .discrete-item {
+    color: #ffffff;
+    padding: 1px;
+    font-weight: bold;
+    text-shadow: 0 0 0.2em #212124, 0 0 0.2em #212124, 0 0 0.2em #212124;
+  }
+}
+
+.statusmap-tooltip-frozen {
+  position: relative;
+  z-index: 1;
+}
+
+.statusmap-histogram rect {
+  fill: $text-color-weak;
+}
+
+.status-heatmap-crosshair {
+  line {
+    stroke: darken($red,15%);
+    stroke-width: 1;
+  }
+}
+
+.status-heatmap-selection {
+  stroke-width: 1;
+  fill: rgba(102, 102, 102, 0.4);
+  stroke: rgba(102, 102, 102, 0.8);
+}
+
+.width-c-40 {
+  width: 40.0rem!important
+}
+.width-c-50 {
+  width: 50.0rem!important
+}
+.width-c-60 {
+  width: 60.0rem!important
+}
+.width-c-70 {
+  width: 70.0rem!important
+}
+
+.statusmap-pagination {
+  // space between legend and pagination controls
+  margin-top: 5px;
+  label {
+    margin-right:0px;
+  }
+  input {
+    margin-right: 0px;
+  }
+  .last-in-group {
+    margin-right: 4px;
+  }
+}
+
+.pagination-buttons{text-align: right;}
+
+.status-heatmap-legend-wrapper {
+  margin: 0 10px;
+
+  svg {
+    height: 24px;
+    float: left;
+    white-space: nowrap;
+    //padding-left: 10px; // DO NOT TOUCH THIS! legend will be clipped!
+  }
+
+  .status-heatmap-color-legend {
+    margin-top: 4px;
+  }
+
+  .status-heatmap-legend-values {
+    display: inline-block;
+  }
+
+  .axis .tick {
+    text {
+      fill: $text-color;
+      color: $text-color;
+      font-size: $font-size-tick;
+    }
+
+    line {
+      opacity: 0.4;
+      stroke: $text-color-weak;
+    }
+
+    .domain {
+      opacity: 0.4;
+      stroke: $text-color-weak;
+    }
+  }
+}

src/styles/_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/styles/_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/styles/_variables.scss

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

src/styles/dark.scss

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

src/styles/light.scss

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