fix(treemap): Fix missing element arg on data.onover/out

Pass element argument for data.onover/out callback Fix #3766
naver · May 20, 2024 · 5bb4f5a · 5bb4f5a
1 parent 6ad0554
commit 5bb4f5a
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 3 deletions.
diff --git a/src/ChartInternal/interactions/interaction.ts b/src/ChartInternal/interactions/interaction.ts
@@ -4,7 +4,7 @@
  */
 import {drag as d3Drag} from "d3-drag";
 import {select as d3Select} from "d3-selection";
-import {$ARC, $AXIS, $COMMON, $SHAPE, $TREEMAP} from "../../config/classes";
+import {$ARC, $AXIS, $COMMON, $SHAPE} from "../../config/classes";
 import {KEY} from "../../module/Cache";
 import {emulateEvent, getPointer, isNumber, isObject} from "../../module/util";
 import type {IArcDataRow} from "../data/IData";
@@ -65,10 +65,11 @@ export default {
 			config.color_onover && $$.setOverColor(isOver, d, isArcTreemap);
 
 			if (isArcTreemap && "id") {
-				const selector = hasTreemap ? $TREEMAP.treemap : $ARC.arc;
+				const suffix = $$.getTargetSelectorSuffix((d as IArcDataRow).id);
+				const selector = hasTreemap ? `${$COMMON.target + suffix} > *`: $ARC.arc + suffix;
 
 				callback(d,
-					main.select(`.${selector}${$$.getTargetSelectorSuffix((d as IArcDataRow).id)}`)
+					main.select(`.${selector}`)
 						.node());
 			} else if (!config.tooltip_grouped) {
 				const last = $$.cache.get(KEY.setOverOut) || [];

diff --git a/test/shape/treemap-spec.ts b/test/shape/treemap-spec.ts
@@ -5,6 +5,7 @@
 /* eslint-disable */
 /* global describe, beforeEach, it, expect */
 import {expect} from "chai";
+import sinon from "sinon";
 import util from "../assets/util";
 import {parseNum} from "../assets/helper";
 
@@ -279,4 +280,46 @@ describe("TREEMAP", () => {
 			expect(chart.$.tooltip.select(".name").text()).to.be.equal(id);
 		});
 	});
+
+	describe("data.onover/out", () => {
+		let overSpy = sinon.spy();
+		let outSpy = sinon.spy();
+
+		before(() => {
+			args = {
+				data: {
+					columns: [
+						["data1", 130],
+						["data2", 200],
+						["data3", 500]
+					],
+					type: "treemap",
+					onover: overSpy,
+					onout: outSpy
+				}
+			}
+		});
+
+		it("should argument passed correctly", () => {
+			const id = "data1";
+
+			// when
+			chart.tooltip.show({data: {id}});
+
+			expect(overSpy.called).to.be.true;
+			let [data, element] = overSpy.args[0];
+
+			expect(data.id === id).to.be.true;
+			expect(element.tagName).to.be.equal("rect");
+
+			// when
+			chart.tooltip.hide();
+			[data, element] = overSpy.args[0];
+
+			expect(outSpy.called).to.be.true;
+
+			expect(data.id === id).to.be.true;
+			expect(element.tagName).to.be.equal("rect");
+		});
+	});
 });