SingleStat: use DataFrame results rather than TimeSeries/TableData (#18580)

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

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

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

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

packages/grafana-ui/src/utils/displayProcessor.ts

@@ -58,6 +58,14 @@ export function getDisplayProcessor(options?: DisplayProcessorOptions): DisplayP
         if (shouldFormat && !_.isBoolean(value)) {
           const { decimals, scaledDecimals } = getDecimalsForValue(value, field.decimals);
           text = formatFunc(numeric, decimals, scaledDecimals, options.isUtc);
+
+          // Check if the formatted text mapped to a different value
+          if (mappings && mappings.length > 0) {
+            const mappedValue = getMappedValue(mappings, text);
+            if (mappedValue) {
+              text = mappedValue.text;
+            }
+          }
         }
         if (thresholds && thresholds.length) {
           color = getColorFromThreshold(numeric, thresholds, theme);