Skip to content

Commit

Permalink
fix(event): Correct on resizing all generated charts
Browse files Browse the repository at this point in the history 
Fix the side effect from #404.
D3's event binding, behaves removing previous attached.
Updated to keep all previous resize events.

Fix #466
Close #468
  • Loading branch information
@netil
netil authored Jun 29, 2018
1 parent 45f21e6 commit 10d6d73
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 55 deletions.
148 changes: 95 additions & 53 deletions spec/internals/bb-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,13 @@ describe("Interface & initialization", () => {
expect(bb.version.length > 0).to.be.ok;
});

it("should resize correctly in flex container", done => {
// set flex container
document.body.innerHTML = '<div style="display:flex"><div style="display:block;flex-basis:0;flex-grow:1;flex-shrink:1"><div id="flex-container"></div></div></div>';
const chart = util.generate({
bindto: "#flex-container",
it("instantiate with different classname on wrapper element", () => {
const bindtoClassName = "billboard-js";
const chart = bb.generate({
bindto: {
element: "#chart",
classname: bindtoClassName
},
data: {
columns: [
["data1", 30, 200, 100, 400],
Expand All @@ -51,65 +53,105 @@ describe("Interface & initialization", () => {
}
});

const chartWidth = +chart.internal.svg.attr("width");
const diff = 50;
expect(d3.select(chart.element).classed(bindtoClassName)).to.be.true;
});

// shrink width & resize
document.body.style.width = `${document.body.offsetWidth - diff}px`;
chart.internal.resizeFunction();
describe("auto resize", () => {
it("should resize correctly in flex container", function(done) {
this.timeout(4000);

setTimeout(() => {
expect(+chart.internal.svg.attr("width")).to.be.equal(chartWidth - diff);
const body = document.body;

// reset the body
document.body.innerHTML = "";
done();
}, 100);
});
// set flex container
body.innerHTML = '<div style="display:flex"><div style="display:block;flex-basis:0;flex-grow:1;flex-shrink:1"><div id="flex-container"></div></div></div>';

it("height shouldn't be increased on resize event", done => {
const body = document.body;
body.innerHTML = '<div id="chartResize"></div>';
const chart = util.generate({
bindto: "#flex-container",
data: {
columns: [
["data1", 30, 200, 100, 400],
["data2", 500, 800, 500, 2000]
]
}
});

const chart = bb.generate({
bindto: "#chartResize",
data: {
columns: [
["data1", 30, 200, 100, 400],
["data2", 500, 800, 500, 2000]
]
}
const chartWidth = +chart.internal.svg.attr("width");
const diff = 50;

// shrink width & resize
body.style.width = `${document.body.offsetWidth - diff}px`;
d3.select(window).on("resize.bb")();

setTimeout(() => {
expect(+chart.internal.svg.attr("width")).to.be.equal(chartWidth - diff);

// reset the body
body.innerHTML = "";

done();
}, 200);
});
const chartHeight = +chart.internal.svg.attr("height");

body.style.width = `${+body.style.width.replace("px", "") - 100}px`;
chart.internal.resizeFunction();
it("height shouldn't be increased on resize event", function(done) {
this.timeout(4000);

setTimeout(() => {
expect(+chart.internal.svg.attr("height")).to.be.equal(chartHeight);
const body = document.body;
body.innerHTML = '<div id="chartResize"></div>';

// reset the body
body.removeAttribute("style");
body.innerHTML = "";
done();
}, 500);
});
const chart = bb.generate({
bindto: "#chartResize",
data: {
columns: [
["data1", 30, 200, 100, 400],
["data2", 500, 800, 500, 2000]
]
}
});
const chartHeight = +chart.internal.svg.attr("height");

it("instantiate with different classname on wrapper element", () => {
const bindtoClassName = "billboard-js";
const chart = bb.generate({
bindto: {
element: "#chart",
classname: bindtoClassName
},
data: {
columns: [
["data1", 30, 200, 100, 400],
["data2", 500, 800, 500, 2000]
]
}
body.style.width = `${+body.style.width.replace("px", "") - 100}px`;
d3.select(window).on("resize.bb")();

setTimeout(() => {
expect(+chart.internal.svg.attr("height")).to.be.equal(chartHeight);

// reset the body
body.removeAttribute("style");
body.innerHTML = "";

done();
}, 500);
});

expect(d3.select(chart.element).classed(bindtoClassName)).to.be.true;
it("should be resizing all generated chart elements", function(done) {
this.timeout(4000);

const width = 300;
const body = document.body;
const options = {
data: {
columns: [
["data1", 30]
]
}
};
const chart1 = util.generate(options.bindto = "#chart1" && options);
const chart2 = util.generate(options.bindto = "#chart2" && options);

body.style.width = width + "px";

// run the resize handler
d3.select(window).on("resize.bb")();

setTimeout(() => {
expect(+chart1.internal.svg.attr("width")).to.be.equal(width);
expect(+chart2.internal.svg.attr("width")).to.be.equal(width);

// should revert to not affect other tests
body.removeAttribute("style");

done();
}, 500);
});
});
});
2 changes: 1 addition & 1 deletion src/api/api.chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ extend(Chart.prototype, {
isDefined($$.intervalForObserveInserted) && window.clearInterval($$.intervalForObserveInserted);
isDefined($$.resizeTimeout) && window.clearTimeout($$.resizeTimeout);

d3Select(window).on("resize", null);
d3Select(window).on("resize.bb", null);
$$.selectChart.classed("bb", false).html("");

// releasing references
Expand Down
6 changes: 5 additions & 1 deletion src/internals/ChartInternal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1154,7 +1154,11 @@ export default class ChartInternal {
$$.resizeFunction.add(() => config.onresized.call($$));

// attach resize event
d3Select(window).on("resize", $$.resizeFunction);
// get the possible previous attached
const resizeEvents = d3Select(window).on("resize.bb");

resizeEvents && $$.resizeFunction.add(resizeEvents);
d3Select(window).on("resize.bb", $$.resizeFunction);
}

generateResize() {
Expand Down

0 comments on commit 10d6d73

Please sign in to comment.