fix(core): Fix loss of letters in labels in wrapTicks() (#202)

197

packages/core/src/base-axis-chart.ts

@@ -600,25 +600,50 @@ export class BaseAxisChart extends BaseChart {
 	// TODO - Refactor
 	wrapTick(ticks) {
 		const self = this;
-		const letNum = Configuration.scales.tick.maxLetNum;
-		ticks.each(function(t) {
-			if (t && t.length > letNum / 2) {
-				const tick = select(this);
-				const y = tick.attr("y");
-				tick.text("");
-				const tspan1 = tick.append("tspan")
-					.attr("x", 0).attr("y", y).attr("dx", Configuration.scales.dx).attr("dy", `-${Configuration.scales.tick.dy}`);
-				const tspan2 = tick.append("tspan")
-					.attr("x", 0).attr("y", y).attr("dx", Configuration.scales.dx).attr("dy", Configuration.scales.tick.dy);
-				if (t.length < letNum - 3) {
-					tspan1.text(t.substring(0, t.length / 2));
-					tspan2.text(t.substring(t.length / 2 + 1, t.length));
-				} else {
-					tspan1.text(t.substring(0, letNum / 2));
-					tspan2.text(t.substring(letNum / 2, letNum - 3) + "...");
-					tick.on("click", dd => {
-						self.showLabelTooltip(dd, true);
-					});
+		const lineHeight = Configuration.scales.tick.lineHeight;
+
+		ticks.each(function (t) {
+			const text = select(this);
+			let textContent = text.text();
+
+			// If the text has already been broken down into parts
+			if (text.selectAll("tspan").nodes().length > 1) {
+				textContent = text.selectAll("tspan")
+					.nodes()
+					.map(node => select(node).text())
+					.join(" ");
+			}
+
+			const words = textContent.split(/\s+/).reverse();
+			const y = text.attr("y");
+			const dy = parseFloat(text.attr("dy"));
+
+			let word;
+			let line = [];
+			let lineNumber = 0;
+			let tspan = text.text(null)
+				.append("tspan")
+				.attr("x", 0);
+
+			// Set max length allowed to length of datapoints
+			// In the x-scale
+			const maxTextLengthAllowed = self.x.bandwidth();
+			while (word = words.pop()) {
+				line.push(word);
+				tspan.text(line.join(" "));
+
+				// Get text length and compare to maximum length allowed
+				const tspanTextLength = tspan.node().getComputedTextLength();
+				if (tspanTextLength > maxTextLengthAllowed) {
+					line.pop();
+					tspan.text(line.join(" "));
+					line = [word];
+
+					tspan = text.append("tspan")
+						.attr("x", 0)
+						.attr("y", y)
+						.attr("dy", ++lineNumber * lineHeight + dy + "em")
+						.text(word);
 				}
 			}
 		});

packages/core/src/configuration.ts

@@ -121,7 +121,7 @@ export const scales = {
 		widthAdditionY: 25,
 		widthAdditionY2: 15,
 		heightAddition: 16,
-		maxLetNum: 28
+		lineHeight: 1.1
 	},
 	magicDy1: "0.71em",
 	magicY1: 9,

packages/core/src/style.scss

@@ -87,10 +87,6 @@ div.chart-holder {
 		}
 	}
 
-	tspan {
-		cursor: pointer;
-	}
-
 	.legend-wrapper {
 		height: 40px;
 		width: 100%;