Skip to content

Commit

Permalink
fix(point): Fix rendering error when point.focus.only=true is set
Browse files Browse the repository at this point in the history
Fix rendering error for bubble and scatter type

Fix #3406
  • Loading branch information
netil authored Sep 6, 2023
1 parent 5be2252 commit 787fd15
Show file tree
Hide file tree
Showing 8 changed files with 58 additions and 14 deletions.
4 changes: 2 additions & 2 deletions src/ChartInternal/interactions/eventrect.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -446,7 +446,7 @@ export default {
$$._handleLinkedCharts(false);
}

circle && !config.point_focus_only && $$.unexpandCircles();
circle && !$$.isPointFocusOnly() && $$.unexpandCircles();
$$.expandBarTypeShapes(false);
},

Expand Down
2 changes: 1 addition & 1 deletion src/ChartInternal/interactions/interaction.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
2 changes: 1 addition & 1 deletion src/ChartInternal/internals/redraw.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}

Expand Down
2 changes: 1 addition & 1 deletion src/ChartInternal/internals/selection.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
24 changes: 18 additions & 6 deletions src/ChartInternal/shape/point.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) ?
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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");
}
Expand Down Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/ChartInternal/shape/radar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
4 changes: 2 additions & 2 deletions src/Plugin/sparkline/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ export default class Sparkline extends Plugin {

$$.state.event = e;

if ($$.config.point_focus_only && d) {
if ($$.isPointFocusOnly() && d) {
$$.showCircleFocus?.([d]);
}

Expand All @@ -235,7 +235,7 @@ export default class Sparkline extends Plugin {

$$.state.event = e;

$$.config.point_focus_only ?
$$.isPointFocusOnly() ?
$$.hideCircleFocus() : $$.unexpandCircles();

$$.hideTooltip();
Expand Down
32 changes: 32 additions & 0 deletions test/shape/point-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand Down

0 comments on commit 787fd15

Please sign in to comment.