fix: Bar charts horizontal margin adjustment error (#26817)
This commit is contained in:
parent
8db5d13749
commit
84c48d11d8
|
|
@ -437,6 +437,7 @@ export default function transformProps(
|
|||
yAxisTitlePosition,
|
||||
convertInteger(yAxisTitleMargin),
|
||||
convertInteger(xAxisTitleMargin),
|
||||
isHorizontal,
|
||||
);
|
||||
|
||||
const legendData = rawSeries
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue