From 142544cd44aea5ad71bd08933cb2395ab246daa0 Mon Sep 17 00:00:00 2001 From: Jesse Yang Date: Tue, 7 Jul 2020 19:14:05 -0700 Subject: [PATCH] fix(plugin-chart-table): sort and search time column (#669) --- .../plugins/plugin-chart-table/src/Styles.tsx | 3 +- .../plugin-chart-table/src/transformProps.ts | 41 ++++++++------ .../src/utils/DateWithFormatter.ts | 55 +++++++++++++++++++ .../test/TableChart.test.tsx | 7 +++ .../superset-ui/yarn.lock | 31 +---------- 5 files changed, 88 insertions(+), 49 deletions(-) create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/utils/DateWithFormatter.ts diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/Styles.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/Styles.tsx index 5cea4dd5b93d..8544b3b0347f 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/Styles.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/Styles.tsx @@ -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; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/transformProps.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/transformProps.ts index 05e4b8e970b6..df7677f2fd67 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/transformProps.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/transformProps.ts @@ -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 = (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, diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/utils/DateWithFormatter.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/utils/DateWithFormatter.ts new file mode 100644 index 000000000000..b86d94696a1d --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/utils/DateWithFormatter.ts @@ -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); + } +} diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/test/TableChart.test.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/test/TableChart.test.tsx index a999f3267a1b..51704810aca1 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/test/TableChart.test.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/test/TableChart.test.tsx @@ -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', () => { diff --git a/superset-frontend/temporary_superset_ui/superset-ui/yarn.lock b/superset-frontend/temporary_superset_ui/superset-ui/yarn.lock index 0b880bc6b4ab..a31122450754 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/yarn.lock +++ b/superset-frontend/temporary_superset_ui/superset-ui/yarn.lock @@ -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==