feat(bar_chart): Stacked Bar chart with Time comparison in separated stacks (#27589)

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

@@ -62,7 +62,7 @@ import {
   formatAnnotationLabel,
   parseAnnotationOpacity,
 } from '../utils/annotation';
-import { getChartPadding } from '../utils/series';
+import { getChartPadding, getTimeCompareStackId } from '../utils/series';
 import {
   OpacityEnum,
   StackControlsValue,
@@ -164,6 +164,7 @@ export function transformSeries(
     isHorizontal?: boolean;
     lineStyle?: LineStyleOption;
     queryIndex?: number;
+    timeCompare?: string[];
   },
 ): SeriesOption | undefined {
   const { name } = series;
@@ -188,6 +189,7 @@ export function transformSeries(
     sliceId,
     isHorizontal = false,
     queryIndex = 0,
+    timeCompare = [],
   } = opts;
   const contexts = seriesContexts[name || ''] || [];
   const hasForecast =
@@ -217,9 +219,9 @@ export function transformSeries(
   } else if (stack && isObservation) {
     // the suffix of the observation series is '' (falsy), which disables
     // stacking. Therefore we need to set something that is truthy.
-    stackId = 'obs';
+    stackId = getTimeCompareStackId('obs', timeCompare, name);
   } else if (stack && isTrend) {
-    stackId = forecastSeries.type;
+    stackId = getTimeCompareStackId(forecastSeries.type, timeCompare, name);
   }
   let plotType;
   if (