feat(ChartInternal,Options): Add new clipPath option

To give an alternative option of chart elements rendering

Fix #56
Close #95

spec/core-spec.js

@@ -139,7 +139,7 @@ describe("CORE", function() {
 			expect(ticks.size()).to.be.equal(0);
 		});
 
-		it("should upaate args for empty data", () => {
+		it("should update args for empty data", () => {
 			args = {
 				data: {
 					x: "x",
@@ -165,4 +165,48 @@ describe("CORE", function() {
 			expect(ticks.size()).to.be.equal(0);
 		});
 	});
+
+	describe("options", () => {
+		before(() => {
+			args = {
+				data: {
+					columns: [
+						["data1", 30, 200, 100, 50, 120, 175],
+						["data2", 130, 100, 0, 170, 75, 140]
+					]
+				},
+				clipPath: true
+			};
+		});
+
+		it("chart should have clip-path property", () => {
+			const main = chart.internal.main.select(".bb-chart");
+
+			expect(main.attr("clip-path")).to.not.be.null;
+		});
+
+		it("check for chart node's position", () => {
+			const next = chart.internal.main.select(".bb-axis-y2").node().nextSibling;
+
+			// axis element should be the last positioned
+			expect(next).to.be.null;
+		});
+
+		it("set option clipPath=true", () => {
+			args.clipPath = false;
+		});
+
+		it("clip-path property should be null", () => {
+			const main = chart.internal.main.select(".bb-chart");
+
+			expect(main.attr("clip-path")).to.be.null;
+		});
+
+		it("check for chart node's position", () => {
+			const previous = chart.internal.main.select(".bb-chart").node().previousSibling;
+
+			// chart element should positioned after axis element
+			expect(d3.select(previous).classed("bb-axis-y2")).to.be.true;
+		});
+	});
 });

src/config/Options.js

@@ -33,6 +33,20 @@ export default class Options {
 			 */
 			bindto: "#chart",
 
+			/**
+			 * Set clip-path property of chart element
+			 * - **NOTE:**
+			 *  > When is false, chart node element is positioned after the axis node in DOM tree hierarchy.
+			 *  > Is to make chart element positioned over axis element.
+			 * @name clipPath
+			 * @memberof Options
+			 * @type {Boolean}
+			 * @default true
+			 * @example
+			 * clipPath: false
+			 */
+			clipPath: true,
+
 			/**
 			 * Set svg element's class name
 			 * @name svg

src/internals/ChartInternal.js

@@ -283,10 +283,13 @@ export default class ChartInternal {
 		// Grids
 		$$.initGrid();
 
+		// Add Axis here, when clipPath is 'false'
+		!config.clipPath && $$.axis.init();
+
 		// Define g for chart area
-		main.append("g")
-			.attr("clip-path", $$.clipPath)
-			.attr("class", CLASS.chart);
+		const g = main.append("g").attr("class", CLASS.chart);
+
+		config.clipPath && g.attr("clip-path", $$.clipPath);
 
 		// Grid lines
 		config.grid_lines_front && $$.initGridLines();
@@ -310,8 +313,8 @@ export default class ChartInternal {
 		config.axis_x_extent &&
 			$$.brush.scale($$.getDefaultExtent());
 
-		// Add Axis
-		$$.axis.init();
+		// Add Axis here, when clipPath is 'true'
+		config.clipPath && $$.axis.init();
 
 		// Set targets
 		$$.updateTargets($$.data.targets);