[pivot viz] fix formatting and verbose names (#2957)

* [pivot viz] fix formatting and verbose names

* Fixing tests

superset/assets/spec/javascripts/sqllab/QuerySearch_spec.jsx

@@ -59,9 +59,10 @@ describe('QuerySearch', () => {
   });
 
   it('refreshes queries when clicked', () => {
-    const spy = sinon.spy(QuerySearch.prototype, 'refreshQueries');
+    const search = sinon.spy(QuerySearch.prototype, 'refreshQueries');
     wrapper = shallow(<QuerySearch {...mockedProps} />);
     wrapper.find(Button).simulate('click');
-    expect(spy.called).to.equal(true);
+    /* eslint-disable no-unused-expressions */
+    expect(search.called).to.equal(true);
   });
 });

superset/assets/visualizations/pivot_table.js

@@ -2,7 +2,8 @@ import 'datatables.net';
 import dt from 'datatables.net-bs';
 import $ from 'jquery';
 import 'datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css';
-import { fixDataTableBodyHeight } from '../javascripts/modules/utils';
+
+import { d3format, fixDataTableBodyHeight } from '../javascripts/modules/utils';
 import './pivot_table.css';
 
 dt(window, $);
@@ -11,17 +12,32 @@ module.exports = function (slice, payload) {
   const container = slice.container;
   const fd = slice.formData;
   const height = container.height();
-  const numberFormat = fd.number_format;
+  let cols = payload.data.columns;
+  if (Array.isArray(cols[0])) {
+    cols = cols.map(col => col[0]);
+  }
 
   // payload data is a string of html with a single table element
-  container.html(payload.data);
+  container.html(payload.data.html);
 
-  // format number
-  $('td').each(function () {
-    const tdText = $(this)[0].textContent;
-    if (!isNaN(tdText) && tdText !== '') {
-      $(this)[0].textContent = d3.format(numberFormat)(tdText);
-    }
+  // jQuery hack to set verbose names in headers
+  const replaceCell = function () {
+    const s = $(this)[0].textContent;
+    $(this)[0].textContent = slice.datasource.verbose_map[s] || s;
+  };
+  slice.container.find('thead tr:first th').each(replaceCell);
+  slice.container.find('thead tr th:first-child').each(replaceCell);
+
+  // jQuery hack to format number
+  slice.container.find('tbody tr').each(function () {
+    $(this).find('td').each(function (i) {
+      const metric = cols[i];
+      const format = slice.datasource.column_formats[metric] || fd.number_format || '.3s';
+      const tdText = $(this)[0].textContent;
+      if (!isNaN(tdText) && tdText !== '') {
+        $(this)[0].textContent = d3format(format, tdText);
+      }
+    });
   });
 
   if (fd.groupby.length === 1) {

superset/viz.py

@@ -398,11 +398,14 @@ class PivotTableViz(BaseViz):
             aggfunc=self.form_data.get('pandas_aggfunc'),
             margins=True,
         )
-        return df.to_html(
-            na_rep='',
-            classes=(
-                "dataframe table table-striped table-bordered "
-                "table-condensed table-hover").split(" "))
+        return dict(
+            columns=list(df.columns),
+            html=df.to_html(
+                na_rep='',
+                classes=(
+                    "dataframe table table-striped table-bordered "
+                    "table-condensed table-hover").split(" ")),
+        )
 
 
 class MarkupViz(BaseViz):