feat(plugin-chart-table): add support for temporal x-filter (apache#1281

)
zhaoyongjie · Nov 17, 2021 · 6e714f2 · 6e714f2
1 parent 4e7939f
commit 6e714f2
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 5 deletions.
diff --git a/...end/temporary_superset_ui/superset-ui/packages/superset-ui-core/src/query/types/Filter.ts b/...end/temporary_superset_ui/superset-ui/packages/superset-ui-core/src/query/types/Filter.ts
@@ -6,11 +6,14 @@ import {
   isBinaryOperator,
   isSetOperator,
 } from './Operator';
+import { TimeGranularity } from '../../time-format';
 
 interface BaseSimpleAdhocFilter {
   expressionType: 'SIMPLE';
   clause: 'WHERE' | 'HAVING';
   subject: string;
+  timeGrain?: TimeGranularity;
+  isExtra?: boolean;
 }
 
 export type UnaryAdhocFilter = BaseSimpleAdhocFilter & {

diff --git a/...tend/temporary_superset_ui/superset-ui/packages/superset-ui-core/src/query/types/Query.ts b/...tend/temporary_superset_ui/superset-ui/packages/superset-ui-core/src/query/types/Query.ts
@@ -29,6 +29,8 @@ import { TimeGranularity } from '../../time-format';
 
 export type QueryObjectFilterClause = {
   col: string;
+  grain?: TimeGranularity;
+  isExtra?: boolean;
 } & (
   | {
       op: BinaryOperator;

diff --git a/...-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/TableChart.tsx b/...-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/TableChart.tsx
@@ -22,7 +22,16 @@ import { extent as d3Extent, max as d3Max } from 'd3-array';
 import { FaSort } from '@react-icons/all-files/fa/FaSort';
 import { FaSortDown as FaSortDesc } from '@react-icons/all-files/fa/FaSortDown';
 import { FaSortUp as FaSortAsc } from '@react-icons/all-files/fa/FaSortUp';
-import { DataRecord, DataRecordValue, GenericDataType, t, tn } from '@superset-ui/core';
+import {
+  DataRecord,
+  DataRecordValue,
+  DTTM_ALIAS,
+  ensureIsArray,
+  GenericDataType,
+  getTimeFormatterForGranularity,
+  t,
+  tn,
+} from '@superset-ui/core';
 
 import { DataColumnMeta, TableChartTransformedProps } from './types';
 import DataTable, {
@@ -146,6 +155,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
   },
 ) {
   const {
+    timeGrain,
     height,
     width,
     data,
@@ -167,6 +177,10 @@ export default function TableChart<D extends DataRecord = DataRecord>(
     sticky = true, // whether to use sticky header
     columnColorFormatters,
   } = props;
+  const timestampFormatter = useCallback(
+    value => getTimeFormatterForGranularity(timeGrain)(value),
+    [timeGrain],
+  );
 
   const handleChange = useCallback(
     (filters: { [x: string]: DataRecordValue[] }) => {
@@ -176,26 +190,39 @@ export default function TableChart<D extends DataRecord = DataRecord>(
 
       const groupBy = Object.keys(filters);
       const groupByValues = Object.values(filters);
+      const labelElements: string[] = [];
+      groupBy.forEach(col => {
+        const isTimestamp = col === DTTM_ALIAS;
+        const filterValues = ensureIsArray(filters?.[col]);
+        if (filterValues.length) {
+          const valueLabels = filterValues.map(value =>
+            isTimestamp ? timestampFormatter(value) : value,
+          );
+          labelElements.push(`${valueLabels.join(', ')}`);
+        }
+      });
       setDataMask({
         extraFormData: {
           filters:
             groupBy.length === 0
               ? []
               : groupBy.map(col => {
-                  const val = filters?.[col];
-                  if (val === null || val === undefined)
+                  const val = ensureIsArray(filters?.[col]);
+                  if (!val.length)
                     return {
                       col,
                       op: 'IS NULL',
                     };
                   return {
                     col,
                     op: 'IN',
-                    val: val as (string | number | boolean)[],
+                    val: val.map(el => (el instanceof Date ? el.getTime() : el!)),
+                    grain: col === DTTM_ALIAS ? timeGrain : undefined,
                   };
                 }),
         },
         filterState: {
+          label: labelElements.join(', '),
           value: groupByValues.length ? groupByValues : null,
           filters: filters && Object.keys(filters).length ? filters : null,
         },

diff --git a/...ontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/transformProps.ts b/...ontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/transformProps.ts
@@ -206,6 +206,7 @@ const transformProps = (chartProps: TableChartProps): TableChartTransformedProps
     show_totals: showTotals,
     conditional_formatting: conditionalFormatting,
   } = formData;
+  const timeGrain = extractTimegrain(formData);
 
   const [metrics, percentMetrics, columns] = processColumns(chartProps);
 
@@ -249,6 +250,7 @@ const transformProps = (chartProps: TableChartProps): TableChartTransformedProps
     emitFilter,
     onChangeFilter,
     columnColorFormatters,
+    timeGrain,
   };
 };
 

diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/types.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/types.ts
@@ -83,6 +83,7 @@ export interface TableChartProps extends ChartProps {
 }
 
 export interface TableChartTransformedProps<D extends DataRecord = DataRecord> {
+  timeGrain?: TimeGranularity;
   height: number;
   width: number;
   rowCount?: number;

diff --git a/...mporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/utils/DateWithFormatter.ts b/...mporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/utils/DateWithFormatter.ts
@@ -31,7 +31,10 @@ export default class DateWithFormatter extends Date {
 
   constructor(
     input: DataRecordValue,
-    { formatter = String, forceUTC = true }: { formatter?: TimeFormatFunction; forceUTC?: boolean },
+    {
+      formatter = String,
+      forceUTC = true,
+    }: { formatter?: TimeFormatFunction; forceUTC?: boolean } = {},
   ) {
     let value = input;
     // assuming timestamps without a timezone is in UTC time