feat(axis): Intent to ship axis clipPath option (#459)

Implement clipPath option for x and y axis

Fix #458
Close #459

demo/demo.js

@@ -795,6 +795,43 @@ var demos = {
 				}
 			}
 		},
+		XAxisTickPosition: {
+			options: {
+				data: {
+					x: "x",
+					columns: [
+						["x", "Jhon", "Aron", "David", "Chris", "Tyler", "Mike"],
+						["data1", 130, 200, 320, 400, 530, 750],
+						["data2", 130, 10, 130, 200, 150, 250],
+						["data3", 130, 50, 10, 200, 250, 150]
+					],
+					type: "bar",
+					groups: [["data1", "data2", "data3"]]
+				},
+				axis: {
+					rotated: true,
+					x: {
+						type: "category",
+						clipPath: false,
+						inner: false,
+						tick: {
+							text: {
+								position: {
+									x: 35,
+									y: -23
+								}
+							}
+						}
+					},
+					y: {
+						show: false
+					}
+				}
+			},
+			style: [
+				"#XAxisTickPosition .bb-axis-x line, .bb-axis-x path { visibility: hidden; }"
+			]
+		},
 		XAxisTimezone: {
 			options: {
 				data: {

demo/simple-sidebar.css

@@ -216,4 +216,7 @@ div.row {
 #StyleForLines .line-class-data2 { stroke-dasharray: 2 4; stroke-width: 2px; }
 
 /* Style For Radars */
-#RadarAxis .bb-levels polygon { stroke-dasharray: 1 3; stroke-width: 1px; }
+#RadarAxis .bb-levels polygon { stroke-dasharray: 1 3; stroke-width: 1px; }
+
+/* Style For tick position */
+#XAxisTickPosition .bb-axis-x line, .bb-axis-x path { visibility: hidden; }

spec/internals/axis-spec.js

@@ -1140,4 +1140,17 @@ describe("AXIS", function() {
 			});
 		});
 	});
+
+	describe("axis clipPath", () => {
+		it("set options axis.x.clipPath=false / axis.y.clipPath=false", () => {
+			args.axis.y.clipPath = args.axis.x.clipPath = false;
+		});
+
+		it("shouldn't be set 'clipPath' attribute", () => {
+			chart.internal.main
+				.selectAll(`.${CLASS.axisX},.${CLASS.axisY}`).each(function() {
+					expect(this.getAttribute("clip-path")).to.be.null;
+				});
+		});
+	});
 });

spec/internals/core-spec.js

@@ -4,6 +4,7 @@
  */
 /* eslint-disable */
 import util from "../assets/util";
