diff --git a/packages/grafana-data/src/field/fieldState.ts b/packages/grafana-data/src/field/fieldState.ts index 01f3a8760c1..f1a9adb8e31 100644 --- a/packages/grafana-data/src/field/fieldState.ts +++ b/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); diff --git a/packages/grafana-data/src/field/index.ts b/packages/grafana-data/src/field/index.ts index 9462ca10687..b457d674034 100644 --- a/packages/grafana-data/src/field/index.ts +++ b/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'; diff --git a/public/app/plugins/panel/barchart/utils.ts b/public/app/plugins/panel/barchart/utils.ts index 759e8cefe25..22a20463dd9 100644 --- a/public/app/plugins/panel/barchart/utils.ts +++ b/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,