diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts index 5976137b879..e80a5df36d7 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts @@ -129,6 +129,7 @@ export default function transformProps( theme, inContextMenu, emitCrossFilters, + legendState, } = chartProps; let focusedSeries: string | null = null; @@ -157,6 +158,7 @@ export default function transformProps( timeShiftColor, contributionMode, legendOrientation, + legendMargin, legendType, legendSort, logAxis, @@ -553,7 +555,7 @@ export default function transformProps( legendOrientation, addYAxisTitleOffset, zoomable, - null, + legendMargin, addXAxisTitleOffset, yAxisTitlePosition, convertInteger(yAxisTitleMargin), @@ -716,6 +718,8 @@ export default function transformProps( showLegend, theme, zoomable, + legendState, + chartPadding, ), // @ts-ignore data: series diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/MixedTimeseries/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/MixedTimeseries/transformProps.test.ts index c5f511b221d..a403a464e75 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/test/MixedTimeseries/transformProps.test.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/test/MixedTimeseries/transformProps.test.ts @@ -258,3 +258,66 @@ describe('legend sorting', () => { ]); }); }); + +it('legend margin: top orientation sets grid.top correctly', () => { + const chartPropsConfigWithoutIdentifiers = { + ...chartPropsConfig, + formData: { + ...formData, + legendMargin: 250, + showLegend: true, + }, + }; + const chartProps = new ChartProps(chartPropsConfigWithoutIdentifiers); + const transformed = transformProps(chartProps as EchartsMixedTimeseriesProps); + + expect((transformed.echartOptions.grid as any).top).toEqual(270); +}); + +it('legend margin: bottom orientation sets grid.bottom correctly', () => { + const chartPropsConfigWithoutIdentifiers = { + ...chartPropsConfig, + formData: { + ...formData, + legendMargin: 250, + showLegend: true, + legendOrientation: LegendOrientation.Bottom, + }, + }; + const chartProps = new ChartProps(chartPropsConfigWithoutIdentifiers); + const transformed = transformProps(chartProps as EchartsMixedTimeseriesProps); + + expect((transformed.echartOptions.grid as any).bottom).toEqual(270); +}); + +it('legend margin: left orientation sets grid.left correctly', () => { + const chartPropsConfigWithoutIdentifiers = { + ...chartPropsConfig, + formData: { + ...formData, + legendMargin: 250, + showLegend: true, + legendOrientation: LegendOrientation.Left, + }, + }; + const chartProps = new ChartProps(chartPropsConfigWithoutIdentifiers); + const transformed = transformProps(chartProps as EchartsMixedTimeseriesProps); + + expect((transformed.echartOptions.grid as any).left).toEqual(270); +}); + +it('legend margin: right orientation sets grid.right correctly', () => { + const chartPropsConfigWithoutIdentifiers = { + ...chartPropsConfig, + formData: { + ...formData, + legendMargin: 270, + showLegend: true, + legendOrientation: LegendOrientation.Right, + }, + }; + const chartProps = new ChartProps(chartPropsConfigWithoutIdentifiers); + const transformed = transformProps(chartProps as EchartsMixedTimeseriesProps); + + expect((transformed.echartOptions.grid as any).right).toEqual(270); +});