diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx index 55cd48736a0..3c61cab8093 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx +++ b/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, @@ -45,6 +45,7 @@ import { DEFAULT_FORM_DATA, TIME_SERIES_DESCRIPTION_TEXT, } from '../../constants'; +import { StackControlsValue } from '../../../constants'; const { logAxis, @@ -321,6 +322,38 @@ const config: ControlPanelConfig = { ['color_scheme'], ['time_shift_color'], ...showValueSection, + [ + { + name: 'stackDimension', + config: { + type: 'SelectControl', + label: t('Split stack by'), + visibility: ({ controls }) => + controls?.stack?.value === StackControlsValue.Stack, + 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, + }; + }, + }, + }, + ], [minorTicks], [ { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts index 6e30306056e..ac39507964d 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts @@ -191,6 +191,7 @@ export default function transformProps( yAxisTitleMargin, yAxisTitlePosition, zoomable, + stackDimension, }: EchartsTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData }; const refs: Refs = {}; const groupBy = ensureIsArray(groupby); @@ -418,6 +419,23 @@ export default function transformProps( } }); + if ( + stack === StackControlsValue.Stack && + 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); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts index 88a55b46be4..bdcb736956c 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts @@ -74,6 +74,7 @@ export type EchartsTimeseriesFormData = QueryFormData & { rowLimit: number; seriesType: EchartsTimeseriesSeriesType; stack: StackType; + stackDimension: string; timeCompare?: string[]; tooltipTimeFormat?: string; showTooltipTotal?: boolean;