StatPanel: Fixes base color is being used for null values (#22646)

* StatPanel: Fixed color for null values

* StatPanels: Show base value for null values

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
   //

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) };
   };
 }
 

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) {