From 9f509bd76ed4f9a69225349e4bf455c2b15121cf Mon Sep 17 00:00:00 2001 From: Jae Sung Park Date: Tue, 13 Apr 2021 19:02:42 +0900 Subject: [PATCH] fix(candlestick): fix to set expand state - Add expand/unexpand class name during interaction - Refactor expand/unexpand codes Ref #2036 --- src/Chart/api/tooltip.ts | 2 +- src/ChartInternal/interactions/eventrect.ts | 6 +-- src/ChartInternal/interactions/interaction.ts | 39 ++++++++++++++++--- src/ChartInternal/shape/bar.ts | 23 +---------- src/ChartInternal/shape/shape.ts | 20 +++++++++- src/scss/billboard.scss | 9 +++++ src/scss/theme/datalab.scss | 20 +++++++--- src/scss/theme/graph.scss | 17 ++++++-- src/scss/theme/insight.scss | 17 ++++++-- test/shape/candelstick-spec.ts | 22 +++++++++++ 10 files changed, 128 insertions(+), 47 deletions(-) diff --git a/src/Chart/api/tooltip.ts b/src/Chart/api/tooltip.ts index ac46d61c2..886b4390c 100644 --- 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 index 404aa5664..20a72a8e1 100644 --- 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 index 178acc791..a2fb27d48 100644 --- 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 index 7db8d337a..a6d7b9dd9 100644 --- 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 index 2cf2319a1..50386cb35 100644 --- 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 index 4585ec93d..749d80493 100644 --- 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 index 9ab3855b5..aca437ba4 100644 --- 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 index 39e62d93f..36cf9c56e 100644 --- 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 index 69e80dbd4..8c6cbb007 100644 --- 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 index 306fe825c..cf6ae0a49 100644 --- 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", () => {