fix(colors): Fix color method

Only charts with background should use tiles Close #233
naver · Jan 10, 2018 · 8effaad · 8effaad
1 parent a23dd5d
commit 8effaad
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 3 deletions.
diff --git a/spec/color-spec.js b/spec/color-spec.js
@@ -131,5 +131,54 @@ describe("COLOR", () => {
 				});
 			});
 		});
+
+		describe("pattern shouldn't be applying for line types", () => {
+			const checkStroke = (path=[false, false]) => {
+				const internal = chart.internal;
+				const rx = /#bb-\d+-pattern-/;
+
+				chart.data().forEach(v => {
+					const id = v.id;
+					const isLine = internal.isTypeOf(id, ["line", "spline", "step"]) || !internal.config.data_types[id];
+					const stroke = internal.main.select(`.bb-shapes-${id} path`).style("stroke");
+
+					expect(rx.test(stroke)).to.be[!isLine];
+				})
+			};
+
+			it("set options data.type=undefined", () => {
+				args.data.type = undefined;
+			});
+
+			it("check for stroke", checkStroke);
+
+			it("set options data.type=line", () => {
+				args.data.type = "line";
+			});
+
+			it("check for stroke", checkStroke);
+
+			it("set options data.type=spline", () => {
+				args.data.type = "spline";
+			});
+
+			it("check for stroke", checkStroke);
+
+			it("set options data.type=step", () => {
+				args.data.type = "step";
+			});
+
+			it("check for stroke", checkStroke);
+
+			it("set options data.type", () => {
+				args.data.type = undefined;
+				args.data.types = {
+					data1: "bar",
+					data2: "line"
+				};
+			});
+
+			it("check for stroke", checkStroke);
+		});
 	});
 });
diff --git a/src/internals/color.js b/src/internals/color.js
@@ -44,6 +44,8 @@ extend(ChartInternal.prototype, {
 		const ids = [];
 		let pattern = notEmpty(config.color_pattern) ?
 			config.color_pattern : d3ScaleOrdinal(d3SchemeCategory10).range();
+		const originalColorPattern = pattern;
+
 
 		if (isFunction(config.color_tiles)) {
 			const tiles = config.color_tiles();
@@ -62,7 +64,8 @@ extend(ChartInternal.prototype, {
 
 		return function(d) {
 			const id = d.id || (d.data && d.data.id) || d;
-			const isLine = $$.isTypeOf(id, "line");
+			const isLine = $$.isTypeOf(id, ["line", "spline", "step"]) || !$$.config.data_types[id];
+
 			let color;
 
 
@@ -75,9 +78,12 @@ extend(ChartInternal.prototype, {
 				color = colors[id];
 
 			// if not specified, choose from pattern
-			} else if (!isLine) {
+			} else {
 				if (ids.indexOf(id) < 0) { ids.push(id); }
-				color = pattern[ids.indexOf(id) % pattern.length];
+
+				color = isLine ? originalColorPattern[ids.indexOf(id) % originalColorPattern.length] :
+					pattern[ids.indexOf(id) % pattern.length];
+
 				colors[id] = color;
 			}