Files
superset2/superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts
Evan Rusackas fe0ea69280 feat(controls): Migrate all control panels to React component functions
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>
2025-08-08 14:14:39 -07:00

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;