pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: create echarts query section (#20445)

This commit is contained in:
Yongjie Zhao 2022-06-21 11:38:07 +08:00 committed by GitHub
parent 68af5980ea
commit c79b0d62d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 145 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
superset-frontend/packages/superset-ui-chart-controls/src/sections/echartsTimeSeriesQuery.tsx Normal file
View File

@ -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'],
],
};

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

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

48
superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/constants.tsx Normal file
View File

@ -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],
};

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

@ -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,
};

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

@ -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 };

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

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

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

@ -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;
contributionModeB?: EchartsTimeseriesContributionType;
contributionMode?: ContributionType;
contributionModeB?: ContributionType;
markerEnabled: boolean;
markerEnabledB: boolean;
markerSize: number;

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

@ -22,27 +22,21 @@ import {
ControlPanelConfig,
ControlPanelsContainerProps,
D3_TIME_FORMAT_DOCS,
emitFilterControl,
sections,
sharedControls,
} from '@superset-ui/chart-controls';
import {
EchartsTimeseriesContributionType,
EchartsTimeseriesSeriesType,
} from '../types';
import { 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,
{
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.echartsTimeSeriesQuery,
sections.advancedAnalyticsControls,
sections.annotationsAndLayersControls,
sections.forecastIntervalControls,

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

@ -24,26 +24,20 @@ import {
ControlSetRow,
ControlStateMapping,
D3_TIME_FORMAT_DOCS,
emitFilterControl,
formatSelectOptions,
sections,
sharedControls,
} from '@superset-ui/chart-controls';
import {
EchartsTimeseriesContributionType,
OrientationType,
} from '../../types';
import { 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,
{
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.echartsTimeSeriesQuery,
sections.advancedAnalyticsControls,
sections.annotationsAndLayersControls,
sections.forecastIntervalControls,

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

@ -24,24 +24,18 @@ import {
D3_TIME_FORMAT_DOCS,
sections,
sharedControls,
emitFilterControl,
} from '@superset-ui/chart-controls';
import {
EchartsTimeseriesContributionType,
EchartsTimeseriesSeriesType,
} from '../../types';
import { 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,
{
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.echartsTimeSeriesQuery,
sections.advancedAnalyticsControls,
sections.annotationsAndLayersControls,
sections.forecastIntervalControls,

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

@ -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,
{
label: t('Query'),
expanded: true,
controlSetRows: [
[xAxisControl],
['metrics'],
['groupby'],
['adhoc_filters'],
emitFilterControl,
['limit'],
['timeseries_limit_metric'],
['order_desc'],
['row_limit'],
['truncate_metric'],
],
},
sections.echartsTimeSeriesQuery,
sections.advancedAnalyticsControls,
sections.annotationsAndLayersControls,
sections.forecastIntervalControls,

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

@ -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,
{
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.echartsTimeSeriesQuery,
sections.advancedAnalyticsControls,
sections.annotationsAndLayersControls,
sections.forecastIntervalControls,

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

@ -24,24 +24,18 @@ import {
D3_TIME_FORMAT_DOCS,
sections,
sharedControls,
emitFilterControl,
} from '@superset-ui/chart-controls';
import {
EchartsTimeseriesContributionType,
EchartsTimeseriesSeriesType,
} from '../../types';
import { 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,
{
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.echartsTimeSeriesQuery,
sections.advancedAnalyticsControls,
sections.annotationsAndLayersControls,
sections.forecastIntervalControls,

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

@ -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;

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

@ -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: {

5
superset-frontend/src/explore/controlUtils/standardizedFormData.test.tsx
View File

@ -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) => ({