fix(option): Fix data.hide not working for bubble/scatter type

Make bubble/scatter type circle to be initialized with opacity=0, and then handle the opacity at the initialization according dataset's visibility option. Ref naver#2609
netil · Mar 28, 2022 · 1140216 · 1140216
1 parent bafdb17
commit 1140216
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 11 deletions.
diff --git a/src/ChartInternal/ChartInternal.ts b/src/ChartInternal/ChartInternal.ts
@@ -12,7 +12,7 @@ import {
 import {select as d3Select} from "d3-selection";
 import {d3Selection} from "../../types/types";
 import {checkModuleImport} from "../module/error";
-import {$COMMON, $TEXT} from "../config/classes";
+import {$COMMON, $CIRCLE, $TEXT} from "../config/classes";
 import Store from "../config/Store/Store";
 import Options from "../config/Options/Options";
 import {document, window} from "../module/browser";
@@ -338,6 +338,7 @@ export default class ChartInternal {
 					$$.mapToIds($$.data.targets) : config.data_hide
 			);
 		}
+
 		if (config.legend_hide) {
 			$$.addHiddenLegendIds(
 				config.legend_hide === true ?
@@ -641,24 +642,32 @@ export default class ChartInternal {
 			helper(type);
 		}
 
-		// circle
-		if ($$.hasType("bubble") || $$.hasType("scatter")) {
+		// Point types
+		const hasPointType = $$.hasType("bubble") || $$.hasType("scatter");
+
+		if (hasPointType) {
 			$$.updateTargetForCircle?.();
 		}
 
 		// Fade-in each chart
-		$$.showTargets();
+		$$.filterTargetsToShowAtInit(hasPointType);
 	}
 
 	/**
-	 * Display targeted elements
+	 * Display targeted elements at initialization
+	 * @param {boolean} hasPointType whether has point type(bubble, scatter) or not
 	 * @private
 	 */
-	showTargets(): void {
+	filterTargetsToShowAtInit(hasPointType: boolean = false): void {
 		const $$ = <any> this;
 		const {$el: {svg}, $T} = $$;
+		let selector = `.${$COMMON.target}`;
 
-		$T(svg.selectAll(`.${$COMMON.target}`)
+		if (hasPointType) {
+			selector += `, .${$CIRCLE.chartCircles} > .${$CIRCLE.circles}`;
+		}
+
+		$T(svg.selectAll(selector)
 			.filter(d => $$.isTargetToShow(d.id))
 		).style("opacity", null);
 	}
@@ -697,8 +706,10 @@ export default class ChartInternal {
 		const $$ = <any> this;
 		const {withoutFadeIn} = $$.state;
 
-		return $$.getBaseValue(d) !== null &&
+		const r = $$.getBaseValue(d) !== null &&
 			withoutFadeIn[d.id] ? null : "0";
+
+		return r;
 	}
 
 	bindResize(): void {

diff --git a/src/ChartInternal/shape/point.ts b/src/ChartInternal/shape/point.ts
@@ -89,8 +89,7 @@ export default {
 			const mainCircle = $el.main.select(`.${$CIRCLE.chartCircles}`)
 				.style("pointer-events", "none")
 				.selectAll(`.${$CIRCLE.circles}`)
-				.data(targets)
-				.attr("class", classCircles);
+				.data(targets);
 
 			mainCircle.exit().remove();
 			enterNode = mainCircle.enter();
@@ -102,7 +101,11 @@ export default {
 
 		enterNode.append("g")
 			.attr("class", classCircles)
-			.style("cursor", d => (isFunction(isSelectable) && isSelectable(d) ? "pointer" : null));
+			.style("cursor", d => (isFunction(isSelectable) && isSelectable(d) ? "pointer" : null))
+			.style("opacity", function() {
+				// if the parent node is .bb-chart-circles (bubble, scatter), initialize <g bb-circles> with opacity "0"
+				return this.parentNode?.classList.contains("bb-chart-circles") ? "0" : null;
+			});
 
 		// Update date for selected circles
 		selectionEnabled && targets.forEach(t => {

diff --git a/test/internals/data-spec.ts b/test/internals/data-spec.ts
@@ -684,6 +684,47 @@ describe("DATA", () => {
 		});
 	});
 
+	describe("data.hide", () => {
+		before(() => {
+			args = {
+				data: {
+					columns: [
+						["data1", 30, 200, 100, 400, 150, 250],
+						["data2", 50, 20, 10, 40, 15, 25],
+						["data3", 170, 250, 210, 190, 175, 225],
+						["data4", 283, 170, 275, 143, 220, 255]
+					],
+					hide: true,
+					type: "line",
+					types: {
+						data1: "bubble",
+						data2: "scatter"
+					}
+				}
+			};
+		});
+
+		it("All types should be hidden", () => {
+			const selector = `.${$COMMON.target}, .${$CIRCLE.chartCircles} > .${$CIRCLE.circles}`;
+
+			chart.$.svg.selectAll(selector).each(function() {
+				expect(this.style.opacity).to.be.equal("0");
+			});
+		});
+
+		it("set options: data.hide=['data1', 'data2']", () => {
+			args.data.hide = ["data1", "data2"];
+		});
+
+		it("only given dataseries should be hidden", () => {
+			const selector = `.${$COMMON.target}, .${$CIRCLE.chartCircles} > .${$CIRCLE.circles}`;
+
+			chart.$.svg.selectAll(selector).each(function(d) {
+				expect(this.style.opacity).to.be.equal(args.data.hide.indexOf(d.id) > -1 ? "0" : "");
+			});
+		});
+	});
+
 	describe("data.regions", () => {
 		before(() => {
 			args = {