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

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

@@ -308,6 +308,7 @@ export default function transformProps(
         sliceId,
         isHorizontal,
         lineStyle,
+        timeCompare: array,
       },
     );
     if (transformedSeries) {

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 (

superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts

@@ -35,7 +35,7 @@ import {
 } from '@superset-ui/core';
 import { SortSeriesType } from '@superset-ui/chart-controls';
 import { format, LegendComponentOption, SeriesOption } from 'echarts';
-import { maxBy, meanBy, minBy, orderBy, sumBy } from 'lodash';
+import { isEmpty, maxBy, meanBy, minBy, orderBy, sumBy } from 'lodash';
 import {
   NULL_STRING,
   StackControlsValue,
@@ -604,3 +604,39 @@ export function getMinAndMaxFromBounds(
   }
   return {};
 }
+
+/**
+ * Returns the stackId used in stacked series.
+ * It will return the defaultId if the chart is not using time comparison.
+ * If time comparison is used, it will return the time comparison value as the stackId
+ * if the name includes the time comparison value.
+ *
+ * @param {string} defaultId The default stackId.
+ * @param {string[]} timeCompare The time comparison values.
+ * @param {string | number} name The name of the serie.
+ *
+ * @returns {string} The stackId.
+ */
+export function getTimeCompareStackId(
+  defaultId: string,
+  timeCompare: string[],
+  name?: string | number,
+): string {
+  if (isEmpty(timeCompare)) {
+    return defaultId;
+  }
+  // Each timeCompare is its own stack so it doesn't stack on top of original ones
+  return (
+    timeCompare.find(value => {
+      if (typeof name === 'string') {
+        // offset is represented as <offset>, group by list
+        return (
+          name.includes(`${value},`) ||
+          // offset is represented as <metric>__<offset>
+          name.includes(`__${value}`)
+        );
+      }
+      return name?.toString().includes(value);
+    }) || defaultId
+  );
+}