feat(legacy-preset-chart-nvd3): add a new label type to pie chart (ap…

…ache#699)
zhaoyongjie · Nov 24, 2021 · ae85ba3 · ae85ba3
1 parent b045cff
commit ae85ba3
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/...rontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js b/...rontend/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/...emporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Pie/controlPanel.ts b/...emporary_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?'),
             },