fix(mixed-timeseries-plugin): Second query stacks stacked on top of first query series (#29119)

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

@@ -392,6 +392,7 @@ export default function transformProps(
         seriesType,
         showValue,
         stack: Boolean(stack),
+        stackIdSuffix: '\na',
         yAxisIndex,
         filterState,
         seriesKey: entry.name,
@@ -438,6 +439,7 @@ export default function transformProps(
         seriesType: seriesTypeB,
         showValue: showValueB,
         stack: Boolean(stackB),
+        stackIdSuffix: '\nb',
         yAxisIndex: yAxisIndexB,
         filterState,
         seriesKey: primarySeries.has(entry.name as string)

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

@@ -151,6 +151,7 @@ export function transformSeries(
     areaOpacity?: number;
     seriesType?: EchartsTimeseriesSeriesType;
     stack?: StackType;
+    stackIdSuffix?: string;
     yAxisIndex?: number;
     showValue?: boolean;
     onlyTotal?: boolean;
@@ -179,6 +180,7 @@ export function transformSeries(
     areaOpacity = 1,
     seriesType,
     stack,
+    stackIdSuffix,
     yAxisIndex = 0,
     showValue,
     onlyTotal,
@@ -225,6 +227,9 @@ export function transformSeries(
   } else if (stack && isTrend) {
     stackId = getTimeCompareStackId(forecastSeries.type, timeCompare, name);
   }
+  if (stackId && stackIdSuffix) {
+    stackId += stackIdSuffix;
+  }
   let plotType;
   if (
     !isConfidenceBand &&

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

@@ -0,0 +1,161 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { ChartProps, supersetTheme } from '@superset-ui/core';
+import {
+  LegendOrientation,
+  LegendType,
+  EchartsTimeseriesSeriesType,
+} from '@superset-ui/plugin-chart-echarts';
+import transformProps from '../../src/MixedTimeseries/transformProps';
+import {
+  EchartsMixedTimeseriesFormData,
+  EchartsMixedTimeseriesProps,
+} from '../../src/MixedTimeseries/types';
+
+const formData: EchartsMixedTimeseriesFormData = {
+  annotationLayers: [],
+  area: false,
+  areaB: false,
+  legendMargin: null,
+  logAxis: false,
+  logAxisSecondary: false,
+  markerEnabled: false,
+  markerEnabledB: false,
+  markerSize: 0,
+  markerSizeB: 0,
+  minorSplitLine: false,
+  minorTicks: false,
+  opacity: 0,
+  opacityB: 0,
+  orderDesc: false,
+  orderDescB: false,
+  richTooltip: false,
+  rowLimit: 0,
+  rowLimitB: 0,
+  legendOrientation: LegendOrientation.Top,
+  legendType: LegendType.Scroll,
+  showLegend: false,
+  showValue: false,
+  showValueB: false,
+  stack: true,
+  stackB: true,
+  truncateYAxis: false,
+  truncateYAxisSecondary: false,
+  xAxisLabelRotation: 0,
+  xAxisTitle: '',
+  xAxisTitleMargin: 0,
+  yAxisBounds: [undefined, undefined],
+  yAxisBoundsSecondary: [undefined, undefined],
+  yAxisTitle: '',
+  yAxisTitleMargin: 0,
+  yAxisTitlePosition: '',
+  yAxisTitleSecondary: '',
+  zoomable: false,
+  colorScheme: 'bnbColors',
+  datasource: '3__table',
+  x_axis: 'ds',
+  metrics: ['sum__num'],
+  metricsB: ['sum__num'],
+  groupby: ['gender'],
+  groupbyB: ['gender'],
+  seriesType: EchartsTimeseriesSeriesType.Line,
+  seriesTypeB: EchartsTimeseriesSeriesType.Bar,
+  viz_type: 'mixed_timeseries',
+  forecastEnabled: false,
+  forecastPeriods: [],
+  forecastInterval: 0,
+  forecastSeasonalityDaily: 0,
+};
+
+const queriesData = [
+  {
+    data: [
+      { boy: 1, girl: 2, ds: 599616000000 },
+      { boy: 3, girl: 4, ds: 599916000000 },
+    ],
+    label_map: {
+      ds: ['ds'],
+      boy: ['boy'],
+      girl: ['girl'],
+    },
+  },
+  {
+    data: [
+      { boy: 1, girl: 2, ds: 599616000000 },
+      { boy: 3, girl: 4, ds: 599916000000 },
+    ],
+    label_map: {
+      ds: ['ds'],
+      boy: ['boy'],
+      girl: ['girl'],
+    },
+  },
+];
+
+const chartPropsConfig = {
+  formData,
+  width: 800,
+  height: 600,
+  queriesData,
+  theme: supersetTheme,
+};
+
+it('should transform chart props for viz', () => {
+  const chartProps = new ChartProps(chartPropsConfig);
+  expect(transformProps(chartProps as EchartsMixedTimeseriesProps)).toEqual(
+    expect.objectContaining({
+      echartOptions: expect.objectContaining({
+        series: expect.arrayContaining([
+          expect.objectContaining({
+            data: [
+              [599616000000, 1],
+              [599916000000, 3],
+            ],
+            id: 'boy',
+            stack: 'obs\na',
+          }),
+          expect.objectContaining({
+            data: [
+              [599616000000, 2],
+              [599916000000, 4],
+            ],
+            id: 'girl',
+            stack: 'obs\na',
+          }),
+          expect.objectContaining({
+            data: [
+              [599616000000, 1],
+              [599916000000, 3],
+            ],
+            id: 'boy (1)',
+            stack: 'obs\nb',
+          }),
+          expect.objectContaining({
+            data: [
+              [599616000000, 2],
+              [599916000000, 4],
+            ],
+            id: 'girl (1)',
+            stack: 'obs\nb',
+          }),
+        ]),
+      }),
+    }),
+  );
+});