Thresholds: Fixes color assigned to null values (#29010)

* Thresholds: Fixes color assigned to null values

* Updates

packages/grafana-data/src/field/displayProcessor.test.ts

@@ -16,9 +16,8 @@ function getDisplayProcessorFromConfig(config: FieldConfig) {
 function assertSame(input: any, processors: DisplayProcessor[], match: DisplayValue) {
 function assertSame(input: any, processors: DisplayProcessor[], match: DisplayValue) {
   processors.forEach(processor => {
   processors.forEach(processor => {
     const value = processor(input);
     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', () => {
 describe('Format value', () => {
   it('should return if value isNaN', () => {
   it('should return if value isNaN', () => {
     const valueMappings: ValueMapping[] = [];
     const valueMappings: ValueMapping[] = [];

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

packages/grafana-data/src/field/scale.ts

@@ -18,7 +18,12 @@ export function getScaleCalculator(field: Field, theme: GrafanaTheme): ScaleCalc
   const info = getMinMaxAndDelta(field);
   const info = getMinMaxAndDelta(field);
 
 
   return (value: number) => {
   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);
     const threshold = getActiveThresholdForValue(field, value, percent);
 
 
     return {
     return {