fix(option): Fix rotated top padding

Adjust top padding on rotated axis Adjust right padding for 'fit' mode with legend positioned at right Ref #3433
naver · Nov 8, 2023 · 048c4e2 · 048c4e2
1 parent d2923f2
commit 048c4e2
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 4 deletions.
diff --git a/src/ChartInternal/internals/clip.ts b/src/ChartInternal/internals/clip.ts
@@ -59,7 +59,6 @@ export default {
 
 		// less than 20 is not enough to show the axis label 'outer' without legend
 		const h = (isRotated ? (margin.top + height) + 10 : margin.bottom) + 20;
-
 		const x = isRotated ? -(1 + left) : -(left - 1);
 		const y = -15; // -Math.max(15, margin.top);
 		const w = isRotated ? margin.left + 20 : width + 10 + left;
@@ -88,7 +87,7 @@ export default {
 			(isRotated ? -(1 + left) : -(left - 1));
 		const y = -(isRotated ? 20 : margin.top);
 		const w = (isRotated ? width + 15 + left : margin.left + 20) + (isInner ? 20 : 0);
-		const h = (isRotated ? margin.bottom + (config.padding?.mode === "fit" ? 10 : 0) : (margin.top + height)) + 10;
+		const h = (isRotated ? margin.bottom + 10 : (margin.top + height)) + 10;
 
 		node
 			.attr("x", x)

diff --git a/src/ChartInternal/internals/size.ts b/src/ChartInternal/internals/size.ts
@@ -304,7 +304,8 @@ export default {
 		}
 
 		const legendSize = {
-			right: config.legend_show && state.isLegendRight ? $$.getLegendWidth() + 20 : 0,
+			right: config.legend_show && state.isLegendRight ?
+				$$.getLegendWidth() + (isFitPadding ? 0 : 20) : 0,
 			bottom: !config.legend_show || state.isLegendRight || state.isLegendInset ? 0 : currLegend.height
 		};
 

diff --git a/src/ChartInternal/internals/transform.ts b/src/ChartInternal/internals/transform.ts
@@ -37,7 +37,7 @@ export default {
 			y = isRotated ? state.height + padding : 0;
 		} else if (target === "y2") {
 			x = isRotated ? 0 : state.width + padding;
-			y = isRotated ? 1 - padding : 0;
+			y = isRotated ? -padding - 1 : 0;
 		} else if (target === "subX") {
 			x = 0;
 			y = isRotated ? 0 : state.height2;

diff --git a/test/internals/padding-spec.ts b/test/internals/padding-spec.ts
@@ -369,6 +369,38 @@ describe("PADDING", () => {
 			it("rotated axis: outer y axis only without axis label text", () => {
 				deepEqual({top: 5, right: 10, bottom: 30, left: 40});
 			});
+
+			it("set options: padding.top=0, padding.bottom=0", () => {
+				args.axis.y2.show = true;
+				args.legend.show = false;
+				args.padding = {
+					top: 0,
+					bottom: 0
+				};
+			});
+
+			it("rotated axis: y & y2 axes should be hidden", () => {
+				const {$el} = chart.internal;
+				const chartRect = $el.chart.node().getBoundingClientRect();
+
+				expect(chartRect.top).to.be.above($el.axis.y2.node().getBoundingClientRect().bottom);
+				expect(chartRect.bottom).to.be.below($el.axis.y.node().getBoundingClientRect().top);
+			});
+
+			it("set options: padding.top=1, padding.bottom=1", () => {
+				args.padding = {
+					top: 1,
+					bottom: 1
+				};
+			});
+
+			it("rotated axis: y & y2 axes should show axes line within 1px range", () => {
+				const {$el} = chart.internal;
+				const chartRect = $el.chart.node().getBoundingClientRect();
+
+				expect(chartRect.top).to.be.closeTo($el.axis.y2.node().getBoundingClientRect().bottom, 1);
+				expect(chartRect.bottom).to.be.closeTo($el.axis.y.node().getBoundingClientRect().top, 1);
+			});
 		});
 	});
 
@@ -516,7 +548,39 @@ describe("PADDING", () => {
 
 			it("when y is shown, y2 hidden and padding.right=0", () => {
 				deepEqual({top: 0, right: 2, bottom: 30, left: 28.359375});
+			});
+
+			it("set options", () => {
+				args = {
+					data: {
+						columns: [
+							["data1", 51130, 12300, 23140]
+						],
+						type: "bar"
+					  },
+					padding: {
+						mode: "fit",
+						right: 0
+					},
+					legend: {
+						position: "right"
+					},
+					axis: {    
+						y2: {
+							show: true
+						}
+					}
+				}
+			});
+
+			it("legend in right position, shouldn't have gap with y2 axis in 'fit' mode", () => {
+				const {$el: {axis, legend}} = chart.internal;
 
+				const y2Right = axis.y2.node().getBoundingClientRect().right;
+				const legendLeft = legend.node().getBoundingClientRect().left + 2;
+
+				expect(legendLeft).to.be.closeTo(y2Right, 0.5);
+
 				// restore args
 				args = temp;
 			});