[v10.0.x] BarChart: Check by displayName (#71165)

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

@@ -36,6 +36,14 @@ export function getFrameDisplayName(frame: DataFrame, index?: number) {
   return `Series (${index})`;
 }
 
+export function cacheFieldDisplayNames(frames: DataFrame[]) {
+  frames.forEach((frame) => {
+    frame.fields.forEach((field) => {
+      getFieldDisplayName(field, frame, frames);
+    });
+  });
+}
+
 export function getFieldDisplayName(field: Field, frame?: DataFrame, allFrames?: DataFrame[]): string {
   const existingTitle = field.state?.displayName;
   const multipleFrames = Boolean(allFrames && allFrames.length > 1);

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

@@ -14,5 +14,5 @@ export { FieldConfigOptionsRegistry } from './FieldConfigOptionsRegistry';
 export { sortThresholds, getActiveThreshold } from './thresholds';
 export { applyFieldOverrides, validateFieldConfig, applyRawFieldOverrides, useFieldOverrides } from './fieldOverrides';
 export { getFieldDisplayValuesProxy } from './getFieldDisplayValuesProxy';
-export { getFieldDisplayName, getFrameDisplayName } from './fieldState';
+export { getFieldDisplayName, getFrameDisplayName, cacheFieldDisplayNames } from './fieldState';
 export { getScaleCalculator, getFieldConfigWithMinMax, getMinMaxAndDelta } from './scale';

public/app/plugins/panel/barchart/utils.ts

@@ -8,6 +8,7 @@ import {
   formattedValueToString,
   getDisplayProcessor,
   getFieldColorModeForField,
+  cacheFieldDisplayNames,
   getFieldSeriesColor,
   GrafanaTheme2,
   outerJoinDataFrames,
@@ -364,6 +365,8 @@ export function prepareBarChartDisplayValues(
     return { warn: 'No data in response' };
   }
 
+  cacheFieldDisplayNames(series);
+
   // Bar chart requires a single frame
   const frame =
     series.length === 1
@@ -489,12 +492,7 @@ export function prepareBarChartDisplayValues(
   let legendFields: Field[] = fields;
   if (options.stacking === StackingMode.Percent) {
     legendFields = fields.map((field) => {
-      const alignedFrameField = frame.fields.find((f) => {
-        if (f.labels) {
-          return f.name === field.name && f.labels.name === field.labels?.name;
-        }
-        return f.name === field.name;
-      })!;
+      const alignedFrameField = frame.fields.find((f) => f.state?.displayName === field.state?.displayName)!;
 
       const copy = {
         ...field,