From 990fcf733eae7592d1da7e4e5a075323fdac1c26 Mon Sep 17 00:00:00 2001
From: Jae Sung Park <alberto.park@gmail.com>
Date: Thu, 7 Sep 2023 17:47:49 +0900
Subject: [PATCH] refactor(clipPath): fix side-effect caused by #3367 (#3409)

Make x Axis clipPath y coordinate to be fixed

Ref #3367
---
 src/ChartInternal/internals/clip.ts |  3 +--
 test/internals/axis-x-spec.ts       | 34 +++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/ChartInternal/internals/clip.ts b/src/ChartInternal/internals/clip.ts
index a7d11653a..12b2ebb06 100644
--- a/src/ChartInternal/internals/clip.ts
+++ b/src/ChartInternal/internals/clip.ts
@@ -61,12 +61,11 @@ export default {
 		const h = (isRotated ? (margin.top + height) + 10 : margin.bottom) + 20;
 
 		const x = isRotated ? -(1 + left) : -(left - 1);
-		const y = -Math.max(15, margin.bottom);
 		const w = isRotated ? margin.left + 20 : width + 10 + left;
 
 		node
 			.attr("x", x)
-			.attr("y", y)
+			.attr("y", -2)
 			.attr("width", w)
 			.attr("height", h);
 	},
diff --git a/test/internals/axis-x-spec.ts b/test/internals/axis-x-spec.ts
index 8adf0b44f..4d71d830c 100644
--- a/test/internals/axis-x-spec.ts
+++ b/test/internals/axis-x-spec.ts
@@ -227,5 +227,39 @@ describe("X AXIS", function() {
 				expect(lines.attr("d")).to.be.equal(initialPath);
 			});
 		});
+
+		describe("", () => {
+			before(() => {
+				args = {
+					data: {
+						x: "x",
+						columns: [
+							["x", "www.somesitename1.com", "www.somesitename2.com", "www.somesitename3.com", "www.somesitename4.com", "www.somesitename5.com", "www.somesitename6.com", "www.somesitename7.com", "www.somesitename8.com", "www.somesitename9.com", "www.somesitename10.com", "www.somesitename11.com", "www.somesitename12.com"],
+							["pv", 90, 100, 140, 200, 100, 400, 90, 100, 140, 200, 100, 400]
+						],
+						type: "bar"
+					},
+					axis: {
+						x: {
+							type: "category",
+							tick: {
+							rotate: 75,
+							multiline: false,
+							tooltip: true
+							},
+							height: 130
+						}
+					}
+				};
+			});
+
+			it("should clipPath for x axis size defined as x Axis' dimension.", () => {
+				const clipRect = chart.internal.$el.defs.select("[id$=xaxis] rect");
+				const axisRect = chart.$.main.select(`.${$AXIS.axisX}`).node().getBoundingClientRect();
+
+				expect(axisRect.height).to.be.below(+clipRect.attr("height"));		
+				expect(+clipRect.attr("y") > -50).to.be.be.ok;
+			});
+		});
 	});
 });