fix(line): Fix areaGradient for spaced data name

Replace data name to work with special chars. Fix #930
naver · Jun 12, 2019 · 3fbd4b2 · 3fbd4b2
1 parent cf75dab
commit 3fbd4b2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/spec/shape/shape.line-spec.js b/spec/shape/shape.line-spec.js
@@ -501,7 +501,7 @@ describe("SHAPE LINE", () => {
 				data: {
 				columns: [
 						["data1", 230, 280, 251, 400, 150, 546, 158],
-						["data2", 230, 280, 251, 400, 150, 546, 158]
+						["hello there", 230, 280, 251, 400, 150, 546, 158]
 					],
 					type: "area",
 				},
@@ -522,7 +522,8 @@ describe("SHAPE LINE", () => {
 
 			chart.data().forEach(v => {
 				const color = chart.color(v.id);
-				const id = `#${internal.datetimeId}-areaGradient-${v.id}`;
+				const selectorSuffix = internal.getTargetSelectorSuffix(v.id);
+				const id = `#${internal.datetimeId}-areaGradient${selectorSuffix}`;
 				const gradient = chart.$.svg.select(id);
 
 				expect(gradient.empty()).to.be.false;
@@ -537,7 +538,7 @@ describe("SHAPE LINE", () => {
 					expect(+stop.attr("stop-opacity")).to.be.equal(expected.opacity[i]);
 				});
 
-				expect(chart.$.line.areas.filter(`.${CLASS.area}-${v.id}`).style("fill")).to.be.equal(`url("${id}")`);
+				expect(chart.$.line.areas.filter(`.${CLASS.area}${selectorSuffix}`).style("fill")).to.be.equal(`url("${id}")`);
 			});
 		});
 
@@ -556,8 +557,11 @@ describe("SHAPE LINE", () => {
 		});
 
 		it("should generate customized liearGradient element", () => {
+			const internal = chart.internal;
+
 			chart.data().forEach(v => {
-				const id = `#${chart.internal.datetimeId}-areaGradient-${v.id}`;
+				const selectorSuffix = internal.getTargetSelectorSuffix(v.id);
+				const id = `#${internal.datetimeId}-areaGradient${selectorSuffix}`;
 				const gradient = chart.$.svg.select(id);
 
 				expect(gradient.empty()).to.be.false;
@@ -575,7 +579,7 @@ describe("SHAPE LINE", () => {
 					expect(+stop.attr("stop-opacity")).to.be.equal(stops[i][2]);
 				});
 
-				expect(chart.$.line.areas.filter(`.${CLASS.area}-${v.id}`).style("fill")).to.be.equal(`url("${id}")`);
+				expect(chart.$.line.areas.filter(`.${CLASS.area}${selectorSuffix}`).style("fill")).to.be.equal(`url("${id}")`);
 			});
 		});
 

diff --git a/src/shape/line.js b/src/shape/line.js
@@ -348,7 +348,9 @@ extend(ChartInternal.prototype, {
 		const $$ = this;
 
 		$$.data.targets.forEach(d => {
-			if ($$.isAreaType(d) && $$.defs.select(`[id$=${d.id}]`).empty()) {
+			const id = $$.getTargetSelectorSuffix(d.id);
+
+			if ($$.isAreaType(d) && $$.defs.select(`[id$=${id}]`).empty()) {
 				const color = $$.color(d);
 				const {
 					x = [0, 0],
@@ -357,7 +359,7 @@ extend(ChartInternal.prototype, {
 				} = $$.config.area_linearGradient;
 
 				const linearGradient = $$.defs.append("linearGradient")
-					.attr("id", `${$$.datetimeId}-areaGradient-${d.id}`)
+					.attr("id", `${$$.datetimeId}-areaGradient${id}`)
 					.attr("x1", x[0])
 					.attr("x2", x[1])
 					.attr("y1", y[0])
@@ -379,7 +381,7 @@ extend(ChartInternal.prototype, {
 		const $$ = this;
 
 		return $$.config.area_linearGradient ?
-			`url(#${$$.datetimeId}-areaGradient-${d.id})` :
+			`url(#${$$.datetimeId}-areaGradient${$$.getTargetSelectorSuffix(d.id)})` :
 			$$.color(d);
 	},