refactor: create echarts query section (#20445)

superset-frontend/packages/superset-ui-chart-controls/src/sections/echartsTimeSeriesQuery.tsx

@@ -0,0 +1,59 @@
+/**
+ * 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 {
+  ContributionType,
+  FeatureFlag,
+  isFeatureEnabled,
+  t,
+} from '@superset-ui/core';
+import { ControlPanelSectionConfig } from '../types';
+import { emitFilterControl } from '../shared-controls/emitFilterControl';
+
+export const echartsTimeSeriesQuery: ControlPanelSectionConfig = {
+  label: t('Query'),
+  expanded: true,
+  controlSetRows: [
+    [isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) ? 'x_axis' : null],
+    ['metrics'],
+    ['groupby'],
+    [
+      {
+        name: 'contributionMode',
+        config: {
+          type: 'SelectControl',
+          label: t('Contribution Mode'),
+          default: null,
+          choices: [
+            [null, 'None'],
+            [ContributionType.Row, 'Row'],
+            [ContributionType.Column, 'Series'],
+          ],
+          description: t('Calculate contribution per series or row'),
+        },
+      },
+    ],
+    ['adhoc_filters'],
+    emitFilterControl,
+    ['limit'],
+    ['timeseries_limit_metric'],
+    ['order_desc'],
+    ['row_limit'],
+    ['truncate_metric'],
+  ],
+};

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

@@ -22,3 +22,4 @@ export * from './advancedAnalytics';
 export * from './annotationsAndLayers';
 export * from './forecastInterval';
 export * from './chartTitle';
+export * from './echartsTimeSeriesQuery';

superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/constants.tsx

@@ -0,0 +1,48 @@
+/**
+ * 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 {
+  FeatureFlag,
+  isFeatureEnabled,
+  t,
+  validateNonEmpty,
+} from '@superset-ui/core';
+import { ControlPanelState, ControlState } from '../types';
+
+export const xAxisControlConfig = {
+  label: t('X-axis'),
+  default: (
+    control: ControlState,
+    controlPanel: Partial<ControlPanelState>,
+  ) => {
+    // default to the chosen time column if x-axis is unset and the
+    // GENERIC_CHART_AXES feature flag is enabled
+    const { value } = control;
+    if (value) {
+      return value;
+    }
+    const timeColumn = controlPanel?.form_data?.granularity_sqla;
+    if (isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) && timeColumn) {
+      return timeColumn;
+    }
+    return null;
+  },
+  multi: false,
+  description: t('Dimension to use on x-axis.'),
+  validators: [validateNonEmpty],
+};

superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx

@@ -28,6 +28,7 @@ import {
 import { ExtraControlProps, SharedControlConfig, Dataset } from '../types';
 import { DATASET_TIME_COLUMN_OPTION, TIME_FILTER_LABELS } from '../constants';
 import { QUERY_TIME_COLUMN_OPTION, defineSavedMetrics } from '..';
+import { xAxisControlConfig } from './constants';
 
 export const dndGroupByControl: SharedControlConfig<'DndColumnSelect'> = {
   type: 'DndColumnSelect',
@@ -222,3 +223,8 @@ export const dnd_granularity_sqla: typeof dndGroupByControl = {
     };
   },
 };
+
+export const dnd_x_axis: SharedControlConfig<'DndColumnSelect'> = {
+  ...dndGroupByControl,
+  ...xAxisControlConfig,
+};

superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx

@@ -67,8 +67,6 @@ import {
   ExtraControlProps,
   SelectControlConfig,
   Dataset,
-  ControlState,
-  ControlPanelState,
 } from '../types';
 import { ColumnOption } from '../components/ColumnOption';
 
@@ -87,8 +85,10 @@ import {
   dndGroupByControl,
   dndSeries,
   dnd_adhoc_metric_2,
+  dnd_x_axis,
 } from './dndControls';
 import { QUERY_TIME_COLUMN_OPTION } from '..';
+import { xAxisControlConfig } from './constants';
 
 const categoricalSchemeRegistry = getCategoricalSchemeRegistry();
 const sequentialSchemeRegistry = getSequentialSchemeRegistry();
@@ -542,34 +542,15 @@ const truncate_metric: SharedControlConfig<'CheckboxControl'> = {
   description: t('Whether to truncate metrics'),
 };
 
+const x_axis: SharedControlConfig<'SelectControl', ColumnMeta> = {
+  ...groupByControl,
+  ...xAxisControlConfig,
+};
+
 const enableExploreDnd = isFeatureEnabled(
   FeatureFlag.ENABLE_EXPLORE_DRAG_AND_DROP,
 );
 
-const x_axis: SharedControlConfig = {
-  ...(enableExploreDnd ? dndGroupByControl : groupByControl),
-  label: t('X-axis'),
-  default: (
-    control: ControlState,
-    controlPanel: Partial<ControlPanelState>,
-  ) => {
-    // default to the chosen time column if x-axis is unset and the
-    // GENERIC_CHART_AXES feature flag is enabled
-    const { value } = control;
-    if (value) {
-      return value;
-    }
-    const timeColumn = controlPanel?.form_data?.granularity_sqla;
-    if (isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) && timeColumn) {
-      return timeColumn;
-    }
-    return null;
-  },
-  multi: false,
-  description: t('Dimension to use on x-axis.'),
-  validators: [validateNonEmpty],
-};
-
 const sharedControls = {
   metrics: enableExploreDnd ? dnd_adhoc_metrics : metrics,
   metric: enableExploreDnd ? dnd_adhoc_metric : metric,
@@ -605,7 +586,7 @@ const sharedControls = {
   series_limit_metric: enableExploreDnd ? dnd_sort_by : sort_by,
   legacy_order_by: enableExploreDnd ? dnd_sort_by : sort_by,
   truncate_metric,
-  x_axis,
+  x_axis: enableExploreDnd ? dnd_x_axis : x_axis,
 };
 
 export { sharedControls, dndEntity, dndColumnsControl };

superset-frontend/packages/superset-ui-core/src/query/types/Query.ts

@@ -375,4 +375,9 @@ export const testQuery: Query = {
   ],
 };
 
+export enum ContributionType {
+  Row = 'row',
+  Column = 'column',
+}
+
 export default {};

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts

@@ -26,12 +26,12 @@ import {
   ChartProps,
   ChartDataResponseResult,
   QueryFormColumn,
+  ContributionType,
 } from '@superset-ui/core';
 import {
   EchartsLegendFormData,
   EchartsTitleFormData,
   StackType,
-  EchartsTimeseriesContributionType,
   EchartsTimeseriesSeriesType,
 } from '../types';
 import {
@@ -63,8 +63,8 @@ export type EchartsMixedTimeseriesFormData = QueryFormData & {
   // types specific to Query A and Query B
   area: boolean;
   areaB: boolean;
-  contributionMode?: EchartsTimeseriesContributionType;
+  contributionMode?: ContributionType;
-  contributionModeB?: EchartsTimeseriesContributionType;
+  contributionModeB?: ContributionType;
   markerEnabled: boolean;
   markerEnabledB: boolean;
   markerSize: number;

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx

@@ -22,27 +22,21 @@ import {
   ControlPanelConfig,
   ControlPanelsContainerProps,
   D3_TIME_FORMAT_DOCS,
-  emitFilterControl,
   sections,
   sharedControls,
 } from '@superset-ui/chart-controls';
 
-import {
+import { EchartsTimeseriesSeriesType } from '../types';
-  EchartsTimeseriesContributionType,
-  EchartsTimeseriesSeriesType,
-} from '../types';
 import { DEFAULT_FORM_DATA } from '../constants';
 import {
   legendSection,
   onlyTotalControl,
   showValueControl,
   richTooltipSection,
-  xAxisControl,
 } from '../../controls';
 import { AreaChartExtraControlsOptions } from '../../constants';
 
 const {
-  contributionMode,
   logAxis,
   markerEnabled,
   markerSize,
@@ -58,38 +52,7 @@ const {
 const config: ControlPanelConfig = {
   controlPanelSections: [
     sections.legacyTimeseriesTime,
-    {
+    sections.echartsTimeSeriesQuery,
-      label: t('Query'),
-      expanded: true,
-      controlSetRows: [
-        [xAxisControl],
-        ['metrics'],
-        ['groupby'],
-        [
-          {
-            name: 'contributionMode',
-            config: {
-              type: 'SelectControl',
-              label: t('Contribution Mode'),
-              default: contributionMode,
-              choices: [
-                [null, 'None'],
-                [EchartsTimeseriesContributionType.Row, 'Row'],
-                [EchartsTimeseriesContributionType.Column, 'Series'],
-              ],
-              description: t('Calculate contribution per series or row'),
-            },
-          },
-        ],
-        ['adhoc_filters'],
-        emitFilterControl,
-        ['limit'],
-        ['timeseries_limit_metric'],
-        ['order_desc'],
-        ['row_limit'],
-        ['truncate_metric'],
-      ],
-    },
     sections.advancedAnalyticsControls,
     sections.annotationsAndLayersControls,
     sections.forecastIntervalControls,

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx

@@ -24,26 +24,20 @@ import {
   ControlSetRow,
   ControlStateMapping,
   D3_TIME_FORMAT_DOCS,
-  emitFilterControl,
   formatSelectOptions,
   sections,
   sharedControls,
 } from '@superset-ui/chart-controls';
 
-import {
+import { OrientationType } from '../../types';
-  EchartsTimeseriesContributionType,
-  OrientationType,
-} from '../../types';
 import { DEFAULT_FORM_DATA } from '../../constants';
 import {
   legendSection,
   richTooltipSection,
   showValueSection,
-  xAxisControl,
 } from '../../../controls';
 
 const {
-  contributionMode,
   logAxis,
   minorSplitLine,
   rowLimit,
@@ -265,38 +259,7 @@ function createAxisControl(axis: 'x' | 'y'): ControlSetRow[] {
 const config: ControlPanelConfig = {
   controlPanelSections: [
     sections.legacyTimeseriesTime,
-    {
+    sections.echartsTimeSeriesQuery,
-      label: t('Query'),
-      expanded: true,
-      controlSetRows: [
-        [xAxisControl],
-        ['metrics'],
-        ['groupby'],
-        [
-          {
-            name: 'contributionMode',
-            config: {
-              type: 'SelectControl',
-              label: t('Contribution Mode'),
-              default: contributionMode,
-              choices: [
-                [null, 'None'],
-                [EchartsTimeseriesContributionType.Row, 'Row'],
-                [EchartsTimeseriesContributionType.Column, 'Series'],
-              ],
-              description: t('Calculate contribution per series or row'),
-            },
-          },
-        ],
-        ['adhoc_filters'],
-        emitFilterControl,
-        ['limit'],
-        ['timeseries_limit_metric'],
-        ['order_desc'],
-        ['row_limit'],
-        ['truncate_metric'],
-      ],
-    },
     sections.advancedAnalyticsControls,
     sections.annotationsAndLayersControls,
     sections.forecastIntervalControls,

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/controlPanel.tsx

@@ -24,24 +24,18 @@ import {
   D3_TIME_FORMAT_DOCS,
   sections,
   sharedControls,
-  emitFilterControl,
 } from '@superset-ui/chart-controls';
 
-import {
+import { EchartsTimeseriesSeriesType } from '../../types';
-  EchartsTimeseriesContributionType,
-  EchartsTimeseriesSeriesType,
-} from '../../types';
 import { DEFAULT_FORM_DATA } from '../../constants';
 import {
   legendSection,
   richTooltipSection,
   showValueSection,
-  xAxisControl,
 } from '../../../controls';
 
 const {
   area,
-  contributionMode,
   logAxis,
   markerEnabled,
   markerSize,
@@ -57,38 +51,7 @@ const {
 const config: ControlPanelConfig = {
   controlPanelSections: [
     sections.legacyTimeseriesTime,
-    {
+    sections.echartsTimeSeriesQuery,
-      label: t('Query'),
-      expanded: true,
-      controlSetRows: [
-        [xAxisControl],
-        ['metrics'],
-        ['groupby'],
-        [
-          {
-            name: 'contributionMode',
-            config: {
-              type: 'SelectControl',
-              label: t('Contribution Mode'),
-              default: contributionMode,
-              choices: [
-                [null, 'None'],
-                [EchartsTimeseriesContributionType.Row, 'Row'],
-                [EchartsTimeseriesContributionType.Column, 'Series'],
-              ],
-              description: t('Calculate contribution per series or row'),
-            },
-          },
-        ],
-        ['adhoc_filters'],
-        emitFilterControl,
-        ['limit'],
-        ['timeseries_limit_metric'],
-        ['order_desc'],
-        ['row_limit'],
-        ['truncate_metric'],
-      ],
-    },
     sections.advancedAnalyticsControls,
     sections.annotationsAndLayersControls,
     sections.forecastIntervalControls,

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx

@@ -22,7 +22,6 @@ import {
   ControlPanelConfig,
   ControlPanelsContainerProps,
   D3_TIME_FORMAT_DOCS,
-  emitFilterControl,
   sections,
   sharedControls,
 } from '@superset-ui/chart-controls';
@@ -32,7 +31,6 @@ import {
   legendSection,
   richTooltipSection,
   showValueSection,
-  xAxisControl,
 } from '../../../controls';
 
 const {
@@ -49,22 +47,7 @@ const {
 const config: ControlPanelConfig = {
   controlPanelSections: [
     sections.legacyTimeseriesTime,
-    {
+    sections.echartsTimeSeriesQuery,
-      label: t('Query'),
-      expanded: true,
-      controlSetRows: [
-        [xAxisControl],
-        ['metrics'],
-        ['groupby'],
-        ['adhoc_filters'],
-        emitFilterControl,
-        ['limit'],
-        ['timeseries_limit_metric'],
-        ['order_desc'],
-        ['row_limit'],
-        ['truncate_metric'],
-      ],
-    },
     sections.advancedAnalyticsControls,
     sections.annotationsAndLayersControls,
     sections.forecastIntervalControls,

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/controlPanel.tsx

@@ -22,22 +22,18 @@ import {
   ControlPanelConfig,
   ControlPanelsContainerProps,
   D3_TIME_FORMAT_DOCS,
-  emitFilterControl,
   sections,
   sharedControls,
 } from '@superset-ui/chart-controls';
 
-import { EchartsTimeseriesContributionType } from '../../types';
 import { DEFAULT_FORM_DATA } from '../../constants';
 import {
   legendSection,
   richTooltipSection,
   showValueSectionWithoutStack,
-  xAxisControl,
 } from '../../../controls';
 
 const {
-  contributionMode,
   logAxis,
   markerEnabled,
   markerSize,
@@ -51,38 +47,7 @@ const {
 const config: ControlPanelConfig = {
   controlPanelSections: [
     sections.legacyTimeseriesTime,
-    {
+    sections.echartsTimeSeriesQuery,
-      label: t('Query'),
-      expanded: true,
-      controlSetRows: [
-        [xAxisControl],
-        ['metrics'],
-        ['groupby'],
-        [
-          {
-            name: 'contributionMode',
-            config: {
-              type: 'SelectControl',
-              label: t('Contribution Mode'),
-              default: contributionMode,
-              choices: [
-                [null, 'None'],
-                [EchartsTimeseriesContributionType.Row, 'Row'],
-                [EchartsTimeseriesContributionType.Column, 'Series'],
-              ],
-              description: t('Calculate contribution per series or row'),
-            },
-          },
-        ],
-        ['adhoc_filters'],
-        emitFilterControl,
-        ['limit'],
-        ['timeseries_limit_metric'],
-        ['order_desc'],
-        ['row_limit'],
-        ['truncate_metric'],
-      ],
-    },
     sections.advancedAnalyticsControls,
     sections.annotationsAndLayersControls,
     sections.forecastIntervalControls,

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx

@@ -24,24 +24,18 @@ import {
   D3_TIME_FORMAT_DOCS,
   sections,
   sharedControls,
-  emitFilterControl,
 } from '@superset-ui/chart-controls';
 
-import {
+import { EchartsTimeseriesSeriesType } from '../../types';
-  EchartsTimeseriesContributionType,
-  EchartsTimeseriesSeriesType,
-} from '../../types';
 import { DEFAULT_FORM_DATA } from '../constants';
 import {
   legendSection,
   richTooltipSection,
   showValueSection,
-  xAxisControl,
 } from '../../controls';
 
 const {
   area,
-  contributionMode,
   logAxis,
   markerEnabled,
   markerSize,
@@ -56,38 +50,7 @@ const {
 const config: ControlPanelConfig = {
   controlPanelSections: [
     sections.legacyTimeseriesTime,
-    {
+    sections.echartsTimeSeriesQuery,
-      label: t('Query'),
-      expanded: true,
-      controlSetRows: [
-        [xAxisControl],
-        ['metrics'],
-        ['groupby'],
-        [
-          {
-            name: 'contributionMode',
-            config: {
-              type: 'SelectControl',
-              label: t('Contribution Mode'),
-              default: contributionMode,
-              choices: [
-                [null, 'None'],
-                [EchartsTimeseriesContributionType.Row, 'Row'],
-                [EchartsTimeseriesContributionType.Column, 'Series'],
-              ],
-              description: t('Calculate contribution per series or row'),
-            },
-          },
-        ],
-        ['adhoc_filters'],
-        emitFilterControl,
-        ['limit'],
-        ['timeseries_limit_metric'],
-        ['order_desc'],
-        ['row_limit'],
-        ['truncate_metric'],
-      ],
-    },
     sections.advancedAnalyticsControls,
     sections.annotationsAndLayersControls,
     sections.forecastIntervalControls,

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts

@@ -23,6 +23,7 @@ import {
   QueryFormColumn,
   QueryFormData,
   TimeGranularity,
+  ContributionType,
 } from '@superset-ui/core';
 import {
   EchartsLegendFormData,
@@ -31,11 +32,6 @@ import {
   StackType,
 } from '../types';
 
-export enum EchartsTimeseriesContributionType {
-  Row = 'row',
-  Column = 'column',
-}
-
 export enum OrientationType {
   vertical = 'vertical',
   horizontal = 'horizontal',
@@ -55,7 +51,7 @@ export type EchartsTimeseriesFormData = QueryFormData & {
   annotationLayers: AnnotationLayer[];
   area: boolean;
   colorScheme?: string;
-  contributionMode?: EchartsTimeseriesContributionType;
+  contributionMode?: ContributionType;
   forecastEnabled: boolean;
   forecastPeriods: number;
   forecastInterval: number;

superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { FeatureFlag, isFeatureEnabled, t } from '@superset-ui/core';
+import { t } from '@superset-ui/core';
 import {
   ControlPanelsContainerProps,
   ControlSetItem,
@@ -138,10 +138,6 @@ export const onlyTotalControl: ControlSetItem = {
   },
 };
 
-export const xAxisControl = isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES)
-  ? 'x_axis'
-  : null;
-
 const percentageThresholdControl: ControlSetItem = {
   name: 'percentage_threshold',
   config: {

superset-frontend/src/explore/controlUtils/standardizedFormData.test.tsx

@@ -25,7 +25,6 @@ import {
   sharedControls,
   publicControls,
 } from './standardizedFormData';
-import { xAxisControl } from '../../../plugins/plugin-chart-echarts/src/controls';
 
 describe('should collect control values and create SFD', () => {
   const sharedControlsFormData = {};
@@ -66,7 +65,7 @@ describe('should collect control values and create SFD', () => {
         },
         {
           label: 'axis column',
-          controlSetRows: [[xAxisControl]],
+          controlSetRows: [['x_axis']],
         },
       ],
     });
@@ -79,7 +78,7 @@ describe('should collect control values and create SFD', () => {
         },
         {
           label: 'axis column',
-          controlSetRows: [[xAxisControl]],
+          controlSetRows: [['x_axis']],
         },
       ],
       denormalizeFormData: (formData: QueryFormData) => ({