Skip to content

Commit

Permalink
fix(subchart): fix duplicated node generation on data load
Browse files Browse the repository at this point in the history 
Fix incorrect selection merge where causing node duplication

Fix #2003
  • Loading branch information
@netil
netil authored Mar 26, 2021
1 parent e507835 commit d9a5d9a
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 17 deletions.
13 changes: 5 additions & 8 deletions src/ChartInternal/interactions/subchart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,21 +195,18 @@ export default {
} else {
const shapeUpdate = shapeChart
.selectAll(`.${CLASS[`chart${name}`]}`)
.data(targets.filter($$[`is${name}Type`].bind($$)))
.attr("class", chartClass);

shapeUpdate.exit().remove();
.attr("class", chartClass)
.data(targets.filter($$[`is${name}Type`].bind($$)));

const shapeEnter = shapeUpdate.enter()
.append("g")
.style("opacity", "0")
.attr("class", chartClass)
.merge(shapeUpdate);

// Bars for each data
shapeEnter.append("g")
.append("g")
.attr("class", shapeClass);

shapeUpdate.exit().remove();

// Area
v === "line" && $$.hasTypeOf("Area") &&
shapeEnter.append("g").attr("class", $$.getClass("areas", true));
Expand Down
70 changes: 61 additions & 9 deletions test/interactions/subchart-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,21 +272,21 @@ describe("SUBCHART", () => {
});

const checkPath = (selector, expected) => {
chart.$.svg.select(`.${CLASS.subchart}`)
chart.internal.$el.subchart.main
.selectAll(selector).each(function(d, i) {
expect(this.getAttribute("d")).to.be.equal(expected[i]);
});
};

it("check for area-spline", () => {
checkPath(`.${CLASS.lines} path`, [
checkPath(`.${CLASS.line} path`, [
'M6,56.448321599836746C6,56.448321599836746,201.16666666666669,55.645682413359175,299,55.244362820120394C396.8333333333333,54.84304322688161,593,54.04040404040404,593,54.04040404040404',
'M6,52.896643199673505C6,52.896643199673505,201.16666666666669,51.291364826718365,299,50.488725640240794C396.8333333333333,49.686086453763224,593,48.08080808080808,593,48.08080808080808',
'M6,42.241607999183756C6,42.241607999183756,201.16666666666669,38.2284120667959,299,36.221814100601975C396.8333333333333,34.21521613440805,593,30.202020202020208,593,30.202020202020208',
'M6,28.03489439853076C6,28.03489439853076,201.16666666666669,20.81114172023262,299,17.199265381083556C396.8333333333333,13.587389041934493,593,6.363636363636374,593,6.363636363636374'
]);

checkPath(`.${CLASS.areas} path`, [
checkPath(`.${CLASS.area} path`, [
'M6,56.448321599836746C6,56.448321599836746,201.16666666666669,55.645682413359175,299,55.244362820120394C396.8333333333333,54.84304322688161,593,54.04040404040404,593,54.04040404040404L593,60C593,60,396.8333333333333,60,299,60C201.16666666666669,60,6,60,6,60Z',
'M6,52.896643199673505C6,52.896643199673505,201.16666666666669,51.291364826718365,299,50.488725640240794C396.8333333333333,49.686086453763224,593,48.08080808080808,593,48.08080808080808L593,60C593,60,396.8333333333333,60,299,60C201.16666666666669,60,6,60,6,60Z',
'M6,42.241607999183756C6,42.241607999183756,201.16666666666669,38.2284120667959,299,36.221814100601975C396.8333333333333,34.21521613440805,593,30.202020202020208,593,30.202020202020208L593,48.08080808080808C593,48.08080808080808,396.8333333333333,49.686086453763224,299,50.488725640240794C201.16666666666669,51.291364826718365,6,52.896643199673505,6,52.896643199673505Z',
Expand All @@ -299,14 +299,14 @@ describe("SUBCHART", () => {
});

it("check for area-step type", () => {
checkPath(`.${CLASS.lines} path`, [
checkPath(`.${CLASS.line} path`, [
'M6,56.448321599836746L152.5,56.448321599836746L152.5,55.244362820120394L446,55.244362820120394L446,54.04040404040404L593,54.04040404040404',
'M6,52.896643199673505L152.5,52.896643199673505L152.5,50.488725640240794L446,50.488725640240794L446,48.08080808080808L593,48.08080808080808',
'M6,42.241607999183756L152.5,42.241607999183756L152.5,36.221814100601975L446,36.221814100601975L446,30.202020202020208L593,30.202020202020208',
'M6,28.03489439853076L152.5,28.03489439853076L152.5,17.199265381083556L446,17.199265381083556L446,6.363636363636374L593,6.363636363636374'
]);

checkPath(`.${CLASS.areas} path`, [
checkPath(`.${CLASS.area} path`, [
'M6,56.448321599836746L152.5,56.448321599836746L152.5,55.244362820120394L446,55.244362820120394L446,54.04040404040404L593,54.04040404040404L593,60L446,60L446,60L152.5,60L152.5,60L6,60Z',
'M6,52.896643199673505L152.5,52.896643199673505L152.5,50.488725640240794L446,50.488725640240794L446,48.08080808080808L593,48.08080808080808L593,60L446,60L446,60L152.5,60L152.5,60L6,60Z',
'M6,42.241607999183756L152.5,42.241607999183756L152.5,36.221814100601975L446,36.221814100601975L446,30.202020202020208L593,30.202020202020208L593,48.08080808080808L446,48.08080808080808L446,50.488725640240794L152.5,50.488725640240794L152.5,52.896643199673505L6,52.896643199673505Z',
Expand All @@ -319,7 +319,7 @@ describe("SUBCHART", () => {
});

it("check for bar type", () => {
checkPath(`.${CLASS.bars} path`, [
checkPath(`.${CLASS.bar} path`, [
"M39.96666666666666,60V56.448321599836746 H99.66666666666666 V60z",
"M239.3,60V55.244362820120394 H299 V60z",
"M438.6333333333334,60V54.04040404040404 H498.33333333333337 V60z",
Expand All @@ -341,7 +341,7 @@ describe("SUBCHART", () => {
});

it("check for non-grouped line type", () => {
checkPath(`.${CLASS.lines} path`, [
checkPath(`.${CLASS.line} path`, [
'M6,55.083333333333336L299,52.16543026706231L593,49.24752720079129',
'M6,46.47551928783382L299,40.63971315529179L593,34.80390702274976',
'M6,37.867705242334324L299,29.11399604352127L593,20.36028684470821',
Expand Down Expand Up @@ -384,12 +384,12 @@ describe("SUBCHART", () => {
});

it("check for area-line-range type", () => {
checkPath(`.${CLASS.lines} path`, [
checkPath(`.${CLASS.line} path`, [
'M6,44.981818181818184L124,46.054545454545455L241,45.518181818181816L358,47.12727272727273L475,43.909090909090914L593,42.836363636363636',
'M6,46.054545454545455L124,23.527272727272727L241,38.54545454545455L358,6.363636363636366L475,33.18181818181818L593,22.454545454545457'
]);

checkPath(`.${CLASS.areas} path`, [
checkPath(`.${CLASS.area} path`, [
'M6,48.2L124,47.663636363636364L241,47.12727272727273L358,48.2L475,46.054545454545455L593,46.590909090909086L593,38.65272727272727L475,40.690909090909095L358,45.518181818181816L241,42.836363636363636L124,43.372727272727275L6,43.909090909090914Z',
'M 6 256.81818181818187'
]);
Expand Down Expand Up @@ -476,4 +476,56 @@ describe("SUBCHART", () => {
});
})
});


describe("dynamic data load via .load() API", () => {
before(() => {
args = {
data: {
columns: [
["data1", 30, 200, 100, 400, 150, 250]
]
},
subchart: {
show: true
}
};
});

it("shouldn't generate duplicated nodes #1", done => {
// when
chart.load({
columns: [
["data1", 30, 20, 50, 40, 60, 50],
["data2", 130, 120, 150, 140, 160, 150],
],
done: function() {
expect(
this.internal.$el.subchart.main.selectAll(`.${CLASS.line}-data1`).size()
).to.be.equal(1);
}
});
});

it("shouldn't generate duplicated nodes #2", done => {
// when
chart.load({
columns: [
["data2", 130, 120, 150, 140, 160, 150],
],
unload: ["data1"],
done: function() {
const {main} = this.internal.$el.subchart;

expect(
main.selectAll(`.${CLASS.line}-data1`).empty()
).to.be.true;

expect(
main.selectAll(`.${CLASS.line}-data2`).size()
).to.be.equal(1);
}
});
});
});
});

0 comments on commit d9a5d9a

Please sign in to comment.