feat(shape.line): Add a line_classes option

This option allows lines to be customized with an extra css class Close #181
naver · Nov 2, 2017 · 5781b5a · 5781b5a
1 parent 374e435
commit 5781b5a
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 2 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -2600,6 +2600,22 @@ var demos = {
 				"#StyleForGrid .bb-ygrid-line.grid800 line {stroke: green;}",
 				"#StyleForGrid .bb-ygrid-line.grid800 text {fill: green;}"
 			]
+		},
+		StyleForLines: {
+			options: {
+				data: {
+					columns: [
+						['data1', 100, 200, 1000, 900, 500],
+						['data2', 20, 40, 500, 300, 200]
+					]
+				},
+				line: {
+					classes: [
+						'line-class-data1',
+						'line-class-data2'
+					]
+				}
+			}
 		}
 	}
 };
diff --git a/demo/index.html b/demo/index.html
@@ -54,6 +54,17 @@
     <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
     <![endif]-->
 
+    <style>
+      .line-class-data1 {
+        stroke-dasharray: 3 4;
+        stroke-width: 3px;
+      }
+      .line-class-data2 {
+        stroke-dasharray: 2 4;
+        stroke-width: 2px;
+      }
+    </style>
+
 </head>
 
 <body>
@@ -117,4 +128,4 @@ <h4 class="sub_tit">Sample code</h4>
 }();
 </script>
 </body>
-</html>
+</html>
diff --git a/spec/shape.line-spec.js b/spec/shape.line-spec.js
@@ -301,4 +301,44 @@ describe("SHAPE LINE", () => {
 			skipEach = false;
 		})
 	});
+
+	describe("line options", () => {
+		before(() => {
+			args = {
+				data: {
+					columns: [
+						["data1", 30, 200, 100, 400, 150, 250],
+						["data2", 50, 20, 10, 0, 15, 25]
+					]
+				},
+				line: {
+					classes: [
+						"line-class-1",
+						"line-class-2"
+					]
+				}
+			};
+		});
+
+		it("should not throw when using the line.classes options", () => {
+			const generateChartWithLineClasses = () => {
+				chart = util.generate(args);
+			};
+
+			expect(generateChartWithLineClasses).to.not.throw();
+		});
+
+		it("should define config.line_classes", () => {
+			chart = util.generate(args);
+
+			expect(chart.internal.config).to.have.property('line_classes');
+		});
+
+		it("config.line_classes should be an array and include the specified classes", () => {
+			chart = util.generate(args);
+
+			expect(chart.internal.config.line_classes).to.include('line-class-1');
+			expect(chart.internal.config.line_classes).to.include('line-class-2');
+		});
+	});
 });
diff --git a/src/config/Options.js b/src/config/Options.js
@@ -2073,6 +2073,7 @@ export default class Options {
 			 * @type {Object}
 			 * @property {Boolean} [line.connectNull=false] Set if null data point will be connected or not.<br>
 			 *  If true set, the region of null data will be connected without any data point. If false set, the region of null data will not be connected and get empty.
+			 * @property {Array}   [line.classes=undefined] If set, used to set a css class on each line.
 			 * @property {Boolean} [line.step.type=step] Change step type for step chart.<br>
 			 * **Available values:**
 			 * - step
@@ -2081,13 +2082,18 @@ export default class Options {
 			 * @example
 			 *  line: {
 			 *      connectNull: true,
+			 *      classes: [
+			 *          "line-class1",
+			 *          "line-class2"
+			 *      ],
 			 *      step: {
 			 *          type: "step-after"
 			 *      }
 			 *  }
 			 */
 			line_connectNull: false,
 			line_step_type: "step",
+			line_classes: undefined,
 
 			/**
 			 * Set bar options

diff --git a/src/internals/ChartInternal.js b/src/internals/ChartInternal.js
@@ -102,6 +102,8 @@ export default class ChartInternal {
 		$$.color = $$.generateColor();
 		$$.levelColor = $$.generateLevelColor();
 
+		$$.extraLineClasses = $$.generateExtraLineClass();
+
 		$$.dataTimeFormat = config.data_xLocaltime ? d3TimeParse : d3UtcParse;
 		$$.axisTimeFormat = config.axis_x_localtime ? d3TimeFormat : d3UtcFormat;
 

diff --git a/src/internals/class.js b/src/internals/class.js
@@ -30,6 +30,21 @@ extend(ChartInternal.prototype, {
 		return this.generateClass(CLASS.shapes, d.id);
 	},
 
+	generateExtraLineClass() {
+		const $$ = this;
+		const classes = $$.config.line_classes || [];
+		const ids = [];
+
+		return function(d) {
+			const id = d.id || (d.data && d.data.id) || d;
+
+			if (ids.indexOf(id) < 0) {
+				ids.push(id);
+			}
+			return classes[ids.indexOf(id) % classes.length];
+		};
+	},
+
 	classLine(d) {
 		return this.classShape(d) + this.generateClass(CLASS.line, d.id);
 	},

diff --git a/src/internals/shape.line.js b/src/internals/shape.line.js
@@ -85,7 +85,12 @@ extend(ChartInternal.prototype, {
 
 		$$.mainLine = $$.mainLine.enter()
 			.append("path")
-			.attr("class", $$.classLine.bind($$))
+			.attr("class", d => {
+				const extraLineClass = $$.extraLineClasses(d) ?
+					` ${$$.extraLineClasses(d)}` : "";
+
+				return $$.classLine.bind($$)(d) + extraLineClass;
+			})
 			.style("stroke", $$.color)
 			.merge($$.mainLine)
 			.style("opacity", $$.initialOpacity.bind($$))