feat(Options): Add custom classname for bind element (#212)

Allow to change the class name for the bind element,
which was fixed for 'bb'.

Fix #201
Close #212

spec/bb-spec.js

@@ -22,6 +22,7 @@ describe("Interface & initialization", () => {
 		});
 
 		expect(chart).not.to.be.null;
+		expect(d3.select(chart.element).classed("bb")).to.be.true;
 		expect(chart.internal.svg.node().tagName).to.be.equal("svg");
 	});
 
@@ -53,4 +54,22 @@ describe("Interface & initialization", () => {
 			done();
 		}, 100);
 	});
+
+	it("instantiate with different classname on wrapper element", () => {
+		const bindtoClassName = "billboard-js";
+		const chart = bb.generate({
+			bindto: {
+				element: "#chart",
+				classname: bindtoClassName
+			},
+			data: {
+				columns: [
+					["data1", 30, 200, 100, 400],
+					["data2", 500, 800, 500, 2000]
+				]
+			}
+		});
+
+		expect(d3.select(chart.element).classed(bindtoClassName)).to.be.true;
+	});
 });

src/config/Options.js

@@ -12,24 +12,34 @@ export default class Options {
 	constructor() {
 		this.value = {
 			/**
-			 * bindto The CSS selector or the element which the chart will be set to. D3 selection object can be specified. If other chart is set already, it will be replaced with the new one (only one chart can be set in one element).<br><br>
+			 * Specify the CSS selector or the element which the chart will be set to. D3 selection object can be specified also.
+			 * If other chart is set already, it will be replaced with the new one (only one chart can be set in one element).<br><br>
 			 * If this option is not specified, the chart will be generated but not be set. Instead, we can access the element by chart.element and set it by ourselves.<br>
 			 * - **NOTE:**
-			 *  > When chart is not binded, bb starts observing if chart.element is binded by MutationObserver.
-			 *  > In this case, polyfill is required in IE9 and IE10 becuase they do not support MutationObserver.
-			 *  > On the other hand, if chart always will be binded, polyfill will not be required because MutationObserver will never be called.
+			 *  > When chart is not bound, it'll start observing if `chart.element` is bound by MutationObserver.<br>
+			 *  > In this case, polyfill is required in IE9 and IE10 because they do not support MutationObserver.<br>
+			 *  > On the other hand, if chart always will be bound, polyfill will not be required because MutationObserver will never be called.
 			 * @name bindto
 			 * @memberOf Options
-			 * @type {String|HTMLElement|d3.selection}
+			 * @property {String|HTMLElement|d3.selection} bindto=#chart Specify the element where chart will be drawn.
+			 * @property {String|HTMLElement|d3.selection} bindto.element=#chart Specify the element where chart will be drawn.
+			 * @property {String} [bindto.classname=bb] Specify the class name of bind element.<br>
+			 *     **NOTE:** When class name isn't `bb`, then you also need to update the default CSS to be rendered correctly.
 			 * @default #chart
 			 * @example
 			 * bindto: "#myContainer"
 			 *
-			 * // or element
+			 * // or HTMLElement
 			 * bindto: document.getElementById("myContainer")
 			 *
 			 * // or D3 selection object
 			 * bindto: d3.select("#myContainer")
+			 *
+			 * // or to change default classname
+			 * bindto: {
+			 *  element: "#chart",
+			 *  classname: "bill-board"  // ex) <div id='chart' class='bill-board'>
+			 * }
 			 */
 			bindto: "#chart",
 

src/internals/ChartInternal.js

@@ -14,7 +14,7 @@ import {
 } from "d3";
 import Axis from "../axis/Axis";
 import CLASS from "../config/classes";
-import {addEvent, notEmpty, asHalfPixel, isValue, getOption, isFunction, isDefined, isUndefined, isString, isNumber} from "./util";
+import {addEvent, notEmpty, asHalfPixel, isValue, getOption, isFunction, isDefined, isUndefined, isString, isNumber, isObject} from "./util";
 
 /**
  * Internal chart class.
@@ -175,17 +175,27 @@ export default class ChartInternal {
 		$$.initBrush && $$.initBrush();
 		$$.initZoom && $$.initZoom();
 
+		const bindto = {
+			element: config.bindto,
+			classname: "bb"
+		};
+
+		if (isObject(config.bindto)) {
+			bindto.element = config.bindto.element || "#chart";
+			bindto.classname = config.bindto.classname || bindto.classname;
+		}
+
 		// select bind element
-		$$.selectChart = isFunction(config.bindto.node) ?
-			config.bindto : d3Select(!config.bindto ? [] : config.bindto);
+		$$.selectChart = isFunction(bindto.element.node) ?
+			config.bindto.element : d3Select(!bindto.element ? [] : bindto.element);
 
 		if ($$.selectChart.empty()) {
 			$$.selectChart = d3Select(document.createElement("div")).style("opacity", "0");
 			$$.observeInserted($$.selectChart);
 			binding = false;
 		}
 
-		$$.selectChart.html("").classed("bb", true);
+		$$.selectChart.html("").classed(bindto.classname, true);
 
 		// Init data as targets
 		$$.data.xs = {};