Merge pull request #34 from flant/fix_empty_buckets_with_normal_values

Fix display of multivalues buckets as an empty cell

dist/color_mode_discrete.js

@@ -101,16 +101,28 @@ System.register(["lodash"], function (_export, _context) {
           value: function getBucketColor(values) {
             var thresholds = this.panel.color.thresholds;
 
-            for (var i = 0; i < thresholds.length; i++) {
+            if (!values || values.length == 0) {
+              // treat as null value
+              return this.getMatchedThreshold(null).color;
+            }
+
+            if (values.length == 1) {
+              return this.getMatchedThreshold(values[0]).color;
+            }
+
+            var isAllValuesNulls = true;
             for (var j = 0; j < values.length; j++) {
-                if (values[j] == null) {
+              if (values[j] != null) {
-                  if (this.panel.nullPointMode == 'as zero') {
+                isAllValuesNulls = false;
-                    return this.getMatchedThreshold(0).color;
-                  } else {
-                    return 'rgba(0,0,0,0)';
               }
             }
-                if (values[j] == thresholds[i].value) {
+            if (isAllValuesNulls) {
+              return this.getMatchedThreshold(null).color;
+            }
+
+            for (var i = 0; i < thresholds.length; i++) {
+              for (var _j = 0; _j < values.length; _j++) {
+                if (values[_j] == thresholds[i].value) {
                   return this.getDiscreteColor(i);
                 }
               }

src/color_mode_discrete.js

@@ -61,15 +61,27 @@ export class ColorModeDiscrete {
   getBucketColor(values) {
     let thresholds = this.panel.color.thresholds;
 
+    if (!values || values.length == 0) {
+      // treat as null value
+      return this.getMatchedThreshold(null).color;
+    }
+
+    if (values.length == 1) {
+      return this.getMatchedThreshold(values[0]).color;
+    }
+
+    let isAllValuesNulls = true;
+    for (let j = 0; j < values.length; j++) {
+      if (values[j] != null) {
+        isAllValuesNulls = false;
+      }
+    }
+    if (isAllValuesNulls) {
+      return this.getMatchedThreshold(null).color;
+    }
+
     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);
         }