From 145901c0db477227d14dd3565e7b8280ae0aedc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Wed, 11 Nov 2020 11:57:55 +0100
Subject: [PATCH] Thresholds: Fixes color assigned to null values (#29010)

* Thresholds: Fixes color assigned to null values

* Updates
---
 .../src/field/displayProcessor.test.ts        | 26 ++++++++++++++++---
 .../src/field/displayProcessor.ts             |  2 +-
 packages/grafana-data/src/field/scale.ts      |  7 ++++-
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-data/src/field/displayProcessor.test.ts b/packages/grafana-data/src/field/displayProcessor.test.ts
index 7876087832b..79820dceb6b 100644
--- a/packages/grafana-data/src/field/displayProcessor.test.ts
+++ b/packages/grafana-data/src/field/displayProcessor.test.ts
@@ -16,9 +16,8 @@ function getDisplayProcessorFromConfig(config: FieldConfig) {
 function assertSame(input: any, processors: DisplayProcessor[], match: DisplayValue) {
   processors.forEach(processor => {
     const value = processor(input);
-    expect(value.text).toEqual(match.text);
-    if (match.hasOwnProperty('numeric')) {
-      expect(value.numeric).toEqual(match.numeric);
+    for (const key of Object.keys(match)) {
+      expect((value as any)[key]).toEqual((match as any)[key]);
     }
   });
 }
@@ -89,6 +88,27 @@ describe('Process simple display values', () => {
   });
 });
 
+describe('Process null values', () => {
+  const processors = [
+    getDisplayProcessorFromConfig({
+      min: 0,
+      max: 100,
+      thresholds: {
+        mode: ThresholdsMode.Absolute,
+        steps: [
+          { value: -Infinity, color: '#000' },
+          { value: 0, color: '#100' },
+          { value: 100, color: '#200' },
+        ],
+      },
+    }),
+  ];
+
+  it('Null should get -Infinity (base) color', () => {
+    assertSame(null, processors, { text: '', numeric: NaN, color: '#000' });
+  });
+});
+
 describe('Format value', () => {
   it('should return if value isNaN', () => {
     const valueMappings: ValueMapping[] = [];
diff --git a/packages/grafana-data/src/field/displayProcessor.ts b/packages/grafana-data/src/field/displayProcessor.ts
index e7c5c45cf54..b6dd87991aa 100644
--- a/packages/grafana-data/src/field/displayProcessor.ts
+++ b/packages/grafana-data/src/field/displayProcessor.ts
@@ -115,7 +115,7 @@ export function getDisplayProcessor(options?: DisplayProcessorOptions): DisplayP
       }
     }
 
-    return { text, numeric, prefix, suffix, ...scaleFunc(0) };
+    return { text, numeric, prefix, suffix, ...scaleFunc(-Infinity) };
   };
 }
 
diff --git a/packages/grafana-data/src/field/scale.ts b/packages/grafana-data/src/field/scale.ts
index c11207427fd..32933c5dc26 100644
--- a/packages/grafana-data/src/field/scale.ts
+++ b/packages/grafana-data/src/field/scale.ts
@@ -18,7 +18,12 @@ export function getScaleCalculator(field: Field, theme: GrafanaTheme): ScaleCalc
   const info = getMinMaxAndDelta(field);
 
   return (value: number) => {
-    const percent = (value - info.min!) / info.delta;
+    let percent = 0;
+
+    if (value !== -Infinity) {
+      percent = (value - info.min!) / info.delta;
+    }
+
     const threshold = getActiveThresholdForValue(field, value, percent);
 
     return {