Added label+percent and label+value display options to pie chart (#3565)

This commit is contained in:
Jeff Niu 2017-10-02 15:53:11 -07:00 committed by Maxime Beauchemin
parent 9baca6758d
commit f8cc05b54e
2 changed files with 12 additions and 3 deletions

View File

@ -943,6 +943,8 @@ export const controls = {
['key', 'Category Name'],
['value', 'Value'],
['percent', 'Percentage'],
['key_value', 'Category and Value'],
['key_percent', 'Category and Percentage'],
],
description: t('What should be shown on the label?'),
},

View File

@ -230,14 +230,21 @@ function nvd3Vis(slice, payload) {
chart.donut(true);
}
chart.labelsOutside(fd.labels_outside);
chart.labelThreshold(0.05) // Configure the minimum slice size for labels to show up
.labelType(fd.pie_label_type);
chart.labelThreshold(0.05); // Configure the minimum slice size for labels to show up
if (fd.pie_label_type !== 'key_percent' && fd.pie_label_type !== 'key_value') {
chart.labelType(fd.pie_label_type);
} else if (fd.pie_label_type === 'key_value') {
chart.labelType(d => `${d.data.x}: ${d3.format('.3s')(d.data.y)}`);
}
chart.cornerRadius(true);
if (fd.pie_label_type === 'percent') {
if (fd.pie_label_type === 'percent' || fd.pie_label_type === 'key_percent') {
let total = 0;
data.forEach((d) => { total += d.y; });
chart.tooltip.valueFormatter(d => `${((d / total) * 100).toFixed()}%`);
if (fd.pie_label_type === 'key_percent') {
chart.labelType(d => `${d.data.x}: ${((d.data.y / total) * 100).toFixed()}%`);
}
}
break;