fix(tooltip): Fix tooltip position from interference

Update tooltip positioning to not interfere shape reading and also adjust tooltip content to not be interfered from mouse cursor. Types affected are: Pie, Gauge, Donut, Radar and Treemap. Ref naver#3575
netil · Jan 3, 2024 · aa7a489 · aa7a489
1 parent af4de30
commit aa7a489
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 7 deletions.
diff --git a/src/ChartInternal/internals/tooltip.ts b/src/ChartInternal/internals/tooltip.ts
@@ -329,6 +329,7 @@ export default {
 		const {width, height, current, isLegendRight, inputType} = state;
 		const hasGauge = $$.hasType("gauge") && !config.gauge_fullCircle;
 		const hasTreemap = state.hasTreemap;
+		const hasRadar = state.hasRadar;
 		const isRotated = config.axis_rotated;
 		const hasArcType = $$.hasArcType();
 		const svgLeft = $$.getSvgLeft(true);
@@ -337,14 +338,19 @@ export default {
 		let {x, y} = currPos;
 
 		// Determine tooltip position
-		if (hasArcType) {
-			const raw = inputType === "touch" || $$.hasType("radar");
+		if (hasRadar) {
+			x += x >= (width / 2) ? 15 : -(tWidth + 15);
+			y += 15;
+		} else if (hasArcType) {
+			const raw = inputType === "touch";
 
 			if (!raw) {
 				x += (width - (isLegendRight ? $$.getLegendWidth() : 0)) / 2;
-				y += hasGauge ? height : height / 2;
+				y += hasGauge ? height : (height / 2) + tHeight;
 			}
-		} else if (!hasTreemap) {
+		} else if (hasTreemap) {
+			y += tHeight;
+		} else {
 			const padding = {
 				top: $$.getCurrentPaddingByDirection("top", true),
 				left: $$.getCurrentPaddingByDirection("left", true)
@@ -366,9 +372,9 @@ export default {
 		}
 
 		if (y + tHeight > current.height) {
-			const gap = hasTreemap ? 0 : 30;
+			const gap = hasTreemap ? tHeight + 10 : 30;
 
-			y -= hasGauge ? tHeight * 3 : tHeight + gap;
+			y -= hasGauge ? tHeight * 1.5 : tHeight + gap;
 		}
 
 		const pos = {top: y, left: x};

diff --git a/src/ChartInternal/internals/type.ts b/src/ChartInternal/internals/type.ts
@@ -119,7 +119,7 @@ export default {
 	 */
 	isTypeOf(d, type): boolean {
 		const id = isString(d) ? d : d.id;
-		const dataType = this.config.data_types[id] || this.config.data_type;
+		const dataType = this.config?.data_types?.[id] || this.config.data_type;
 
 		return isArray(type) ?
 			type.indexOf(dataType) >= 0 : dataType === type;

diff --git a/test/internals/tooltip-spec.ts b/test/internals/tooltip-spec.ts
@@ -796,6 +796,136 @@ describe("TOOLTIP", function() {
 			});
 		});
 
+		describe("", () => {
+			before(() => {
+				args = {
+					data: {
+						x: "x",
+						columns: [
+							["x", "Data A", "Data B", "Data C", "Data D", "Data E"],
+							["data1", 330, 350, 200, 380, 150],
+							["data2", 130, 100, 30, 200, 80],
+							["data3", 230, 153, 85, 300, 250]
+						],
+						type: "radar"
+					},
+					radar: {
+						direction: {
+							clockwise: true
+						}
+					}
+				};
+			});
+
+			const checkPos = (tooltip, expected) => {
+				const left = util.parseNum(tooltip.style("left"));
+				const top = util.parseNum(tooltip.style("top"));
+
+				expect([top, left]).to.be.deep.equal(expected);
+			};
+
+			it("check radar's tooltip position.", () => {
+				const {$: {tooltip}} = chart;
+
+				// when
+				chart.tooltip.show({x:0});
+				checkPos(tooltip, [24, 335]);
+
+				// when
+				chart.tooltip.show({x:1});
+				checkPos(tooltip, [175, 469]);
+
+				// when
+				chart.tooltip.show({x:2});
+				checkPos(tooltip, [300, 481]);
+
+				// when
+				chart.tooltip.show({x:3});
+				checkPos(tooltip, [300, 68]);
+
+				// when
+				chart.tooltip.show({x:4});
+				checkPos(tooltip, [175, 0]);
+			});
+
+			it("set options: data.type='pie'", () => {
+				args = {
+					data: {
+						columns: [
+							["data1", 30],
+							["data2", 120]
+						],
+						type: "pie",
+					},
+					legend: {
+						show: false
+					},
+					transition: {
+						duration: 0
+					}
+				};
+			});
+
+			it("check pie's tooltip position.", done => {
+				const {$: {arc, tooltip}} = chart;
+				const path = arc.select(".bb-shapes-data2 path").node();
+
+				setTimeout(() => {
+					util.hoverChart(chart, "mousemove", {clientX: 250, clientY: 170}, path);
+					checkPos(tooltip, [198.5, 249.5]);
+
+					util.hoverChart(chart, "mousemove", {clientX: 630, clientY: 470}, path);
+					checkPos(tooltip, [445.5, 524.5]);
+
+					done();
+				}, 300)
+			});
+
+			it("set options: data.type='treemap'", () => {
+				args = {
+					data: {
+						columns: [
+							["data1", 1300],
+							["data2", 200],
+							["data3", 500],
+							["data4", 50],
+							["data5", 100],
+							["data6", 70],
+							["data7", 200],
+							["data8", 133],
+							["data9", 220],
+							["data10", 15]
+						],
+						type: "treemap",
+						labels: {
+							colors: "#fff"
+						}
+					},
+					treemap: {
+						label: {
+							threshold: 0.03
+						}
+					}
+				};
+			});
+
+			it("check treemap's tooltip position.", () => {
+				const {$: {tooltip}, internal: {$el: {treemap}}} = chart;
+
+				chart.tooltip.show({
+					data: {
+						id: "data1"
+					}
+				  });
+
+				util.hoverChart(chart, "mousemove", {clientX: 100, clientY: 170}, treemap.node());
+				checkPos(tooltip, [198, 100]);
+
+				util.hoverChart(chart, "mousemove", {clientX: 100, clientY: 470}, treemap.node());
+				checkPos(tooltip, [442, 100]);
+			});
+		});
+
 		describe("on rotated axis", () => {
 			before(() => {
 				args = {