Fix null values displayed as zeros

README.md

@@ -144,6 +144,10 @@ This plugin is based on "Heatmap" panel by Grafana and partly inspired by ideas
 
 #### Changelog
 
+##### v0.0.3
+
+- Fix display null values as zero
+
 ##### v0.0.2
 
 - Install with GF_INSTALL_PLUGINS

dist/README.md

@@ -144,6 +144,10 @@ This plugin is based on "Heatmap" panel by Grafana and partly inspired by ideas
 
 #### Changelog
 
+##### v0.0.3
+
+- Fix display null values as zero
+
 ##### v0.0.2
 
 - Install with GF_INSTALL_PLUGINS

dist/color_mode_discrete.js

@@ -103,6 +103,13 @@ System.register(["lodash"], function (_export, _context) {
 
             for (var i = 0; i < thresholds.length; i++) {
               for (var j = 0; j < values.length; j++) {
+                if (values[j] == null) {
+                  if (this.panel.nullPointMode == 'as zero') {
+                    return this.getMatchedThreshold(0).color;
+                  } else {
+                    return 'rgba(0,0,0,0)';
+                  }
+                }
                 if (values[j] == thresholds[i].value) {
                   return this.getDiscreteColor(i);
                 }
@@ -135,7 +142,7 @@ System.register(["lodash"], function (_export, _context) {
           key: "getMatchedThreshold",
           value: function getMatchedThreshold(value) {
             if (value == null) {
-              if (this.panel.color.nullPointMode == 'as empty') {
+              if (this.panel.nullPointMode == 'as empty') {
                 // FIXME: make this explicit for user
                 // Right now this color never used because null as empty handles in getCardOpacity method.
                 return {

src/color_mode_discrete.js

@@ -63,6 +63,13 @@ export class ColorModeDiscrete {
 
     for (let i = 0; i < thresholds.length; i++) {
       for (let j = 0; j < values.length; j++) {
+        if (values[j] == null) {
+          if (this.panel.nullPointMode == 'as zero') {
+            return this.getMatchedThreshold(0).color;
+          } else {
+            return 'rgba(0,0,0,0)';
+          }
+        }
         if (values[j] == thresholds[i].value) {
           return this.getDiscreteColor(i);
         }
@@ -93,7 +100,7 @@ export class ColorModeDiscrete {
 
   getMatchedThreshold(value) {
     if (value == null) {
-      if (this.panel.color.nullPointMode == 'as empty') {
+      if (this.panel.nullPointMode == 'as empty') {
         // FIXME: make this explicit for user
         // Right now this color never used because null as empty handles in getCardOpacity method.
         return {