feat(options): Intent to ship background

Implementation of background option.

Fix #1131

demo/demo.js

@@ -3072,6 +3072,41 @@ d3.select(".chart_area")
 		}
 	},
 	ChartOptions: {
+		Background: [
+			{
+				options: {
+					data: {
+						columns: [
+							["data1", 430, 200, 100, 400, 350, 250, 400],
+							["data2", 830, 1200, 1100, 1400, 1150, 1250, 1500]
+						],
+					},
+					background: {
+						class: "myBgClass",
+						imgUrl: "https://naver.github.io/billboard.js/img/logo/billboard.js.svg",
+					}
+				},
+				style: [
+					".myBgClass { transform: scale(0.9) translate(15px, -10px); opacity: 0.1; }"
+				]
+			},
+			{
+				options: {
+					data: {
+						columns: [
+							["data1", 30, 200, 100, 400, 150, 250],
+							["data2", 150, 120, 200, 330, 215, 325]
+						],
+						types: {
+							data1: "bar"
+						}
+					},
+					background: {
+						color: "lightcyan"
+					}
+				}
+			},
+		],
 		ChartSize: {
 			options: {
 				size: {

demo/simple-sidebar.css

@@ -367,3 +367,7 @@ div.row {
 
 /* Lazy Render */
 #lazyRender_1 { display: none; }
+
+/* Background */
+.myBgClass { transform: scale(0.9) translate(15px, -10px); opacity: 0.1; }
+

spec/internals/bb-spec.js

@@ -421,4 +421,43 @@ describe("Interface & initialization", () => {
 			}, 500);
 		});
 	});
+
+	describe("check for background", () => {
+		const args = {
+			data: {
+				columns: [
+					["data1", 300, 350, 300]
+				]
+			},
+			background: {
+				class: "myBgClass",
+				imgUrl: "https://naver.github.io/billboard.js/img/logo/billboard.js.svg"
+			}
+		};
+
+		it("check for image background", () => {
+			chart = util.generate(args);
+
+			const element = chart.$.main.select(".myBgClass");
+
+			expect(element.empty()).to.be.false;
+			expect(element.attr("href")).to.be.equal(args.background.imgUrl);
+			expect(element.node().tagName).to.be.equal("image");
+		});
+
+		it("set option background.color=red", () => {
+			args.background.color = "red";
+			delete args.background.imgUrl;
+		});
+
+		it("check for rect background", () => {
+			chart = util.generate(args);
+
+			const element = chart.$.main.select(".myBgClass");
+
+			expect(element.empty()).to.be.false;
+			expect(element.style("fill")).to.be.equal(args.background.color);
+			expect(element.node().tagName).to.be.equal("rect");
+		});
+	});
 });

src/config/Options.js

@@ -39,6 +39,26 @@ export default class Options {
 			 */
 			bindto: "#chart",
 
+			/**
+			 * Set chart background.
+			 * @name background
+			 * @memberof Options
+			 * @property {String} background.class Specify the class name for background element.
+			 * @property {String} background.color Specify the fill color for background element.<br>**NOTE:** Will be ignored if `imgUrl` option is set.
+			 * @property {String} background.imgUrl Specify the image url string for background.
+			 * @see [Demo](https://naver.github.io/billboard.js/demo/#ChartOptions.Background)
+			 * @example
+			 * background: {
+			 *    class: "myClass",
+			 *    color: "red",
+			 *
+			 *    // Set image url for background.
+			 *    // If specified, 'color' option will be ignored.
+			 *    imgUrl: "https://naver.github.io/billboard.js/img/logo/billboard.js.svg",
+			 * }
+			 */
+			background: {},
+
 			/**
 			 * Set 'clip-path' attribute for chart element
 			 * - **NOTE:**
@@ -3478,8 +3498,12 @@ export default class Options {
 
 			/**
 			 * Show rectangles inside the chart.<br><br>
-			 * This option accepts array including object that has axis, start, end and class. The keys start, end and class are optional.
-			 * axis must be x, y or y2. start and end should be the value where regions start and end. If not specified, the edge values will be used. If timeseries x axis, date string, Date object and unixtime integer can be used. If class is set, the region element will have it as class.
+			 * This option accepts array including object that has axis, start, end and class.
+			 * The keys start, end and class are optional.
+			 * axis must be x, y or y2. start and end should be the value where regions start and end.
+			 * If not specified, the edge values will be used.
+			 * If timeseries x axis, date string, Date object and unixtime integer can be used.
+			 * If class is set, the region element will have it as class.
 			 * @name regions
 			 * @memberof Options
 			 * @type {Array}

src/internals/ChartInternal.js

@@ -346,6 +346,9 @@ export default class ChartInternal {
 		// oninit callback
 		callFn(config.oninit, $$, $$.api);
 
+		// Set background
+		$$.setBackground();
+
 		$$.redraw({
 			withTransition: false,
 			withTransform: true,
@@ -409,6 +412,35 @@ export default class ChartInternal {
 		};
 	}
 
+	/**
+	 * Set background element/image
+	 * @private
+	 */
+	setBackground() {
+		const $$ = this;
+		const bg = $$.config.background;
+
+		if (notEmpty(bg)) {
+			const eventRect = $$.svg.select(`.${CLASS.eventRects}`);
+			let element;
+
+			if (bg.imgUrl) {
+				element = eventRect
+					.insert("image")
+					.attr("href", bg.imgUrl);
+			} else {
+				element = eventRect
+					.insert("rect")
+					.style("fill", bg.color || null);
+			}
+
+			element && element
+				.attr("class", bg.class || null)
+				.attr("width", "100%")
+				.attr("height", "100%");
+		}
+	}
+
 	smoothLines(el, type) {
 		if (type === "grid") {
 			el.each(function() {

types/options.d.ts

@@ -26,6 +26,26 @@ export interface ChartOptions {
 		classname?: string;
 	};
 
+	/**
+	 * Set chart background.
+	 */
+	background?: {
+		/**
+		 * Specify the class name for background element.
+		 */
+		class?: string;
+
+		/**
+		 * Specify the fill color for background element. (NOTE: Will be ignored if `imgUrl` option is set.)
+		 */
+		color?: string;
+
+		/**
+		 * Specify the image url string for background.
+		 */
+		imgUrl?: string;
+	};
+
 	size?: {
 		/**
 		 * The desired width of the chart element.