feat(axis): Intent to ship y Axes stepSize

- Intent to ship axis[y|y2].tick.stepSize option
- Specify missing function types for axis[x|y|y2].tick.values

Fix #1098

demo/demo.js

@@ -990,6 +990,32 @@ var demos = {
 				}
 			}
 		},
+		StepSizeForYAxis: {
+			options: {
+				data: {
+					columns: [
+						["data1", 40, 30, 30, 40, 250],
+						["data2", 130, 100, 140, 200, 150]
+					],
+					axes: {
+						data2: "y2"
+					}
+				},
+				axis: {
+					y: {
+						tick: {
+							stepSize: 33
+						}
+					},
+					y2: {
+						show: true,
+						tick: {
+							stepSize: 20
+						}
+					}
+				}
+			}
+		},
 		RangeForYAxis: {
 			options: {
 				data: {

package.json

@@ -83,18 +83,18 @@
     "d3-zoom": "^1.8.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.3",
+    "@babel/core": "^7.8.4",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.8.3",
-    "@babel/preset-env": "^7.8.3",
-    "@babel/runtime": "^7.8.3",
+    "@babel/preset-env": "^7.8.4",
+    "@babel/runtime": "^7.8.4",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
     "@semantic-release/changelog": "^5.0.0",
-    "@semantic-release/commit-analyzer": "^8.0.0",
+    "@semantic-release/commit-analyzer": "^8.0.1",
     "@semantic-release/exec": "^5.0.0",
     "@semantic-release/git": "^9.0.0",
-    "@semantic-release/npm": "^7.0.0",
+    "@semantic-release/npm": "^7.0.2",
     "@semantic-release/release-notes-generator": "^9.0.0",
     "babel-eslint": "^10.0.3",
     "babel-helper-modules": "^6.0.0",
@@ -124,12 +124,12 @@
     "eslint": "^6.8.0",
     "eslint-config-naver": "^2.1.0",
     "eslint-loader": "^3.0.3",
-    "eslint-plugin-import": "^2.20.0",
+    "eslint-plugin-import": "^2.20.1",
     "exports-loader": "^0.7.0",
     "hammer-simulator": "0.0.1",
     "husky": "^4.2.1",
     "istanbul-instrumenter-loader": "^3.0.1",
-    "istanbul-lib-instrument": "^4.0.0",
+    "istanbul-lib-instrument": "^4.0.1",
     "jsdoc": "^3.6.3",
     "karma": "^4.4.1",
     "karma-chai": "^0.1.0",
@@ -148,18 +148,18 @@
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "regenerator-runtime": "^0.13.3",
     "sass-loader": "^8.0.2",
-    "semantic-release": "^17.0.0",
+    "semantic-release": "^17.0.2",
     "simulant": "^0.2.2",
     "sinon": "^8.1.1",
     "string-replace-webpack-plugin": "^0.1.3",
     "style-loader": "^1.1.3",
-    "terser-webpack-plugin": "^2.3.2",
+    "terser-webpack-plugin": "^2.3.4",
     "webpack": "^4.41.5",
     "webpack-bundle-analyzer": "^3.6.0",
     "webpack-clean": "^1.2.3",
     "webpack-cli": "^3.3.10",
     "webpack-common-shake": "^2.1.0",
-    "webpack-dev-server": "^3.10.1",
+    "webpack-dev-server": "^3.10.3",
     "webpack-merge": "^4.2.2",
     "webpackbar": "^4.0.0",
     "write-file-webpack-plugin": "^4.5.1"

spec/internals/axis-spec.js

@@ -185,6 +185,52 @@ describe("AXIS", function() {
 		});
 	});
 
+	describe("y/y2 Axes tick.stepSize", () => {
+		before(() => {
+			args = {
+				data: {
+					columns: [
+						["data1", 40, 30, 30, 40, 250],
+						["data2", 130, 100, 140, 200, 150],
+					],
+					axes: {
+						data2: "y2"
+					}
+				},
+				axis: {
+					y: {
+						tick: {
+							stepSize: 33
+						}
+					},
+					y2: {
+						show: true,
+						tick: {
+							stepSize: 20
+						}
+					}
+				}
+			}
+		});
+
+		it("check if y/y2 ticks intervals are generated correctly", () => {
+			let startTick;
+
+			const check = (id, stepSize) => {
+				chart.$.main.selectAll(`.bb-axis-${id} .tick tspan`).each(function(d, i) {
+					if (i === 0) {
+						startTick = +this.textContent;
+					}
+
+					expect(+this.textContent).to.be.equal(i ? startTick + (stepSize * i) : startTick);
+				});
+			}
+
+			check("y", args.axis.y.tick.stepSize);
+			check("y2", args.axis.y2.tick.stepSize);
+		});
+	});
+
 	describe("axis label", () => {
 		before(() => {
 			args = {

src/axis/Axis.js

@@ -196,6 +196,10 @@ export default class Axis {
 			orgXScale: $$.x
 		});
 
+		if (!isX) {
+			axisParams.tickStepSize = config[`axis_${type}_tick_stepSize`];
+		}
+
 		const axis = new AxisRenderer(axisParams)
 			.scale((isX && $$.zoomScale) || scale)
 			.orient(orient);

src/axis/AxisRenderer.js

@@ -28,9 +28,9 @@ export default class AxisRenderer {
 
 		config.tickLength = Math.max(config.innerTickSize, 0) + config.tickPadding;
 
-		this.helper = new Helper(config, params);
 		this.config = config;
 		this.params = params;
+		this.helper = new Helper(this);
 	}
 
 	/**
@@ -106,7 +106,7 @@ export default class AxisRenderer {
 
 			if (tickShow.tick || tickShow.text) {
 				// count of tick data in array
-				const ticks = config.tickValues || helperInst.generateTicks(scale1);
+				const ticks = config.tickValues || helperInst.generateTicks(scale1, isLeftRight);
 
 				// update selection
 				let tick = g.selectAll(".tick")

src/axis/AxisRendererHelper.js

@@ -7,9 +7,11 @@ import {scaleLinear as d3ScaleLinear} from "d3-scale";
 import {isDefined, isNumber, isString} from "../internals/util";
 
 export default class AxisRendererHelper {
-	constructor(config, params) {
+	constructor(owner) {
 		const scale = d3ScaleLinear();
+		const {config, params} = owner;
 
+		this.owner = owner;
 		this.config = config;
 		this.scale = scale;
 
@@ -71,28 +73,38 @@ export default class AxisRendererHelper {
 		return start < stop ? [start, stop] : [stop, start];
 	}
 
-	generateTicks(scale) {
-		const ticks = [];
-
-		if (scale.ticks) {
-			return scale.ticks(
+	generateTicks(scale, isYAxes) {
+		const {tickStepSize} = this.owner.params;
+		let ticks = [];
+
+		// When 'axis[y|y2].tick.stepSize' option is set
+		if (isYAxes && tickStepSize) {
+			const [start, end] = scale.domain();
+			let interval = start;
+
+			while (interval <= end) {
+				ticks.push(interval);
+				interval += tickStepSize;
+			}
+		} else if (scale.ticks) {
+			ticks = scale.ticks(
 				...(this.config.tickArguments || [])
 			).map(v => (
 				// round the tick value if is number
 				(isString(v) && isNumber(v) && !isNaN(v) &&
 					Math.round(v * 10) / 10
 				) || v
 			));
-		}
+		} else {
+			const domain = scale.domain();
 
-		const domain = scale.domain();
-
-		for (let i = Math.ceil(domain[0]); i < domain[1]; i++) {
-			ticks.push(i);
-		}
+			for (let i = Math.ceil(domain[0]); i < domain[1]; i++) {
+				ticks.push(i);
+			}
 
-		if (ticks.length > 0 && ticks[0] > 0) {
-			ticks.unshift(ticks[0] - (ticks[1] - ticks[0]));
+			if (ticks.length > 0 && ticks[0] > 0) {
+				ticks.unshift(ticks[0] - (ticks[1] - ticks[0]));
+			}
 		}
 
 		return ticks;

src/config/Options.js

@@ -1755,16 +1755,22 @@ export default class Options {
 
 			/**
 			 * Set the x values of ticks manually.<br><br>
-			 * If this option is provided, the position of the ticks will be determined based on those values. This option works with timeseries data and the x values will be parsed accoding to the type of the value and data.xFormat option.
+			 * If this option is provided, the position of the ticks will be determined based on those values.<br>
+			 * This option works with `timeseries` data and the x values will be parsed accoding to the type of the value and data.xFormat option.
 			 * @name axis․x․tick․values
 			 * @memberof Options
-			 * @type {Array}
+			 * @type {Array|Function}
 			 * @default null
 			 * @example
 			 * axis: {
 			 *   x: {
 			 *     tick: {
-			 *       values: [1, 2, 4, 8, 16, 32, ...]
+			 *       values: [1, 2, 4, 8, 16, 32, ...],
+			 *
+			 *       // an Array value should be returned
+			 *       values: function() {
+			 *       	return [ ... ];
+			 *       }
 			 *     }
 			 *   }
 			 * }
@@ -2299,13 +2305,18 @@ export default class Options {
 			 * Set y axis tick values manually.
 			 * @name axis․y․tick․values
 			 * @memberof Options
-			 * @type {Array}
+			 * @type {Array|Function}
 			 * @default null
 			 * @example
 			 * axis: {
 			 *   y: {
 			 *     tick: {
-			 *       values: [100, 1000, 10000]
+			 *       values: [100, 1000, 10000],
+			 *
+			 *       // an Array value should be returned
+			 *       values: function() {
+			 *       	return [ ... ];
+			 *       }
 			 *     }
 			 *   }
 			 * }
@@ -2367,6 +2378,26 @@ export default class Options {
 			 */
 			axis_y_tick_show: true,
 
+			/**
+			 * Set axis tick step(interval) size.
+			 * - **NOTE:** Will be ignored if `axis.y.tick.count` or `axis.y.tick.values` options are set.
+			 * @name axis․y․tick․stepSize
+			 * @memberof Options
+			 * @type {Number}
+			 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.StepSizeForYAxis)
+			 * @example
+			 * axis: {
+			 *   y: {
+			 *     tick: {
+			 *       // tick value will step as indicated interval value.
+			 *       // ex) 'stepSize=15' ==> [0, 15, 30, 45, 60]
+			 *       stepSize: 15
+			 *     }
+			 *   }
+			 * }
+			 */
+			axis_y_tick_stepSize: null,
+
 			/**
 			* Show or hide y axis tick text.
 			* @name axis․y․tick․text․show
@@ -2711,13 +2742,18 @@ export default class Options {
 			 * Set y2 axis tick values manually.
 			 * @name axis․y2․tick․values
 			 * @memberof Options
-			 * @type {Array}
+			 * @type {Array|Function}
 			 * @default null
 			 * @example
 			 * axis: {
 			 *   y2: {
 			 *     tick: {
-			 *       values: [100, 1000, 10000]
+			 *       values: [100, 1000, 10000],
+			 *
+			 *       // an Array value should be returned
+			 *       values: function() {
+			 *       	return [ ... ];
+			 *       }
 			 *     }
 			 *   }
 			 * }
@@ -2779,6 +2815,26 @@ export default class Options {
 			 */
 			axis_y2_tick_show: true,
 
+			/**
+			 * Set axis tick step(interval) size.
+			 * - **NOTE:** Will be ignored if `axis.y2.tick.count` or `axis.y2.tick.values` options are set.
+			 * @name axis․y2․tick․stepSize
+			 * @memberof Options
+			 * @type {Number}
+			 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.StepSizeForYAxis)
+			 * @example
+			 * axis: {
+			 *   y2: {
+			 *     tick: {
+			 *       // tick value will step as indicated interval value.
+			 *       // ex) 'stepSize=15' ==> [0, 15, 30, 45, 60]
+			 *       stepSize: 15
+			 *     }
+			 *   }
+			 * }
+			 */
+			axis_y2_tick_stepSize: null,
+
 			/**
 			 * Show or hide y2 axis tick text.
 			 * @name axis․y2․tick․text․show

types/axis.d.ts

@@ -308,6 +308,12 @@ export interface YTickConfiguration {
 		max?: number;
 	};
 
+	/**
+	 * Set axis tick step(interval) size.
+	 * - **NOTE:** Will be ignored if `axis[y|y2].tick.count` or `axis[y|y2].tick.values` options are set.
+	 */
+	stepSize?: number;
+
 	text?: {
 		/**
 		 * Set the x Axis tick text's position relatively its original position