diff --git a/demo/demo.js b/demo/demo.js index 2fedff6be..f4172389d 100644 --- a/demo/demo.js +++ b/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: { diff --git a/demo/simple-sidebar.css b/demo/simple-sidebar.css index e7f4dacf2..b388cc2e5 100644 --- a/demo/simple-sidebar.css +++ b/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; } \ No newline at end of file +#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; } \ No newline at end of file diff --git a/spec/internals/axis-spec.js b/spec/internals/axis-spec.js index 4616016aa..546f2ca98 100644 --- a/spec/internals/axis-spec.js +++ b/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; + }); + }); + }); }); diff --git a/spec/internals/core-spec.js b/spec/internals/core-spec.js index 3908bb71e..39edb5c51 100644 --- a/spec/internals/core-spec.js +++ b/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; }); }); }); diff --git a/src/config/Options.js b/src/config/Options.js index e2b3b1852..94317582c 100644 --- a/src/config/Options.js +++ b/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 diff --git a/src/internals/ChartInternal.js b/src/internals/ChartInternal.js index 5d7e531a3..2dea69f66 100644 --- a/src/internals/ChartInternal.js +++ b/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(); diff --git a/src/internals/clip.js b/src/internals/clip.js index d414370cc..e0e76b626 100644 --- a/src/internals/clip.js +++ b/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;