Skip to content

Commit

Permalink
fix(plugin-chart-table): sort and search time column (#669)
Browse files Browse the repository at this point in the history
  • Loading branch information
ktmud authored and zhaoyongjie committed Nov 26, 2021
1 parent 18dfdd2 commit 142544c
Show file tree
Hide file tree
Showing 5 changed files with 88 additions and 49 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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) ||
Expand All @@ -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) => {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
@@ -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);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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', () => {
Expand Down
31 changes: 1 addition & 30 deletions superset-frontend/temporary_superset_ui/superset-ui/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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==
Expand Down

0 comments on commit 142544c

Please sign in to comment.