feat(axis): Enhancement on tick multiline (#386)

Added to line break with '\n', allowing to line break on exact position.

Fix #381
Close #386

spec/internals/axis-spec.js

@@ -628,6 +628,28 @@ describe("AXIS", function() {
 			});
 		});
 
+		describe("tick text with '\n' to line break", () => {
+			const tickText = "this is a very\nlong\ntick text";
+
+			before(() => {
+				args.axis.x.tick.format = () => tickText;
+			});
+
+			it("should have multiline tick text", () => {
+				const tick = chart.internal.main.select(`.${CLASS.axisX}`).select("g.tick");
+				const tspans = tick.selectAll("tspan");
+				const lineBreaks = tickText.split("\n");
+
+				expect(tspans.size()).to.be.equal(lineBreaks.length);
+
+				tspans.each(function(d, i) {
+					const tspan = d3.select(this);
+
+					expect(tspan.text()).to.be.equal(lineBreaks[i]);
+				});
+			});
+		});
+
 		describe("axis.x.tick.format for category type", () => {
 			const len = 3;
 

src/axis/bb.axis.js

@@ -5,7 +5,7 @@
  */
 import {scaleLinear as d3ScaleLinear} from "d3-scale";
 import {select as d3Select} from "d3-selection";
-import {isArray, toArray, isDefined, isFunction} from "../internals/util";
+import {isArray, toArray, isDefined, isFunction, isString} from "../internals/util";
 
 // Features:
 // 1. category axis
@@ -197,13 +197,19 @@ export default function(params = {}) {
 			// this should be called only when category axis
 			function splitTickText(d, maxWidthValue) {
 				const tickText = textFormatted(d);
-				const splitted = [];
+				const splitted = isString(tickText) && tickText.indexOf("\n") > -1 ?
+					tickText.split("\n") : [];
+
+				if (splitted.length) {
+					return splitted;
+				}
+
 				let maxWidth = maxWidthValue;
 				let subtext;
 				let spaceIndex;
 				let textWidth;
 
-				if (Object.prototype.toString.call(tickText) === "[object Array]") {
+				if (isArray(tickText)) {
 					return tickText;
 				}
 
@@ -215,6 +221,7 @@ export default function(params = {}) {
 
 				function split(splitted, text) {
 					spaceIndex = undefined;
+
 					for (let i = 1; i < text.length; i++) {
 						if (text.charAt(i) === " ") {
 							spaceIndex = i;

src/config/Options.js

@@ -1418,6 +1418,8 @@ export default class Options {
 
 			/**
 			 * Set tick text to be multiline
+			 * - **NOTE:**
+			 *  > When x tick text contains `\n`, it's used as line break and 'axis.x.tick.width' option is ignored.
 			 * @name axis․x․tick․multiline
 			 * @memberOf Options
 			 * @type {Boolean}
@@ -1430,12 +1432,24 @@ export default class Options {
 			 *     }
 			 *   }
 			 * }
+			 * @example
+			 * // example of line break with '\n'
+			 * // In this case, 'axis.x.tick.width' is ignored
+			 * data: {
+			 *    x: "x",
+			 *    columns: [
+			 *        ["x", "long\ntext", "Another\nLong\nText"],
+			 *        ...
+			 *    ],
+			 * }
 			 */
 			axis_x_tick_multiline: true,
 
 
 			/**
 			 * Set tick width
+			 * - **NOTE:**
+			 *  > When x tick text contains `\n`, this option is ignored.
 			 * @name axis․x․tick․width
 			 * @memberOf Options
 			 * @type {Number}