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

This commit is contained in:
Michael S. Molina 2024-01-29 15:25:16 -05:00 committed by GitHub
parent 8db5d13749
commit 84c48d11d8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 72 additions and 17 deletions

View File

@ -437,6 +437,7 @@ export default function transformProps(
yAxisTitlePosition,
convertInteger(yAxisTitleMargin),
convertInteger(xAxisTitleMargin),
isHorizontal,
);
const legendData = rawSeries

View File

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

View File

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

View File

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