fix(area): Apply gradient on dynamic data loading

Change the gradient update condition to handle dynamic data loading Fix #855
naver · May 2, 2019 · 954c303 · 954c303
1 parent e48b269
commit 954c303
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 23 deletions.
diff --git a/spec/shape/shape.line-spec.js b/spec/shape/shape.line-spec.js
@@ -578,5 +578,31 @@ describe("SHAPE LINE", () => {
 				expect(chart.$.line.areas.filter(`.${CLASS.area}-${v.id}`).style("fill")).to.be.equal(`url("${id}")`);
 			});
 		});
+
+		it("set options: reset options", () => {
+			args = {
+				data: {
+					columns: [["data"]],
+					type: "area"
+				},
+				area: {
+					linearGradient: true
+				}
+			};
+		});
+
+		it("should generate customized liearGradient element", done => {
+			setTimeout(() => {
+				chart.load({
+				  columns: [
+					["data", 10, 20, 30, 40]
+				  ],
+				  done: () => {
+					  expect(chart.$.defs.select("linearGradient").empty()).to.be.false;
+					  done();
+				  }
+				});
+			  }, 1000);
+		});
 	});
 });
diff --git a/src/shape/line.js b/src/shape/line.js
@@ -348,28 +348,30 @@ extend(ChartInternal.prototype, {
 		const $$ = this;
 
 		$$.data.targets.forEach(d => {
-			const color = $$.color(d);
-			const {
-				x = [0, 0],
-				y = [0, 1],
-				stops = [[0, color, 1], [1, color, 0]]
-			} = $$.config.area_linearGradient;
-
-			const linearGradient = $$.defs.append("linearGradient")
-				.attr("id", `${$$.datetimeId}-areaGradient-${d.id}`)
-				.attr("x1", x[0])
-				.attr("x2", x[1])
-				.attr("y1", y[0])
-				.attr("y2", y[1]);
-
-			stops.forEach(v => {
-				const stopColor = isFunction(v[1]) ? v[1](d.id) : v[1];
-
-				linearGradient.append("stop")
-					.attr("offset", v[0])
-					.attr("stop-color", stopColor || color)
-					.attr("stop-opacity", v[2]);
-			});
+			if ($$.isAreaType(d) && $$.defs.select(`[id$=${d.id}]`).empty()) {
+				const color = $$.color(d);
+				const {
+					x = [0, 0],
+					y = [0, 1],
+					stops = [[0, color, 1], [1, color, 0]]
+				} = $$.config.area_linearGradient;
+
+				const linearGradient = $$.defs.append("linearGradient")
+					.attr("id", `${$$.datetimeId}-areaGradient-${d.id}`)
+					.attr("x1", x[0])
+					.attr("x2", x[1])
+					.attr("y1", y[0])
+					.attr("y2", y[1]);
+
+				stops.forEach(v => {
+					const stopColor = isFunction(v[1]) ? v[1](d.id) : v[1];
+
+					linearGradient.append("stop")
+						.attr("offset", v[0])
+						.attr("stop-color", stopColor || color)
+						.attr("stop-opacity", v[2]);
+				});
+			}
 		});
 	},
 
@@ -384,7 +386,7 @@ extend(ChartInternal.prototype, {
 	updateArea(durationForExit) {
 		const $$ = this;
 
-		$$.config.area_linearGradient && !$$.mainArea && $$.updateAreaGradient();
+		$$.config.area_linearGradient && $$.updateAreaGradient();
 
 		$$.mainArea = $$.main.selectAll(`.${CLASS.areas}`)
 			.selectAll(`.${CLASS.area}`)