This is an automated email from the ASF dual-hosted git repository.
michaelsmolina pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 84c48d11d8 fix: Bar charts horizontal margin adjustment error (#26817)
84c48d11d8 is described below
commit 84c48d11d8b3bef244823643804f5fd3d6e3ca86
Author: Michael S. Molina <[email protected]>
AuthorDate: Mon Jan 29 15:25:16 2024 -0500
fix: Bar charts horizontal margin adjustment error (#26817)
---
.../src/Timeseries/transformProps.ts | 1 +
.../src/Timeseries/transformers.ts | 42 +++++++++++++---------
.../plugin-chart-echarts/src/utils/series.ts | 14 ++++++++
.../plugin-chart-echarts/test/utils/series.test.ts | 32 +++++++++++++++++
4 files changed, 72 insertions(+), 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
index 3bbe285aec..a5c380c5ff 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 3b62417f16..5b9fa43047 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 6a51e7cbf7..8c87bf4333 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 3d7d21c8d0..10768a47f8 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,
+ });
});
});
