fix(candlestick): fix to set expand state

- Add expand/unexpand class name during interaction - Refactor expand/unexpand codes Fix #2036
naver · Apr 16, 2021 · 1e6a10d · 1e6a10d
1 parent ae37616
commit 1e6a10d
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 47 deletions.
diff --git a/src/Chart/api/tooltip.ts b/src/Chart/api/tooltip.ts
@@ -127,7 +127,7 @@ const tooltip = {
 		$$.hideGridFocus();
 
 		$$.unexpandCircles && $$.unexpandCircles();
-		$$.unexpandBars && $$.unexpandBars();
+		$$.expandBarTypeShapes(false);
 	}
 };
 

diff --git a/src/ChartInternal/interactions/eventrect.ts b/src/ChartInternal/interactions/eventrect.ts
@@ -330,7 +330,7 @@ export default {
 		$$.showTooltip(selectedData, context);
 
 		// expand points
-		$$.expandCirclesBars(closest.index, closest.id, true);
+		$$.setExpand(closest.index, closest.id, true);
 
 		// Show xgrid focus line
 		$$.showGridFocus(selectedData);
@@ -352,7 +352,7 @@ export default {
 	 */
 	unselectRect(): void {
 		const $$ = this;
-		const {config, $el: {bar, circle, tooltip}} = $$;
+		const {config, $el: {circle, tooltip}} = $$;
 
 		$$.$el.svg.select(`.${CLASS.eventRect}`).style("cursor", null);
 		$$.hideGridFocus();
@@ -363,7 +363,7 @@ export default {
 		}
 
 		circle && !config.point_focus_only && $$.unexpandCircles();
-		bar && $$.unexpandBars();
+		$$.expandBarTypeShapes(false);
 	},
 
 	/**

diff --git a/src/ChartInternal/interactions/interaction.ts b/src/ChartInternal/interactions/interaction.ts
@@ -39,7 +39,7 @@ export default {
 					$$.hideGridFocus && $$.hideGridFocus();
 					$$.hideTooltip();
 
-					!isSelectionGrouped && $$.expandCirclesBars(index);
+					!isSelectionGrouped && $$.setExpand(index);
 				}
 			})
 			.filter(function(d) {
@@ -59,19 +59,46 @@ export default {
 					$$.showGridFocus && $$.showGridFocus(d);
 					$$.unexpandCircles && $$.unexpandCircles();
 
-					selected.each(d => $$.expandCirclesBars(index, d.id));
+					selected.each(d => $$.setExpand(index, d.id));
 				}
 			});
 	},
 
-	expandCirclesBars(index: number, id: string, reset: boolean): void {
+	/**
+	 * Expand data shape/point
+	 * @param {number} index Index number
+	 * @param {string} id Data id
+	 * @param {boolean} reset Reset expand state
+	 * @private
+	 */
+	setExpand(index: number, id?: string, reset?: boolean): void {
 		const $$ = this;
-		const {config, $el: {bar, circle}} = $$;
+		const {config, $el: {circle}} = $$;
 
 		circle && config.point_focus_expand_enabled &&
 			$$.expandCircles(index, id, reset);
 
-		bar && $$.expandBars(index, id, reset);
+		// bar, candlestick
+		$$.expandBarTypeShapes(true, index, id, reset);
+	},
+
+	/**
+	 * Expand/Unexpand bar type shapes
+	 * @param {boolean} expand Expand or unexpand
+	 * @param {number} i Shape index
+	 * @param {string} id Data id
+	 * @param {boolean} reset Reset expand style
+	 * @private
+	 */
+	expandBarTypeShapes(expand = true, i?: number, id?: string, reset?: boolean): void {
+		const $$ = this;
+
+		["bar", "candlestick"]
+			.filter(v => $$.$el[v])
+			.forEach(v => {
+				reset && $$.$el[v].classed(CLASS.EXPANDED, false);
+				$$.getShapeByIndex(v, i, id).classed(CLASS.EXPANDED, expand);
+			});
 	},
 
 	/**
@@ -121,7 +148,7 @@ export default {
 				if (isOver) {
 					config.point_focus_only && hasRadar ?
 						$$.showCircleFocus($$.getAllValuesOnIndex(d, true)) :
-						$$.expandCirclesBars(d, null, true);
+						$$.setExpand(d, null, true);
 				}
 
 				!$$.isMultipleX() && main.selectAll(`.${CLASS.shape}-${d}`)

diff --git a/src/ChartInternal/shape/bar.ts b/src/ChartInternal/shape/bar.ts
@@ -3,7 +3,7 @@
  * billboard.js project is licensed under the MIT license
  */
 import CLASS from "../../config/classes";
-import {getPointer, getRandom, getRectSegList, isNumber, isValue} from "../../module/util";
+import {getPointer, getRandom, getRectSegList, isNumber} from "../../module/util";
 
 export default {
 	initBar(): void {
@@ -89,27 +89,6 @@ export default {
 		];
 	},
 
-	getBars(i: number, id: string) {
-		const $$ = this;
-		const {main} = $$.$el;
-		const suffix = (isValue(i) ? `-${i}` : ``);
-
-		return (id ? main
-			.selectAll(`.${CLASS.bars}${$$.getTargetSelectorSuffix(id)}`) : main)
-			.selectAll(`.${CLASS.bar}${suffix}`);
-	},
-
-	expandBars(i: number, id: string, reset: boolean): void {
-		const $$ = this;
-
-		reset && $$.unexpandBars();
-		$$.getBars(i, id).classed(CLASS.EXPANDED, true);
-	},
-
-	unexpandBars(i: number): void {
-		this.getBars(i).classed(CLASS.EXPANDED, false);
-	},
-
 	generateDrawBar(barIndices, isSub?: boolean): Function {
 		const $$ = this;
 		const {config} = $$;

diff --git a/src/ChartInternal/shape/shape.ts b/src/ChartInternal/shape/shape.ts
@@ -24,7 +24,7 @@ import {
 } from "d3-shape";
 import {select as d3Select} from "d3-selection";
 import CLASS from "../../config/classes";
-import {capitalize, getUnique, isObjectType, isNumber, isUndefined, notEmpty} from "../../module/util";
+import {capitalize, getUnique, isObjectType, isNumber, isValue, isUndefined, notEmpty} from "../../module/util";
 
 export default {
 	/**
@@ -337,6 +337,24 @@ export default {
 		return result;
 	},
 
+	/**
+	 * Get shape element
+	 * @param {string} shapeName Shape string
+	 * @param {number} i Index number
+	 * @param {string} id Data series id
+	 * @returns {d3Selection}
+	 * @private
+	 */
+	getShapeByIndex(shapeName: string, i: number, id?: string) {
+		const $$ = this;
+		const {main} = $$.$el;
+		const suffix = (isValue(i) ? `-${i}` : ``);
+
+		return (id ? main
+			.selectAll(`.${CLASS[`${shapeName}s`]}${$$.getTargetSelectorSuffix(id)}`) : main)
+			.selectAll(`.${CLASS[shapeName]}${suffix}`);
+	},
+
 	isWithinShape(that, d): boolean {
 		const $$ = this;
 		const shape = d3Select(that);

diff --git a/src/scss/billboard.scss b/src/scss/billboard.scss
@@ -108,6 +108,15 @@
 	}
 }
 
+/*-- Candlestick --*/
+.bb-candlestick {
+	stroke-width: 1px;
+
+	&._expanded_ {
+		fill-opacity: 0.75;
+	}
+}
+
 /*-- Focus --*/
 .bb-target, .bb-circles {
 	&.bb-focused {

diff --git a/src/scss/theme/datalab.scss b/src/scss/theme/datalab.scss
@@ -100,13 +100,21 @@ $text-font-size: 11px;
 }
 
 /*-- Bar --*/
-path.bb-bar {
-    stroke-width: 1px;
-    stroke: #000;
+.bb-bar {
+	stroke-width: 1px;
 
-    &._expanded_ {
-        fill-opacity: 0.75;
-    }
+	&._expanded_ {
+		fill-opacity: 0.75;
+	}
+}
+
+/*-- Candlestick --*/
+.bb-candlestick {
+	stroke-width: 1px;
+
+	&._expanded_ {
+		fill-opacity: 0.75;
+	}
 }
 
 /*-- Focus --*/

diff --git a/src/scss/theme/graph.scss b/src/scss/theme/graph.scss
@@ -114,11 +114,20 @@ rect.bb-circle, use.bb-circle {
 
 /*-- Bar --*/
 .bb-bar {
-    stroke-width: 0;
+	stroke-width: 0;
 
-    &._expanded_ {
-        fill-opacity: 0.75;
-    }
+	&._expanded_ {
+		fill-opacity: 0.75;
+	}
+}
+
+/*-- Candlestick --*/
+.bb-candlestick {
+	stroke-width: 1px;
+
+	&._expanded_ {
+		fill-opacity: 0.75;
+	}
 }
 
 /*-- Focus --*/

diff --git a/src/scss/theme/insight.scss b/src/scss/theme/insight.scss
@@ -110,11 +110,20 @@ rect.bb-circle, use.bb-circle {
 
 /*-- Bar --*/
 .bb-bar {
-    stroke-width: 0;
+	stroke-width: 0;
 
-    &._expanded_ {
-        fill-opacity: 0.75;
-    }
+	&._expanded_ {
+		fill-opacity: 0.75;
+	}
+}
+
+/*-- Candlestick --*/
+.bb-candlestick {
+	stroke-width: 1px;
+
+	&._expanded_ {
+		fill-opacity: 0.75;
+	}
 }
 
 /*-- Focus --*/

diff --git a/test/shape/candelstick-spec.ts b/test/shape/candelstick-spec.ts
@@ -109,6 +109,28 @@ describe("SHAPE CANDLESTICK", () => {
 				expect(+this.querySelector("path").getBoundingClientRect().width).to.be.equal(args.candlestick.width);
 			});
 		});
+
+		it("check for the expand & unexpand of shape", () => {
+			const index = 1;
+
+			// when
+			chart.tooltip.show({index});
+
+			chart.$.candlestick.each(function(d, i) {
+				const hasExpandedClass = this.getAttribute("class").indexOf(CLASS.EXPANDED) > -1;
+
+				expect(hasExpandedClass).to.be[i === index ? "true" : "false"];
+			});
+
+			// when
+			chart.tooltip.hide();
+
+			chart.$.candlestick.each(function() {
+				const hasExpandedClass = this.getAttribute("class").indexOf(CLASS.EXPANDED) > -1;
+
+				expect(hasExpandedClass).to.be.false;
+			});
+		});
 	});
 
 	describe("candlestick + combination", () => {