Merge pull request #209 from flant/fix_null_as_zero

fix: null as zero

.github/workflows/ci.yaml

@@ -12,10 +12,10 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v2.3.4
 
       - name: Setup Node.js environment
-        uses: actions/setup-node@v2.1.4
+        uses: actions/setup-node@v2.2.0
         with:
           node-version: "14.x"
 
@@ -24,7 +24,7 @@ jobs:
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
       - name: Cache yarn cache
-        uses: actions/cache@v2.1.4
+        uses: actions/cache@v2.1.6
         id: cache-yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -34,7 +34,7 @@ jobs:
 
       - name: Cache node_modules
         id: cache-node-modules
-        uses: actions/cache@v2.1.4
+        uses: actions/cache@v2.1.6
         with:
           path: node_modules
           key: ${{ runner.os }}-${{ matrix.node-version }}-nodemodules-${{ hashFiles('**/yarn.lock') }}

.github/workflows/release.yaml

@@ -10,10 +10,10 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v2.3.4
 
       - name: Setup Node.js environment
-        uses: actions/setup-node@v2.1.4
+        uses: actions/setup-node@v2.2.0
         with:
           node-version: "14.x"
 
@@ -27,7 +27,7 @@ jobs:
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
       - name: Cache yarn cache
-        uses: actions/cache@v2.1.4
+        uses: actions/cache@v2.1.6
         id: cache-yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -37,7 +37,7 @@ jobs:
 
       - name: Cache node_modules
         id: cache-node-modules
-        uses: actions/cache@v2.1.4
+        uses: actions/cache@v2.1.6
         with:
           path: node_modules
           key: ${{ runner.os }}-${{ matrix.node-version }}-nodemodules-${{ hashFiles('**/yarn.lock') }}
@@ -110,7 +110,7 @@ jobs:
 
       - name: Create release
         id: create_release
-        uses: actions/create-release@v1
+        uses: actions/create-release@v1.1.4
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
@@ -121,7 +121,7 @@ jobs:
 
       - name: Add plugin to release
         id: upload-plugin-asset
-        uses: actions/upload-release-asset@v1
+        uses: actions/upload-release-asset@v1.0.2
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
@@ -132,7 +132,7 @@ jobs:
 
       - name: Add checksum to release
         id: upload-checksum-asset
-        uses: actions/upload-release-asset@v1
+        uses: actions/upload-release-asset@v1.0.2
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v0.4.1
+
+- Fix regression in discrete mode. "Data has value with undefined color"
+
 ## v0.4.0
 
 - Add __y_label_trim variable for tooltip items.

README.md

