fix: Bar charts horizontal margin adjustment error (apache#26817)

10webio · Jan 29, 2024 · 84c48d1 · 84c48d1
1 parent 8db5d13
commit 84c48d1
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,
+ });
  });
 });