Skip to content

Commit

Permalink
fix(point): fix sensitivity error when blank area is clicked
Browse files Browse the repository at this point in the history
- prevent getting attribute value from undefined value
- treat point.senstivity correctly

Ref #3900
  • Loading branch information
netil committed Oct 17, 2024
1 parent ba71911 commit 11adfa8
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 3 deletions.
7 changes: 4 additions & 3 deletions src/ChartInternal/interactions/eventrect.ts
Original file line number Diff line number Diff line change
Expand Up @@ -671,6 +671,7 @@ export default {
clickHandlerForMultipleXS(ctx): void {
const $$ = ctx;
const {config, state} = $$;
const pointSensitivity = config.point_sensitivity;
const targetsToShow = $$.filterTargetsToShow($$.data.targets);

if ($$.hasArcType(targetsToShow)) {
Expand All @@ -679,9 +680,9 @@ export default {

const mouse = getPointer(state.event, this);
const closest = $$.findClosestFromTargets(targetsToShow, mouse);
const sensitivity = config.point_sensitivity === "radius" ?
closest.r :
config.point_sensitivity;
const sensitivity = pointSensitivity === "radius" ? closest?.r : (
isFunction(pointSensitivity) ? closest && pointSensitivity(closest) : pointSensitivity
);

if (!closest) {
return;
Expand Down
43 changes: 43 additions & 0 deletions test/shape/point-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -388,6 +388,49 @@ describe("SHAPE POINT", () => {
done(1);
});
}));

it("set options", () => {
args = {
data: {
columns: [
["data1", 450],
],
type: "bubble",
onclick: sinon.spy()
},
point: {
sensitivity: "radius"
}
}
});

it("shouldn't throw error when blank(non shape) area is clicked.", () => {
const {eventRect} = chart.internal.$el;

expect(
fireEvent(eventRect.node(), "click", {
clientX: 100,
clientY: 100
}, chart)
).to.not.throw;
});

it("set options: poinst.sensitivity=function(){}", () => {
args.point.sensitivity = ({r}) => r
});

it("should data.onclick callback called.", () => {
const {circles} = chart.$;
const {$el: {eventRect}} = chart.internal;
const rect = circles.node().getBoundingClientRect();

fireEvent(eventRect.node(), "click", {
clientX: rect.left + 3,
clientY: rect.top + 3
}, chart);

expect(args.data.onclick.called).to.be.true;
});
});

describe("point.focus.only", () => {
Expand Down

0 comments on commit 11adfa8

Please sign in to comment.