feat(gauge): Enhance display multiline labels (#516)

Implement to be multilined using '\n' character.

Fix #442
Close #516

spec/internals/arc-spec.js

@@ -232,7 +232,7 @@ describe("ARC", () => {
 		});
 
 
-		it("should show custom min/max gauge labels", () => {
+		it("should show custom gauge labels", () => {
 			const chart = util.generate({
 				gauge: {
 					width: 10,
@@ -245,6 +245,9 @@ describe("ARC", () => {
 							}
 
 							return `Min: ${value}%`;
+						},
+						format: function(value) {
+							return value +"%\nTest\nValue";
 						}
 					}
 				},
@@ -256,12 +259,15 @@ describe("ARC", () => {
 				}
 			});
 
-			const chartArc = chart.internal.main.select(`.${CLASS.chartArcs}`);
+			const chartArc = chart.$.arc;
 			const min = chartArc.select(`.${CLASS.chartArcsGaugeMin}`);
 			const max = chartArc.select(`.${CLASS.chartArcsGaugeMax}`);
 
 			expect(min.text()).to.equal("Min: 0%");
 			expect(max.text()).to.equal("Max: 100%");
+
+			// gauge text should be multilined
+			expect(chartArc.selectAll(`.${CLASS.target}-data tspan`).size()).to.be.equal(3);
 		});
 
 		it("should not show gauge labels", () => {

src/config/Options.js

@@ -2500,7 +2500,7 @@ export default class Options {
 			 * @type {Object}
 			 * @property {Boolean} [gauge.fullCircle=false] Show full circle as donut. When set to 'true', the max label will not be showed due to start and end points are same location.
 			 * @property {Boolean} [gauge.label.show=true] Show or hide label on gauge.
-			 * @property {Function} [gauge.label.format] Set formatter for the label on gauge.
+			 * @property {Function} [gauge.label.format] Set formatter for the label on gauge. Label text can be multilined with `\n` character.
 			 * @property {Function} [gauge.label.extents] Set customized min/max label text.
 			 * @property {Boolean} [gauge.expand=true] Enable or disable expanding gauge.
 			 * @property {Number} [gauge.expand.duration=50] Set the expand transition time in milliseconds.
@@ -2516,6 +2516,9 @@ export default class Options {
 			 *          show: false,
 			 *          format: function(value, ratio) {
 			 *              return value;
+			 *
+			 *              // to multiline, return with '\n' character
+			 *              // return value +"%\nLine1\n2Line2";
 			 *          },
 			 *          extents: function(value, isMax) {
 		 	 *              return (isMax ? "Max:" : "Min:") + value;

src/shape/arc.js

@@ -217,8 +217,9 @@ extend(ChartInternal.prototype, {
 		});
 	},
 
-	textForArcLabel(d) {
+	textForArcLabel(val) {
 		const $$ = this;
+		const d = val.node ? val.datum() : val;
 
 		if (!$$.shouldShowArcLabel()) {
 			return "";
@@ -233,9 +234,27 @@ extend(ChartInternal.prototype, {
 			return "";
 		}
 
-		const format = $$.getArcLabelFormat();
+		const text = (
+			$$.getArcLabelFormat() || $$.defaultArcValueFormat
+		)(value, ratio, id).toString();
 
-		return format ? format(value, ratio, id) : $$.defaultArcValueFormat(value, ratio);
+		if (val.node) {
+			if (text.indexOf("\n") === -1) {
+				val.text(text);
+			} else {
+				const multiline = text.split("\n");
+				const len = multiline.length - 1;
+
+				multiline.forEach((v, i) => {
+					val.append("tspan")
+						.attr("x", 0)
+						.attr("dy", `${i === 0 ? -len : 1}em`)
+						.text(v);
+				});
+			}
+		}
+
+		return text;
 	},
 
 	textForGaugeMinMax(value, isMax) {
@@ -654,8 +673,11 @@ extend(ChartInternal.prototype, {
 
 		config.gauge_fullCircle && gaugeTextValue.attr("dy", `${Math.round($$.radius / 14)}`);
 
-		gaugeTextValue
-			.text($$.textForArcLabel.bind($$))
+		// to handle multiline text for gauge type
+		const textMethod = !gaugeTextValue.empty() &&
+			gaugeTextValue.classed(CLASS.gaugeValue) ? "call" : "text";
+
+		gaugeTextValue[textMethod]($$.textForArcLabel.bind($$))
 			.attr("transform", $$.transformForArcLabel.bind($$))
 			.style("font-size", d => ($$.isGaugeType(d.data) ? `${Math.round($$.radius / 5)}px` : ""))
 			.transition()