TimeSeries: Fix legend and tooltip colors changing after data refreshes (#63823)

packages/grafana-ui/src/components/TimeSeries/utils.ts

@@ -105,8 +105,6 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{
     return builder; // empty frame with no options
   }
 
-  let seriesIndex = 0;
-
   const xScaleKey = 'x';
   let xScaleUnit = '_x';
   let yScaleKey = '';
@@ -217,9 +215,6 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{
       continue;
     }
 
-    // TODO: skip this for fields with custom renderers?
-    field.state!.seriesIndex = seriesIndex++;
-
     let fmt = field.display ?? defaultFormatter;
     if (field.config.custom?.stacking?.mode === StackingMode.Percent) {
       fmt = getDisplayProcessor({

public/app/plugins/panel/timeseries/utils.test.ts

@@ -29,6 +29,22 @@ describe('prepare timeseries graph', () => {
     expect(frames).toBeNull();
   });
 
+  it('sets classic palette index on graphable fields', () => {
+    const input = [
+      toDataFrame({
+        fields: [
+          { name: 'a', type: FieldType.time, values: [1, 2, 3] },
+          { name: 'b', type: FieldType.string, values: ['a', 'b', 'c'] },
+          { name: 'c', type: FieldType.number, values: [1, 2, 3] },
+          { name: 'd', type: FieldType.string, values: ['d', 'e', 'f'] },
+          { name: 'e', type: FieldType.boolean, values: [true, false, true] },
+        ],
+      }),
+    ];
+    const frames = prepareGraphableFields(input, createTheme());
+    expect(frames![0].fields.map((f) => f.state?.seriesIndex)).toEqual([undefined, undefined, 0, undefined, 1]);
+  });
+
   it('will graph numbers and boolean values', () => {
     const input = [
       toDataFrame({

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

@@ -128,12 +128,30 @@ export function prepareGraphableFields(
   }
 
   if (frames.length) {
+    setClassicPaletteIdxs(frames, theme);
     return frames;
   }
 
   return null;
 }
 
+const setClassicPaletteIdxs = (frames: DataFrame[], theme: GrafanaTheme2) => {
+  let seriesIndex = 0;
+
+  frames.forEach((frame) => {
+    frame.fields.forEach((field) => {
+      // TODO: also add FieldType.enum type here after https://github.com/grafana/grafana/pull/60491
+      if (field.type === FieldType.number || field.type === FieldType.boolean) {
+        field.state = {
+          ...field.state,
+          seriesIndex: seriesIndex++, // TODO: skip this for fields with custom renderers (e.g. Candlestick)?
+        };
+        field.display = getDisplayProcessor({ field, theme });
+      }
+    });
+  });
+};
+
 export function getTimezones(timezones: string[] | undefined, defaultTimezone: string): string[] {
   if (!timezones || !timezones.length) {
     return [defaultTimezone];