DisplayProcessor: Show strings as strings (#27097)

* WIP: strings and numbers

* Works in displayProcessor but units are not applied in applyFieldOverride

* removed bit

* Updated

* Added docs

* fixed typo

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

@@ -303,4 +303,26 @@ describe('Date display options', () => {
 
     expect(processor('2020-08-01T08:48:43.783337Z').text).toEqual('2020-08-01 08:48:43');
   });
+
+  describe('number formatting for string values', () => {
+    it('should preserve string unchanged if unit is strings', () => {
+      const processor = getDisplayProcessor({
+        field: {
+          type: FieldType.string,
+          config: { unit: 'string' },
+        },
+      });
+      expect(processor('22.1122334455').text).toEqual('22.1122334455');
+    });
+
+    it('should format string as number if no unit', () => {
+      const processor = getDisplayProcessor({
+        field: {
+          type: FieldType.string,
+          config: { decimals: 2 },
+        },
+      });
+      expect(processor('22.1122334455').text).toEqual('22.11');
+    });
+  });
 });

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

@@ -46,13 +46,14 @@ export function getDisplayProcessor(options?: DisplayProcessorOptions): DisplayP
 
   return (value: any) => {
     const { mappings } = config;
+    const isStringUnit = unit === 'string';
 
     if (hasDateUnit && typeof value === 'string') {
       value = dateTime(value).valueOf();
     }
 
     let text = _.toString(value);
-    let numeric = toNumber(value);
+    let numeric = isStringUnit ? NaN : toNumber(value);
     let prefix: string | undefined = undefined;
     let suffix: string | undefined = undefined;
     let shouldFormat = true;
@@ -62,7 +63,7 @@ export function getDisplayProcessor(options?: DisplayProcessorOptions): DisplayP
 
       if (mappedValue) {
         text = mappedValue.text;
-        const v = toNumber(text);
+        const v = isStringUnit ? NaN : toNumber(text);
 
         if (!isNaN(v)) {
           numeric = v;

packages/grafana-data/src/valueFormats/categories.ts

@@ -1,4 +1,4 @@
-import { locale, scaledUnits, simpleCountUnit, toFixedUnit, ValueFormatCategory } from './valueFormats';
+import { locale, scaledUnits, simpleCountUnit, toFixedUnit, ValueFormatCategory, stringFormater } from './valueFormats';
 import {
   dateTimeAsIso,
   dateTimeAsUS,
@@ -26,19 +26,20 @@ export const getCategories = (): ValueFormatCategory[] => [
     name: 'Misc',
     formats: [
       { name: 'none', id: 'none', fn: toFixedUnit('') },
+      { name: 'String', id: 'string', fn: stringFormater },
       {
         name: 'short',
         id: 'short',
         fn: scaledUnits(1000, ['', ' K', ' Mil', ' Bil', ' Tri', ' Quadr', ' Quint', ' Sext', ' Sept']),
       },
-      { name: 'percent (0-100)', id: 'percent', fn: toPercent },
-      { name: 'percent (0.0-1.0)', id: 'percentunit', fn: toPercentUnit },
+      { name: 'Percent (0-100)', id: 'percent', fn: toPercent },
+      { name: 'Percent (0.0-1.0)', id: 'percentunit', fn: toPercentUnit },
       { name: 'Humidity (%H)', id: 'humidity', fn: toFixedUnit('%H') },
-      { name: 'decibel', id: 'dB', fn: toFixedUnit('dB') },
-      { name: 'hexadecimal (0x)', id: 'hex0x', fn: toHex0x },
-      { name: 'hexadecimal', id: 'hex', fn: toHex },
-      { name: 'scientific notation', id: 'sci', fn: sci },
-      { name: 'locale format', id: 'locale', fn: locale },
+      { name: 'Decibel', id: 'dB', fn: toFixedUnit('dB') },
+      { name: 'Hexadecimal (0x)', id: 'hex0x', fn: toHex0x },
+      { name: 'Hexadecimal', id: 'hex', fn: toHex },
+      { name: 'Scientific notation', id: 'sci', fn: sci },
+      { name: 'Locale format', id: 'locale', fn: locale },
       { name: 'Pixels', id: 'pixel', fn: toFixedUnit('px') },
     ],
   },

packages/grafana-data/src/valueFormats/valueFormats.ts

@@ -156,6 +156,10 @@ export function simpleCountUnit(symbol: string): ValueFormatter {
   };
 }
 
+export function stringFormater(value: number): FormattedValue {
+  return { text: `${value}` };
+}
+
 function buildFormats() {
   categories = getCategories();