mirror of
https://github.com/apache/superset.git
synced 2024-09-19 20:19:37 -04:00
feat(legacy-plugin-chart-pivot-table): add support for timestamp format (#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
This commit is contained in:
parent
86eedab4d0
commit
baf2b68356
@ -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"
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
@ -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 },
|
||||
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user