Visualizations: Fixes Stat/BarGauge/Gauge/PieChart all values mode showing same name if same value (#35368)

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

@@ -259,6 +259,32 @@ describe('FieldDisplay', () => {
       expect(result[1].display.text).toEqual('20');
     });
 
+    it('With cached display processor', () => {
+      const options = createDisplayOptions({
+        reduceOptions: {
+          values: true,
+          calcs: [],
+        },
+        data: [
+          toDataFrame({
+            fields: [
+              { name: 'Name', values: ['A', 'B'] },
+              { name: 'Value', values: [10, 10] },
+            ],
+          }),
+        ],
+      });
+
+      const cache = { numeric: 10, text: 'Value' };
+      options.data![0].fields[1].display = (v: any) => {
+        return cache;
+      };
+
+      const result = getFieldDisplayValues(options);
+      expect(result[0].display.title).toEqual('A');
+      expect(result[1].display.title).toEqual('B');
+    });
+
     it('Single string field multiple value fields', () => {
       const options = createDisplayOptions({
         reduceOptions: {

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

@@ -124,7 +124,6 @@ export const getFieldDisplayValues = (options: GetFieldDisplayValuesOptions): Fi
         };
       }
 
-      // const displayName = getFieldDisplayName(field, dataFrame, data);
       const displayName = field.config.displayName ?? '';
 
       const display =
@@ -155,25 +154,17 @@ export const getFieldDisplayValues = (options: GetFieldDisplayValuesOptions): Fi
           field.state = setIndexForPaletteColor(field, values.length);
 
           const displayValue = display(field.values.get(j));
-
-          if (displayName !== '') {
-            displayValue.title = replaceVariables(displayName, {
-              ...field.state?.scopedVars, // series and field scoped vars
-              ...scopedVars,
-            });
-          } else {
-            displayValue.title = getSmartDisplayNameForRow(dataFrame, field, j);
-          }
-
-          const overrideColor = lookupRowColorFromOverride(displayValue, options.fieldConfig);
-          if (overrideColor) {
-            displayValue.color = theme.visualization.getColorByName(overrideColor);
-          }
+          const rowName = getSmartDisplayNameForRow(dataFrame, field, j, replaceVariables, scopedVars);
+          const overrideColor = lookupRowColorFromOverride(rowName, options.fieldConfig, theme);
 
           values.push({
             name: '',
             field: config,
-            display: displayValue,
+            display: {
+              ...displayValue,
+              title: rowName,
+              color: overrideColor ?? displayValue.color,
+            },
             view,
             colIndex: i,
             rowIndex: j,
@@ -250,10 +241,23 @@ export const getFieldDisplayValues = (options: GetFieldDisplayValuesOptions): Fi
   return values;
 };
 
-function getSmartDisplayNameForRow(frame: DataFrame, field: Field, rowIndex: number): string {
+function getSmartDisplayNameForRow(
+  frame: DataFrame,
+  field: Field,
+  rowIndex: number,
+  replaceVariables: InterpolateFunction,
+  scopedVars: ScopedVars
+): string {
   let parts: string[] = [];
   let otherNumericFields = 0;
 
+  if (field.config.displayName) {
+    return replaceVariables(field.config.displayName, {
+      ...field.state?.scopedVars, // series and field scoped vars
+      ...scopedVars,
+    });
+  }
+
   for (const otherField of frame.fields) {
     if (otherField === field) {
       continue;
@@ -290,16 +294,18 @@ function setIndexForPaletteColor(field: Field, currentLength: number) {
 /**
  * This function makes overrides that set color work for row values
  */
-function lookupRowColorFromOverride(display: DisplayValue, fieldConfig: FieldConfigSource) {
+function lookupRowColorFromOverride(displayName: string, fieldConfig: FieldConfigSource, theme: GrafanaTheme2) {
   for (const override of fieldConfig.overrides) {
-    if (override.matcher.id === 'byName' && override.matcher.options === display.title) {
+    if (override.matcher.id === 'byName' && override.matcher.options === displayName) {
       for (const prop of override.properties) {
         if (prop.id === 'color' && prop.value) {
-          return prop.value.fixedColor;
+          return theme.visualization.getColorByName(prop.value.fixedColor);
         }
       }
     }
   }
+
+  return null;
 }
 
 export function hasLinks(field: Field): boolean {