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

@@ -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);
 	},
 

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);
 				}

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));
 		}
 

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) {

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);

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) {

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();

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", () => {