diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/package.json b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/package.json index 64d1bed063b8..ce0da7c44612 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/package.json +++ b/superset-frontend/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/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/src/PivotTable.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/src/PivotTable.js index b05bca99e487..ec0f92e4dec7 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/src/PivotTable.js +++ b/superset-frontend/temporary_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/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/src/controlPanel.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/src/controlPanel.js index ea02baa3bf46..bb3f7d3a52db 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/src/controlPanel.js +++ b/superset-frontend/temporary_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/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/src/transformProps.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/src/transformProps.js index b5475dd690c4..2f36fa5066b8 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-pivot-table/src/transformProps.js +++ b/superset-frontend/temporary_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, }; }