From ae85ba3dc52d98d08d542b12c7577ddb5e9aaa15 Mon Sep 17 00:00:00 2001
From: Stuart Hu <shijiehu@improbable.io>
Date: Mon, 27 Jul 2020 12:25:58 +0800
Subject: [PATCH] feat(legacy-preset-chart-nvd3): add a new label type to pie
 chart (#699)

---
 .../legacy-preset-chart-nvd3/src/NVD3Vis.js   | 28 ++++++++++++++++---
 .../src/Pie/controlPanel.ts                   |  1 +
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js
index e891ffda33f23..58a0cf2b469e3 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js
@@ -217,7 +217,14 @@ const propTypes = {
   // 'pie' only
   isDonut: PropTypes.bool,
   isPieLabelOutside: PropTypes.bool,
-  pieLabelType: PropTypes.oneOf(['key', 'value', 'percent', 'key_value', 'key_percent']),
+  pieLabelType: PropTypes.oneOf([
+    'key',
+    'value',
+    'percent',
+    'key_value',
+    'key_percent',
+    'key_value_percent',
+  ]),
   showLabels: PropTypes.bool,
   // 'area' only
   areaStackedStyle: PropTypes.string,
@@ -418,10 +425,23 @@ function nvd3Vis(element, props) {
           chart.labelType(pieLabelType);
         } else if (pieLabelType === 'key_value') {
           chart.labelType(d => `${d.data.x}: ${numberFormatter(d.data.y)}`);
-        } else if (pieLabelType === 'key_percent') {
+        } else {
+          // pieLabelType in ['key_percent', 'key_value_percent']
           const total = d3.sum(data, d => d.y);
-          chart.tooltip.valueFormatter(d => `${((d / total) * 100).toFixed()}%`);
-          chart.labelType(d => `${d.data.x}: ${((d.data.y / total) * 100).toFixed()}%`);
+          const percentFormatter = getNumberFormatter(NumberFormats.PERCENT_2_POINT);
+          if (pieLabelType === 'key_percent') {
+            chart.tooltip.valueFormatter(d => percentFormatter(d));
+            chart.labelType(d => `${d.data.x}: ${percentFormatter(d.data.y / total)}`);
+          } else {
+            // pieLabelType === 'key_value_percent'
+            chart.tooltip.valueFormatter(
+              d => `${numberFormatter(d)} (${percentFormatter(d / total)})`,
+            );
+            chart.labelType(
+              d =>
+                `${d.data.x}: ${numberFormatter(d.data.y)} (${percentFormatter(d.data.y / total)})`,
+            );
+          }
         }
         // Pie chart does not need top margin
         chart.margin({ top: 0 });
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Pie/controlPanel.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Pie/controlPanel.ts
index 8ec50677ceec8..dc854ae73f48d 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Pie/controlPanel.ts
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Pie/controlPanel.ts
@@ -45,6 +45,7 @@ export default {
                 ['percent', 'Percentage'],
                 ['key_value', 'Category and Value'],
                 ['key_percent', 'Category and Percentage'],
+                ['key_value_percent', 'Category, Value and Percentage'],
               ],
               description: t('What should be shown on the label?'),
             },