@@ -199,7 +199,7 @@ Each URL has a template, icon, label and formating options: lowercase and date f
 
 * [Changelog](https://github.com/flant/grafana-statusmap/blob/master/CHANGELOG.md)
 * Use [GitHub Discussions](https://github.com/flant/grafana-statusmap/discussions) to ask for help.
-* [Installation](https://grafana.com/grafana/plugins/flant-statusmap-panel/installation)
+* [Installation](https://grafana.com/grafana/plugins/flant-statusmap-panel/?tab=installation)
 * Setup [development](https://github.com/flant/grafana-statusmap/blob/master/DEVELOPMENT.md) environment to help us improve the plugin.
 
 ## Acknowledgements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flant-statusmap-panel",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Grafana panel plugin to visualize status of multiple objects over time",
   "main": "README.md",
   "scripts": {
@@ -28,7 +28,7 @@
     "@types/lodash": "4.14.123",
     "d3": "4.13.0",
     "emotion": "10.0.27",
-    "lodash": "4.17.19"
+    "lodash": "4.17.21"
   },
   "dependencies": {
     "d3-scale-chromatic": "^2"

src/color_mode_discrete.ts

@@ -32,7 +32,7 @@ export class ColorModeDiscrete {
 
     for (let i = 0; i < thresholds.length; i++) {
       for (let j = 0; j < values.length; j++) {
-        if (values[j] === thresholds[i].value) {
+        if (this.isEqualValues(values[j], thresholds[i].value)) {
           tooltips.push({
             tooltip: thresholds[i].tooltip ? thresholds[i].tooltip : values[j],
             color: thresholds[i].color,
@@ -43,18 +43,16 @@ export class ColorModeDiscrete {
     return tooltips;
   }
 
-  convertValueToTooltips(values) {
+  convertValueToTooltips(value) {
     let thresholds = this.panel.color.thresholds;
     let tooltips = [];
 
     for (let i = 0; i < thresholds.length; i++) {
-      //for (let j = 0; j < values.length; j++) {
-      if (values === thresholds[i].value) {
+      if (this.isEqualValues(value, thresholds[i].value)) {
         tooltips.push({
-          tooltip: thresholds[i].tooltip ? thresholds[i].tooltip : values,
+          tooltip: thresholds[i].tooltip ? thresholds[i].tooltip : value,
           color: thresholds[i].color,
         });
-        //}
       }
     }
     return tooltips;
@@ -135,7 +133,7 @@ export class ColorModeDiscrete {
 
     for (let i = 0; i < thresholds.length; i++) {
       for (let j = 0; j < values.length; j++) {
-        if (values[j] === thresholds[i].value) {
+        if (this.isEqualValues(values[j], thresholds[i].value)) {
           return this.getDiscreteColor(i);
         }
       }
@@ -199,7 +197,7 @@ export class ColorModeDiscrete {
 
     let thresholds = this.panel.color.thresholds;
     for (let k = 0; k < thresholds.length; k++) {
-      if (value === thresholds[k].value) {
+      if (this.isEqualValues(value, thresholds[k].value)) {
         return thresholds[k];
       }
     }
@@ -218,6 +216,13 @@ export class ColorModeDiscrete {
     return thresholds[index];
   }
 
+  isEqualValues(val1, val2) {
+    // Relaxed equal operator here is important.
+    // threshold.value can be a number or a string and input value can be a number or a string.
+    /* eslint-disable eqeqeq */
+    return val1 == val2;
+  }
+
   roundIntervalCeil(interval) {
     switch (true) {
       case interval <= 10:

src/rendering.ts

@@ -578,6 +578,10 @@ export class StatusmapRenderer {
     if (this.panel.color.mode === 'opacity') {
       return this.panel.color.cardColor;
     } else if (this.panel.color.mode === 'spectrum') {
+      if (!bucket.value && this.panel.nullPointMode === 'as zero') {
+        // bucket.value === 0 falls here, but it is fine.
+        return this.colorScale(0);
+      }
       return this.colorScale(bucket.value);
     } else if (this.panel.color.mode === 'discrete') {
       if (this.panel.seriesFilterIndex !== null && this.panel.seriesFilterIndex !== -1) {

src/styles/_statusmap.scss

@@ -25,7 +25,7 @@
     right: 0;
     width: 20px;
     height: 20px;
-    opacity: 0.15;
+    opacity: $branding-opacity;
 
     :hover > & {
       opacity: 1;

src/styles/_variables.dark.scss

@@ -7,3 +7,5 @@ $warning-bg: #333333; // $dark-4
 $theme-name: dark;
 $white: #fff;
 $red: #d44a3a;
+
+$branding-opacity: 0.5;

src/styles/_variables.light.scss

@@ -8,3 +8,4 @@ $theme-name: light;
 $white: #fff;
 $red: #d44939;
 
+$branding-opacity: 0.33;

yarn.lock

@@ -8206,10 +8206,10 @@ lodash@4.17.19:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
   integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
 
-lodash@^4.0.0, lodash@^4.0.1, lodash@^4.1.1, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@~4.17.10:
-  version "4.17.20"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
-  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+lodash@4.17.21, lodash@^4.0.0, lodash@^4.0.1, lodash@^4.1.1, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@~4.17.10:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 log-symbols@^3.0.0:
   version "3.0.0"