diff --git a/packages/grafana-data/src/field/fieldDisplay.test.ts b/packages/grafana-data/src/field/fieldDisplay.test.ts index b08b56a9d62..e08947ecdb8 100644 --- a/packages/grafana-data/src/field/fieldDisplay.test.ts +++ b/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: { diff --git a/packages/grafana-data/src/field/fieldDisplay.ts b/packages/grafana-data/src/field/fieldDisplay.ts index fffe8c6c8bf..a173051fa73 100644 --- a/packages/grafana-data/src/field/fieldDisplay.ts +++ b/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 {