mirror of
https://github.com/apache/superset.git
synced 2024-09-18 19:49:37 -04:00
fix(plugin-chart-table): sort and search time column (#669)
This commit is contained in:
parent
18dfdd2a5a
commit
142544cd44
@ -55,7 +55,8 @@ export default styled.div`
|
||||
|
||||
.dt-pagination {
|
||||
text-align: right;
|
||||
margin-top: 0.5em;
|
||||
/* use padding instead of margin so clientHeight can capture it */
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
.dt-pagination .pagination {
|
||||
margin: 0;
|
||||
|
@ -17,21 +17,22 @@
|
||||
* under the License.
|
||||
*/
|
||||
import memoizeOne from 'memoize-one';
|
||||
import { DataRecord, DataRecordValue } from '@superset-ui/chart';
|
||||
import { DataRecord } from '@superset-ui/chart';
|
||||
import { QueryFormDataMetric } from '@superset-ui/query';
|
||||
import { getNumberFormatter, NumberFormats } from '@superset-ui/number-format';
|
||||
import {
|
||||
getTimeFormatter,
|
||||
smartDateFormatter,
|
||||
getTimeFormatterForGranularity,
|
||||
TimeFormatter,
|
||||
} from '@superset-ui/time-format';
|
||||
|
||||
import isEqualArray from './utils/isEqualArray';
|
||||
import DateWithFormatter from './utils/DateWithFormatter';
|
||||
import { TableChartProps, TableChartTransformedProps, DataType, DataColumnMeta } from './types';
|
||||
|
||||
const { PERCENT_3_POINT } = NumberFormats;
|
||||
const TIME_COLUMN = '__timestamp';
|
||||
const toString = (x: DataRecordValue) => String(x);
|
||||
|
||||
/**
|
||||
* Consolidate list of metrics to string, identified by its unique identifier
|
||||
@ -49,7 +50,6 @@ function isTimeColumn(key: string) {
|
||||
}
|
||||
|
||||
const REGEXP_DATETIME = /^\d{4}-[01]\d-[03]\d/;
|
||||
const REGEXP_TIMESTAMP_NO_TIMEZONE = /T(\d{2}:){2}\d{2}$/;
|
||||
function isTimeType(key: string, data: DataRecord[] = []) {
|
||||
return (
|
||||
isTimeColumn(key) ||
|
||||
@ -64,22 +64,27 @@ function isNumeric(key: string, data: DataRecord[] = []) {
|
||||
return data.every(x => x[key] === null || x[key] === undefined || typeof x[key] === 'number');
|
||||
}
|
||||
|
||||
const processDataRecords = memoizeOne(function processDataRecords(data: DataRecord[] | undefined) {
|
||||
if (!data || !data[0] || !(TIME_COLUMN in data[0])) {
|
||||
const processDataRecords = memoizeOne(function processDataRecords(
|
||||
data: DataRecord[] | undefined,
|
||||
columns: DataColumnMeta[],
|
||||
) {
|
||||
if (!data || !data[0]) {
|
||||
return data || [];
|
||||
}
|
||||
return data.map(x => {
|
||||
const datum: typeof x = {};
|
||||
Object.entries(x).forEach(([key, value]) => {
|
||||
// force UTC time for all timestamps without a timezone
|
||||
if (typeof value === 'string' && REGEXP_TIMESTAMP_NO_TIMEZONE.test(value)) {
|
||||
datum[key] = `${value}Z`;
|
||||
} else {
|
||||
datum[key] = value;
|
||||
}
|
||||
const timeColumns = columns.filter(column => column.dataType === DataType.DateTime);
|
||||
|
||||
if (timeColumns.length > 0) {
|
||||
return data.map(x => {
|
||||
const datum = { ...x };
|
||||
timeColumns.forEach(({ key, formatter }) => {
|
||||
// Convert datetime with a custom date class so we can use `String(...)`
|
||||
// formatted value for global search, and `date.getTime()` for sorting.
|
||||
datum[key] = new DateWithFormatter(x[key], { formatter: formatter as TimeFormatter });
|
||||
});
|
||||
return datum;
|
||||
});
|
||||
return datum;
|
||||
});
|
||||
}
|
||||
return data;
|
||||
});
|
||||
|
||||
const isEqualColumns = <T extends TableChartProps[]>(propsA: T, propsB: T) => {
|
||||
@ -141,7 +146,7 @@ const processColumns = memoizeOne(function processColumns(props: TableChartProps
|
||||
} else {
|
||||
// return the identity string when datasource level formatter is not set
|
||||
// and table timestamp format is set to Adaptive Formatting
|
||||
formatter = toString;
|
||||
formatter = String;
|
||||
}
|
||||
}
|
||||
dataType = DataType.DateTime;
|
||||
@ -205,8 +210,8 @@ export default function transformProps(chartProps: TableChartProps): TableChartT
|
||||
orderDesc: sortDesc = false,
|
||||
} = formData;
|
||||
|
||||
const data = processDataRecords(queryData?.data?.records);
|
||||
const [metrics, percentMetrics, columns] = processColumns(chartProps);
|
||||
const data = processDataRecords(queryData?.data?.records, columns);
|
||||
|
||||
return {
|
||||
height,
|
||||
|
@ -0,0 +1,55 @@
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { DataRecordValue } from '@superset-ui/chart';
|
||||
import { TimeFormatFunction } from '@superset-ui/time-format';
|
||||
|
||||
const REGEXP_TIMESTAMP_NO_TIMEZONE = /T(\d{2}:){2}\d{2}$/;
|
||||
|
||||
/**
|
||||
* Extended Date object with a custom formatter, and retains the original input
|
||||
* when the formatter is simple `String(..)`.
|
||||
*/
|
||||
export default class DateWithFormatter extends Date {
|
||||
formatter: TimeFormatFunction;
|
||||
|
||||
input: DataRecordValue;
|
||||
|
||||
constructor(
|
||||
input: DataRecordValue,
|
||||
{ formatter = String, forceUTC = true }: { formatter?: TimeFormatFunction; forceUTC?: boolean },
|
||||
) {
|
||||
let value = input;
|
||||
// assuming timestamps without a timezone is in UTC time
|
||||
if (forceUTC && typeof value === 'string' && REGEXP_TIMESTAMP_NO_TIMEZONE.test(value)) {
|
||||
value = `${value}Z`;
|
||||
}
|
||||
|
||||
super(value as string);
|
||||
|
||||
this.input = input;
|
||||
this.formatter = formatter;
|
||||
}
|
||||
|
||||
toString(): string {
|
||||
if (this.formatter === String) {
|
||||
return String(this.input);
|
||||
}
|
||||
return this.formatter ? this.formatter(this) : Date.toString.call(this);
|
||||
}
|
||||
}
|
@ -20,6 +20,7 @@ import React from 'react';
|
||||
import { mount, CommonWrapper } from 'enzyme';
|
||||
import TableChart from '../src/TableChart';
|
||||
import transformProps from '../src/transformProps';
|
||||
import DateWithFormatter from '../src/utils/DateWithFormatter';
|
||||
import testData from './testData';
|
||||
|
||||
describe('plugin-chart-table', () => {
|
||||
@ -50,6 +51,12 @@ describe('plugin-chart-table', () => {
|
||||
}).columns,
|
||||
);
|
||||
});
|
||||
it('should format timestamp', () => {
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
const parsedDate = transformProps(testData.basic).data[0].__timestamp as DateWithFormatter;
|
||||
expect(String(parsedDate)).toBe('2020-01-01 12:34:56');
|
||||
expect(parsedDate.getTime()).toBe(1577882096000);
|
||||
});
|
||||
});
|
||||
|
||||
describe('TableChart', () => {
|
||||
|
@ -3592,11 +3592,6 @@
|
||||
conventional-changelog-cli "^2.0.12"
|
||||
cz-conventional-changelog "^2.1.0"
|
||||
|
||||
"@superset-ui/dimension@^0.13.21":
|
||||
version "0.13.27"
|
||||
resolved "https://registry.yarnpkg.com/@superset-ui/dimension/-/dimension-0.13.27.tgz#92b24cdca8fd19ea4439102539a92719fdf2c8f8"
|
||||
integrity sha512-RuXzoMVel+UEN9WOG3IoAJxXVLO/KjIx/RzA15A0Z+U1TKXqiOMtxlI37o44QW/2p00q8hcEuwWnhPc49vHVtg==
|
||||
|
||||
"@superset-ui/legacy-plugin-chart-word-cloud@^0.11.15":
|
||||
version "0.11.15"
|
||||
resolved "https://registry.yarnpkg.com/@superset-ui/legacy-plugin-chart-word-cloud/-/legacy-plugin-chart-word-cloud-0.11.15.tgz#70a146aaf3cf1977c29086c069f0216325f092b2"
|
||||
@ -3606,25 +3601,6 @@
|
||||
d3-cloud "^1.2.1"
|
||||
prop-types "^15.6.2"
|
||||
|
||||
"@superset-ui/number-format@^0.13.21":
|
||||
version "0.13.27"
|
||||
resolved "https://registry.yarnpkg.com/@superset-ui/number-format/-/number-format-0.13.27.tgz#215e33cb78a130a16f82a44c9f5a0b325a246514"
|
||||
integrity sha512-9tddw8sZZkas9C3hWl5hvv3ZG2EAfDh8lmR0yh1YpTc5s6ME+JaJ3hvTyRw8O20i17khtx/VMQdoM8cjhiZIxg==
|
||||
dependencies:
|
||||
"@types/d3-format" "^1.3.0"
|
||||
d3-format "^1.3.2"
|
||||
pretty-ms "^7.0.0"
|
||||
|
||||
"@superset-ui/time-format@^0.13.22":
|
||||
version "0.13.27"
|
||||
resolved "https://registry.yarnpkg.com/@superset-ui/time-format/-/time-format-0.13.27.tgz#7b1c449725b0c24605a745f2e51aec7106ec2737"
|
||||
integrity sha512-3TSg0CO45Y4mkcqZjddGUqyNzUKpD3jcxtJLrnICk2BmuL9VPdQf2DIGqfjv+CGJ3c3ajAWePvKkv9ghn+QlIA==
|
||||
dependencies:
|
||||
"@types/d3-time" "^1.0.9"
|
||||
"@types/d3-time-format" "^2.1.0"
|
||||
d3-time "^1.0.10"
|
||||
d3-time-format "^2.2.0"
|
||||
|
||||
"@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
|
||||
version "4.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
|
||||
@ -13315,12 +13291,7 @@ modify-values@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
|
||||
integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
|
||||
|
||||
moment@^2.15.1, moment@^2.20.1, moment@^2.24.0:
|
||||
version "2.27.0"
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.27.0.tgz#8bff4e3e26a236220dfe3e36de756b6ebaa0105d"
|
||||
integrity sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ==
|
||||
|
||||
moment@^2.26.0:
|
||||
moment@^2.15.1, moment@^2.20.1, moment@^2.24.0, moment@^2.26.0:
|
||||
version "2.27.0"
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.27.0.tgz#8bff4e3e26a236220dfe3e36de756b6ebaa0105d"
|
||||
integrity sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ==
|
||||
|
Loading…
Reference in New Issue
Block a user