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

(cherry picked from commit 84c48d1)

Author: michael-s-molina

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

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,
+  );
 }

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),

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,
+    });
   });
 });