Skip to content

Commit

Permalink
fix(bubble,point): Fix bubble size change on load API (#214)
Browse files Browse the repository at this point in the history 
When loads happens containing higher value than loaded,
the previous size should shrink.

Ref #163 
Close #214
  • Loading branch information
@netil
netil committed Dec 7, 2017
1 parent cdc0086 commit d9eb371
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 78 deletions.
4 changes: 1 addition & 3 deletions demo/demo.js
View file
Expand Up @@ -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;
}
}
}
Expand Down
74 changes: 37 additions & 37 deletions spec/api.load-spec.js
View file
Expand Up @@ -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: [
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion spec/shape.bubble-spec.js
View file
Expand Up @@ -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]
]
});

Expand Down
9 changes: 6 additions & 3 deletions src/data/data.load.js
View file
Expand Up @@ -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) {
Expand All @@ -78,6 +81,9 @@ extend(ChartInternal.prototype, {
let done = customDoneCb;
let targetIds = rawTargetIds;

// reset internally cached data
$$.resetCache();

if (!done) {
done = () => {};
}
Expand Down Expand Up @@ -107,9 +113,6 @@ extend(ChartInternal.prototype, {
// Remove target
$$.data.targets = $$.data.targets.filter(t => t.id !== id);
});

// reset internally cached data
$$.resetCache();
}
});

68 changes: 34 additions & 34 deletions src/shape/point.js
View file
Expand Up @@ -24,37 +24,40 @@ 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);
},

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);
}
Expand All @@ -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);
}
Expand Down

0 comments on commit d9eb371

Please sign in to comment.