feat(legacy-plugin-chart-pivot-table): add support for timestamp form…

…at (#734) * feat(legacy-plugin-chart-pivot-table): add support for timestamp format * add @superset-ui/time-format to deps * add granularity formatter and apply conditional date formatting to cells * flip if order
apache · Nov 26, 2021 · baf2b68 · baf2b68
1 parent 86eedab
commit baf2b68
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 26 deletions.
diff --git a/...nd/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/package.json b/...nd/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/package.json
@@ -36,6 +36,7 @@
     "@superset-ui/chart": "^0.14.0",
     "@superset-ui/chart-controls": "^0.14.3",
     "@superset-ui/number-format": "^0.14.0",
+    "@superset-ui/time-format": "^0.14.9",
     "@superset-ui/translation": "^0.14.0"
   }
 }
diff --git a/...mporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/src/PivotTable.js b/...mporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/src/PivotTable.js
@@ -20,6 +20,11 @@
 import dt from 'datatables.net-bs';
 import PropTypes from 'prop-types';
 import { formatNumber } from '@superset-ui/number-format';
+import {
+  getTimeFormatter,
+  getTimeFormatterForGranularity,
+  smartDateFormatter,
+} from '@superset-ui/time-format';
 import fixTableHeight from './utils/fixTableHeight';
 import 'datatables.net-bs/css/dataTables.bootstrap.css';
 
@@ -44,25 +49,53 @@ const propTypes = {
 };
 
 function PivotTable(element, props) {
-  const { data, height, columnFormats, numberFormat, numGroups, verboseMap } = props;
+  const {
+    columnFormats,
+    data,
+    dateFormat,
+    granularity,
+    height,
+    numberFormat,
+    numGroups,
+    verboseMap,
+  } = props;
 
   const { html, columns } = data;
   const container = element;
   const $container = $(element);
+  let dateFormatter;
+
+  if (dateFormat === smartDateFormatter.id && granularity) {
+    dateFormatter = getTimeFormatterForGranularity(granularity);
+  } else if (dateFormat) {
+    dateFormatter = getTimeFormatter(dateFormat);
+  } else {
+    dateFormatter = String;
+  }
 
   // queryData data is a string of html with a single table element
   container.innerHTML = html;
 
   const cols = Array.isArray(columns[0]) ? columns.map(col => col[0]) : columns;
+  // regex to parse dates
+  const dateRegex = /^__timestamp:(-?\d*\.?\d*)$/;
 
   // jQuery hack to set verbose names in headers
   // eslint-disable-next-line func-name-matching
   const replaceCell = function replace() {
     const s = $(this)[0].textContent;
-    $(this)[0].textContent = verboseMap[s] || s;
+    const regexMatch = dateRegex.exec(s);
+    let cellValue;
+    if (regexMatch) {
+      const date = new Date(parseFloat(regexMatch[1]));
+      cellValue = dateFormatter(date);
+    } else {
+      cellValue = verboseMap[s] || s;
+    }
+    $(this)[0].textContent = cellValue;
   };
-  $container.find('thead tr:first th').each(replaceCell);
-  $container.find('thead tr th:first-child').each(replaceCell);
+  $container.find('thead tr th').each(replaceCell);
+  $container.find('tbody tr th').each(replaceCell);
 
   // jQuery hack to format number
   $container.find('tbody tr').each(function eachRow() {
@@ -72,9 +105,17 @@ function PivotTable(element, props) {
         const metric = cols[i];
         const format = columnFormats[metric] || numberFormat || '.3s';
         const tdText = $(this)[0].textContent;
-        if (!Number.isNaN(parseFloat(tdText))) {
-          $(this)[0].textContent = formatNumber(format, tdText);
-          $(this).attr('data-sort', tdText);
+        const parsedValue = parseFloat(tdText);
+        if (Number.isNaN(parsedValue)) {
+          const regexMatch = dateRegex.exec(tdText);
+          if (regexMatch) {
+            const date = new Date(parseFloat(regexMatch[1]));
+            $(this)[0].textContent = dateFormatter(date);
+            $(this).attr('data-sort', date);
+          }
+        } else {
+          $(this)[0].textContent = formatNumber(format, parsedValue);
+          $(this).attr('data-sort', parsedValue);
         }
       });
   });

diff --git a/...orary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/src/controlPanel.js b/...orary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/src/controlPanel.js
@@ -21,6 +21,7 @@ import {
   D3_FORMAT_OPTIONS,
   D3_FORMAT_DOCS,
   formatSelectOptions,
+  D3_TIME_FORMAT_OPTIONS,
 } from '@superset-ui/chart-controls';
 
 export default {
@@ -54,30 +55,18 @@ export default {
               ),
             },
           },
+          null,
+        ],
+        [
           {
             name: 'pivot_margins',
             config: {
               type: 'CheckboxControl',
               label: t('Show totals'),
-              renderTrigger: false,
               default: true,
               description: t('Display total row/column'),
             },
           },
-        ],
-        [
-          {
-            name: 'number_format',
-            config: {
-              type: 'SelectControl',
-              freeForm: true,
-              label: t('Number format'),
-              renderTrigger: true,
-              default: 'SMART_NUMBER',
-              choices: D3_FORMAT_OPTIONS,
-              description: D3_FORMAT_DOCS,
-            },
-          },
           {
             name: 'combine_metric',
             config: {
@@ -104,6 +93,40 @@ export default {
         ],
       ],
     },
+    {
+      label: t('Options'),
+      expanded: true,
+      controlSetRows: [
+        [
+          {
+            name: 'number_format',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              label: t('Number format'),
+              renderTrigger: true,
+              default: 'SMART_NUMBER',
+              choices: D3_FORMAT_OPTIONS,
+              description: D3_FORMAT_DOCS,
+            },
+          },
+        ],
+        [
+          {
+            name: 'date_format',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              label: t('Date format'),
+              renderTrigger: true,
+              choices: D3_TIME_FORMAT_OPTIONS,
+              default: 'smart_date',
+              description: D3_FORMAT_DOCS,
+            },
+          },
+        ],
+      ],
+    },
   ],
   controlOverrides: {
     groupby: { includeTime: true },

diff --git a/...ary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/src/transformProps.js b/...ary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/src/transformProps.js
@@ -18,15 +18,17 @@
  */
 export default function transformProps(chartProps) {
   const { height, datasource, formData, queryData } = chartProps;
-  const { groupby, numberFormat } = formData;
+  const { timeGrainSqla, groupby, numberFormat, dateFormat } = formData;
   const { columnFormats, verboseMap } = datasource;
 
   return {
-    height,
-    data: queryData.data,
     columnFormats,
-    numGroups: groupby.length,
+    data: queryData.data,
+    dateFormat,
+    granularity: timeGrainSqla,
+    height,
     numberFormat,
+    numGroups: groupby.length,
     verboseMap,
   };
 }