fix(tooltip): Fix tooltip interaction on viewBox

Fix the event target on viewBox svg -> eventRect element Ref naver#3925
netil · Jan 3, 2025 · 0ddc895 · 0ddc895
1 parent 9e15e1f
commit 0ddc895
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/src/ChartInternal/data/data.ts b/src/ChartInternal/data/data.ts
@@ -736,7 +736,7 @@ export default {
 				const pos = [point, 0];
 
 				isRotated && pos.reverse();
-				point = getTransformCTM($el.svg.node(), ...pos)[isRotated ? "y" : "x"];
+				point = getTransformCTM($el.eventRect.node(), ...pos)[isRotated ? "y" : "x"];
 			} else {
 				point -= isRotated ? rect.top : rect.left;
 			}

diff --git a/src/ChartInternal/interactions/interaction.ts b/src/ChartInternal/interactions/interaction.ts
@@ -226,7 +226,7 @@ export default {
 			let y = top + (mouse ? mouse[1] : 0) + (isRotated ? 4 : 0);
 
 			if (hasViewBox(svg)) {
-				const ctm = getTransformCTM($$.$el.svg.node(), x, y, false);
+				const ctm = getTransformCTM($$.$el.eventRect.node(), x, y, false);
 
 				x = ctm.x;
 				y = ctm.y;

diff --git a/test/interactions/viewbox-spec.ts b/test/interactions/viewbox-spec.ts
@@ -115,7 +115,7 @@ describe("viewBox", function() {
 		it("should show tooltip on viewBox scale", () => {
 			const {internal: {$el: {eventRect}}} = chart;
 
-			[50, 130, 200, 270, 350, 450].forEach(x => {
+			[70, 170, 270, 370, 430, 470].forEach(x => {
 				fireEvent(eventRect.node(), "mousemove", {
 					clientX: x,
 					clientY: 50
@@ -132,7 +132,7 @@ describe("viewBox", function() {
 		it("should show tooltip on viewBox scale: roated axis", () => {
 			const {internal: {$el: {eventRect}}} = chart;
 
-			[10, 50, 100, 150, 200, 250].forEach(y => {
+			[10, 50, 80, 100, 150, 200, 250].forEach(y => {
 				fireEvent(eventRect.node(), "mousemove", {
 					clientX: 50,
 					clientY: y