feat(axis): Pass category name param (#329)

- Pass category name for tick.format function - Fix axis.y.tick.format API doc Fix #327 Close #329
naver · Mar 13, 2018 · 7e06851 · 7e06851
1 parent 8dc08bd
commit 7e06851
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 33 deletions.
diff --git a/spec/internals/axis-spec.js b/spec/internals/axis-spec.js
@@ -608,26 +608,41 @@ describe("AXIS", function() {
 		});
 
 		describe("with axis.x.tick.format", () => {
+			const tickTexts = ["this is a very long tick text", "on category axis"];
+
 			before(() => {
-				args.axis.x.tick.format = () => {
-					return ["this is a very long tick text", "on category axis"];
-				};
+				args.axis.x.tick.format = () => tickTexts;
 			});
 
 			it("should have multiline tick text", () => {
 				const tick = chart.internal.main.select(`.${CLASS.axisX}`).select("g.tick");
 				const tspans = tick.selectAll("tspan");
-				const expectedTickTexts = ["this is a very long tick text", "on category axis"];
 
-				expect(tspans.size()).to.be.equal(expectedTickTexts.length);
+				expect(tspans.size()).to.be.equal(tickTexts.length);
 
 				tspans.each(function(d, i) {
 					const tspan = d3.select(this);
 
-					expect(tspan.text()).to.be.equal(expectedTickTexts[i]);
+					expect(tspan.text()).to.be.equal(tickTexts[i]);
 				});
 			});
+		});
+
+		describe("axis.x.tick.format for category type", () => {
+			const len = 3;
+
+			before(() => {
+				args.axis.x.tick.format = (i, name) => name && name.substr(0, len);
+			});
 
+			it("should have multiline tick text", () => {
+				const tick = chart.internal.main.select(`.${CLASS.axisX}`).select("g.tick");
+				const tspans = tick.selectAll("tspan");
+
+				tspans.each(function() {
+					expect(this.textContent.length).to.be.equal(len);
+				});
+			});
 		});
 	});
 

diff --git a/src/axis/Axis.js b/src/axis/Axis.js
@@ -146,38 +146,34 @@ export default class Axis {
 	getXAxisTickFormat() {
 		const $$ = this.owner;
 		const config = $$.config;
+		const tickFormat = config.axis_x_tick_format;
+		const isTimeSeries = $$.isTimeSeries();
+		const isCategorized = $$.isCategorized();
 		let format;
 
-		if ($$.isTimeSeries()) {
-			format = $$.defaultAxisTimeFormat;
+		if (tickFormat) {
+			if (isFunction(tickFormat)) {
+				format = tickFormat;
+			} else if (isTimeSeries) {
+				format = date => (date ? $$.axisTimeFormat(tickFormat)(date) : "");
+			}
 		} else {
-			format = $$.isCategorized() ?
-				$$.categoryName : function(v) {
-					return v < 0 ? v.toFixed(0) : v;
-				};
-		}
-
-		if (config.axis_x_tick_format) {
-			if (isFunction(config.axis_x_tick_format)) {
-				format = config.axis_x_tick_format;
-			} else if ($$.isTimeSeries()) {
-				format = date => (date ? $$.axisTimeFormat(config.axis_x_tick_format)(date) : "");
+			if (isTimeSeries) {
+				format = $$.defaultAxisTimeFormat;
+			} else {
+				format = isCategorized ?
+					$$.categoryName : v => (v < 0 ? v.toFixed(0) : v);
 			}
 		}
 
-		return isFunction(format) ? v => format.call($$, v) : format;
+		return isFunction(format) ? v =>
+			format.apply($$, isCategorized ?
+				[v, $$.categoryName(v)] : [v]
+			) : format;
 	}
 
 	getTickValues(tickValues, axis) {
-		let values;
-
-		if (tickValues) {
-			values = tickValues;
-		} else {
-			values = axis ? axis.tickValues() : undefined;
-		}
-
-		return values;
+		return tickValues || (axis ? axis.tickValues() : undefined);
 	}
 
 	getXAxisTickValues() {

diff --git a/src/axis/bb.axis.js b/src/axis/bb.axis.js
@@ -82,8 +82,7 @@ export default function(params = {}) {
 		// to round float numbers from 'binary floating point'
 		// https://en.wikipedia.org/wiki/Double-precision_floating-point_format
 		// https://stackoverflow.com/questions/17849101/laymans-explanation-for-why-javascript-has-weird-floating-math-ieee-754-stand
-		const value = /\d+\.\d+0{5,}\d$/.test(v) ?
-			+String(v).replace(/0+\d$/, "") : v;
+		const value = /\d+\.\d+0{5,}\d$/.test(v) ? +String(v).replace(/0+\d$/, "") : v;
 		const formatted = tickFormat ? tickFormat(value) : value;
 
 		return isDefined(formatted) ? formatted : "";

diff --git a/src/config/Options.js b/src/config/Options.js
@@ -1272,9 +1272,15 @@ export default class Options {
 			 * axis: {
 			 *   x: {
 			 *     tick: {
+			 *        // for timeseries, a 'datetime' object is given as parameter
 			 *       format: function(x) {
 			 *           return x.getFullYear();
 			 *       }
+			 *
+			 *       // for category, index(Number) and categoryName(String) are given as parameter
+			 *       format: function(index, categoryName) {
+			 *           return categoryName.substr(0, 10);
+			 *       }
 			 *     }
 			 *   }
 			 * }
@@ -1739,13 +1745,13 @@ export default class Options {
 			/**
 			 * Set formatter for y axis tick text.<br><br>
 			 * This option accepts d3.format object as well as a function you define.
-			 * @name axis․y․format
+			 * @name axis․y․tick․format
 			 * @memberOf Options
 			 * @type {Function}
 			 * @default undefined
 			 * @example
 			 * axis: {
-			 *   x: {
+			 *   y: {
 			 *     tick: {
 			 *       format: function(x) {
 			 *           return x.getFullYear();