feat(Arc): Implement multiline donut title

Add line break functionality using '\n' key Fix #71 Close #130
naver · Aug 30, 2017 · b816dc0 · b816dc0
1 parent 354d7e2
commit b816dc0
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 12 deletions.
diff --git a/spec/arc-spec.js b/spec/arc-spec.js
@@ -3,6 +3,7 @@
  * billboard.js project is licensed under the MIT license
  */
 /* eslint-disable */
+import CLASS from "../src/config/classes";
 import util from "./assets/util";
 
 describe("ARC", () => {
@@ -97,9 +98,8 @@ describe("ARC", () => {
 			expect(arcs.data3.attr("d").indexOf("NaN")).to.be.equal(-1);
 		});
 
-		it("should set padAngle value", () => {
+		it("check for donut's options", () => {
 			const value = 0.05;
-
 			const chart = util.generate({
 				data: {
 					columns: [
@@ -109,13 +109,13 @@ describe("ARC", () => {
 					type: "donut"
 				},
 				donut: {
+					title: "text1\ntext2\ntext3",
 					padAngle: value
 				}
 			});
 
-			const padAngle = chart.internal.pie.padAngle();
-
-			expect(padAngle()).to.be.equal(value);
+			expect(chart.internal.pie.padAngle()()).to.be.equal(value);
+			expect(chart.internal.main.selectAll(`text.${CLASS.chartArcsTitle} tspan`).size()).to.be.equal(3);
 		});
 	});
 

diff --git a/src/config/Options.js b/src/config/Options.js
@@ -2167,7 +2167,7 @@ export default class Options {
 			 * @property {Number|Function} [donut.label.ratio=undefined] Set ratio of labels position.
 			 * @property {Boolean} [donut.expand=true] Enable or disable expanding donut pieces.
 			 * @property {Number} [donut.width] Set width of donut chart.
-			 * @property {String} [donut.title=""] Set title of donut chart.
+			 * @property {String} [donut.title=""] Set title of donut chart. Use `\n` character to enter line break.
 			 * @property {Number} [donut.padAngle=0] Set padding between data.
 			 * @example
 			 *  donut: {
@@ -2188,8 +2188,11 @@ export default class Options {
 			 *      },
 			 *      expand: false,
 			 *      width: 10,
-			 *      title: "Donut Title",
-			 *      padAngle: 0.2
+			 *      padAngle: 0.2,
+			 *      title: "Donut Title"
+			 *
+			 *      // title with line break
+			 *      title: "Title1\nTitle2"
 			 *  }
 			 */
 			donut_label_show: true,

diff --git a/src/internals/arc.js b/src/internals/arc.js
@@ -368,10 +368,46 @@ extend(ChartInternal.prototype, {
 			.attr("class", CLASS.chartArcs)
 			.attr("transform", $$.getTranslate("arc"));
 
-		$$.arcs.append("text")
-			.attr("class", CLASS.chartArcsTitle)
-			.style("text-anchor", "middle")
-			.text($$.getArcTitle());
+		$$.setArcTitle();
+	},
+
+	/**
+	 * Set arc title text
+	 * @private
+	 */
+	setArcTitle() {
+		const $$ = this;
+		const title = $$.getArcTitle();
+
+		if (title) {
+			const multiline = title.split("\n");
+			const text = $$.arcs.append("text")
+				.attr("class", CLASS.chartArcsTitle)
+				.style("text-anchor", "middle");
+
+			// if is multiline text
+			if (multiline.length > 1) {
+				const fontSize = +text.style("font-size").replace("px", "");
+				const height = Math.floor(
+					text.text(".").node()
+						.getBBox().height, text.text("")
+				);
+
+				multiline.forEach((v, i) =>
+					text.insert("tspan")
+						.text(v)
+						.attr("x", 0)
+						.attr("dy", i ? height : 0)
+				);
+
+				text.attr("y", `-${
+					fontSize * (multiline.length - 2) ||
+					fontSize / 2
+				}`);
+			} else {
+				text.text(title);
+			}
+		}
 	},
 
 	redrawArc(duration, durationForExit, withTransform) {