feat(radar): Intent to ship multiline axis

Implement multiline axis text via '\n'.

Fix #904

demo/demo.js

@@ -3560,6 +3560,28 @@ d3.select(".chart_area")
 				"#radarAxis .bb-levels polygon { stroke-dasharray: 1 3; stroke-width: 1px; }"
 			]
 		},
+		RadarAxisMultiline: {
+			options: {
+				padding: {
+					top: 20
+				},
+				data: {
+					x: "x",
+					columns: [
+						["x", "1st\nPrize", "2nd\nPrize", "3rd\nPrize"],
+						["data1", 230, 250, 100],
+						["data2", 150, 150, 230]
+					],
+					type: "radar",
+					labels: true
+				},
+				radar: {
+					axis: {
+						max: 300
+					}
+				}
+			}
+		},
 		RadarLevel: {
 			options: {
 				data: {

spec/interactions/interaction-spec.js

@@ -603,7 +603,7 @@ console.log(JSON.stringify(args))
 				}
 			};
 		});
-		
+
 		beforeEach(() => {
 			spy1.resetHistory();
 			spy2.resetHistory();
@@ -623,7 +623,7 @@ console.log(JSON.stringify(args))
 		it("set options interaction.inputType.touch=true", () => {
 			args.interaction.inputType.touch = true;
 		});
-		
+
 		it("should be called callbacks for touch events", done => {
 			chart.internal.callOverOutForTouch.last = null;
 

spec/shape/shape.radar-spec.js

@@ -38,7 +38,7 @@ describe("SHAPE RADAR", () => {
 
 			setTimeout(() => {
 				expect(radar.select(".bb-shapes polygon").attr("points")).to.be.equal(expectedPoints);
-				
+
 				done();
 			}, 200)
 		});
@@ -149,5 +149,34 @@ describe("SHAPE RADAR", () => {
 				expect(points[i === 0 ? 0 : (points.length - i)]).to.deep.equal(newPoints);
 			});
 		});
+
+		it("set options", () => {
+			args = {
+				padding: {
+					top: 20
+				},
+				data: {
+					x: "x",
+					columns: [
+						["x", "1st\nPrize", "2nd\nPrize", "3rd Prize"],
+						["data1", 230, 250, 100],
+						["data2", 150, 150, 230]
+					],
+					type: "radar",
+					labels: true
+				},
+				radar: {
+					axis: {
+						max: 300
+					}
+				}
+			};
+		});
+
+		it("check for multiline axis text", (d, i) => {
+			chart.$.main.selectAll(`.${CLASS.chartRadars} .${CLASS.axis} text`).each(function(d, i) {
+				expect(this.childNodes.length).to.be.equal(i === 2 ? 1 : 2);
+			});
+		});
 	});
 });

src/config/Options.js

@@ -3182,6 +3182,8 @@ export default class Options {
 
 			/**
 			 * Set radar options
+			 * - **NOTE:**
+			 *  > When x tick text contains `\n`, it's used as line break.
 			 * @name radar
 			 * @memberof Options
 			 * @type {Object}
@@ -3198,6 +3200,7 @@ export default class Options {
 			 * @see [Demo: radar axis](https://naver.github.io/billboard.js/demo/#RadarChartOptions.RadarAxis)
 			 * @see [Demo: radar level](https://naver.github.io/billboard.js/demo/#RadarChartOptions.RadarLevel)
 			 * @see [Demo: radar size](https://naver.github.io/billboard.js/demo/#RadarChartOptions.RadarSize)
+			 * @see [Demo: radar axis multiline](https://naver.github.io/billboard.js/demo/#RadarChartOptions.RadarAxisMultiline)
 			 * @example
 			 *  radar: {
 			 *      axis: {

src/internals/util.js

@@ -80,9 +80,13 @@ const sanitise = str => (isString(str) ? str.replace(/</g, "&lt;").replace(/>/g,
  * Set text value. If there's multiline add nodes.
  * @param {d3Selection} node Text node
  * @param {String} text Text value string
- * @param {Array} lineHeight Line height value for multilined text
+ * @param {Array} dy dy value for multilined text
  */
-const setTextValue = (node, text, lineHeight = [-1, 1]) => {
+const setTextValue = (node, text, dy = [-1, 1]) => {
+	if (!node || !isString(text)) {
+		return;
+	}
+
 	if (text.indexOf("\n") === -1) {
 		node.text(text);
 	} else {
@@ -97,7 +101,7 @@ const setTextValue = (node, text, lineHeight = [-1, 1]) => {
 			multiline.forEach((v, i) => {
 				node.append("tspan")
 					.attr("x", 0)
-					.attr("dy", `${i === 0 ? lineHeight[0] : lineHeight[1]}em`)
+					.attr("dy", `${i === 0 ? dy[0] : dy[1]}em`)
 					.text(v);
 			});
 		}

src/shape/radar.js

@@ -8,7 +8,7 @@ import {
 } from "d3-selection";
 import ChartInternal from "../internals/ChartInternal";
 import CLASS from "../config/classes";
-import {extend, getMinMax, getRange, isDefined, isEmpty, isNumber, isUndefined, toArray} from "../internals/util";
+import {extend, getMinMax, getRange, isDefined, isEmpty, isNumber, isUndefined, setTextValue, toArray} from "../internals/util";
 
 /**
  * Get the position value
@@ -257,10 +257,13 @@ extend(ChartInternal.prototype, {
 			axis.select("text")
 				.style("text-anchor", "middle")
 				.attr("dy", ".5em")
-				.text(d => d)
+				.call(selection => {
+					selection.each(function(d) {
+						setTextValue(d3Select(this), d, [-1.2, 1.2]);
+					});
+				})
 				.datum((d, i) => ({index: i}))
-				.attr("x", (d, i) => $$.getRadarPosition("x", i, undefined, 1))
-				.attr("y", (d, i) => $$.getRadarPosition("y", i, undefined, 1));
+				.attr("transform", (d, i) => `translate(${$$.getRadarPosition("x", i, undefined, 1)} ${$$.getRadarPosition("y", i, undefined, 1)})`);
 		}
 
 		$$.bindEvent();
@@ -273,7 +276,14 @@ extend(ChartInternal.prototype, {
 		if (config.interaction_enabled) {
 			const isMouse = $$.inputType === "mouse";
 			const getIndex = () => {
-				const d = d3Select(d3Event.target).datum();
+				let target = d3Event.target;
+
+				// in case of multilined axis text
+				if (/tspan/i.test(target.tagName)) {
+					target = target.parentNode;
+				}
+
+				const d = d3Select(target).datum();
 
 				return d && Object.keys(d).length === 1 ? d.index : undefined;
 			};