diff --git a/demo/demo.js b/demo/demo.js index 34b04351c..5f5872a33 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -1673,12 +1673,10 @@ var demos = { } // style the custom element added - mainCircles = element + return element .attr("points", getPoints) .style("opacity", opacityStyleFn) .style("fill", fillStyleFn); - - return mainCircles; } } } diff --git a/spec/api.load-spec.js b/spec/api.load-spec.js index 7dc1a953d..dbe36fc7d 100644 --- a/spec/api.load-spec.js +++ b/spec/api.load-spec.js @@ -3,49 +3,49 @@ * billboard.js project is licensed under the MIT license */ /* eslint-disable */ +import CLASS from "../src/config/classes"; import util from "./assets/util"; describe("API load", function() { - let chart; - - describe("indexed data", () => { - describe("as column", () => { - chart = util.generate({ - data: { - columns: [ - ["data1", 30, 200, 100, 400, 150, 250], - ["data2", 5000, 2000, 1000, 4000, 1500, 2500] - ] - } - }); - - it("should load additional data", done => { - const main = chart.internal.main; - const legend = chart.internal.legend; + describe("indexed data as column", () => { + const chart = util.generate({ + data: { + columns: [ + ["data1", 30, 200, 100, 400, 150, 250], + ["data2", 5000, 2000, 1000, 4000, 1500, 2500] + ] + }, + point: { + show: true + } + }); - chart.load({ - columns: [ - ["data3", 800, 500, 900, 500, 1000, 700] - ] - }); + it("should load additional data", done => { + const main = chart.internal.main; + const legend = chart.internal.legend; - setTimeout(() => { - const target = main.select(".bb-chart-line.bb-target.bb-target-data3"); - const legendItem = legend.select(".bb-legend-item.bb-legend-item-data3"); + chart.load({ + columns: [ + ["data3", 800, 500, 900, 500, 1000, 700] + ] + }); - expect(target.size()).to.be.equal(1); - expect(legendItem.size()).to.be.equal(1); + setTimeout(() => { + const target = main.select(`.${CLASS.chartLine}.${CLASS.target}.${CLASS.target}-data3`); + const legendItem = legend.select(`.${CLASS.legendItem}.${CLASS.legendItem}-data3`); + const circles = main.selectAll(`.${CLASS.circles}.${CLASS.circles}-data3 circle`); - done(); - }, 500); - }); + expect(target.size()).to.be.equal(1); + expect(legendItem.size()).to.be.equal(1); + expect(circles.size()).to.be.equal(6); + done(); + }, 500); }); - }); describe("category data", () => { - chart = util.generate({ + const chart = util.generate({ data: { x: "x", columns: [ @@ -76,9 +76,9 @@ describe("API load", function() { }); setTimeout(() => { - const target = main.select(".bb-chart-line.bb-target.bb-target-data3"); - const legendItem = legend.select(".bb-legend-item.bb-legend-item-data3"); - const tickTexts = main.selectAll(".bb-axis-x g.tick text"); + const target = main.select(`.${CLASS.chartLine}.${CLASS.target}.${CLASS.target}-data3`); + const legendItem = legend.select(`.${CLASS.legendItem}.${CLASS.legendItem}-data3`); + const tickTexts = main.selectAll(`.${CLASS.axisX} g.tick text`); const expected = ["cat1", "cat2", "cat3", "cat4", "cat5", "cat6"]; expect(target.size()).to.be.equal(1); @@ -106,9 +106,9 @@ describe("API load", function() { }); setTimeout(() => { - const target = main.select(".bb-chart-line.bb-target.bb-target-data3"); - const legendItem = legend.select(".bb-legend-item.bb-legend-item-data3"); - const tickTexts = main.selectAll(".bb-axis-x g.tick text"); + const target = main.select(`.${CLASS.chartLine}.${CLASS.target}.${CLASS.target}-data3`); + const legendItem = legend.select(`.${CLASS.legendItem}.${CLASS.legendItem}-data3`); + const tickTexts = main.selectAll(`.${CLASS.axisX} g.tick text`); const expected = ["new1", "new2", "new3", "new4", "new5", "new6"]; expect(target.size()).to.be.equal(1); diff --git a/spec/shape.bubble-spec.js b/spec/shape.bubble-spec.js index 4bf056cae..dcfe867e5 100644 --- a/spec/shape.bubble-spec.js +++ b/spec/shape.bubble-spec.js @@ -46,7 +46,7 @@ describe("SHAPE BUBBLE", () => { it("bubble size should be updated", done => { chart.load({ columns: [ - ['data1', 380, 350, 200, 380, 10] + ['data1', 500, 350, 200, 380, 10] ] }); diff --git a/src/data/data.load.js b/src/data/data.load.js index 04cb7215a..72a26fef9 100644 --- a/src/data/data.load.js +++ b/src/data/data.load.js @@ -56,6 +56,9 @@ extend(ChartInternal.prototype, { loadFromArgs(args) { const $$ = this; + // reset internally cached data + $$.resetCache(); + if (args.data) { $$.load($$.convertDataToTargets(args.data), args); } else if (args.url) { @@ -78,6 +81,9 @@ extend(ChartInternal.prototype, { let done = customDoneCb; let targetIds = rawTargetIds; + // reset internally cached data + $$.resetCache(); + if (!done) { done = () => {}; } @@ -107,9 +113,6 @@ extend(ChartInternal.prototype, { // Remove target $$.data.targets = $$.data.targets.filter(t => t.id !== id); }); - - // reset internally cached data - $$.resetCache(); } }); diff --git a/src/shape/point.js b/src/shape/point.js index e98299a03..5dde82929 100644 --- a/src/shape/point.js +++ b/src/shape/point.js @@ -24,7 +24,7 @@ extend(ChartInternal.prototype, { // 'circle' data point circle: { create(element, cssClassFn, sizeFn, fillStyleFn) { - return (element.empty() ? element.enter().append("circle") : element) + return element.enter().append("circle") .attr("class", cssClassFn) .attr("r", sizeFn) .style("fill", fillStyleFn); @@ -32,29 +32,32 @@ extend(ChartInternal.prototype, { update(element, xPosFn, yPosFn, opacityStyleFn, fillStyleFn, withTransition, flow, selectedCircles) { - let mainCircles; + const $$ = this; + let mainCircles = element; + + // when '.load()' called, bubble size should be updated + if ($$.hasType("bubble")) { + mainCircles = mainCircles + .attr("r", $$.pointR.bind($$)); + } if (withTransition) { - const transitionName = this.getTransitionName(); + const transitionName = $$.getTransitionName(); if (flow) { - mainCircles = element - .attr("cx", xPosFn) - .transition(transitionName) - .attr("cx", xPosFn) - .attr("cy", yPosFn) - .transition(transitionName); - } else { - mainCircles = element - .transition(transitionName) - .attr("cx", xPosFn) - .attr("cy", yPosFn) - .transition(transitionName); + mainCircles = mainCircles + .attr("cx", xPosFn); } - selectedCircles.transition(this.getTransitionName()); + mainCircles = mainCircles + .transition(transitionName) + .attr("cx", xPosFn) + .attr("cy", yPosFn) + .transition(transitionName); + + selectedCircles.transition($$.getTransitionName()); } else { - mainCircles = element + mainCircles = mainCircles .attr("cx", xPosFn) .attr("cy", yPosFn); } @@ -79,33 +82,30 @@ extend(ChartInternal.prototype, { update(element, xPosFn, yPosFn, opacityStyleFn, fillStyleFn, withTransition, flow, selectedCircles) { - const r = this.config.point_r; + const $$ = this; + const r = $$.config.point_r; const rectXPosFn = d => xPosFn(d) - r; const rectYPosFn = d => yPosFn(d) - r; - let mainCircles; + let mainCircles = element; if (withTransition) { - const transitionName = this.getTransitionName(); + const transitionName = $$.getTransitionName(); if (flow) { - mainCircles = element - .attr("x", rectXPosFn) - .transition(transitionName) - .attr("x", rectXPosFn) - .attr("y", rectYPosFn) - .transition(transitionName); - } else { - mainCircles = element - .transition(transitionName) - .attr("x", rectXPosFn) - .attr("y", rectYPosFn) - .transition(transitionName); + mainCircles = mainCircles + .attr("x", rectXPosFn); } - selectedCircles.transition(this.getTransitionName()); + mainCircles = mainCircles + .transition(transitionName) + .attr("x", rectXPosFn) + .attr("y", rectYPosFn) + .transition(transitionName); + + selectedCircles.transition($$.getTransitionName()); } else { - mainCircles = element + mainCircles = mainCircles .attr("x", rectXPosFn) .attr("y", rectYPosFn); }