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

apache · Oct 2, 2017 · f8cc05b · f8cc05b
1 parent 9baca67
commit f8cc05b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/superset/assets/javascripts/explore/stores/controls.jsx b/superset/assets/javascripts/explore/stores/controls.jsx
@@ -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?'),
   },

diff --git a/superset/assets/visualizations/nvd3_vis.js b/superset/assets/visualizations/nvd3_vis.js
@@ -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;