diff --git a/spec/shape/shape.arc-spec.js b/spec/shape/shape.arc-spec.js index 71b41ea94..861f38436 100644 --- 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 index 8d407790a..acd5379c3 100644 --- a/src/internals/util.js +++ b/src/internals/util.js @@ -82,9 +82,10 @@ const sanitise = str => (isString(str) ? str.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,6 +97,7 @@ 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(""); @@ -103,7 +105,7 @@ const setTextValue = (node, text, dy = [-1, 1]) => { 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 index a7ce244a7..18b1ada4e 100644 --- a/src/shape/arc.js +++ b/src/shape/arc.js @@ -216,8 +216,9 @@ 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) { @@ -225,7 +226,7 @@ extend(ChartInternal.prototype, { $$.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 index 17faf233b..0fa60c941 100644 --- 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}))