Skip to content

Commit

Permalink
fix(eventrect): Fix eventReceiver coordinates
Browse files Browse the repository at this point in the history 
Fix the first and last x Axis' event receiver coodinate width
to fully occupy x Axis space

Ref naver#2913
  • Loading branch information
netil committed Oct 26, 2022
1 parent 511d135 commit d4af016
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 31 deletions.
35 changes: 22 additions & 13 deletions src/ChartInternal/interactions/eventrect.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,33 +242,42 @@ export default {
rectW = (d): number => {
const x = getPrevNextX(d);
const xDomain = xScale.domain();
let val: number;

// if there this is a single data point make the eventRect full width (or height)
if (x.prev === null && x.next === null) {
return isRotated ? state.height : state.width;
val = isRotated ? state.height : state.width;
} else if (x.prev === null) {
val = (xScale(x.next) + xScale(d.x)) / 2;
} else if (x.next === null) {
val = xScale(xDomain[1]) - (
(xScale(x.prev) + xScale(d.x)) / 2
);
} else {
Object.keys(x).forEach((key, i) => {
x[key] = x[key] ?? xDomain[i];
});

val = Math.max(0, (xScale(x.next) - xScale(x.prev)) / 2);
}

Object.keys(x).forEach((key, i) => {
x[key] = x[key] ?? xDomain[i];
});

return Math.max(0, (xScale(x.next) - xScale(x.prev)) / 2);
return val;
};

rectX = (d): number => {
const x = getPrevNextX(d);
const thisX = d.x;
let val: number;

// if there this is a single data point position the eventRect at 0
if (x.prev === null && x.next === null) {
return 0;
}

if (x.prev === null) {
x.prev = xScale.domain()[0];
val = 0;
} else if (x.prev === null) {
val = xScale(xScale.domain()[0]);
} else {
val = (xScale(d.x) + xScale(x.prev)) / 2;
}

return (xScale(thisX) + xScale(x.prev)) / 2;
return val;
};
}

Expand Down
8 changes: 4 additions & 4 deletions test/interactions/interaction-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ describe("INTERACTION", () => {
});

it("should have 4 event rects properly", () => {
const lefts = [38.5, 99.5, 167.5, 372.5];
const widths = [61, 68, 205, 197.5];
const lefts = [0, 99.5, 167.5, 372.5];
const widths = [99.5, 68, 205, 235.5];

chart.internal.state.eventReceiver.coords.forEach((v, i) => {
expect(v.x).to.be.closeTo(lefts[i], 10);
Expand Down Expand Up @@ -161,8 +161,8 @@ describe("INTERACTION", () => {
expect(d.index).to.be.equal(i);
});

coords.forEach(v => {
expect(v.x).to.be.above(lastX);
coords.forEach((v, i) => {
i && expect(v.x).to.be.above(lastX);
expect(v.w).to.be.above(0);

lastX = v.x;
Expand Down
36 changes: 22 additions & 14 deletions test/internals/tooltip-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -525,53 +525,59 @@ describe("TOOLTIP", function() {
});

it("should have tooltip to nearest", () => {
const {eventReceiver} = chart.internal.state;

util.hoverChart(chart, "mousemove", {clientX: 150, clientY: 300});
expect(chart.internal.state.eventReceiver.currentIdx).to.be.equal(0);
expect(eventReceiver.currentIdx).to.be.equal(0);

util.hoverChart(chart, "mousemove", {clientX: 200, clientY: 300});
expect(chart.internal.state.eventReceiver.currentIdx).to.be.equal(1);
expect(eventReceiver.currentIdx).to.be.equal(1);

util.hoverChart(chart, "mousemove", {clientX: 425, clientY: 300});
expect(chart.internal.state.eventReceiver.currentIdx).to.be.equal(1);
expect(eventReceiver.currentIdx).to.be.equal(1);

util.hoverChart(chart, "mousemove", {clientX: 500, clientY: 300});
expect(chart.internal.state.eventReceiver.currentIdx).to.be.equal(2);
expect(eventReceiver.currentIdx).to.be.equal(2);
})

it("set step type to step before", () => {
args.line.step.type = 'step-before';
});

it("should have tooltip to right", () => {
const {eventReceiver} = chart.internal.state;

util.hoverChart(chart, "mousemove", {clientX: 150, clientY: 300});
expect(chart.internal.state.eventReceiver.currentIdx).to.be.equal(1);
expect(eventReceiver.currentIdx).to.be.equal(1);

util.hoverChart(chart, "mousemove", {clientX: 200, clientY: 300});
expect(chart.internal.state.eventReceiver.currentIdx).to.be.equal(1);
expect(eventReceiver.currentIdx).to.be.equal(1);

util.hoverChart(chart, "mousemove", {clientX: 450, clientY: 300});
expect(chart.internal.state.eventReceiver.currentIdx).to.be.equal(2);
expect(eventReceiver.currentIdx).to.be.equal(2);

util.hoverChart(chart, "mousemove", {clientX: 500, clientY: 300});
expect(chart.internal.state.eventReceiver.currentIdx).to.be.equal(2);
expect(eventReceiver.currentIdx).to.be.equal(2);
});

it("set step type to default", () => {
args.line.step.type = 'step-after';
});

const checkStepAfter = () => {
const {eventReceiver} = chart.internal.state;

util.hoverChart(chart, "mousemove", {clientX: 150, clientY: 300});
expect(chart.internal.state.eventReceiver.currentIdx).to.be.equal(0);
expect(eventReceiver.currentIdx).to.be.equal(0);

util.hoverChart(chart, "mousemove", {clientX: 200, clientY: 300});
expect(chart.internal.state.eventReceiver.currentIdx).to.be.equal(0);
expect(eventReceiver.currentIdx).to.be.equal(0);

util.hoverChart(chart, "mousemove", {clientX: 450, clientY: 300});
expect(chart.internal.state.eventReceiver.currentIdx).to.be.equal(1);
expect(eventReceiver.currentIdx).to.be.equal(1);

util.hoverChart(chart, "mousemove", {clientX: 500, clientY: 300});
expect(chart.internal.state.eventReceiver.currentIdx).to.be.equal(1);
expect(eventReceiver.currentIdx).to.be.equal(1);
}

it("should have tooltip to left", () => {
Expand All @@ -595,11 +601,13 @@ describe("TOOLTIP", function() {
});

it("should change when enter from right", () => {
const {eventReceiver} = chart.internal.state;

util.hoverChart(chart, "mousemove", {clientX: 350, clientY: 300});
expect(chart.internal.state.eventReceiver.currentIdx).to.be.equal(1);
expect(eventReceiver.currentIdx).to.be.equal(1);

util.hoverChart(chart, "mousemove", {clientX: 250, clientY: 300});
expect(chart.internal.state.eventReceiver.currentIdx).to.be.equal(0);
expect(eventReceiver.currentIdx).to.be.equal(0);
});

});
Expand Down

0 comments on commit d4af016

Please sign in to comment.