add number format to pivot table (#2703)

* modify pivot table number format

* lint code

* lint code

* lint

* lint

* change variable name

* add number format to pivot table

* clean

* fix code climate

superset/assets/backendSync.json

@@ -1328,10 +1328,8 @@
       "type": "SelectControl",
       "freeForm": true,
       "label": "Number format",
-      "default": [
-        ".3s",
-        ".3s | 12.3k"
-      ],
+      "renderTrigger": true,
+      "default": ".3s",
       "choices": [
         [
           ".3s",

superset/assets/javascripts/explorev2/stores/controls.jsx

@@ -550,7 +550,8 @@ export const controls = {
     type: 'SelectControl',
     freeForm: true,
     label: 'Number format',
-    default: D3_TIME_FORMAT_OPTIONS[0],
+    renderTrigger: true,
+    default: '.3s',
     choices: D3_TIME_FORMAT_OPTIONS,
     description: D3_FORMAT_DOCS,
   },

superset/assets/javascripts/explorev2/stores/visTypes.js

@@ -286,6 +286,7 @@ const visTypes = {
         controlSetRows: [
           ['groupby', 'columns'],
           ['metrics', 'pandas_aggfunc'],
+          ['number_format'],
         ],
       },
     ],

superset/assets/visualizations/pivot_table.js

@@ -11,10 +11,19 @@ module.exports = function (slice, payload) {
   const container = slice.container;
   const fd = slice.formData;
   const height = container.height();
+  const numberFormat = fd.number_format;
 
   // payload data is a string of html with a single table element
   container.html(payload.data);
 
+  // format number
+  $('td').each(function () {
+    const tdText = $(this)[0].textContent;
+    if (!isNaN(tdText) && tdText !== '') {
+      $(this)[0].textContent = d3.format(numberFormat)(tdText);
+    }
+  });
+
   if (fd.groupby.length === 1) {
     // When there is only 1 group by column,
     // we use the DataTable plugin to make the header fixed.