Skip to content

Commit

Permalink
refactor(control-utils): reorganize files and refine typing (apache#610)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ktmud @zhaoyongjie
ktmud authored and zhaoyongjie committed Nov 26, 2021
1 parent b182b64 commit 6639b24
Show file tree
Hide file tree
Showing 18 changed files with 199 additions and 117 deletions.
2 changes: 1 addition & 1 deletion ...set-ui-control-utils/src/ColumnOption.tsx → ...rol-utils/src/components/ColumnOption.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import React from 'react';

import { ColumnTypeLabel } from './ColumnTypeLabel';
import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
import { ColumnMeta } from './types';
import { ColumnMeta } from '../types';

export type ColumnOptionProps = {
column: ColumnMeta;
Expand Down
0 ...-ui-control-utils/src/ColumnTypeLabel.tsx → ...-utils/src/components/ColumnTypeLabel.tsx
View file
File renamed without changes.
0 ...trol-utils/src/InfoTooltipWithTrigger.tsx → ...src/components/InfoTooltipWithTrigger.tsx
View file
File renamed without changes.
0 ...set-ui-control-utils/src/MetricOption.tsx → ...rol-utils/src/components/MetricOption.tsx
View file
File renamed without changes.
18 changes: 11 additions & 7 deletions ...rontend/temporary_superset_ui/superset-ui/packages/superset-ui-control-utils/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,20 @@ import * as constantsModule from './constants';
import * as sharedControlsModule from './shared-controls';
import * as sectionModules from './sections';

// explore all available shared controls
export { default as sharedControls } from './shared-controls';

// `export * as x from 'y'` doesn't work for some reason
export const constants = constantsModule;
export const internalSharedControls = sharedControlsModule;
export const sections = sectionModules;
export { D3_FORMAT_DOCS, D3_FORMAT_OPTIONS, D3_TIME_FORMAT_OPTIONS } from './D3Formatting';
export { formatSelectOptions, formatSelectOptionsForRange } from './selectOptions';
export { D3_FORMAT_DOCS, D3_FORMAT_OPTIONS, D3_TIME_FORMAT_OPTIONS } from './utils/D3Formatting';
export { formatSelectOptions, formatSelectOptionsForRange } from './utils/selectOptions';
export * from './utils/mainMetric';

export * from './components/InfoTooltipWithTrigger';
export * from './components/ColumnOption';
export * from './components/ColumnTypeLabel';
export * from './components/MetricOption';

export * from './InfoTooltipWithTrigger';
export * from './ColumnOption';
export * from './ColumnTypeLabel';
export * from './mainMetric';
export * from './MetricOption';
export * from './types';
85 changes: 44 additions & 41 deletions ...porary_superset_ui/superset-ui/packages/superset-ui-control-utils/src/shared-controls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,17 +42,17 @@ import {
} from '@superset-ui/color';
import { legacyValidateInteger, validateNonEmpty } from '@superset-ui/validator';

import { formatSelectOptions } from './selectOptions';
import { mainMetric, Metric } from './mainMetric';
import { ColumnOption } from './ColumnOption';
import { formatSelectOptions } from './utils/selectOptions';
import { mainMetric, Metric } from './utils/mainMetric';
import { TIME_FILTER_LABELS } from './constants';
import {
ControlConfig,
SharedControlConfig,
ColumnMeta,
DatasourceMeta,
ExtraControlProps,
SelectControlConfig,
} from './types';
import { ColumnOption } from './components/ColumnOption';

const categoricalSchemeRegistry = getCategoricalSchemeRegistry();
const sequentialSchemeRegistry = getSequentialSchemeRegistry();
Expand Down Expand Up @@ -102,22 +102,24 @@ type Control = {
default?: unknown;
};

const groupByControl: ControlConfig = {
const groupByControl: SharedControlConfig<'SelectControl', ColumnMeta> = {
type: 'SelectControl',
label: t('Group by'),
queryField: 'groupby',
multi: true,
freeForm: true,
label: t('Group by'),
clearable: true,
default: [],
includeTime: false,
description: t('One or many controls to group by'),
optionRenderer: (c: ColumnMeta) => <ColumnOption showType column={c} />,
valueRenderer: (c: ColumnMeta) => <ColumnOption column={c} />,
optionRenderer: c => <ColumnOption showType column={c} />,
valueRenderer: c => <ColumnOption column={c} />,
valueKey: 'column_name',
allowAll: true,
filterOption: (opt: ColumnMeta, text: string) =>
filterOption: ({ data: opt }, text: string) =>
(opt.column_name && opt.column_name.toLowerCase().includes(text.toLowerCase())) ||
(opt.verbose_name && opt.verbose_name.toLowerCase().includes(text.toLowerCase())),
(opt.verbose_name && opt.verbose_name.toLowerCase().includes(text.toLowerCase())) ||
false,
promptTextCreator: (label: unknown) => label,
mapStateToProps(state, { includeTime }) {
const newState: ExtraControlProps = {};
Expand All @@ -133,7 +135,7 @@ const groupByControl: ControlConfig = {
commaChoosesOption: false,
};

const metrics: ControlConfig = {
const metrics: SharedControlConfig<'MetricsControl'> = {
type: 'MetricsControl',
queryField: 'metrics',
multi: true,
Expand All @@ -152,7 +154,8 @@ const metrics: ControlConfig = {
},
description: t('One or many metrics to display'),
};
const metric: ControlConfig = {

const metric: SharedControlConfig<'MetricsControl'> = {
...metrics,
multi: false,
label: t('Metric'),
Expand All @@ -169,40 +172,40 @@ export function columnChoices(datasource: DatasourceMeta) {
return [];
}

const datasourceControl: ControlConfig = {
const datasourceControl: SharedControlConfig<'DatasourceControl'> = {
type: 'DatasourceControl',
label: t('Datasource'),
default: null,
description: null,
mapStateToProps: (state, control, { setDatasource }) => ({
mapStateToProps: (state, control, actions) => ({
datasource: state.datasource,
onDatasourceSave: setDatasource,
onDatasourceSave: actions?.setDatasource,
}),
};

const viz_type: ControlConfig = {
const viz_type: SharedControlConfig<'VizTypeControl'> = {
type: 'VizTypeControl',
label: t('Visualization Type'),
default: 'table',
description: t('The type of visualization to display'),
};

const color_picker: ControlConfig = {
const color_picker: SharedControlConfig<'ColorPickerControl'> = {
type: 'ColorPickerControl',
label: t('Fixed Color'),
description: t('Use this to define a static color for all circles'),
type: 'ColorPickerControl',
default: PRIMARY_COLOR,
renderTrigger: true,
};

const metric_2: ControlConfig = {
const metric_2: SharedControlConfig<'MetricsControl'> = {
...metric,
label: t('Right Axis Metric'),
clearable: true,
description: t('Choose a metric for right axis'),
};

const linear_color_scheme: ControlConfig = {
const linear_color_scheme: SharedControlConfig<'ColorSchemeControl'> = {
type: 'ColorSchemeControl',
label: t('Linear Color Scheme'),
choices: () =>
Expand All @@ -215,21 +218,21 @@ const linear_color_scheme: ControlConfig = {
isLinear: true,
};

const secondary_metric: ControlConfig = {
const secondary_metric: SharedControlConfig<'MetricsControl'> = {
...metric,
label: t('Color Metric'),
default: null,
validators: [],
description: t('A metric to use for color'),
};

const columnsControl: ControlConfig = {
const columnsControl: typeof groupByControl = {
...groupByControl,
label: t('Columns'),
description: t('One or many controls to pivot as columns'),
};

const druid_time_origin: ControlConfig = {
const druid_time_origin: SharedControlConfig<'SelectControl'> = {
type: 'SelectControl',
freeForm: true,
label: TIME_FILTER_LABELS.druid_time_origin,
Expand All @@ -244,7 +247,7 @@ const druid_time_origin: ControlConfig = {
),
};

const granularity: ControlConfig = {
const granularity: SharedControlConfig<'SelectControl'> = {
type: 'SelectControl',
freeForm: true,
label: TIME_FILTER_LABELS.granularity,
Expand Down Expand Up @@ -274,7 +277,7 @@ const granularity: ControlConfig = {
),
};

const granularity_sqla: ControlConfig = {
const granularity_sqla: SharedControlConfig<'SelectControl', ColumnMeta> = {
type: 'SelectControl',
label: TIME_FILTER_LABELS.granularity_sqla,
description: t(
Expand All @@ -286,8 +289,8 @@ const granularity_sqla: ControlConfig = {
),
default: (c: Control) => c.default,
clearable: false,
optionRenderer: (c: ColumnMeta) => <ColumnOption showType column={c} />,
valueRenderer: (c: ColumnMeta) => <ColumnOption column={c} />,
optionRenderer: c => <ColumnOption showType column={c} />,
valueRenderer: c => <ColumnOption column={c} />,
valueKey: 'column_name',
mapStateToProps: state => {
const props: Partial<SelectControlConfig<ColumnMeta>> = {};
Expand All @@ -304,7 +307,7 @@ const granularity_sqla: ControlConfig = {
},
};

const time_grain_sqla: ControlConfig = {
const time_grain_sqla: SharedControlConfig<'SelectControl'> = {
type: 'SelectControl',
label: TIME_FILTER_LABELS.time_grain_sqla,
default: 'P1D',
Expand All @@ -320,7 +323,7 @@ const time_grain_sqla: ControlConfig = {
}),
};

const time_range: ControlConfig = {
const time_range: SharedControlConfig<'DateFilterControl'> = {
type: 'DateFilterControl',
freeForm: true,
label: TIME_FILTER_LABELS.time_range,
Expand All @@ -338,7 +341,7 @@ const time_range: ControlConfig = {
}),
};

const row_limit: ControlConfig = {
const row_limit: SharedControlConfig<'SelectControl'> = {
type: 'SelectControl',
freeForm: true,
label: t('Row limit'),
Expand All @@ -347,7 +350,7 @@ const row_limit: ControlConfig = {
choices: formatSelectOptions(ROW_LIMIT_OPTIONS),
};

const limit: ControlConfig = {
const limit: SharedControlConfig<'SelectControl'> = {
type: 'SelectControl',
freeForm: true,
label: t('Series limit'),
Expand All @@ -361,7 +364,7 @@ const limit: ControlConfig = {
),
};

const timeseries_limit_metric: ControlConfig = {
const timeseries_limit_metric: SharedControlConfig<'MetricsControl'> = {
type: 'MetricsControl',
label: t('Sort By'),
default: null,
Expand All @@ -373,7 +376,7 @@ const timeseries_limit_metric: ControlConfig = {
}),
};

const series: ControlConfig = {
const series: typeof groupByControl = {
...groupByControl,
label: t('Series'),
multi: false,
Expand All @@ -385,7 +388,7 @@ const series: ControlConfig = {
),
};

const entity: ControlConfig = {
const entity: typeof groupByControl = {
...groupByControl,
label: t('Entity'),
default: null,
Expand All @@ -394,27 +397,27 @@ const entity: ControlConfig = {
description: t('This defines the element to be plotted on the chart'),
};

const x: ControlConfig = {
const x: SharedControlConfig<'MetricsControl'> = {
...metric,
label: t('X Axis'),
description: t('Metric assigned to the [X] axis'),
default: null,
};

const y: ControlConfig = {
const y: SharedControlConfig<'MetricsControl'> = {
...metric,
label: t('Y Axis'),
default: null,
description: t('Metric assigned to the [Y] axis'),
};

const size: ControlConfig = {
const size: SharedControlConfig<'MetricsControl'> = {
...metric,
label: t('Bubble Size'),
default: null,
};

const y_axis_format: ControlConfig = {
const y_axis_format: SharedControlConfig<'SelectControl'> = {
type: 'SelectControl',
freeForm: true,
label: t('Y Axis Format'),
Expand All @@ -436,7 +439,7 @@ const y_axis_format: ControlConfig = {
},
};

const adhoc_filters: ControlConfig = {
const adhoc_filters: SharedControlConfig<'AdhocFilterControl'> = {
type: 'AdhocFilterControl',
label: t('Filters'),
default: null,
Expand All @@ -449,7 +452,7 @@ const adhoc_filters: ControlConfig = {
provideFormDataToProps: true,
};

const color_scheme: ControlConfig = {
const color_scheme: SharedControlConfig<'ColorSchemeControl'> = {
type: 'ColorSchemeControl',
label: t('Color Scheme'),
default: categoricalSchemeRegistry.getDefaultKey(),
Expand All @@ -459,7 +462,7 @@ const color_scheme: ControlConfig = {
schemes: () => categoricalSchemeRegistry.getMap(),
};

const label_colors: ControlConfig = {
const label_colors: SharedControlConfig<'ColorMapControl'> = {
type: 'ColorMapControl',
label: t('Color Map'),
default: {},
Expand Down
Loading

0 comments on commit 6639b24

Please sign in to comment.