feat(stack by dimension): add a stack by dimension dropdown list

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t } from '@superset-ui/core';
+import { JsonArray, t } from '@superset-ui/core';
 import {
   ControlPanelConfig,
   ControlPanelsContainerProps,
@@ -53,6 +53,7 @@ const {
   yAxisBounds,
   zoomable,
   orientation,
+  stackbydimension,
 } = DEFAULT_FORM_DATA;
 
 function createAxisTitleControl(axis: 'x' | 'y'): ControlSetRow[] {
@@ -317,6 +318,52 @@ const config: ControlPanelConfig = {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
+        [
+          {
+            name: 'stackbydimension',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Stack by dimension'),
+              default: stackbydimension,
+              renderTrigger: true,
+              description: t(
+                'Stack in groups, where each group corresponds to a dimension',
+              ),
+            },
+          },
+        ],
+        [
+          {
+            name: 'stackdimension',
+            config: {
+              type: 'SelectControl',
+              label: t('Dimension to stack by'),
+              visibility: ({ controls }) =>
+                Boolean(controls?.stackbydimension?.value),
+              renderTrigger: true,
+              description: t(
+                'Stack in groups, where each group corresponds to a dimension',
+              ),
+              shouldMapStateToProps: (
+                prevState,
+                state,
+                controlState,
+                chartState,
+              ) => true,
+              mapStateToProps: (state, controlState, chartState) => {
+                const value: JsonArray = state.controls.groupby
+                  .value as JsonArray;
+                const valueAsStringArr: string[][] = value.map(v => {
+                  if (v) return [v.toString(), v.toString()];
+                  return ['', ''];
+                });
+                return {
+                  choices: valueAsStringArr,
+                };
+              },
+            },
+          },
+        ],
         ...seriesOrderSection,
         ['color_scheme'],
         ['time_shift_color'],

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

@@ -75,6 +75,7 @@ export const DEFAULT_FORM_DATA: EchartsTimeseriesFormData = {
   truncateYAxis: false,
   yAxisBounds: [null, null],
   zoomable: false,
+  stackbydimension: false,
   richTooltip: true,
   xAxisForceCategorical: false,
   xAxisLabelRotation: defaultXAxis.xAxisLabelRotation,

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

@@ -191,6 +191,8 @@ export default function transformProps(
     yAxisTitleMargin,
     yAxisTitlePosition,
     zoomable,
+    stackbydimension,
+    stackdimension,
   }: EchartsTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData };
   const refs: Refs = {};
   const groupBy = ensureIsArray(groupby);
@@ -420,6 +422,19 @@ export default function transformProps(
       }
     });
 
+  if (stackbydimension && stackdimension && chartProps.rawFormData.groupby) {
+    const idxSelectedDimension =
+      formData.metrics.length > 1
+        ? 1
+        : 0 + chartProps.rawFormData.groupby.indexOf(stackdimension);
+    for (const s of series) {
+      if (s.id) {
+        const columnsArr = labelMap[s.id];
+        (s as any).stack = columnsArr[idxSelectedDimension];
+      }
+    }
+  }
+
   // axis bounds need to be parsed to replace incompatible values with undefined
   const [xAxisMin, xAxisMax] = (xAxisBounds || []).map(parseAxisBound);
   let [yAxisMin, yAxisMax] = (yAxisBounds || []).map(parseAxisBound);

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

@@ -74,6 +74,8 @@ export type EchartsTimeseriesFormData = QueryFormData & {
   rowLimit: number;
   seriesType: EchartsTimeseriesSeriesType;
   stack: StackType;
+  stackbydimension: boolean;
+  stackdimension: string;
   timeCompare?: string[];
   tooltipTimeFormat?: string;
   showTooltipTotal?: boolean;