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 3bbe285aeca54..a5c380c5ffb36 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts @@ -437,6 +437,7 @@ export default function transformProps( yAxisTitlePosition, convertInteger(yAxisTitleMargin), convertInteger(xAxisTitleMargin), + isHorizontal, ); const legendData = rawSeries diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts index 3b62417f16335..5b9fa43047a3c 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts @@ -550,6 +550,7 @@ export function getPadding( yAxisTitlePosition?: string, yAxisTitleMargin?: number, xAxisTitleMargin?: number, + isHorizontal?: boolean, ): { bottom: number; left: number; @@ -560,21 +561,28 @@ export function getPadding( ? TIMESERIES_CONSTANTS.yAxisLabelTopOffset : 0; const xAxisOffset = addXAxisTitleOffset ? Number(xAxisTitleMargin) || 0 : 0; - return getChartPadding(showLegend, legendOrientation, margin, { - top: - yAxisTitlePosition && yAxisTitlePosition === 'Top' - ? TIMESERIES_CONSTANTS.gridOffsetTop + (Number(yAxisTitleMargin) || 0) - : TIMESERIES_CONSTANTS.gridOffsetTop + yAxisOffset, - bottom: zoomable - ? TIMESERIES_CONSTANTS.gridOffsetBottomZoomable + xAxisOffset - : TIMESERIES_CONSTANTS.gridOffsetBottom + xAxisOffset, - left: - yAxisTitlePosition === 'Left' - ? TIMESERIES_CONSTANTS.gridOffsetLeft + (Number(yAxisTitleMargin) || 0) - : TIMESERIES_CONSTANTS.gridOffsetLeft, - right: - showLegend && legendOrientation === LegendOrientation.Right - ? 0 - : TIMESERIES_CONSTANTS.gridOffsetRight, - }); + return getChartPadding( + showLegend, + legendOrientation, + margin, + { + top: + yAxisTitlePosition && yAxisTitlePosition === 'Top' + ? TIMESERIES_CONSTANTS.gridOffsetTop + (Number(yAxisTitleMargin) || 0) + : TIMESERIES_CONSTANTS.gridOffsetTop + yAxisOffset, + bottom: zoomable + ? TIMESERIES_CONSTANTS.gridOffsetBottomZoomable + xAxisOffset + : TIMESERIES_CONSTANTS.gridOffsetBottom + xAxisOffset, + left: + yAxisTitlePosition === 'Left' + ? TIMESERIES_CONSTANTS.gridOffsetLeft + + (Number(yAxisTitleMargin) || 0) + : TIMESERIES_CONSTANTS.gridOffsetLeft, + right: + showLegend && legendOrientation === LegendOrientation.Right + ? 0 + : TIMESERIES_CONSTANTS.gridOffsetRight, + }, + isHorizontal, + ); } diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts index 6a51e7cbf7c5c..8c87bf4333c61 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts @@ -466,6 +466,7 @@ export function getChartPadding( orientation: LegendOrientation, margin?: string | number | null, padding?: { top?: number; bottom?: number; left?: number; right?: number }, + isHorizontal?: boolean, ): { bottom: number; left: number; @@ -486,6 +487,19 @@ export function getChartPadding( } const { bottom = 0, left = 0, right = 0, top = 0 } = padding || {}; + + if (isHorizontal) { + return { + left: + left + (orientation === LegendOrientation.Bottom ? legendMargin : 0), + right: + right + (orientation === LegendOrientation.Right ? legendMargin : 0), + top: top + (orientation === LegendOrientation.Top ? legendMargin : 0), + bottom: + bottom + (orientation === LegendOrientation.Left ? legendMargin : 0), + }; + } + return { left: left + (orientation === LegendOrientation.Left ? legendMargin : 0), right: right + (orientation === LegendOrientation.Right ? legendMargin : 0), diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/utils/series.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/utils/series.test.ts index 3d7d21c8d0b02..10768a47f8d4d 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/test/utils/series.test.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/test/utils/series.test.ts @@ -795,6 +795,14 @@ describe('getChartPadding', () => { right: 0, top: 0, }); + expect( + getChartPadding(true, LegendOrientation.Left, 100, undefined, true), + ).toEqual({ + bottom: 100, + left: 0, + right: 0, + top: 0, + }); }); it('should return the correct padding for right orientation', () => { @@ -804,6 +812,14 @@ describe('getChartPadding', () => { right: 50, top: 0, }); + expect( + getChartPadding(true, LegendOrientation.Right, 50, undefined, true), + ).toEqual({ + bottom: 0, + left: 0, + right: 50, + top: 0, + }); }); it('should return the correct padding for top orientation', () => { @@ -813,6 +829,14 @@ describe('getChartPadding', () => { right: 0, top: 20, }); + expect( + getChartPadding(true, LegendOrientation.Top, 20, undefined, true), + ).toEqual({ + bottom: 0, + left: 0, + right: 0, + top: 20, + }); }); it('should return the correct padding for bottom orientation', () => { @@ -822,6 +846,14 @@ describe('getChartPadding', () => { right: 0, top: 0, }); + expect( + getChartPadding(true, LegendOrientation.Bottom, 10, undefined, true), + ).toEqual({ + bottom: 0, + left: 10, + right: 0, + top: 0, + }); }); });