Skip to content

Commit

Permalink
fix(bubble,point): Fix bubble size change on load API
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
  • Loading branch information
@netil
netil committed Dec 7, 2017
1 parent cdc0086 commit ef7fb6c
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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 ef7fb6c

Please sign in to comment.