From 787fd153aa8a440be0aa04fca73e8f3f8442a652 Mon Sep 17 00:00:00 2001 From: Jae Sung Park Date: Wed, 6 Sep 2023 19:00:32 +0900 Subject: [PATCH] fix(point): Fix rendering error when point.focus.only=true is set Fix rendering error for bubble and scatter type Fix #3406 --- src/ChartInternal/interactions/eventrect.ts | 4 +-- src/ChartInternal/interactions/interaction.ts | 2 +- src/ChartInternal/internals/redraw.ts | 2 +- src/ChartInternal/internals/selection.ts | 2 +- src/ChartInternal/shape/point.ts | 24 ++++++++++---- src/ChartInternal/shape/radar.ts | 2 +- src/Plugin/sparkline/index.ts | 4 +-- test/shape/point-spec.ts | 32 +++++++++++++++++++ 8 files changed, 58 insertions(+), 14 deletions(-) diff --git a/src/ChartInternal/interactions/eventrect.ts b/src/ChartInternal/interactions/eventrect.ts index 423e0b3f2..e76cce546 100644 --- a/src/ChartInternal/interactions/eventrect.ts +++ b/src/ChartInternal/interactions/eventrect.ts @@ -436,7 +436,7 @@ export default { */ unselectRect(): void { const $$ = this; - const {config, $el: {circle, tooltip}} = $$; + const {$el: {circle, tooltip}} = $$; $$.$el.svg.select(`.${$EVENT.eventRect}`).style("cursor", null); $$.hideGridFocus(); @@ -446,7 +446,7 @@ export default { $$._handleLinkedCharts(false); } - circle && !config.point_focus_only && $$.unexpandCircles(); + circle && !$$.isPointFocusOnly() && $$.unexpandCircles(); $$.expandBarTypeShapes(false); }, diff --git a/src/ChartInternal/interactions/interaction.ts b/src/ChartInternal/interactions/interaction.ts index 7287a6ce9..3099462b9 100644 --- a/src/ChartInternal/interactions/interaction.ts +++ b/src/ChartInternal/interactions/interaction.ts @@ -104,7 +104,7 @@ export default { $$.cache.add(KEY.setOverOut, last); } else { if (isOver) { - config.point_focus_only && hasRadar ? + $$.isPointFocusOnly() && hasRadar ? $$.showCircleFocus($$.getAllValuesOnIndex(d, true)) : $$.setExpand(d, null, true); } diff --git a/src/ChartInternal/internals/redraw.ts b/src/ChartInternal/internals/redraw.ts index 3d3a6aa05..e617e4e0e 100644 --- a/src/ChartInternal/internals/redraw.ts +++ b/src/ChartInternal/internals/redraw.ts @@ -201,7 +201,7 @@ export default { list.push($$.redrawText(xForText, yForText, flow, withTransition)); } - if (($$.hasPointType() || hasRadar) && !config.point_focus_only) { + if (($$.hasPointType() || hasRadar) && !$$.isPointFocusOnly()) { $$.redrawCircle && list.push($$.redrawCircle(cx, cy, withTransition, flowFn)); } diff --git a/src/ChartInternal/internals/selection.ts b/src/ChartInternal/internals/selection.ts index f51124d54..54b40e4a6 100644 --- a/src/ChartInternal/internals/selection.ts +++ b/src/ChartInternal/internals/selection.ts @@ -160,7 +160,7 @@ export default { let toggledShape; if (!config.data_selection_multiple) { - const focusOnly = config.point_focus_only; + const focusOnly = $$.isPointFocusOnly(); let selector = `.${focusOnly ? $SELECT.selectedCircles : $SHAPE.shapes}`; if (config.data_selection_grouped) { diff --git a/src/ChartInternal/shape/point.ts b/src/ChartInternal/shape/point.ts index f75981fc7..189ce1b0c 100644 --- a/src/ChartInternal/shape/point.ts +++ b/src/ChartInternal/shape/point.ts @@ -43,7 +43,7 @@ export default { let opacity = config.point_opacity; if (isUndefined(opacity)) { - opacity = config.point_show && !config.point_focus_only ? null : "0"; + opacity = config.point_show && !this.isPointFocusOnly() ? null : "0"; opacity = isValue(this.getBaseValue(d)) ? (this.isBubbleType(d) || this.isScatterType(d) ? @@ -126,7 +126,7 @@ export default { updateCircle(isSub = false): void { const $$ = this; const {config, state, $el} = $$; - const focusOnly = config.point_focus_only; + const focusOnly = $$.isPointFocusOnly(); const $root = isSub ? $el.subchart : $el; if (config.point_show && !state.toggling) { @@ -191,10 +191,10 @@ export default { */ showCircleFocus(d?: IDataRow[]): void { const $$ = this; - const {config, state: {hasRadar, resizing, toggling, transiting}, $el} = $$; + const {state: {hasRadar, resizing, toggling, transiting}, $el} = $$; let {circle} = $el; - if (transiting === false && config.point_focus_only && circle) { + if (transiting === false && $$.isPointFocusOnly() && circle) { const cx = (hasRadar ? $$.radarCircleX : $$.circleX).bind($$); const cy = (hasRadar ? $$.radarCircleY : $$.circleY).bind($$); const withTransition = toggling || isUndefined(d); @@ -234,9 +234,9 @@ export default { */ hideCircleFocus(): void { const $$ = this; - const {config, $el: {circle}} = $$; + const {$el: {circle}} = $$; - if (config.point_focus_only && circle) { + if ($$.isPointFocusOnly() && circle) { $$.unexpandCircles(); circle.style("visibility", "hidden"); } @@ -342,6 +342,18 @@ export default { selectR(d) : (selectR || $$.pointR(d) * 4); }, + /** + * Check if point.focus.only option can be applied. + * @returns {boolean} + * @private + */ + isPointFocusOnly(): boolean { + const $$ = this; + + return $$.config.point_focus_only && + !$$.hasType("bubble") && !$$.hasType("scatter") && !$$.hasArcType(null, ["radar"]); + }, + isWithinCircle(node: SVGElement, r?: number): boolean { const mouse = getPointer(this.state.event, node); const element = d3Select(node); diff --git a/src/ChartInternal/shape/radar.ts b/src/ChartInternal/shape/radar.ts index 450864e88..cb0383b00 100644 --- a/src/ChartInternal/shape/radar.ts +++ b/src/ChartInternal/shape/radar.ts @@ -296,7 +296,7 @@ export default { bindRadarEvent(): void { const $$ = this; const {config, state, $el: {radar, svg}} = $$; - const focusOnly = config.point_focus_only; + const focusOnly = $$.isPointFocusOnly(); const {inputType, transiting} = state; if (config.interaction_enabled) { diff --git a/src/Plugin/sparkline/index.ts b/src/Plugin/sparkline/index.ts index 0985f643a..b5ed2b4f5 100644 --- a/src/Plugin/sparkline/index.ts +++ b/src/Plugin/sparkline/index.ts @@ -222,7 +222,7 @@ export default class Sparkline extends Plugin { $$.state.event = e; - if ($$.config.point_focus_only && d) { + if ($$.isPointFocusOnly() && d) { $$.showCircleFocus?.([d]); } @@ -235,7 +235,7 @@ export default class Sparkline extends Plugin { $$.state.event = e; - $$.config.point_focus_only ? + $$.isPointFocusOnly() ? $$.hideCircleFocus() : $$.unexpandCircles(); $$.hideTooltip(); diff --git a/test/shape/point-spec.ts b/test/shape/point-spec.ts index 4bb30efca..e8c2c8c81 100644 --- a/test/shape/point-spec.ts +++ b/test/shape/point-spec.ts @@ -473,6 +473,38 @@ describe("SHAPE POINT", () => { done(); }); }); + + it("set option: data.type=bubble", () => { + args.data.type = "bubble"; + }); + + it("should render bubble circles", done => { + setTimeout(() => { + chart.$.circles.each(function() { + expect(+this.style.opacity).to.not.be.equal(0); + expect(+this.getAttribute("cx") > 0).to.be.true; + expect(+this.getAttribute("cy") > 0).to.be.true; + }); + + done(); + }, 500); + }); + + it("set option: data.type=scatter", () => { + args.data.type = "scatter"; + }); + + it("should render scatter circles", done => { + setTimeout(() => { + chart.$.circles.each(function() { + expect(+this.style.opacity).to.not.be.equal(0); + expect(+this.getAttribute("cx") > 0).to.be.true; + expect(+this.getAttribute("cy") > 0).to.be.true; + }); + + done(); + }, 500); + }); }); describe("point.opacity", () => {