refactor(plugin-chart-table): migrate to API v1

packages/superset-ui-chart-controls/src/index.ts

@@ -32,3 +32,7 @@ export * from './components/MetricOption';
 // React control components
 export * from './components/RadioButtonControl';
 export * from './types';
+
+// re-export * from pure types file may cause
+// `module undefined` error in babel/webpack,
+export { default as __hack__ } from './types';

packages/superset-ui-chart-controls/src/types.ts

@@ -325,3 +325,5 @@ export type ControlOverrides = {
 export type SectionOverrides = {
   [P in SharedSectionAlias]?: Partial<ControlPanelSectionConfig>;
 };
+
+export default {};

packages/superset-ui-core/src/chart/index.ts

@@ -15,6 +15,6 @@ export { default as getChartTransformPropsRegistry } from './registries/ChartTra
 
 export { default as ChartDataProvider } from './components/ChartDataProvider';
 
-export { SetExtraFormDataHook } from './types/Base';
+export * from './types/Base';
 export * from './types/TransformFunction';
 export * from './types/QueryResponse';

packages/superset-ui-core/src/chart/models/ChartPlugin.ts

@@ -8,6 +8,7 @@ import getChartControlPanelRegistry from '../registries/ChartControlPanelRegistr
 import getChartTransformPropsRegistry from '../registries/ChartTransformPropsRegistrySingleton';
 import { BuildQueryFunction, TransformProps } from '../types/TransformFunction';
 import { ChartControlPanel } from './ChartControlPanel';
+import { ChartProps } from '..';
 
 function IDENTITY<T>(x: T) {
   return x;
@@ -20,16 +21,19 @@ export type PromiseOrValueLoader<T> = () => PromiseOrValue<T>;
 export type ChartType = ComponentType<any>;
 type ValueOrModuleWithValue<T> = T | { default: T };
 
-interface ChartPluginConfig<T extends QueryFormData> {
+interface ChartPluginConfig<
+  FormData extends QueryFormData = QueryFormData,
+  Props extends ChartProps = ChartProps
+> {
   metadata: ChartMetadata;
   /** Use buildQuery for immediate value. For lazy-loading, use loadBuildQuery. */
-  buildQuery?: BuildQueryFunction<T>;
+  buildQuery?: BuildQueryFunction<FormData>;
   /** Use loadBuildQuery for dynamic import (lazy-loading) */
-  loadBuildQuery?: PromiseOrValueLoader<ValueOrModuleWithValue<BuildQueryFunction<T>>>;
+  loadBuildQuery?: PromiseOrValueLoader<ValueOrModuleWithValue<BuildQueryFunction<FormData>>>;
   /** Use transformProps for immediate value. For lazy-loading, use loadTransformProps.  */
-  transformProps?: TransformProps;
+  transformProps?: TransformProps<Props>;
   /** Use loadTransformProps for dynamic import (lazy-loading) */
-  loadTransformProps?: PromiseOrValueLoader<ValueOrModuleWithValue<TransformProps>>;
+  loadTransformProps?: PromiseOrValueLoader<ValueOrModuleWithValue<TransformProps<Props>>>;
   /** Use Chart for immediate value. For lazy-loading, use loadChart. */
   Chart?: ChartType;
   /** Use loadChart for dynamic import (lazy-loading) */
@@ -54,18 +58,21 @@ function sanitizeLoader<T>(
   };
 }
 
-export default class ChartPlugin<T extends QueryFormData = QueryFormData> extends Plugin {
+export default class ChartPlugin<
+  FormData extends QueryFormData = QueryFormData,
+  Props extends ChartProps = ChartProps
+> extends Plugin {
   controlPanel: ChartControlPanel;
 
   metadata: ChartMetadata;
 
-  loadBuildQuery?: PromiseOrValueLoader<BuildQueryFunction<T>>;
+  loadBuildQuery?: PromiseOrValueLoader<BuildQueryFunction<FormData>>;
 
-  loadTransformProps: PromiseOrValueLoader<TransformProps>;
+  loadTransformProps: PromiseOrValueLoader<TransformProps<Props>>;
 
   loadChart: PromiseOrValueLoader<ChartType>;
 
-  constructor(config: ChartPluginConfig<T>) {
+  constructor(config: ChartPluginConfig<FormData, Props>) {
     super();
     const {
       metadata,
@@ -95,26 +102,24 @@ export default class ChartPlugin<T extends QueryFormData = QueryFormData> extend
   }
 
   register() {
-    const { key = isRequired('config.key') } = this.config;
-    getChartMetadataRegistry().registerValue(key as string, this.metadata);
-    getChartComponentRegistry().registerLoader(key as string, this.loadChart);
-    getChartControlPanelRegistry().registerValue(key as string, this.controlPanel);
-    getChartTransformPropsRegistry().registerLoader(key as string, this.loadTransformProps);
+    const key: string = this.config.key || isRequired('config.key');
+    getChartMetadataRegistry().registerValue(key, this.metadata);
+    getChartComponentRegistry().registerLoader(key, this.loadChart);
+    getChartControlPanelRegistry().registerValue(key, this.controlPanel);
+    getChartTransformPropsRegistry().registerLoader(key, this.loadTransformProps);
     if (this.loadBuildQuery) {
-      getChartBuildQueryRegistry().registerLoader(key as string, this.loadBuildQuery);
+      getChartBuildQueryRegistry().registerLoader(key, this.loadBuildQuery);
     }
-
     return this;
   }
 
   unregister() {
-    const { key = isRequired('config.key') } = this.config;
-    getChartMetadataRegistry().remove(key as string);
-    getChartComponentRegistry().remove(key as string);
-    getChartControlPanelRegistry().remove(key as string);
-    getChartTransformPropsRegistry().remove(key as string);
-    getChartBuildQueryRegistry().remove(key as string);
-
+    const key: string = this.config.key || isRequired('config.key');
+    getChartMetadataRegistry().remove(key);
+    getChartComponentRegistry().remove(key);
+    getChartControlPanelRegistry().remove(key);
+    getChartTransformPropsRegistry().remove(key);
+    getChartBuildQueryRegistry().remove(key);
     return this;
   }
 

packages/superset-ui-core/src/chart/registries/ChartTransformPropsRegistrySingleton.ts

@@ -1,7 +1,7 @@
 import { Registry, makeSingleton, OverwritePolicy } from '../..';
 import { TransformProps } from '../types/TransformFunction';
 
-class ChartTransformPropsRegistry extends Registry<TransformProps> {
+class ChartTransformPropsRegistry extends Registry<TransformProps<any>> {
   constructor() {
     super({ name: 'ChartTransformProps', overwritePolicy: OverwritePolicy.WARN });
   }

packages/superset-ui-core/src/chart/types/QueryResponse.ts

@@ -1,7 +1,7 @@
 /**
  * Types for query response
  */
-import { DataRecordValue, DataRecord } from '../../types';
+import { DataRecordValue, DataRecord, ChartDataResponseResult } from '../../types';
 import { PlainObject } from './Base';
 
 export interface TimeseriesDataRecord extends DataRecord {
@@ -13,5 +13,15 @@ export interface DataRecordFilters {
   [key: string]: DataRecordValue[];
 }
 
-// the response json from query API
-export type QueryData = PlainObject;
+/**
+ * Legacy queried data for charts. List of arbitrary dictionaries generated
+ * by `viz.py`.
+ * TODO: clean this up when all charts have been migrated to v1 API.
+ */
+export type LegacyQueryData = PlainObject;
+
+/**
+ * Ambiguous query data type. Reserved for the generic QueryFormData.
+ * Don't use this for a specific chart (since you know which API it uses already).
+ */
+export type QueryData = LegacyQueryData | ChartDataResponseResult;

packages/superset-ui-core/src/chart/types/TransformFunction.ts

@@ -1,15 +1,13 @@
 import { QueryFormData, QueryContext } from '../..';
 import ChartProps from '../models/ChartProps';
+import { PlainObject } from './Base';
 
-export interface PlainProps {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [key: string]: any;
-}
+export type PlainProps = PlainObject;
 
 type TransformFunction<Input = PlainProps, Output = PlainProps> = (x: Input) => Output;
 
 export type PreTransformProps = TransformFunction<ChartProps, ChartProps>;
-export type TransformProps = TransformFunction<ChartProps>;
+export type TransformProps<Props extends ChartProps = ChartProps> = TransformFunction<Props>;
 export type PostTransformProps = TransformFunction;
 
 export type BuildQueryFunction<T extends QueryFormData> = (formData: T) => QueryContext;

packages/superset-ui-core/src/query/buildQueryObject.ts

@@ -38,7 +38,7 @@ export default function buildQueryObject<T extends QueryFormData>(
 
   const numericRowLimit = Number(row_limit);
   const numericRowOffset = Number(row_offset);
-  const { metrics, groupby, columns } = extractQueryFields(residualFormData, queryFields);
+  const { metrics, columns } = extractQueryFields(residualFormData, queryFields);
 
   const extras = extractExtras(formData);
   const extrasAndfilters = processFilters({
@@ -54,7 +54,6 @@ export default function buildQueryObject<T extends QueryFormData>(
     ...extras,
     ...extrasAndfilters,
     annotation_layers,
-    groupby,
     columns,
     metrics,
     order_desc: typeof order_desc === 'undefined' ? true : order_desc,

packages/superset-ui-core/src/query/extractQueryFields.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { DTTM_ALIAS } from './buildQueryObject';
-import { QueryFields, QueryFieldAliases, FormDataResidual } from './types/QueryFormData';
+import { QueryFields, QueryFieldAliases, FormDataResidual, QueryMode } from './types/QueryFormData';
 
 /**
  * Extra SQL query related fields from chart form data.
@@ -34,7 +34,6 @@ export default function extractQueryFields(
   const queryFieldAliases: QueryFieldAliases = {
     /** These are predefined for backward compatibility */
     metric: 'metrics',
-    percent_metrics: 'metrics',
     metric_2: 'metrics',
     secondary_metric: 'metrics',
     x: 'metrics',
@@ -46,26 +45,45 @@ export default function extractQueryFields(
   };
   const finalQueryFields: QueryFields = {
     columns: [],
-    groupby: [],
     metrics: [],
   };
+  const { query_mode: queryMode, include_time: includeTime, ...restFormData } = formData;
 
-  Object.entries(formData).forEach(([key, value]) => {
-    const normalizedKey = queryFieldAliases[key] || key;
-    if (normalizedKey in finalQueryFields) {
-      if (normalizedKey === 'metrics') {
-        finalQueryFields[normalizedKey] = finalQueryFields[normalizedKey].concat(value);
-      } else {
-        // currently the groupby and columns field only accept pre-defined columns (string shortcut)
-        finalQueryFields[normalizedKey] = finalQueryFields[normalizedKey]
-          .concat(value)
-          .filter(x => typeof x === 'string' && x);
+  Object.entries(restFormData).forEach(([key, value]) => {
+    // ignore `null` or `undefined` value
+    if (value == null) {
+      return;
+    }
+
+    let normalizedKey: string = queryFieldAliases[key] || key;
+
+    // ignore groupby when in raw records mode
+    if (queryMode === QueryMode.raw && normalizedKey === 'groupby') {
+      return;
+    }
+    if (queryMode === QueryMode.aggregate) {
+      // ignore columns when (specifically) in aggregate mode.
+      if (normalizedKey === 'columns') {
+        return;
       }
     }
+    // groupby has been deprecated: https://github.com/apache/superset/pull/9366
+    if (normalizedKey === 'groupby') {
+      normalizedKey = 'columns';
+    }
+    if (normalizedKey === 'metrics') {
+      finalQueryFields[normalizedKey] = finalQueryFields[normalizedKey].concat(value);
+    }
+    if (normalizedKey === 'columns') {
+      // currently the columns field only accept pre-defined columns (string shortcut)
+      finalQueryFields[normalizedKey] = finalQueryFields[normalizedKey]
+        .concat(value)
+        .filter(x => typeof x === 'string' && x);
+    }
   });
 
-  if (formData.include_time && !finalQueryFields.groupby.includes(DTTM_ALIAS)) {
-    finalQueryFields.groupby.unshift(DTTM_ALIAS);
+  if (includeTime && !finalQueryFields.columns.includes(DTTM_ALIAS)) {
+    finalQueryFields.columns.unshift(DTTM_ALIAS);
   }
 
   return finalQueryFields;

packages/superset-ui-core/src/query/types/Metric.ts

@@ -43,7 +43,7 @@ export type AdhocMetric = AdhocMetricSimple | AdhocMetricSQL;
 /**
  * Select a predefined metric by its `metric_name`.
  */
-export type PredefinedMetric = string;
+export type SavedMetric = string;
 
 /**
  * Metric definition stored in datasource metadata.

packages/superset-ui-core/src/query/types/PostProcessing.ts

@@ -0,0 +1,118 @@
+import { JsonObject } from '../../connection';
+import { TimeGranularity } from '../../time-format';
+
+/**
+ * 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.
+ */
+export type NumpyFunction =
+  | 'average'
+  | 'argmin'
+  | 'argmax'
+  | 'count'
+  | 'count_nonzero'
+  | 'cumsum'
+  | 'cumprod'
+  | 'max'
+  | 'mean'
+  | 'median'
+  | 'nansum'
+  | 'nanmin'
+  | 'nanmax'
+  | 'nanmean'
+  | 'nanmedian'
+  | 'nanpercentile'
+  | 'min'
+  | 'percentile'
+  | 'prod'
+  | 'product'
+  | 'std'
+  | 'sum'
+  | 'var';
+
+interface Aggregates {
+  /**
+   * The name of the generated aggregate column.
+   */
+  [colname: string]: {
+    operator: NumpyFunction;
+    /**
+     * the name of the column to generate aggrates from.
+     */
+    column?: string;
+    options?: JsonObject;
+  };
+}
+
+export interface PostProcessingAggregation {
+  operation: 'aggregation';
+  options: {
+    groupby: string[];
+    aggregates: Aggregates;
+  };
+}
+
+export interface PostProcessingBoxplot {
+  operation: 'boxplot';
+  options: {
+    groupby: string[];
+    metrics: string[];
+    whisker_type: 'tukey' | 'min/max' | 'percentile';
+    percentiles?: [number, number];
+  };
+}
+
+export interface PostProcessingContribution {
+  operation: 'contribution';
+  options?: {
+    orientation?: 'row' | 'column';
+    columns?: string[];
+    rename_columns?: string[];
+  };
+}
+
+export interface PostProcessingPivot {
+  operation: 'pivot';
+  options: {
+    index: string[];
+    columns: string[];
+    aggregates: Aggregates;
+  };
+}
+
+export interface PostProcessingProphet {
+  operation: 'prophet';
+  options: {
+    time_grain: TimeGranularity;
+    periods: number;
+    confidence_interval: number;
+    yearly_seasonality?: boolean | number;
+    weekly_seasonality?: boolean | number;
+    daily_seasonality?: boolean | number;
+  };
+}
+
+/**
+ * Parameters for chart data postprocessing.
+ * See superset/utils/pandas_processing.py.
+ */
+export type PostProcessingRule =
+  | PostProcessingAggregation
+  | PostProcessingBoxplot
+  | PostProcessingContribution
+  | PostProcessingPivot
+  | PostProcessingProphet;