fix(dashboard): Cross filters with time shifted series (#23347)

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts

@@ -107,8 +107,9 @@ export default function transformProps(
   } = chartProps;
   const { verboseMap = {} } = datasource;
   const [queryData] = queriesData;
-  const { data = [], label_map: labelMap } =
+  const { data = [], label_map = {} } =
     queryData as TimeseriesChartDataResponseResult;
+
   const dataTypes = getColtypesMapping(queryData);
   const annotationData = getAnnotationData(chartProps);
 
@@ -136,6 +137,7 @@ export default function transformProps(
     showValue,
     sliceId,
     timeGrainSqla,
+    timeCompare,
     stack,
     tooltipTimeFormat,
     tooltipSortByMetric,
@@ -154,6 +156,17 @@ export default function transformProps(
   }: EchartsTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData };
   const refs: Refs = {};
 
+  const labelMap = Object.entries(label_map).reduce((acc, entry) => {
+    if (
+      entry[1].length > groupby.length &&
+      Array.isArray(timeCompare) &&
+      timeCompare.includes(entry[1][0])
+    ) {
+      entry[1].shift();
+    }
+    return { ...acc, [entry[0]]: entry[1] };
+  }, {});
+
   const colorScale = CategoricalColorNamespace.getScale(colorScheme as string);
   const rebasedData = rebaseForecastDatum(data, verboseMap);
   let xAxisLabel = getXAxisLabel(chartProps.rawFormData) as string;

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts

@@ -71,6 +71,7 @@ export type EchartsTimeseriesFormData = QueryFormData & {
   rowLimit: number;
   seriesType: EchartsTimeseriesSeriesType;
   stack: StackType;
+  timeCompare?: string[];
   tooltipTimeFormat?: string;
   truncateYAxis: boolean;
   yAxisFormat?: string;

superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/transformProps.test.ts

@@ -497,4 +497,35 @@ describe('Does transformProps transform series correctly', () => {
       });
     });
   });
+
+  it('should remove time shift labels from label_map', () => {
+    const updatedChartPropsConfig = {
+      ...chartPropsConfig,
+      formData: {
+        ...formData,
+        timeCompare: ['1 year ago'],
+      },
+      queriesData: [
+        {
+          ...queriesData[0],
+          label_map: {
+            '1 year ago, foo1, bar1': ['1 year ago', 'foo1', 'bar1'],
+            '1 year ago, foo2, bar2': ['1 year ago', 'foo2', 'bar2'],
+            'foo1, bar1': ['foo1', 'bar1'],
+            'foo2, bar2': ['foo2', 'bar2'],
+          },
+        },
+      ],
+    };
+    const chartProps = new ChartProps(updatedChartPropsConfig);
+    const transformedProps = transformProps(
+      chartProps as EchartsTimeseriesChartProps,
+    );
+    expect(transformedProps.labelMap).toEqual({
+      '1 year ago, foo1, bar1': ['foo1', 'bar1'],
+      '1 year ago, foo2, bar2': ['foo2', 'bar2'],
+      'foo1, bar1': ['foo1', 'bar1'],
+      'foo2, bar2': ['foo2', 'bar2'],
+    });
+  });
 });