[pie] allow formating nubmers on pie chart (#6628)

superset/assets/src/explore/controlPanels/Pie.js

@@ -16,7 +16,7 @@ export default {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
-        ['pie_label_type'],
+        ['pie_label_type', 'number_format'],
         ['donut', 'show_legend'],
         ['show_labels', 'labels_outside'],
         ['color_scheme'],
@@ -27,5 +27,11 @@ export default {
     row_limit: {
       default: 25,
     },
+    number_format: {
+      description: (
+        t('D3 format syntax: https://github.com/d3/d3-format') + ' ' +
+        t('Only applies when the "Label Type" is not set to a percentage.')
+      ),
+    },
   },
 };

superset/assets/src/visualizations/nvd3/NVD3Vis.js

@@ -6,7 +6,7 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import { t } from '@superset-ui/translation';
 import { CategoricalColorNamespace } from '@superset-ui/color';
-import { getNumberFormatter, formatNumber, NumberFormats } from '@superset-ui/number-format';
+import { getNumberFormatter, NumberFormats } from '@superset-ui/number-format';
 import { getTimeFormatter, smartDateVerboseFormatter } from '@superset-ui/time-format';
 import 'nvd3/build/nv.d3.min.css';
 
@@ -127,6 +127,7 @@ const propTypes = {
     'dual_line',
   ]),
   xAxisFormat: PropTypes.string,
+  numberFormat: PropTypes.string,
   xAxisLabel: PropTypes.string,
   xAxisShowMinMax: PropTypes.bool,
   xIsLogScale: PropTypes.bool,
@@ -213,6 +214,7 @@ function nvd3Vis(element, props) {
     useRichTooltip,
     vizType,
     xAxisFormat,
+    numberFormat,
     xAxisLabel,
     xAxisShowMinMax = false,
     xField,
@@ -264,6 +266,7 @@ function nvd3Vis(element, props) {
       isTruthy(showBrush) ||
       (showBrush === 'auto' && maxHeight >= MIN_HEIGHT_FOR_BRUSH && xTicksLayout !== '45°')
     );
+    const numberFormatter = getNumberFormatter(numberFormat);
 
     switch (vizType) {
       case 'line':
@@ -331,7 +334,7 @@ function nvd3Vis(element, props) {
       case 'pie':
         chart = nv.models.pieChart();
         colorKey = 'x';
-        chart.valueFormat(formatter);
+        chart.valueFormat(numberFormatter);
         if (isDonut) {
           chart.donut(true);
         }
@@ -341,18 +344,14 @@ function nvd3Vis(element, props) {
         chart.labelThreshold(0.05);
         chart.cornerRadius(true);
 
-        if (pieLabelType !== 'key_percent' && pieLabelType !== 'key_value') {
+        if (['key', 'value', 'percent'].indexOf(pieLabelType) >= 0) {
           chart.labelType(pieLabelType);
         } else if (pieLabelType === 'key_value') {
-          chart.labelType(d => `${d.data.x}: ${formatNumber(NumberFormats.SI, d.data.y)}`);
-        }
-
-        if (pieLabelType === 'percent' || pieLabelType === 'key_percent') {
+          chart.labelType(d => `${d.data.x}: ${numberFormatter(d.data.y)}`);
+        } else if (pieLabelType === 'key_percent') {
           const total = d3.sum(data, d => d.y);
           chart.tooltip.valueFormatter(d => `${((d / total) * 100).toFixed()}%`);
-          if (pieLabelType === 'key_percent') {
-            chart.labelType(d => `${d.data.x}: ${((d.data.y / total) * 100).toFixed()}%`);
-          }
+          chart.labelType(d => `${d.data.x}: ${((d.data.y / total) * 100).toFixed()}%`);
         }
         // Pie chart does not need top margin
         chart.margin({ top: 0 });

superset/assets/src/visualizations/nvd3/transformProps.js

@@ -45,6 +45,7 @@ export default function transformProps(chartProps) {
     xAxisFormat,
     xAxisLabel,
     xAxisShowminmax,
+    numberFormat,
     xLogScale,
     xTicksLayout,
     y,
@@ -83,6 +84,7 @@ export default function transformProps(chartProps) {
     leftMargin,
     lineInterpolation,
     maxBubbleSize: parseInt(maxBubbleSize, 10),
+    numberFormat,
     onBrushEnd: isTruthy(sendTimeRange) ? ((timeRange) => {
       onAddFilter('__time_range', timeRange, false, true);
     }) : undefined,