Update transformProps.ts

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx

@@ -359,6 +359,22 @@ const config: ControlPanelConfig = {
         [xAxisLabelRotation],
         [xAxisLabelInterval],
         ...richTooltipSection,
+        [
+          {
+            name: 'show_query_identifiers',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Show query identifiers'),
+              description: t(
+                'Adds Query A and Query B identifiers to help differentiate series',
+              ),
+              default: false,
+              renderTrigger: true,
+              visibility: ({ controls }) =>
+                Boolean(controls?.rich_tooltip?.value),
+            },
+          },
+        ],
         // eslint-disable-next-line react/jsx-key
         [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
         [

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

@@ -212,6 +212,7 @@ export default function transformProps(
     sortSeriesAscendingB,
     timeGrainSqla,
     percentageThreshold,
+    show_query_identifiers = false,
     metrics = [],
     metricsB = [],
   }: EchartsMixedTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData };
@@ -395,10 +396,19 @@ export default function transformProps(
     const seriesName = inverted[entryName] || entryName;
     const colorScaleKey = getOriginalSeries(seriesName, array);
 
-    let displayName = `${entryName} (Query A)`;
+    let displayName: string;
 
     if (groupby.length > 0) {
-      displayName = `${MetricDisplayNameA} (Query A), ${entryName}`;
+      // When we have groupby, format as "metric, dimension"
+      const metricPart = show_query_identifiers
+        ? `${MetricDisplayNameA} (Query A)`
+        : MetricDisplayNameA;
+      displayName = `${metricPart}, ${entryName}`;
+    } else {
+      // When no groupby, format as just the entry name with optional query identifier
+      displayName = show_query_identifiers
+        ? `${entryName} (Query A)`
+        : entryName;
     }
 
     const seriesFormatter = getFormatter(
@@ -453,10 +463,19 @@ export default function transformProps(
     const seriesName = `${seriesEntry} (1)`;
     const colorScaleKey = getOriginalSeries(seriesEntry, array);
 
-    let displayName = `${entryName} (Query B)`;
+    let displayName: string;
 
     if (groupbyB.length > 0) {
-      displayName = `${MetricDisplayNameB} (Query B), ${entryName}`;
+      // When we have groupby, format as "metric, dimension"
+      const metricPart = show_query_identifiers
+        ? `${MetricDisplayNameB} (Query B)`
+        : MetricDisplayNameB;
+      displayName = `${metricPart}, ${entryName}`;
+    } else {
+      // When no groupby, format as just the entry name with optional query identifier
+      displayName = show_query_identifiers
+        ? `${entryName} (Query B)`
+        : entryName;
     }
 
     const seriesFormatter = getFormatter(

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

@@ -60,6 +60,7 @@ export type EchartsMixedTimeseriesFormData = QueryFormData & {
   tooltipTimeFormat?: string;
   zoomable: boolean;
   richTooltip: boolean;
+  show_query_identifiers?: boolean;
   xAxisLabelRotation: number;
   xAxisLabelInterval?: number | string;
   colorScheme?: string;
@@ -133,6 +134,7 @@ export const DEFAULT_FORM_DATA: EchartsMixedTimeseriesFormData = {
   groupbyB: [],
   zoomable: TIMESERIES_DEFAULTS.zoomable,
   richTooltip: TIMESERIES_DEFAULTS.richTooltip,
+  show_query_identifiers: false,
   xAxisLabelRotation: TIMESERIES_DEFAULTS.xAxisLabelRotation,
   xAxisLabelInterval: TIMESERIES_DEFAULTS.xAxisLabelInterval,
   ...DEFAULT_TITLE_FORM_DATA,

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

@@ -28,7 +28,7 @@ import {
   EchartsMixedTimeseriesProps,
 } from '../../src/MixedTimeseries/types';
 
-const formData: EchartsMixedTimeseriesFormData = {
+const baseFormData: EchartsMixedTimeseriesFormData = {
   annotationLayers: [],
   area: false,
   areaB: false,
@@ -81,6 +81,7 @@ const formData: EchartsMixedTimeseriesFormData = {
   forecastPeriods: [],
   forecastInterval: 0,
   forecastSeasonalityDaily: 0,
+  show_query_identifiers: false,
 };
 
 const queriesData = [
@@ -108,57 +109,118 @@ const queriesData = [
   },
 ];
 
-const chartPropsConfig = {
-  formData,
-  width: 800,
-  height: 600,
-  queriesData,
-  theme: supersetTheme,
-};
+describe('MixedTimeseries transformProps', () => {
+  it('should transform chart props for viz with query identifiers disabled', () => {
+    const formData = { ...baseFormData, show_query_identifiers: false };
+    const chartPropsConfig = {
+      formData,
+      width: 800,
+      height: 600,
+      queriesData,
+      theme: supersetTheme,
+    };
+    const chartProps = new ChartProps({ ...chartPropsConfig, formData });
+    const transformed = transformProps(
+      chartProps as EchartsMixedTimeseriesProps,
+    );
 
-it('should transform chart props for viz', () => {
-  const chartProps = new ChartProps(chartPropsConfig);
-  const transformed = transformProps(chartProps as EchartsMixedTimeseriesProps);
-
-  expect(transformed).toEqual(
-    expect.objectContaining({
-      echartOptions: expect.objectContaining({
-        series: expect.arrayContaining([
-          expect.objectContaining({
-            data: [
-              [599616000000, 1],
-              [599916000000, 3],
-            ],
-            id: 'sum__num (Query A), boy',
-            stack: 'obs\na',
-          }),
-          expect.objectContaining({
-            data: [
-              [599616000000, 2],
-              [599916000000, 4],
-            ],
-            id: 'sum__num (Query A), girl',
-            stack: 'obs\na',
-          }),
-          // Query B — Bar series
-          expect.objectContaining({
-            data: [
-              [599616000000, 1],
-              [599916000000, 3],
-            ],
-            id: 'sum__num (Query B), boy',
-            stack: 'obs\nb',
-          }),
-          expect.objectContaining({
-            data: [
-              [599616000000, 2],
-              [599916000000, 4],
-            ],
-            id: 'sum__num (Query B), girl',
-            stack: 'obs\nb',
-          }),
-        ]),
+    expect(transformed).toEqual(
+      expect.objectContaining({
+        echartOptions: expect.objectContaining({
+          series: expect.arrayContaining([
+            expect.objectContaining({
+              data: [
+                [599616000000, 1],
+                [599916000000, 3],
+              ],
+              id: 'sum__num, boy',
+              stack: 'obs\na',
+            }),
+            expect.objectContaining({
+              data: [
+                [599616000000, 2],
+                [599916000000, 4],
+              ],
+              id: 'sum__num, girl',
+              stack: 'obs\na',
+            }),
+            // Query B — Bar series
+            expect.objectContaining({
+              data: [
+                [599616000000, 1],
+                [599916000000, 3],
+              ],
+              id: 'sum__num, boy',
+              stack: 'obs\nb',
+            }),
+            expect.objectContaining({
+              data: [
+                [599616000000, 2],
+                [599916000000, 4],
+              ],
+              id: 'sum__num, girl',
+              stack: 'obs\nb',
+            }),
+          ]),
+        }),
       }),
-    }),
-  );
+    );
+  });
+
+  it('should transform chart props for viz with query identifiers enabled', () => {
+    const formData = { ...baseFormData, show_query_identifiers: true };
+    const chartPropsConfig = {
+      formData,
+      width: 800,
+      height: 600,
+      queriesData,
+      theme: supersetTheme,
+    };
+    const chartProps = new ChartProps({ ...chartPropsConfig, formData });
+    const transformed = transformProps(
+      chartProps as EchartsMixedTimeseriesProps,
+    );
+
+    expect(transformed).toEqual(
+      expect.objectContaining({
+        echartOptions: expect.objectContaining({
+          series: expect.arrayContaining([
+            expect.objectContaining({
+              data: [
+                [599616000000, 1],
+                [599916000000, 3],
+              ],
+              id: 'sum__num (Query A), boy',
+              stack: 'obs\na',
+            }),
+            expect.objectContaining({
+              data: [
+                [599616000000, 2],
+                [599916000000, 4],
+              ],
+              id: 'sum__num (Query A), girl',
+              stack: 'obs\na',
+            }),
+            // Query B — Bar series
+            expect.objectContaining({
+              data: [
+                [599616000000, 1],
+                [599916000000, 3],
+              ],
+              id: 'sum__num (Query B), boy',
+              stack: 'obs\nb',
+            }),
+            expect.objectContaining({
+              data: [
+                [599616000000, 2],
+                [599916000000, 4],
+              ],
+              id: 'sum__num (Query B), girl',
+              stack: 'obs\nb',
+            }),
+          ]),
+        }),
+      }),
+    );
+  });
 });