Skip to content

Commit

Permalink
feat(arc): Enhance multiline text label
Browse files Browse the repository at this point in the history 
Implement multiline text label for donut & pie type

Fix #784
  • Loading branch information
@netil
netil committed Feb 22, 2019
1 parent 7dd287d commit 7e57c67
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 42 deletions.
38 changes: 38 additions & 0 deletions demo/demo.js
View file
Expand Up @@ -2724,6 +2724,25 @@ d3.select(".chart_area")
"#LabelRatio .bb-chart-arc text {fill: #f00;font-size: 15px;font-weight: bold;}"
]
},
MultilineLabel: {
options: {
data: {
columns: [
["data1", 30],
["data2", 50],
["data3", 45]
],
type: "donut"
},
donut: {
label: {
format: function(value, ratio, id) {
return value +"\nHours";
}
}
}
}
},
MultilneTitle: {
options: {
data: {
Expand Down Expand Up @@ -2862,6 +2881,25 @@ d3.select(".chart_area")
}
}
},
MultilineLabel: {
options: {
data: {
columns: [
["data1", 30],
["data2", 50],
["data3", 45]
],
type: "pie"
},
pie: {
label: {
format: function(value, ratio, id) {
return value +"\nHours";
}
}
}
}
},
InnerRadius: {
options: {
data: {
Expand Down
43 changes: 42 additions & 1 deletion spec/shape/shape.arc-spec.js
View file
Expand Up @@ -167,7 +167,8 @@ describe("SHAPE ARC", () => {
},
pie: {
padding,
innerRadius
innerRadius,
format: value => `$$\n${value}`
}
});
const internal = chart.internal;
Expand Down Expand Up @@ -410,4 +411,44 @@ describe("SHAPE ARC", () => {
});
});
});

describe("check for multiline label format", () => {
const labelFormat = {
label: { format: value => `$$\n${value}` }
};
let chart;
let args = {
data: {
columns: [
["data1", 60],
["data2", 40]
],
type: "pie"
},
pie: labelFormat,
donut: labelFormat
};

const checkMultiline = arc => {
arc.selectAll("text").each(function() {
expect(this.querySelectorAll("tspan").length).to.be.equal(2);
});
}

beforeEach(() => {
chart = util.generate(args);
});

it("should be multilined in pie", () => {
checkMultiline(chart.$.arc);
});

it("set options data.type='donut'", () => {
args.data.type = "donut";
});

it("should be multilined in donut", () => {
checkMultiline(chart.$.arc);
});
});
});
6 changes: 6 additions & 0 deletions src/config/Options.js
View file
Expand Up @@ -2882,6 +2882,9 @@ export default class Options {
* show: false,
* format: function(value, ratio, id) {
* return d3.format("$")(value);
*
* // to multiline, return with '\n' character
* // return value +"%\nLine1\n2Line2";
* },
* threshold: 0.1,
*
Expand Down Expand Up @@ -2992,6 +2995,9 @@ export default class Options {
* show: false,
* format: function(value, ratio, id) {
* return d3.format("$")(value);
*
* // to multiline, return with '\n' character
* // return value +"%\nLine1\n2Line2";
* },
* threshold: 0.1,
*
Expand Down
76 changes: 35 additions & 41 deletions src/shape/arc.js
View file
Expand Up @@ -189,44 +189,41 @@ extend(ChartInternal.prototype, {
});
},

textForArcLabel(val) {
textForArcLabel(selection) {
const $$ = this;
const d = val.node ? val.datum() : val;

if (!$$.shouldShowArcLabel()) {
return "";
}

const updated = $$.updateAngle(d);
const value = updated ? updated.value : null;
const ratio = $$.getRatio("arc", updated);
const id = d.data.id;

if (!$$.hasType("gauge") && !$$.meetsArcLabelThreshold(ratio)) {
return "";
}

const text = (
$$.getArcLabelFormat() || $$.defaultArcValueFormat
)(value, ratio, id).toString();

if (val.node) {
if (text.indexOf("\n") === -1) {
val.text(text);
} else {
const multiline = text.split("\n");
const len = multiline.length - 1;
if ($$.shouldShowArcLabel()) {
selection.each(function(d) {
const node = d3Select(this);
const updated = $$.updateAngle(d);
const value = updated ? updated.value : null;
const ratio = $$.getRatio("arc", updated);
const id = d.data.id;
const isUnderThreshold = !(
!$$.hasType("gauge") && !$$.meetsArcLabelThreshold(ratio)
);

multiline.forEach((v, i) => {
val.append("tspan")
.attr("x", 0)
.attr("dy", `${i === 0 ? -len : 1}em`)
.text(v);
});
}
if (isUnderThreshold) {
const text = (
$$.getArcLabelFormat() || $$.defaultArcValueFormat
)(value, ratio, id).toString();

if (text.indexOf("\n") === -1) {
node.text(text);
} else {
const multiline = text.split("\n");
const len = multiline.length - 1;

multiline.forEach((v, i) => {
node.append("tspan")
.attr("x", 0)
.attr("dy", `${i === 0 ? -len : 1}em`)
.text(v);
});
}
}
});
}

return text;
},

textForGaugeMinMax(value, isMax) {
Expand Down Expand Up @@ -630,17 +627,14 @@ extend(ChartInternal.prototype, {
const config = $$.config;
const main = $$.main;

const gaugeTextValue = main.selectAll(`.${CLASS.chartArc}`)
const text = main.selectAll(`.${CLASS.chartArc}`)
.select("text")
.style("opacity", "0")
.attr("class", d => ($$.isGaugeType(d.data) ? CLASS.gaugeValue : ""));

config.gauge_fullCircle && gaugeTextValue.attr("dy", `${Math.round($$.radius / 14)}`);
.attr("class", d => ($$.isGaugeType(d.data) ? CLASS.gaugeValue : null));

// to handle multiline text for gauge type
const textMethod = !gaugeTextValue.empty() && gaugeTextValue.classed(CLASS.gaugeValue) ? "call" : "text";
config.gauge_fullCircle && text.attr("dy", `${Math.round($$.radius / 14)}`);

gaugeTextValue[textMethod]($$.textForArcLabel.bind($$))
text.call($$.textForArcLabel.bind($$))
.attr("transform", $$.transformForArcLabel.bind($$))
.style("font-size", d => ($$.isGaugeType(d.data) ? `${Math.round($$.radius / 5)}px` : ""))
.transition()
Expand Down

0 comments on commit 7e57c67

Please sign in to comment.