Skip to content

Commit

Permalink
fix(data,interaction): Bar type interaction error on multiple x
Browse files Browse the repository at this point in the history 
- Fix erroneous element selector
- Update event firing for test cases

Fix #178
Close #180
  • Loading branch information
@netil
netil authored Nov 3, 2017
1 parent 3bfcecf commit cf49d71
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 51 deletions.
14 changes: 1 addition & 13 deletions spec/assets/util.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,19 +68,7 @@ const fireEvent = (element, name, options = {}, chart) => {
"clientX" in options && (options.clientX += paddingLeft);
"clientY" in options && (options.clientY += 5);

if (element) {
d3.event = simulant.fire(element, name, options);

// for legacy tests compatibility
} else {
const event = document.createEvent("MouseEvents");

event.initMouseEvent(name, true, true, window,
0, 0, 0, options.clientX, options.clientY,
false, false, false, false, 0, null);

d3.event = event;
}
element && simulant.fire(element, name, options);
};

/**
Expand Down
117 changes: 82 additions & 35 deletions spec/shape.bar-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,52 +132,60 @@ describe("SHAPE BAR", () => {
};
});

it("should not be within bar", () => {
it("should not be within bar", done => {
const internal = chart.internal;
const bar = internal.main.select(".bb-target-data1 .bb-bar-0").node();
const bar = internal.main.select(".bb-target-data1 .bb-bar-0")
.on("click", function() {
expect(internal.isWithinBar(this)).to.not.be.ok;
done();
});

util.fireEvent(null, "click", {
util.fireEvent(bar.node(), "click", {
clientX: 0,
clientY: 0
}, chart);

expect(chart.internal.isWithinBar(bar)).to.not.be.ok;
});

it("should be within bar", () => {
it("should be within bar", done => {
const internal = chart.internal;
const bar = internal.main.select(".bb-target-data1 .bb-bar-0").node();
const bar = internal.main.select(".bb-target-data1 .bb-bar-0")
.on("click", function() {
expect(internal.isWithinBar(this)).to.be.ok;
done();
});

util.fireEvent(null, "click", {
util.fireEvent(bar.node(), "click", {
clientX: 31,
clientY: 280
}, chart);

expect(internal.isWithinBar(bar)).to.be.ok;
});

it("should not be within bar of negative value", () => {
it("should not be within bar of negative value", done => {
const internal = chart.internal;
const bar = internal.main.select(".bb-target-data3 .bb-bar-0").node();
const bar = internal.main.select(".bb-target-data3 .bb-bar-0")
.on("click", function() {
expect(internal.isWithinBar(this)).to.not.be.ok;
done();
});

util.fireEvent(null, "click", {
util.fireEvent(bar.node(), "click", {
clientX: 68,
clientY: 280
}, chart);

expect(internal.isWithinBar(bar)).to.not.be.ok;
});

it("should be within bar of negative value", () => {
it("should be within bar of negative value", done => {
const internal = chart.internal;
const bar = internal.main.select(".bb-target-data3 .bb-bar-0").node();
const bar = internal.main.select(".bb-target-data3 .bb-bar-0")
.on("click", function() {
expect(internal.isWithinBar(this)).to.be.ok;
done();
});

util.fireEvent(null, "click", {
util.fireEvent(bar.node(), "click", {
clientX: 68,
clientY: 350
}, chart);

expect(internal.isWithinBar(bar)).to.be.ok;
});
});

Expand All @@ -186,41 +194,80 @@ describe("SHAPE BAR", () => {
args.axis.rotated = true;
});

it("should not be within bar", () => {
it("should not be within bar", done => {
const internal = chart.internal;
const bar = internal.main.select(".bb-target-data1 .bb-bar-0").node();
const bar = internal.main.select(".bb-target-data1 .bb-bar-0")
.on("click", function() {
expect(internal.isWithinBar(this)).to.not.be.ok;
done();
});

util.fireEvent(null, "click", {
util.fireEvent(bar.node(), "click", {
clientX: 0,
clientY: 0
}, chart);

expect(internal.isWithinBar(bar)).to.not.be.ok;
});

it("should be within bar", () => {
it("should be within bar", done => {
const internal = chart.internal;
const bar = internal.main.select(".bb-target-data1 .bb-bar-0").node();
const bar = internal.main.select(".bb-target-data1 .bb-bar-0")
.on("click", function() {
expect(internal.isWithinBar(this)).to.be.ok;
done();
});

util.fireEvent(null, "click", {
util.fireEvent(bar.node(), "click", {
clientX: 190,
clientY: 20
}, chart);

expect(internal.isWithinBar(bar)).to.be.ok;
});

it("should be within bar of negative value", () => {
it("should be within bar of negative value", done => {
const internal = chart.internal;
const bar = internal.main.select(".bb-target-data3 .bb-bar-0").node();
const bar = internal.main.select(".bb-target-data3 .bb-bar-0")
.on("click", function() {
expect(internal.isWithinBar(this)).to.be.ok;
done();
});

util.fireEvent(null, "click", {
util.fireEvent(bar.node(), "click", {
clientX: 68,
clientY: 50
}, chart);

expect(internal.isWithinBar(bar)).to.be.ok;
});
});
});

describe("multiple xs", () => {
before(() => {
args = {
data: {
type: "bar",
xs: {
"data1": "x",
"data2": "x2"
},
x: "x",
columns: [
["x", "a", "b", "c", "d"],
["x2", "e", "f", "g", "h"],
["data1", 2407067, 3499561, 2811458, 2766504],
["data2", 2211645, 2211645, 2200597, 2352318]
]
},
axis: {
x: {
type: "category"
}
}
};
});

it("should not throw error on click", () => {
const internal = chart.internal;
const bar = internal.main.select(".bb-event-rects-multiple rect").node();

expect(() => util.fireEvent(bar, "click")).to.not.throw();
});
});
});
2 changes: 1 addition & 1 deletion src/data/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -470,7 +470,7 @@ extend(ChartInternal.prototype, {
values
.filter(v => v && $$.isBarType(v.id))
.forEach(v => {
const shape = $$.main.select().node(`.${CLASS.bars}${$$.getTargetSelectorSuffix(v.id)}.${CLASS.bar}-${v.index}`);
const shape = $$.main.select(`.${CLASS.bars}${$$.getTargetSelectorSuffix(v.id)} .${CLASS.bar}-${v.index}`).node();

if (!closest && $$.isWithinBar(shape)) {
closest = v;
Expand Down
3 changes: 1 addition & 2 deletions src/interactions/interaction.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -322,7 +322,7 @@ extend(ChartInternal.prototype, {
return;
}

const mouse = d3Mouse($$.main.select(`.${CLASS.eventRects} .${CLASS.eventRect}`).node());
const mouse = d3Mouse(context);
const closest = $$.findClosestFromTargets(targetsToShow, mouse);
let sameXData;

Expand Down Expand Up @@ -533,7 +533,6 @@ extend(ChartInternal.prototype, {
) : () => {}
);


if ($$.inputType === "mouse") {
rect
.on("mouseover", function() {
Expand Down

0 comments on commit cf49d71

Please sign in to comment.