SingleStat: apply mappings to no data response (#19951)

packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts

@@ -72,7 +72,7 @@ export function sharedSingleStatPanelChangedHandler(
     }
 
     // Convert value mappings
-    const mappings = convertOldAngulrValueMapping(panel);
+    const mappings = convertOldAngularValueMapping(panel);
     if (mappings && mappings.length) {
       defaults.mappings = mappings;
     }
@@ -192,7 +192,7 @@ export function migrateOldThresholds(thresholds?: any[]): Threshold[] | undefine
 /**
  * Convert the angular single stat mapping to new react style
  */
-export function convertOldAngulrValueMapping(panel: any): ValueMapping[] {
+export function convertOldAngularValueMapping(panel: any): ValueMapping[] {
   const mappings: ValueMapping[] = [];
 
   // Guess the right type based on options

packages/grafana-ui/src/components/SingleStatShared/index.ts

@@ -5,5 +5,5 @@ export {
   SingleStatBaseOptions,
   sharedSingleStatPanelChangedHandler,
   sharedSingleStatMigrationHandler,
-  convertOldAngulrValueMapping,
+  convertOldAngularValueMapping,
 } from './SingleStatBaseOptions';

public/app/plugins/panel/singlestat/module.ts

@@ -22,7 +22,7 @@ import {
   LegacyResponseData,
   getFlotPairs,
   getDisplayProcessor,
-  convertOldAngulrValueMapping,
+  convertOldAngularValueMapping,
   getColorFromHexRgbOrName,
   PanelEvents,
 } from '@grafana/ui';
@@ -186,13 +186,17 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     }
 
     if (!fieldInfo) {
+      const processor = getDisplayProcessor({
+        config: {
+          mappings: convertOldAngularValueMapping(this.panel),
+          noValue: 'No Data',
+        },
+        theme: config.theme,
+      });
       // When we don't have any field
       this.data = {
-        value: 'No Data',
+        value: null,
-        display: {
+        display: processor(null),
-          text: 'No Data',
-          numeric: NaN,
-        },
       };
     } else {
       this.data = this.processField(fieldInfo);
@@ -246,7 +250,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
         ...fieldInfo.field.config,
         unit: panel.format,
         decimals: panel.decimals,
-        mappings: convertOldAngulrValueMapping(panel),
+        mappings: convertOldAngularValueMapping(panel),
       },
       theme: config.theme,
       isUtc: dashboard.isTimezoneUtc && dashboard.isTimezoneUtc(),

public/app/plugins/panel/singlestat/specs/singlestat.test.ts

@@ -205,6 +205,21 @@ describe('SingleStatCtrl', () => {
     });
   });
 
+  singleStatScenario('When mapping null values and no data', (ctx: TestContext) => {
+    ctx.setup(() => {
+      ctx.input = []; // No data
+      ctx.ctrl.panel.valueMaps = [{ value: 'null', text: 'XYZ' }];
+    });
+
+    it('value should be null', () => {
+      expect(ctx.data.value).toBe(null);
+    });
+
+    it('Should replace value with text', () => {
+      expect(ctx.data.display.text).toBe('XYZ');
+    });
+  });
+
   singleStatScenario('When range to text mapping is specified for first range', (ctx: TestContext) => {
     ctx.setup(() => {
       ctx.input = [{ target: 'test.cpu1', datapoints: [[41, 50]] }];