diff --git a/spec/internals/bb-spec.js b/spec/internals/bb-spec.js index 2ea93c907..3f9922e0f 100644 --- a/spec/internals/bb-spec.js +++ b/spec/internals/bb-spec.js @@ -354,6 +354,7 @@ describe("Interface & initialization", () => { }); describe("check for lazy rendering", () => { + const spy = {}; const args = { data: { columns: [ @@ -362,6 +363,16 @@ describe("Interface & initialization", () => { } }; + ["afterinit", "rendered", "resize", "resized"].forEach(v => { + args[`on${v}`] = spy[v] = sinon.spy(); + }); + + afterEach(() => { + for (let x in spy) { + spy[x].resetHistory(); + } + }); + it("check lazy rendering & mutation observer: style attribute", done => { const el = document.body.querySelector("#chart"); @@ -372,11 +383,18 @@ describe("Interface & initialization", () => { expect(el.innerHTML).to.be.empty; + for (let x in spy) { + expect(spy[x].called).to.be.false; + } + el.style.display = "block"; setTimeout(() => { expect(el.innerHTML).to.be.not.empty; el.style.display = ""; + + expect(spy.afterinit.called).to.be.true; + expect(spy.rendered.called).to.be.true; done(); }, 500); }); @@ -391,14 +409,56 @@ describe("Interface & initialization", () => { expect(el.innerHTML).to.be.empty; + for (let x in spy) { + expect(spy[x].called).to.be.false; + } + el.classList.remove("hide"); setTimeout(() => { expect(el.innerHTML).to.be.not.empty; + expect(spy.afterinit.called).to.be.true; + expect(spy.rendered.called).to.be.true; done(); }, 500); }); + it("check lazy rendering on callbacks", done => { + const el = document.body.querySelector("#chart"); + + // hide to lazy render + el.style.display = "none"; + + chart = util.generate(args); + + expect(el.innerHTML).to.be.empty; + + // onresize, resized shouldn't be called on resize + chart.resize({width: 500}); + + for (let x in spy) { + expect(spy[x].called).to.be.false; + } + + el.style.display = "block"; + + setTimeout(() => { + expect(el.innerHTML).to.be.not.empty; + el.style.display = ""; + + expect(spy.afterinit.called).to.be.true; + expect(spy.rendered.called).to.be.true; + + chart.resize({width: 500}); + + setTimeout(() => { + expect(spy.resize.called).to.be.true; + expect(spy.resized.called).to.be.true; + done(); + }, 300); + }, 500); + }); + it("check lazy rendering via option", done => { const el = document.body.querySelector("#chart"); @@ -412,11 +472,17 @@ describe("Interface & initialization", () => { // chart shouldn't be rendered expect(el.innerHTML).to.be.empty; + for (let x in spy) { + expect(spy[x].called).to.be.false; + } + // call to render chart.flush(); setTimeout(() => { expect(el.innerHTML).to.be.not.empty; + expect(spy.afterinit.called).to.be.true; + expect(spy.rendered.called).to.be.true; done(); }, 500); }); diff --git a/src/api/api.chart.js b/src/api/api.chart.js index 715c6b377..d0e288223 100644 --- a/src/api/api.chart.js +++ b/src/api/api.chart.js @@ -22,13 +22,15 @@ extend(Chart.prototype, { */ resize(size) { const $$ = this.internal; - const {config, resizeFunction} = $$; + const {config} = $$; - config.size_width = size ? size.width : null; - config.size_height = size ? size.height : null; + if ($$.rendered) { + config.size_width = size ? size.width : null; + config.size_height = size ? size.height : null; - this.flush(false, true); - resizeFunction(); + this.flush(false, true); + $$.resizeFunction(); + } }, /** diff --git a/src/internals/Chart.js b/src/internals/Chart.js index fc50da483..1633994cb 100644 --- a/src/internals/Chart.js +++ b/src/internals/Chart.js @@ -73,7 +73,6 @@ export default class Chart { $$.loadConfig(config); $$.beforeInit(config); $$.init(); - $$.afterInit(config); // bind "this" to nested API (function bindThis(fn, target, argThis) { diff --git a/src/internals/ChartInternal.js b/src/internals/ChartInternal.js index ea65e1670..58ebffc42 100644 --- a/src/internals/ChartInternal.js +++ b/src/internals/ChartInternal.js @@ -114,6 +114,7 @@ export default class ChartInternal { const convertedData = $$.convertData(config, $$.initWithData); convertedData && $$.initWithData(convertedData); + $$.afterInit(); } }