fix(data): Fix duplicated data.onclick call

Remove data.onclick call from zoom drag 'end' event Fix #2104
naver · May 27, 2021 · b4c5dc2 · b4c5dc2
1 parent 689bfdf
commit b4c5dc2
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 15 deletions.
diff --git a/src/ChartInternal/data/IData.ts b/src/ChartInternal/data/IData.ts
@@ -7,6 +7,7 @@ export interface IDataRow {
     value: number;
     id: string;
     index: number;
+    name?: string;
 }
 
 export interface IData {

diff --git a/src/ChartInternal/data/data.ts b/src/ChartInternal/data/data.ts
@@ -4,7 +4,7 @@
  */
 import CLASS from "../../config/classes";
 import {KEY} from "../../module/Cache";
-import {IData} from "./IData";
+import {IData, IDataRow} from "./IData";
 import {
 	findIndex,
 	getUnique,
@@ -708,15 +708,15 @@ export default {
 		return sames;
 	},
 
-	findClosestFromTargets(targets, pos) {
+	findClosestFromTargets(targets, pos): IDataRow | undefined {
 		const $$ = this;
 		const candidates = targets.map(target => $$.findClosest(target.values, pos)); // map to array of closest points of each target
 
 		// decide closest point and return
 		return $$.findClosest(candidates, pos);
 	},
 
-	findClosest(values, pos) {
+	findClosest(values, pos): IDataRow | undefined {
 		const $$ = this;
 		const {config, $el: {main}} = $$;
 		const data = values.filter(v => v && isValue(v.value));

diff --git a/src/ChartInternal/interactions/zoom.ts b/src/ChartInternal/interactions/zoom.ts
@@ -2,10 +2,8 @@
  * Copyright (c) 2017 ~ present NAVER Corp.
  * billboard.js project is licensed under the MIT license
  */
-import {select as d3Select} from "d3-selection";
 import {drag as d3Drag} from "d3-drag";
 import {zoom as d3Zoom} from "d3-zoom";
-import {document} from "../../module/browser";
 import CLASS from "../../config/classes";
 import {callFn, diffDomain, getMinMax, getPointer, isDefined, isFunction} from "../../module/util";
 
@@ -320,7 +318,7 @@ export default {
 					.attr(prop.axis, Math.min(start, end))
 					.attr(prop.attr, Math.abs(end - start));
 			})
-			.on("end", function(event) {
+			.on("end", event => {
 				const scale = $$.scale.zoom || $$.scale.x;
 
 				state.event = event;
@@ -342,15 +340,6 @@ export default {
 				if (start !== end) {
 					$$.api.zoom([start, end].map(v => scale.invert(v)));
 					$$.onZoomEnd(event);
-				} else {
-					if ($$.isMultipleX()) {
-						$$.clickHandlerForMultipleXS.bind(this)($$);
-					} else {
-						const [x, y] = getPointer(event);
-						const target = document.elementFromPoint(x, y);
-
-						$$.clickHandlerForSingleX.bind(target)(d3Select(target).datum(), $$);
-					}
 				}
 			});
 	},

diff --git a/test/interactions/interaction-spec.ts b/test/interactions/interaction-spec.ts
@@ -729,6 +729,41 @@ describe("INTERACTION", () => {
 				expect(clicked).to.be.true;
 				expect(data.value).to.be.equal(30);
 			});
+
+			it("set option", () => {
+				args = {
+					data: {
+						xs: {
+							data1: "x1",
+							data2: "x2"
+						},
+						columns: [
+							["x1", 1, 2, 3, 4, 5],
+							["x2", 1, 2, 4, 5, 6],
+							["data1", 4, 1, 6, 8, 10],
+							["data2", 5, 2, 6, 7, 8]
+						],
+						type: "line", // for ESM specify as: line()
+						onclick: sinon.spy()
+					},
+					zoom: {
+						enabled: true,
+						type: "drag",
+					}
+				}
+			});
+
+			it("onclick callback should be called once", () => {
+				const {eventRect} = chart.internal.$el;
+				const circle = util.getBBox(chart.$.circles.node());
+
+				util.fireEvent(eventRect.node(), "click", {
+					clientX: circle.x,
+					clientY: circle.y
+				}, chart);
+
+				expect(args.data.onclick.calledOnce).to.be.true;
+			});
 		});
 
 		describe("check for event binding", () => {