fix(text): Correct text vertical align

Fix multiline vertical position. Fix #982
naver · Jul 18, 2019 · 6debb55 · 6debb55
1 parent 26c1fa5
commit 6debb55
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 6 deletions.
diff --git a/spec/shape/shape.arc-spec.js b/spec/shape/shape.arc-spec.js
@@ -575,6 +575,52 @@ describe("SHAPE ARC", () => {
 		});
 	});
 
+	describe("check for multiline text position", () => {
+		let chart;
+		let args = {
+			data: {
+				columns: [
+					["data1", 50],
+					["data2", 50]
+				],
+				type: "donut"
+			},
+			donut: {
+				title: "Title 1\nTitle 2"
+			}
+		};
+
+		beforeEach(() => {
+			chart = util.generate(args);
+		});
+
+		const checkAtMiddle = done => {
+			const arc = chart.$.arc.node().getBoundingClientRect();
+			const title = chart.$.arc.select("text").node().getBoundingClientRect();
+
+			const titlePos = title.top - arc.top + (title.height / 2);
+
+			expect(titlePos).to.be.closeTo(arc.height / 2, 2);
+			done && done();
+		};
+
+		it("check for two lined text position", done => {
+			setTimeout(() => {
+				checkAtMiddle(done);
+			}, 100);
+		});
+
+		it("set option args.donut.title", () => {
+			args.donut.title = "Title 1\nTitle 2\nTitle 3";
+		});
+
+		it("check for three lined text position", done => {
+			setTimeout(() => {
+				checkAtMiddle(done);
+			}, 100);
+		});
+	});
+
 	describe("check for data loading", () => {
 		it("Interaction of chart when initialized with 0 and .load()", done => {
 		const chart = util.generate({

diff --git a/src/internals/util.js b/src/internals/util.js
@@ -82,9 +82,10 @@ const sanitise = str => (isString(str) ? str.replace(/</g, "&lt;").replace(/>/g,
  * @param {d3Selection} node Text node
  * @param {String} text Text value string
  * @param {Array} dy dy value for multilined text
+ * @param {Boolean} toMiddle To be alingned vertically middle
  * @private
  */
-const setTextValue = (node, text, dy = [-1, 1]) => {
+const setTextValue = (node, text, dy = [-1, 1], toMiddle = false) => {
 	if (!node || !isString(text)) {
 		return;
 	}
@@ -96,14 +97,15 @@ const setTextValue = (node, text, dy = [-1, 1]) => {
 
 		if (diff[0] !== diff[1]) {
 			const multiline = text.split("\n");
+			const len = toMiddle ? multiline.length - 1 : 1;
 
 			// reset possible text
 			node.html("");
 
 			multiline.forEach((v, i) => {
 				node.append("tspan")
 					.attr("x", 0)
-					.attr("dy", `${i === 0 ? dy[0] : dy[1]}em`)
+					.attr("dy", `${i === 0 ? dy[0] * len : dy[1]}em`)
 					.text(v);
 			});
 		}

diff --git a/src/shape/arc.js b/src/shape/arc.js
@@ -216,16 +216,17 @@ extend(ChartInternal.prototype, {
 				const value = updated ? updated.value : null;
 				const ratio = $$.getRatio("arc", updated);
 				const id = d.data.id;
+				const hasGauge = $$.hasType("gauge");
 				const isUnderThreshold = !(
-					!$$.hasType("gauge") && !$$.meetsArcLabelThreshold(ratio)
+					!hasGauge && !$$.meetsArcLabelThreshold(ratio)
 				);
 
 				if (isUnderThreshold) {
 					const text = (
 						$$.getArcLabelFormat() || $$.defaultArcValueFormat
 					)(value, ratio, id).toString();
 
-					setTextValue(node, text);
+					setTextValue(node, text, [-1, 1], hasGauge);
 				}
 			});
 		}
@@ -420,7 +421,7 @@ extend(ChartInternal.prototype, {
 					.style("font-size", "27px");
 			}
 
-			setTextValue(text, title, hasGauge ? undefined : [-1.3, 1.3]);
+			setTextValue(text, title, hasGauge ? undefined : [-0.6, 1.35], true);
 		}
 	},
 

diff --git a/src/shape/radar.js b/src/shape/radar.js
@@ -259,7 +259,7 @@ extend(ChartInternal.prototype, {
 				.attr("dy", ".5em")
 				.call(selection => {
 					selection.each(function(d) {
-						setTextValue(d3Select(this), d, [-1.2, 1.2]);
+						setTextValue(d3Select(this), d, [-1.2, 1.2], true);
 					});
 				})
 				.datum((d, i) => ({index: i}))