fix(api): Fix scatter type loading

- Fix circle selector, where mismatch detection of scatter/bubble type - Rename isboolean -> isBoolean util function name - Split event binding call for singleX and multipleX Fix #3740
naver · Apr 22, 2024 · 413812d · 413812d
1 parent d703776
commit 413812d
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 16 deletions.
diff --git a/src/ChartInternal/data/data.ts b/src/ChartInternal/data/data.ts
@@ -11,7 +11,7 @@ import {
 	getUnique,
 	hasValue,
 	isArray,
-	isboolean,
+	isBoolean,
 	isDefined,
 	isFunction,
 	isNumber,
@@ -672,7 +672,7 @@ export default {
 	hasDataLabel() {
 		const dataLabels = this.config.data_labels;
 
-		return (isboolean(dataLabels) && dataLabels) ||
+		return (isBoolean(dataLabels) && dataLabels) ||
 			(isObjectType(dataLabels) && notEmpty(dataLabels));
 	},
 

diff --git a/src/ChartInternal/interactions/eventrect.ts b/src/ChartInternal/interactions/eventrect.ts
@@ -4,7 +4,7 @@
  */
 import type {d3Selection} from "../../../types";
 import {$COMMON, $EVENT, $SHAPE} from "../../config/classes";
-import {getPointer, getScrollPosition, isboolean, isFunction} from "../../module/util";
+import {getPointer, getScrollPosition, isBoolean, isFunction} from "../../module/util";
 
 export default {
 	/**
@@ -54,9 +54,8 @@ export default {
 			$$.updateEventRect(eventRectUpdate);
 
 			// bind event to <rect> element
-			isMultipleX ?
-				$$.generateEventRectsForMultipleXs(eventRectUpdate) :
-				$$.generateEventRectsForSingleX(eventRectUpdate);
+			$$.updateEventType(eventRectUpdate);
+
 
 			// bind draggable selection
 			eventRectUpdate.call($$.getDraggableSelection());
@@ -117,7 +116,7 @@ export default {
 		// call event.preventDefault()
 		// according 'interaction.inputType.touch.preventDefault' option
 		const preventDefault = config.interaction_inputType_touch.preventDefault;
-		const isPrevented = (isboolean(preventDefault) && preventDefault) || false;
+		const isPrevented = (isBoolean(preventDefault) && preventDefault) || false;
 		const preventThreshold = (!isNaN(preventDefault) && preventDefault) || null;
 		let startPx;
 
@@ -232,6 +231,26 @@ export default {
 		updateClientRect();
 	},
 
+	/**
+	 * Update event type (single or multiple x)
+	 * @param {d3Selection | boolean} target Target element or boolean to rebind event
+	 */
+	updateEventType(target: d3Selection | boolean): void {
+		const $$ = this;
+		const isRebindCall = isBoolean(target);
+		const eventRect = isRebindCall ? $$.$el.eventRect : target;
+		const unbindEvent = isRebindCall ? target !== eventRect?.datum().multipleX : false;
+
+		if (eventRect) {
+			// release previous event listeners
+			unbindEvent && eventRect?.on("mouseover mousemove mouseout click", null);
+
+			$$.isMultipleX() ?
+				$$.generateEventRectsForMultipleXs(eventRect) :
+				$$.generateEventRectsForSingleX(eventRect);
+		}
+	},
+
 	/**
 	 * Updates the location and size of the eventRect.
 	 * @private
@@ -241,12 +260,15 @@ export default {
 		const {config, scale, state} = $$;
 		const xScale = scale.zoom || scale.x;
 		const isRotated = config.axis_rotated;
+		const isMultipleX = $$.isMultipleX();
 		let x;
 		let y;
 		let w;
 		let h;
 
-		if ($$.isMultipleX()) {
+		$$.updateEventType(isMultipleX);
+
+		if (isMultipleX) {
 			// TODO: rotated not supported yet
 			x = 0;
 			y = 0;
@@ -498,7 +520,8 @@ export default {
 				];
 
 				$$.clickHandlerForSingleX.bind(this)(d, $$);
-			});
+			})
+			.datum({multipleX: false});
 
 		if (state.inputType === "mouse") {
 			const getData = event => {
@@ -621,7 +644,8 @@ export default {
 			.on("click", function(event) {
 				state.event = event;
 				$$.clickHandlerForMultipleXS.bind(this)($$);
-			});
+			})
+			.datum({multipleX: true});
 
 		if (state.inputType === "mouse") {
 			eventRectEnter

diff --git a/src/ChartInternal/shape/point.ts b/src/ChartInternal/shape/point.ts
@@ -52,11 +52,11 @@ export default {
 		const $$ = this;
 		const {$el: {main}} = $$;
 
-		$$.point = $$.generatePoint();
+		!$$.point && ($$.point = $$.generatePoint());
 
 		if (
 			($$.hasType("bubble") || $$.hasType("scatter")) &&
-			main.select(`.${$CIRCLE.chartCircles}`).empty()
+			main.select(`.${$COMMON.chart} > .${$CIRCLE.chartCircles}`).empty()
 		) {
 			main.select(`.${$COMMON.chart}`)
 				.append("g")
@@ -75,7 +75,7 @@ export default {
 			return;
 		}
 
-		!$el.circle && $$.initCircle();
+		$$.initCircle();
 
 		let targets = targetsValue;
 		let enterNode = enterNodeValue;

diff --git a/src/module/util.ts b/src/module/util.ts
@@ -38,7 +38,7 @@ export {
 	getUnique,
 	hasValue,
 	isArray,
-	isboolean,
+	isBoolean,
 	isDefined,
 	isEmpty,
 	isFunction,
@@ -67,7 +67,7 @@ const isString = (v: unknown): v is string => typeof v === "string";
 const isNumber = (v: unknown): v is number => typeof v === "number";
 const isUndefined = (v: unknown): v is undefined => typeof v === "undefined";
 const isDefined = (v: unknown): boolean => typeof v !== "undefined";
-const isboolean = (v: unknown): boolean => typeof v === "boolean";
+const isBoolean = (v: unknown): boolean => typeof v === "boolean";
 const ceil10 = (v: number): number => Math.ceil(v / 10) * 10;
 const asHalfPixel = (n: number): number => Math.ceil(n) + 0.5;
 const diffDomain = (d: number[]): number => d[1] - d[0];

diff --git a/test/api/load-spec.ts b/test/api/load-spec.ts
@@ -1186,4 +1186,97 @@ describe("API load", function() {
 			});
 		});
 	});
+
+	describe("Check different type loading", () => {
+		before(() => {
+			args = {
+				data: {
+					columns: [
+						["data1", 30, 20, 50, 40, 60, 50],
+						["data2"]
+					],
+					type: "line", 
+					types: {
+						data2: "scatter"
+					}
+				}
+			};
+		});
+
+		it("should generate 'scatter' when line type is used at generation.", done => {
+			chart.load({
+				columns: [
+					["data2", 200, 130, 90, 240, 130, 220],
+				],
+				done() {
+					const pointer = this.$.circles.filter(({id}) => id === "data2");
+					const target = {
+						data: {
+							x: 3,
+							id: "data2",
+							value: 240
+						}
+					}
+
+					expect(pointer.size()).to.be.equal(this.data.values("data2").length);
+
+					// when
+					this.tooltip.show(target);
+
+					expect(+this.$.tooltip.select(".value").text()).to.be.equal(target.data.value);
+
+					// when unload
+					this.unload({
+						ids: ["data2"],
+						done() {
+							this.tooltip.show({x: 3});
+							expect(+this.$.tooltip.select(".value").text()).to.be.equal(40);
+
+							done();
+						}
+					});
+				}
+			});
+		});
+
+		it("set options: data.types={data2: 'bubble'}", () => {
+			args.data.types.data2 = "bubble";
+		});
+
+		it("should generate 'bubble' when line type is used at generation.", done => {
+			chart.load({
+				columns: [
+					["data2", 200, 130, 90, 240, 130, 220],
+				],
+				done() {
+					const pointer = this.$.circles.filter(({id}) => id === "data2");
+					const target = {
+						data: {
+							x: 3,
+							id: "data2",
+							value: 240
+						}
+					}
+
+					expect(pointer.size()).to.be.equal(this.data.values("data2").length);
+
+					// when
+					this.tooltip.show(target);
+
+					expect(+this.$.tooltip.select(".value").text()).to.be.equal(target.data.value);
+
+					// when unload
+					this.unload({
+						ids: ["data2"],
+						done() {
+							this.tooltip.show({x: 3});
+							expect(+this.$.tooltip.select(".value").text()).to.be.equal(40);
+
+							done();
+						}
+					});
+				}
+			});
+		});
+	});
 });
diff --git a/test/assets/module/util.ts b/test/assets/module/util.ts
@@ -38,7 +38,7 @@ export const {
 	getUnique,
 	hasValue,
 	isArray,
-	isboolean,
+	isBoolean,
 	isDefined,
 	isEmpty,
 	isFunction,