feat(axis): alow user to hide tick lines while using culling

Implement tick.culling.lines option, where make to control the visibility of tick lines within culling option Fix #2478 Close #2480
naver · Jan 3, 2022 · aad8c45 · aad8c45
1 parent 65da5a8
commit aad8c45
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 22 deletions.
diff --git a/AUTHORS.txt b/AUTHORS.txt
@@ -50,3 +50,4 @@ Adrian Schmutzler <dev@schmutzler.it>
 Aziz Gazanchiyan <ZIZ@KMDPoland.pl>
 Eben Collins <collinseben@gmail.com>
 Shim Heungwoon <ajaxlab7@gmail.com>
+Marcos Gomez Castillo <marcos.gomez.castillo@tecsisa.com>
diff --git a/src/ChartInternal/Axis/Axis.ts b/src/ChartInternal/Axis/Axis.ts
@@ -945,13 +945,16 @@ class Axis {
 
 			// subchart x axis should be aligned with x axis culling
 			const id = type === "subX" ? "x" : type;
-			const toCull = config[`axis_${id}_tick_culling`];
+
+			const cullingOptionPrefix = `axis_${id}_tick_culling`;
+			const toCull = config[cullingOptionPrefix];
 
 			if (axis && toCull) {
-				const tickText = axis.selectAll(".tick text");
-				const tickValues = sortValue(tickText.data());
+				const tickNodes = axis.selectAll(".tick");
+				const tickValues = sortValue(tickNodes.data());
 				const tickSize = tickValues.length;
-				const cullingMax = config[`axis_${id}_tick_culling_max`];
+				const cullingMax = config[`${cullingOptionPrefix}_max`];
+				const lines = config[`${cullingOptionPrefix}_lines`];
 				let intervalForCulling;
 
 				if (tickSize) {
@@ -962,11 +965,14 @@ class Axis {
 						}
 					}
 
-					tickText.each(function(d) {
-						this.style.display = tickValues.indexOf(d) % intervalForCulling ? "none" : null;
+					tickNodes.each(function(d) {
+						if (tickValues.indexOf(d) % intervalForCulling) {
+							(lines ? this.querySelector("text") : this)
+								.style.display = "none";
+						}
 					});
 				} else {
-					tickText.style("display", null);
+					tickNodes.style("display", null);
 				}
 
 				// set/unset x_axis_tick_clippath

diff --git a/src/config/Options/axis/x.ts b/src/config/Options/axis/x.ts
@@ -143,15 +143,16 @@ export default {
 	axis_x_tick_format: <Function|string|undefined> undefined,
 
 	/**
-	 * Setting for culling ticks.<br><br>
-	 * If true is set, the ticks will be culled, then only limitted tick text will be shown. This option does not hide the tick lines. If false is set, all of ticks will be shown.<br><br>
-	 * We can change the number of ticks to be shown by axis.x.tick.culling.max.
+	 * Setting for culling ticks.
+	 * - `true`: the ticks will be culled, then only limited tick text will be shown.<br>
+	 *   This option does not hide the tick lines by default, if want to hide tick lines, set `axis.x.tick.culling.lines=false`.
+	 * - `false`: all of ticks will be shown.<br><br>
+	 * The number of ticks to be shown can be chaned by `axis.x.tick.culling.max`.
 	 * @name axis․x․tick․culling
 	 * @memberof Options
 	 * @type {boolean}
 	 * @default
-	 * - true for indexed axis and timeseries axis
-	 * - false for category axis
+	 * `true` for indexed axis and timeseries axis, `false` for category axis
 	 * @example
 	 * axis: {
 	 *   x: {
@@ -182,6 +183,25 @@ export default {
 	 */
 	axis_x_tick_culling_max: 10,
 
+	/**
+	 * Control visibility of tick lines within culling option, along with tick text.
+	 * @name axis․x․tick․culling․lines
+	 * @memberof Options
+	 * @type {boolean}
+	 * @default true
+	 * @example
+	 * axis: {
+	 *   x: {
+	 *     tick: {
+	 *       culling: {
+	 *           lines: false,
+	 *       }
+	 *     }
+	 *   }
+	 * }
+	 */
+	axis_x_tick_culling_lines: true,
+
 	/**
 	 * The number of x axis ticks to show.<br><br>
 	 * This option hides tick lines together with tick text. If this option is used on timeseries axis, the ticks position will be determined precisely and not nicely positioned (e.g. it will have rough second value).

diff --git a/src/config/Options/axis/y.ts b/src/config/Options/axis/y.ts
@@ -187,9 +187,11 @@ export default {
 	axis_y_tick_format: <Function|undefined> undefined,
 
 	/**
-	 * Setting for culling ticks.<br><br>
-	 * If true is set, the ticks will be culled, then only limitted tick text will be shown. This option does not hide the tick lines. If false is set, all of ticks will be shown.<br><br>
-	 * We can change the number of ticks to be shown by axis.y.tick.culling.max.
+	 * Setting for culling ticks.
+	 * - `true`: the ticks will be culled, then only limited tick text will be shown.<br>
+	 *   This option does not hide the tick lines by default, if want to hide tick lines, set `axis.y.tick.culling.lines=false`.
+	 * - `false`: all of ticks will be shown.<br><br>
+	 * The number of ticks to be shown can be chaned by `axis.y.tick.culling.max`.
 	 * @name axis․y․tick․culling
 	 * @memberof Options
 	 * @type {boolean}
@@ -224,6 +226,25 @@ export default {
 	 */
 	axis_y_tick_culling_max: 5,
 
+	/**
+	 * Control visibility of tick lines within culling option, along with tick text.
+	 * @name axis․y․tick․culling․lines
+	 * @memberof Options
+	 * @type {boolean}
+	 * @default true
+	 * @example
+	 * axis: {
+	 *   y: {
+	 *     tick: {
+	 *       culling: {
+	 *           lines: false,
+	 *       }
+	 *     }
+	 *   }
+	 * }
+	 */
+	axis_y_tick_culling_lines: true,
+
 	/**
 	 * Show y axis outer tick.
 	 * @name axis․y․tick․outer

diff --git a/src/config/Options/axis/y2.ts b/src/config/Options/axis/y2.ts
@@ -173,9 +173,11 @@ export default {
 	axis_y2_tick_format: <Function|undefined> undefined,
 
 	/**
-	 * Setting for culling ticks.<br><br>
-	 * If true is set, the ticks will be culled, then only limitted tick text will be shown. This option does not hide the tick lines. If false is set, all of ticks will be shown.<br><br>
-	 * We can change the number of ticks to be shown by axis.y.tick.culling.max.
+	 * Setting for culling ticks.
+	 * - `true`: the ticks will be culled, then only limited tick text will be shown.<br>
+	 *   This option does not hide the tick lines by default, if want to hide tick lines, set `axis.y2.tick.culling.lines=false`.
+	 * - `false`: all of ticks will be shown.<br><br>
+	 * The number of ticks to be shown can be chaned by `axis.y2.tick.culling.max`.
 	 * @name axis․y2․tick․culling
 	 * @memberof Options
 	 * @type {boolean}
@@ -210,6 +212,25 @@ export default {
 	 */
 	axis_y2_tick_culling_max: 5,
 
+	/**
+	 * Control visibility of tick lines within culling option, along with tick text.
+	 * @name axis․y2․tick․culling․lines
+	 * @memberof Options
+	 * @type {boolean}
+	 * @default true
+	 * @example
+	 * axis: {
+	 *   y2: {
+	 *     tick: {
+	 *       culling: {
+	 *           lines: false,
+	 *       }
+	 *     }
+	 *   }
+	 * }
+	 */
+	axis_y2_tick_culling_lines: true,
+
 	/**
 	 * Show or hide y2 axis outer tick.
 	 * @name axis․y2․tick․outer

diff --git a/test/internals/axis-spec.ts b/test/internals/axis-spec.ts
@@ -2477,6 +2477,26 @@ describe("AXIS", function() {
 		it("check tick values are culled when axis is rotated", () => {
 			checkTickValues();
 		});
+
+		it("set options: set axes tick culling lines to 'false'", () => {
+			args.axis.x.tick.culling.lines = false;
+			args.axis.y.tick.culling.lines = false;
+			args.axis.y2.tick.culling = {
+				max: 3,
+				lines: false
+			};
+
+			args.subchart.show = false;
+		});
+
+		it("check that tick lines are hidden", () => {
+			const {$el: {axis}} = chart.internal;
+			const selector = ".tick:not([style='display: none;'])";
+
+			["x", "y", "y2"].forEach(v => {
+				expect(axis[v].selectAll(selector).size()).to.be.equal(args.axis[v].tick.culling.max);
+			});
+		});
 	});
 
 	describe("Axes tick padding", () => {

diff --git a/types/axis.d.ts b/types/axis.d.ts
@@ -197,14 +197,21 @@ export interface XTickConfiguration {
 
 	/**
 	 * Setting for culling ticks.
-	 * If true is set, the ticks will be culled, then only limitted tick text will be shown.
-	 * This option does not hide the tick lines. If false is set, all of ticks will be shown.
+	 * - `true`: the ticks will be culled, then only limited tick text will be shown.
+	 *   This option does not hide the tick lines by default, if want to hide tick lines, set `axis.x.tick.culling.lines=false`.
+	 * - `false`: all of ticks will be shown.
+	 * The number of ticks to be shown can be chaned by `axis.x.tick.culling.max`.
 	 */
 	culling?: boolean | {
 		/**
 		 * The number of tick texts will be adjusted to less than this value.
 		 */
 		max?: number;
+
+		/**
+		 * Control visibility of tick lines within culling option, along with tick text.
+		 */
+		lines?: boolean;
 	};
 
 	/**
@@ -334,14 +341,21 @@ export interface YTickConfiguration {
 
 	/**
 	 * Setting for culling ticks.
-	 * If true is set, the ticks will be culled, then only limitted tick text will be shown.
-	 * This option does not hide the tick lines. If false is set, all of ticks will be shown.
+	 * - `true`: the ticks will be culled, then only limited tick text will be shown.
+	 *   This option does not hide the tick lines by default, if want to hide tick lines, set `axis.[y|y2].tick.culling.lines=false`.
+	 * - `false`: all of ticks will be shown.
+	 * The number of ticks to be shown can be chaned by `axis.[y|y2].tick.culling.max`.
 	 */
 	culling?: boolean | {
 		/**
 		 * The number of tick texts will be adjusted to less than this value.
 		 */
 		max?: number;
+
+		/**
+		 * Control visibility of tick lines within culling option, along with tick text.
+		 */
+		lines?: boolean;
 	};
 
 	/**