Merge 65b2cc6 into d7c80ec

spec/pattern-spec.js

@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) 2017 NAVER Corp.
+ * billboard.js project is licensed under the MIT license
+ */
+/* eslint-disable */
+/* global describe, beforeEach, it, expect */
+import util from "./assets/util";
+import CLASS from "../src/config/classes";
+
+describe.only("PATTERN", () => {
+	let chart;
+	let args;
+
+	beforeEach(() => {
+		chart = util.generate(args);
+	});
+
+	before(() => {
+		args = {
+			data: {
+				columns: [
+					["data1", 20],
+					["data2", 50],
+					["data3", 30]
+				],
+				pattern: [
+					"#lines-horizontal",
+					"#lines-vertical",
+					"#circles"
+				],
+				type: "pie"
+			},
+			pattern: function (defs) {
+				const linesHorizontal = defs.append("pattern").attr("id", "lines-horizontal");
+				for (let i = 2; i <= 30; i += 4) {
+					linesHorizontal.append("line").attr("x1", "0").attr("x2", "32").attr("y1", i).attr("y2", i);
+				}
+
+				const linesVertical = defs.append("pattern").attr("id", "lines-vertical");
+				for (let i = 2; i <= 30; i += 4) {
+					linesVertical.append("line").attr("y1", "0").attr("y2", "32").attr("x1", i).attr("x2", i);
+				}
+
+				const circles = defs.append("pattern")
+					.attr("id", "circles")
+					.attr("patternUnits", "userSpaceOnUse")
+					.attr("width", "10")
+					.attr("height", "10")
+					.append("g")
+					.attr("id", "dots")
+					.attr("fill", "rgb(230, 0, 2)")
+
+				circles.append("circle")
+					.attr("cx", 3)
+					.attr("cy", 3)
+					.attr("r", 3);
+
+				circles.append("circle")
+					.attr("cx", 13)
+					.attr("cy", 13)
+					.attr("r", 3);
+			}
+		};
+	});
+
+	describe("pattern definitions", () => {
+
+		it("should define the first pattern", () => {
+			const pattern = chart.internal.svg.select("#lines-horizontal");
+			expect(pattern.size()).to.equal(1);
+		});
+
+		it("should define the second pattern", () => {
+			const pattern = chart.internal.svg.select("#lines-vertical");
+			expect(pattern.size()).to.equal(1);
+		});
+
+		it("should define the third pattern", () => {
+			const pattern = chart.internal.svg.select("#circles");
+			expect(pattern.size()).to.equal(1);
+		});
+
+		it("should define all patterns", () => {
+			const patterns = chart.internal.svg.selectAll("pattern");
+			expect(patterns.size()).to.equal(3);
+		});
+	});
+
+	describe("pattern classes", () => {
+		it("should apply the first pattern correctly", () => {
+			const path = chart.internal.main.selectAll("path.bb-arc.bb-arc-data1");
+			expect(path.style("fill")).to.equal("url(\"#lines-horizontal\")");
+		});
+
+		it("should apply the second pattern correctly", () => {
+			const path = chart.internal.main.selectAll("path.bb-arc.bb-arc-data2");
+			expect(path.style("fill")).to.equal("url(\"#lines-vertical\")");
+		});
+
+		it("should apply the second pattern correctly", () => {
+			const path = chart.internal.main.selectAll("path.bb-arc.bb-arc-data3");
+			expect(path.style("fill")).to.equal("url(\"#circles\")");
+		});
+	});
+
+});

src/config/Options.js

@@ -942,6 +942,29 @@ export default class Options {
 			 */
 			data_empty_label_text: "",
 
+			/**
+			 * Sets the name of the patterns to be used.
+			 * @name data:pattern
+			 * @memberof Options
+			 * @type {String|Array|Object}
+			 * @default undefined
+			 * @example
+			 * data: {
+			 *   pattern: "#my-pattern"
+			 *   // or as an array
+			 *   pattern: [
+			 *     "#pattern1",
+			 *     "#pattern2"
+			 *   ]
+			 *   // or as an object
+			 *   pattern: {
+			 *     data1: "#pattern1",
+			 *     data2: "#pattern2"
+			 *   }
+			 * }
+			 */
+			data_pattern: undefined,
+
 			/**
 			 * Set subchart options
 			 * @name subchart
@@ -2034,6 +2057,32 @@ export default class Options {
 			grid_focus_show: true,
 			grid_lines_front: true,
 
+
+			/**
+			 * Function to defined custom background patterns
+			 * @name pattern
+			 * @memberof Options
+			 * @type {Function}
+			 * @example
+			 *   pattern: function(defs) {
+			 *     // Define a "circle pattern"
+			 *     var g  = defs.append("pattern")
+			 *              .attr("id", "circle-pattern")
+			 *              .attr("patternUnits", "userSpaceOnUse")
+			 *              .attr("width", "10")
+			 *              .attr("height", "10");
+			 *     g.append("circle")
+			 *      .attr("cx", 3)
+			 *      .attr("cy", 3)
+			 *      .attr("r", 3);
+			 *     g.append("circle")
+			 *      .attr("cx", 13)
+			 *      .attr("cy", 13)
+			 *      .attr("r", 3);
+			 *   }
+			 */
+			pattern: undefined,
+
 			/**
 			 * Set point options
 			 * @name point

src/internals/ChartInternal.js

@@ -261,6 +261,11 @@ export default class ChartInternal {
 		$$.clipGrid = $$.appendClip(defs, $$.clipIdForGrid);
 		$$.clipSubchart = $$.appendClip(defs, $$.clipIdForSubchart);
 
+		// Call patterns function if it's defined
+		if (isFunction(config.pattern)) {
+			config.pattern(defs);
+		}
+
 		$$.updateSvgSize();
 
 		// Set initialized scales to brush and zoom

src/internals/color.js

@@ -7,7 +7,7 @@ import {
 	schemeCategory10 as d3SchemeCategory10
 } from "d3";
 import ChartInternal from "./ChartInternal";
-import {notEmpty, extend} from "./util";
+import {notEmpty, extend, isArray, isObject} from "./util";
 
 extend(ChartInternal.prototype, {
 	generateColor() {
@@ -17,7 +17,10 @@ extend(ChartInternal.prototype, {
 		const callback = config.data_color;
 		const ids = [];
 		const pattern = notEmpty(config.color_pattern) ?
-			config.color_pattern : d3ScaleOrdinal(d3SchemeCategory10).range();
+			config.color_pattern : notEmpty(config.data_pattern) ?
+				config.data_pattern : d3ScaleOrdinal(d3SchemeCategory10).range();
+
+		const svgPatterns = notEmpty(config.data_pattern) ? config.data_pattern : null;
 
 		return function(d) {
 			const id = d.id || (d.data && d.data.id) || d;
@@ -31,6 +34,14 @@ extend(ChartInternal.prototype, {
 			} else if (colors[id]) {
 				color = colors[id];
 
+			// if data.pattern is specified
+			} else if (svgPatterns) {
+				if (ids.indexOf(id) < 0) { ids.push(id); }
+
+				const colorValue = isArray(svgPatterns) ? svgPatterns[ids.indexOf(id) % pattern.length] :
+					isObject(svgPatterns) ? svgPatterns[id] : svgPatterns;
+
+				color = `url(${colorValue})`;
 			// if not specified, choose from pattern
 			} else {
 				if (ids.indexOf(id) < 0) { ids.push(id); }