fix(axis): improve tick label size calculation

Refactored and fixed on one character dimension logic

Fix #323
Close #324

AUTHORS.txt

@@ -13,3 +13,4 @@ Kim Jong Hyen <fussaep@gmail.com>
 dtc03012 <https://github.com/dtc03012>
 Kim Dong Min <https://github.com/haracejacob>
 Russell Shingleton <russellshomes@aol.com>
+Matthias Komarek <https://github.com/matthiaskomarek>

spec/internals/axis-spec.js

@@ -255,7 +255,7 @@ describe("AXIS", function() {
 
 				it("should split x axis tick text to multiple lines", () => {
 					const ticks = chart.internal.main.select(`.${CLASS.axisX}`).selectAll("g.tick");
-					const expectedTexts = ["very long tick text", "on x axis"];
+					const expectedTexts = ["very long tick", "text on x axis"];
 					const expectedX = "0";
 
 					expect(ticks.size()).to.be.equal(6);
@@ -462,7 +462,8 @@ describe("AXIS", function() {
 					const expectedTickTexts = [
 							"this is a very",
 							"long tick text",
-							"on category axis"
+							"on category",
+							"axis"
 						];
 					const expectedX = "0";
 
@@ -528,12 +529,13 @@ describe("AXIS", function() {
 					const tspans = tick.selectAll("tspan");
 					const expectedTickTexts = [
 							"this is a very",
-							"long tick text on",
-							"category axis"
+							"long tick text",
+							"on category",
+							"axis"
 						];
 					const expectedX = "-9";
 
-					expect(tspans.size()).to.be.equal(3);
+					expect(tspans.size()).to.be.equal(expectedTickTexts.length);
 
 					tspans.each(function(d, i) {
 						const tspan = d3.select(this);
@@ -585,7 +587,7 @@ describe("AXIS", function() {
 							];
 						const expectedX = "-9";
 
-						expect(tspans.size()).to.be.equal(2);
+						expect(tspans.size()).to.be.equal(expectedTickTexts.length);
 
 						tspans.each(function(d, i) {
 							const tspan = d3.select(this);
@@ -617,7 +619,7 @@ describe("AXIS", function() {
 				const tspans = tick.selectAll("tspan");
 				const expectedTickTexts = ["this is a very long tick text", "on category axis"];
 
-				expect(tspans.size()).to.be.equal(2);
+				expect(tspans.size()).to.be.equal(expectedTickTexts.length);
 
 				tspans.each(function(d, i) {
 					const tspan = d3.select(this);

src/axis/bb.axis.js

@@ -10,7 +10,6 @@ import {isArray, toArray, isDefined, isFunction} from "../internals/util";
 // 1. category axis
 // 2. ceil values of translate/x/y to int for half pixel anti-aliasing
 // 3. multiline tick text
-let tickTextCharSize;
 
 export default function(params = {}) {
 	let scale = d3ScaleLinear();
@@ -90,35 +89,33 @@ export default function(params = {}) {
 		return isDefined(formatted) ? formatted : "";
 	}
 
-	function getSizeFor1Char(tick) {
-		if (tickTextCharSize) {
-			return tickTextCharSize;
-		}
-
+	let getSizeFor1Char = tick => {
+		// default size for one character
 		const size = {
 			h: 11.5,
-			w: 5.5,
+			w: 5.5
 		};
 
-		tick.select("text")
-			.text(textFormatted)
-			.each(function(d) {
-				const box = this.getBBox();
-				const text = textFormatted(d);
+		!tick.empty() && tick.select("text")
+			.text("0")
+			.call(el => {
+				const box = el.node().getBBox();
 				const h = box.height;
-				const w = text ? (box.width / text.length) : undefined;
+				const w = box.width;
 
 				if (h && w) {
 					size.h = h;
 					size.w = w;
 				}
-			})
-			.text("");
 
-		tickTextCharSize = size;
+				el.text("");
+			});
+
+		// overwrite to return calculated size
+		getSizeFor1Char = () => size;
 
 		return size;
-	}
+	};
 
 	function transitionise(selection) {
 		return params.withoutTransition ?
@@ -225,7 +222,7 @@ export default function(params = {}) {
 						subtext = text.substr(0, i + 1);
 						textWidth = sizeFor1Char.w * subtext.length;
 
-						// if text width gets over tick width, split by space index or crrent index
+						// if text width gets over tick width, split by space index or current index
 						if (maxWidth < textWidth) {
 							return split(
 								splitted.concat(text.substr(0, spaceIndex || i)),