diff --git a/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx b/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx new file mode 100644 index 0000000000..a3aa3f6cf0 --- /dev/null +++ b/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx @@ -0,0 +1,72 @@ +/* eslint-disable camelcase */ +/** + * 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 { t, validateNonEmpty } from '@superset-ui/core'; +import { ExtraControlProps, SharedControlConfig } from '../types'; + +const timeColumnOption = { + verbose_name: t('Time'), + column_name: '__timestamp', + description: t('A reference to the [Time] configuration, taking granularity into account'), +}; + +export const dndGroupByControl: SharedControlConfig<'DndColumnSelectControl'> = { + type: 'DndColumnSelectControl', + label: t('Group by'), + default: [], + description: t('One or many columns to group by'), + mapStateToProps(state, { includeTime }) { + const newState: ExtraControlProps = {}; + if (state.datasource) { + const options = state.datasource.columns.filter(c => c.groupby); + if (includeTime) { + options.unshift(timeColumnOption); + } + newState.options = Object.fromEntries(options.map(option => [option.column_name, option])); + } + return newState; + }, +}; + +export const dndColumnsControl: typeof dndGroupByControl = { + ...dndGroupByControl, + label: t('Columns'), + description: t('One or many columns to pivot as columns'), +}; + +export const dndSeries: typeof dndGroupByControl = { + ...dndGroupByControl, + label: t('Series'), + multi: false, + default: null, + description: t( + 'Defines the grouping of entities. ' + + 'Each series is shown as a specific color on the chart and ' + + 'has a legend toggle', + ), +}; + +export const dndEntity: typeof dndGroupByControl = { + ...dndGroupByControl, + label: t('Entity'), + default: null, + multi: false, + validators: [validateNonEmpty], + description: t('This defines the element to be plotted on the chart'), +}; diff --git a/packages/superset-ui-chart-controls/src/shared-controls/index.tsx b/packages/superset-ui-chart-controls/src/shared-controls/index.tsx index ac83532f22..7fc46c8435 100644 --- a/packages/superset-ui-chart-controls/src/shared-controls/index.tsx +++ b/packages/superset-ui-chart-controls/src/shared-controls/index.tsx @@ -54,6 +54,7 @@ import { SelectControlConfig, } from '../types'; import { ColumnOption } from '../components/ColumnOption'; +import { dndColumnsControl, dndEntity, dndGroupByControl, dndSeries } from './dndControls'; const categoricalSchemeRegistry = getCategoricalSchemeRegistry(); const sequentialSchemeRegistry = getSequentialSchemeRegistry(); @@ -476,6 +477,13 @@ const label_colors: SharedControlConfig<'ColorMapControl'> = { }), }; +// A quick and dirty patch, should be moved to the main repo in the future +export function isFeatureEnabled(feature: string) { + // @ts-ignore + return window && window.featureFlags && !!window.featureFlags[feature]; +} +const enableExploreDnd = isFeatureEnabled('ENABLE_EXPLORE_DRAG_AND_DROP'); + const sharedControls = { metrics, metric, @@ -485,8 +493,8 @@ const sharedControls = { metric_2, linear_color_scheme, secondary_metric, - groupby: groupByControl, - columns: columnsControl, + groupby: enableExploreDnd ? dndGroupByControl : groupByControl, + columns: enableExploreDnd ? dndColumnsControl : columnsControl, druid_time_origin, granularity, granularity_sqla, @@ -495,8 +503,8 @@ const sharedControls = { row_limit, limit, timeseries_limit_metric, - series, - entity, + series: enableExploreDnd ? dndSeries : series, + entity: enableExploreDnd ? dndEntity : entity, x, y, size, diff --git a/packages/superset-ui-chart-controls/src/types.ts b/packages/superset-ui-chart-controls/src/types.ts index a135546e0c..9fa295c432 100644 --- a/packages/superset-ui-chart-controls/src/types.ts +++ b/packages/superset-ui-chart-controls/src/types.ts @@ -139,6 +139,7 @@ export type InternalControlType = | 'MetricsControl' | 'AdhocFilterControl' | 'FilterBoxItemControl' + | 'DndColumnSelectControl' | keyof SharedControlComponents; // expanded in `expandControlConfig` // eslint-disable-next-line @typescript-eslint/no-explicit-any