mirror of
https://github.com/apache/superset.git
synced 2026-05-07 08:54:23 +00:00
Major refactor to modernize control panel system:
## Changes Made
### Core Infrastructure
- Created InlineControls.tsx with helper functions for all control types
- Added SharedControlComponents for replacing string control references
- Fixed TypeScript types and imports across all control panels
- Added proper exports and type definitions
### Control Panel Migrations
- Converted 20+ control panel files from inline configurations to React components
- Eliminated all string control references (e.g., ['metric'] → MetricControl())
- Updated all legacy-plugin-chart-* plugins
- Updated all legacy-preset-chart-deckgl layers
- Fixed chord diagram control panel (was prematurely using JSON Forms)
### Type Safety Improvements
- Fixed choice array type mismatches (now supports mixed types)
- Resolved import conflicts by renaming inline control helpers
- Added proper TypeScript types for all control configurations
- Reduced TypeScript errors by 57% (44 → 19)
### Pattern Conversion
Before: { name: 'control', config: { type: 'SelectControl', ... } }
After: SelectControl({ name: 'control', ... })
This sets the foundation for the next phase: migrating to JSON Forms format.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
158 lines
4.6 KiB
TypeScript
158 lines
4.6 KiB
TypeScript
/**
|
|
* 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 } from '@superset-ui/core';
|
|
import {
|
|
AdhocFiltersControl,
|
|
ColorPickerControl,
|
|
ColorSchemeControl,
|
|
ControlPanelConfig,
|
|
CurrencyFormatControl,
|
|
EntityControl,
|
|
LinearColorSchemeControl,
|
|
MetricControl,
|
|
RowLimitControl,
|
|
SecondaryMetricControl,
|
|
SortByMetricControl,
|
|
YAxisFormatControl,
|
|
formatSelectOptions,
|
|
getStandardizedControls,
|
|
InlineSelectControl as SelectControl,
|
|
InlineCheckboxControl as CheckboxControl,
|
|
InlineRadioButtonControl as RadioButtonControl,
|
|
} from '@superset-ui/chart-controls';
|
|
import { ColorBy } from './utils';
|
|
|
|
const config: ControlPanelConfig = {
|
|
controlPanelSections: [
|
|
{
|
|
label: t('Query'),
|
|
expanded: true,
|
|
controlSetRows: [
|
|
[EntityControl()],
|
|
[
|
|
SelectControl({
|
|
name: 'country_fieldtype',
|
|
label: t('Country Field Type'),
|
|
default: 'cca2',
|
|
choices: [
|
|
['name', t('Full name')],
|
|
['cioc', t('code International Olympic Committee (cioc)')],
|
|
['cca2', t('code ISO 3166-1 alpha-2 (cca2)')],
|
|
['cca3', t('code ISO 3166-1 alpha-3 (cca3)')],
|
|
],
|
|
description: t(
|
|
'The country code standard that Superset should expect ' +
|
|
'to find in the [country] column',
|
|
),
|
|
}),
|
|
],
|
|
[MetricControl()],
|
|
[AdhocFiltersControl()],
|
|
[RowLimitControl()],
|
|
[SortByMetricControl()],
|
|
],
|
|
},
|
|
{
|
|
label: t('Options'),
|
|
expanded: true,
|
|
controlSetRows: [
|
|
[
|
|
CheckboxControl({
|
|
name: 'show_bubbles',
|
|
label: t('Show Bubbles'),
|
|
default: false,
|
|
renderTrigger: true,
|
|
description: t('Whether to display bubbles on top of countries'),
|
|
}),
|
|
],
|
|
[SecondaryMetricControl()],
|
|
[
|
|
SelectControl({
|
|
name: 'max_bubble_size',
|
|
freeForm: true,
|
|
label: t('Max Bubble Size'),
|
|
default: '25',
|
|
choices: formatSelectOptions([
|
|
'5',
|
|
'10',
|
|
'15',
|
|
'25',
|
|
'50',
|
|
'75',
|
|
'100',
|
|
]),
|
|
}),
|
|
],
|
|
[ColorPickerControl()],
|
|
[
|
|
RadioButtonControl({
|
|
name: 'color_by',
|
|
label: t('Color by'),
|
|
default: ColorBy.Metric,
|
|
options: [
|
|
[ColorBy.Metric, t('Metric')],
|
|
[ColorBy.Country, t('Country')],
|
|
],
|
|
description: t(
|
|
'Choose whether a country should be shaded by the metric, or assigned a color based on a categorical color palette',
|
|
),
|
|
}),
|
|
],
|
|
[LinearColorSchemeControl()],
|
|
[ColorSchemeControl()],
|
|
],
|
|
},
|
|
{
|
|
label: t('Chart Options'),
|
|
expanded: true,
|
|
controlSetRows: [[YAxisFormatControl()], [CurrencyFormatControl()]],
|
|
},
|
|
],
|
|
controlOverrides: {
|
|
entity: {
|
|
label: t('Country Column'),
|
|
description: t('3 letter code of the country'),
|
|
},
|
|
secondary_metric: {
|
|
label: t('Bubble Size'),
|
|
description: t('Metric that defines the size of the bubble'),
|
|
},
|
|
color_picker: {
|
|
label: t('Bubble Color'),
|
|
},
|
|
linear_color_scheme: {
|
|
label: t('Country Color Scheme'),
|
|
visibility: ({ controls }) =>
|
|
Boolean(controls?.color_by.value === ColorBy.Metric),
|
|
},
|
|
color_scheme: {
|
|
label: t('Country Color Scheme'),
|
|
visibility: ({ controls }) =>
|
|
Boolean(controls?.color_by.value === ColorBy.Country),
|
|
},
|
|
},
|
|
formDataOverrides: formData => ({
|
|
...formData,
|
|
entity: getStandardizedControls().shiftColumn(),
|
|
metric: getStandardizedControls().shiftMetric(),
|
|
}),
|
|
};
|
|
|
|
export default config;
|