+import CLASS from "../../src/config/classes";
 
 describe("CORE", function() {
 	let chart;
@@ -172,7 +173,7 @@ describe("CORE", function() {
 		});
 
 		it("should generate a chart", () => {
-			const ticks = chart.internal.main.select(".bb-axis-x")
+			const ticks = chart.internal.main.select(`.${CLASS.axisX}`)
 				.selectAll("g.tick");
 
 			expect(ticks.size()).to.be.equal(0);
@@ -194,11 +195,12 @@ describe("CORE", function() {
 					}
 				}
 			};
+
 			expect(true).to.be.ok;
 		});
 
 		it("should generate a chart", () => {
-			const ticks = chart.internal.main.select(".bb-axis-x")
+			const ticks = chart.internal.main.select(`.${CLASS.axisX}`)
 				.selectAll("g.tick");
 
 			expect(ticks.size()).to.be.equal(0);
@@ -219,33 +221,33 @@ describe("CORE", function() {
 		});
 
 		it("chart should have clip-path property", () => {
-			const main = chart.internal.main.select(".bb-chart");
+			const main = chart.internal.main.select(`.${CLASS.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;
+			const next = chart.internal.main.select(`.${CLASS.axisY2}`).node().nextSibling;
 
 			// axis element should be the last positioned
 			expect(next).to.be.null;
 		});
 
-		it("set option clipPath=true", () => {
+		it("set option clipPath=false", () => {
 			args.clipPath = false;
 		});
 
 		it("clip-path property should be null", () => {
-			const main = chart.internal.main.select(".bb-chart");
+			const main = chart.internal.main.select(`.${CLASS.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;
+			const previous = chart.internal.main.select(`.${CLASS.chart}`).node().previousSibling;
 
 			// chart element should positioned after axis element
-			expect(d3.select(previous).classed("bb-axis-y2")).to.be.true;
+			expect(d3.select(previous).classed(CLASS.axisY2)).to.be.true;
 		});
 	});
 });

src/config/Options.js

@@ -44,7 +44,7 @@ export default class Options {
 			bindto: "#chart",
 
 			/**
-			 * Set clip-path property of chart element
+			 * Set 'clip-path' attribute for 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.
@@ -53,6 +53,7 @@ export default class Options {
 			 * @type {Boolean}
 			 * @default true
 			 * @example
+			 * // don't set 'clip-path' attribute
 			 * clipPath: false
 			 */
 			clipPath: true,
@@ -1181,6 +1182,18 @@ export default class Options {
 			 */
 			axis_rotated: false,
 
+			/**
+			 * Set clip-path attribute for x axis element
+			 * @name axis․x․clipPath
+			 * @memberOf Options
+			 * @type {Boolean}
+			 * @default true
+			 * @example
+			 * // don't set 'clip-path' attribute
+			 * clipPath: false
+			 */
+			axis_x_clipPath: true,
+
 			/**
 			 * Show or hide x axis.
 			 * @name axis․x․show
@@ -1642,6 +1655,18 @@ export default class Options {
 			 */
 			axis_x_label: {},
 
+			/**
+			 * Set clip-path attribute for y axis element
+			 * @name axis․y․clipPath
+			 * @memberOf Options
+			 * @type {Boolean}
+			 * @default true
+			 * @example
+			 * // don't set 'clip-path' attribute
+			 * clipPath: false
+			 */
+			axis_y_clipPath: true,
+
 			/**
 			 * Show or hide y axis.
 			 * @name axis․y․show

src/internals/ChartInternal.js

@@ -95,6 +95,8 @@ export default class ChartInternal {
 		$$.clipIdForYAxis = `${$$.clipId}-yaxis`;
 		$$.clipIdForGrid = `${$$.clipId}-grid`;
 		$$.clipIdForSubchart = `${$$.clipId}-subchart`;
+
+		// Define 'clip-path' attribute values
 		$$.clipPath = $$.getClipPath($$.clipId);
 		$$.clipPathForXAxis = $$.getClipPath($$.clipIdForXAxis);
 		$$.clipPathForYAxis = $$.getClipPath($$.clipIdForYAxis);
@@ -318,9 +320,8 @@ export default class ChartInternal {
 		!config.clipPath && $$.axis.init();
 
 		// Define g for chart area
-		const g = main.append("g").attr("class", CLASS.chart);
-
-		config.clipPath && g.attr("clip-path", $$.clipPath);
+		main.append("g").attr("class", CLASS.chart)
+			.attr("clip-path", $$.clipPath);
 
 		// Grid lines
 		config.grid_lines_front && $$.initGridLines();

src/internals/clip.js

@@ -7,6 +7,15 @@ import {extend} from "./util";
 
 extend(ChartInternal.prototype, {
 	getClipPath(id) {
+		const $$ = this;
+		const config = $$.config;
+
+		if ((!config.clipPath && /-clip$/.test(id)) ||
+			(!config.axis_x_clipPath && /-clip-xaxis$/.test(id)) ||
+			(!config.axis_y_clipPath && /-clip-yaxis$/.test(id))) {
+			return null;
+		}
+
 		const isIE9 = window.navigator.appVersion
 			.toLowerCase().indexOf("msie 9.") >= 0;