FieldColor: Prefer displayName for hashing (#93062)

* FieldColor: Prefer displayName for hashing

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

@@ -1,8 +1,9 @@
 import { createTheme } from '../themes/createTheme';
-import { Field, FieldType } from '../types/dataFrame';
+import { DataFrame, Field, FieldType } from '../types/dataFrame';
 import { FieldColorModeId } from '../types/fieldColor';
 
 import { fieldColorModeRegistry, FieldValueColorCalculator, getFieldSeriesColor } from './fieldColor';
+import { cacheFieldDisplayNames } from './fieldState';
 
 function getTestField(mode: string, fixedColor?: string, name = 'name'): Field {
   return {
@@ -55,6 +56,67 @@ describe('fieldColorModeRegistry', () => {
     expect(calcFn1(12, 34, undefined)).toEqual(calcFn2(56, 78, undefined));
   });
 
+  it('Palette uses displayName with Value fields', () => {
+    let frames: DataFrame[] = [
+      {
+        length: 0,
+        fields: [
+          {
+            name: 'Time',
+            type: FieldType.time,
+            values: [],
+            config: {},
+          },
+          {
+            name: 'Value',
+            labels: { foo: 'bar' },
+            type: FieldType.number,
+            values: [],
+            config: {
+              color: {
+                mode: FieldColorModeId.PaletteClassicByName,
+              },
+            },
+            state: {},
+          },
+        ],
+      },
+      {
+        length: 0,
+        fields: [
+          {
+            name: 'Time',
+            type: FieldType.time,
+            values: [],
+            config: {},
+          },
+          {
+            name: 'Value',
+            labels: { foo: 'baz' },
+            type: FieldType.number,
+            values: [],
+            config: {
+              color: {
+                mode: FieldColorModeId.PaletteClassicByName,
+              },
+            },
+            state: {},
+          },
+        ],
+      },
+    ];
+
+    cacheFieldDisplayNames(frames);
+
+    const mode = fieldColorModeRegistry.get(FieldColorModeId.PaletteClassicByName);
+
+    const calcFn1 = mode.getCalculator(frames[0].fields[1], createTheme());
+    const calcFn2 = mode.getCalculator(frames[1].fields[1], createTheme());
+
+    expect(calcFn1(0, 0)).toEqual('#82B5D8');
+    expect(calcFn2(0, 0)).toEqual('#FCE2DE');
+  });
+
   it('When color.seriesBy is set to last use that instead of v', () => {
     const field = getTestField('continuous-GrYlRd');
 

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

@@ -218,7 +218,7 @@ export class FieldColorSchemeMode implements FieldColorMode {
       }
     } else if (this.useSeriesName) {
       return (_: number, _percent: number, _threshold?: Threshold) => {
-        return colors[Math.abs(stringHash(field.name)) % colors.length];
+        return colors[Math.abs(stringHash(field.state?.displayName ?? field.name)) % colors.length];
       };
     } else {
       return (_: number, _percent: number, _threshold?: Threshold) => {