From 5d8fc6a1a956cf2d3ae6879670bd8c522d46e0af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 9 Mar 2020 17:00:25 +0100
Subject: [PATCH] StatPanel: Fixes base color is being used for null values 
 (#22646)

* StatPanel: Fixed color for null values

* StatPanels: Show base value for null values
---
 .../grafana-data/src/field/displayProcessor.test.ts  | 12 ++++++++++++
 packages/grafana-data/src/field/displayProcessor.ts  |  5 +++--
 packages/grafana-data/src/field/scale.ts             |  5 +++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-data/src/field/displayProcessor.test.ts b/packages/grafana-data/src/field/displayProcessor.test.ts
index 1b4fbaffe79..2c8580169f6 100644
--- a/packages/grafana-data/src/field/displayProcessor.test.ts
+++ b/packages/grafana-data/src/field/displayProcessor.test.ts
@@ -206,6 +206,18 @@ describe('Format value', () => {
     expect(instance(value).numeric).toEqual(1);
   });
 
+  it('With null value and thresholds should use base color', () => {
+    const instance = getDisplayProcessorFromConfig({
+      thresholds: {
+        mode: ThresholdsMode.Absolute,
+        steps: [{ index: 0, value: -Infinity, color: '#AAA' }],
+      },
+    });
+    const disp = instance(null);
+    expect(disp.text).toEqual('');
+    expect(disp.color).toEqual('#AAA');
+  });
+
   //
   // Below is current behavior but it's clearly not working great
   //
diff --git a/packages/grafana-data/src/field/displayProcessor.ts b/packages/grafana-data/src/field/displayProcessor.ts
index 14a7a0ac1cd..92f38d79f60 100644
--- a/packages/grafana-data/src/field/displayProcessor.ts
+++ b/packages/grafana-data/src/field/displayProcessor.ts
@@ -53,8 +53,8 @@ export function getDisplayProcessor(options?: DisplayProcessorOptions): DisplayP
     let numeric = toNumber(value);
     let prefix: string | undefined = undefined;
     let suffix: string | undefined = undefined;
-
     let shouldFormat = true;
+
     if (mappings && mappings.length > 0) {
       const mappedValue = getMappedValue(mappings, value);
 
@@ -100,7 +100,8 @@ export function getDisplayProcessor(options?: DisplayProcessorOptions): DisplayP
         text = ''; // No data?
       }
     }
-    return { text, numeric, prefix, suffix };
+
+    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 735def3c887..858c38c41d1 100644
--- a/packages/grafana-data/src/field/scale.ts
+++ b/packages/grafana-data/src/field/scale.ts
@@ -30,10 +30,12 @@ export function getScaleCalculator(field: Field, theme?: GrafanaTheme): ScaleCal
   // Should we calculate the percentage
   const percentThresholds = thresholds && thresholds.mode === ThresholdsMode.Percentage;
   const useColorScheme = color && color.mode === FieldColorMode.Scheme;
+
   if (percentThresholds || useColorScheme) {
     // Calculate min/max if required
     let min = config.min;
     let max = config.max;
+
     if (!isNumber(min) || !isNumber(max)) {
       if (field.values && field.values.length) {
         const stats = reduceField({ field, reducers: [ReducerID.min, ReducerID.max] });
@@ -48,10 +50,12 @@ export function getScaleCalculator(field: Field, theme?: GrafanaTheme): ScaleCal
         max = 100;
       }
     }
+
     const delta = max! - min!;
 
     // Use a d3 color scale
     let interpolator: colorInterpolator | undefined;
+
     if (useColorScheme) {
       interpolator = (d3 as any)[`interpolate${color!.schemeName}`] as colorInterpolator;
     }
@@ -62,6 +66,7 @@ export function getScaleCalculator(field: Field, theme?: GrafanaTheme): ScaleCal
         ? getActiveThreshold(percentThresholds ? percent * 100 : value, thresholds.steps)
         : undefined; // 0-100
       let color = fixedColor;
+
       if (interpolator) {
         color = interpolator(percent);
       } else if (threshold) {