You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ma...@apache.org on 2023/07/20 23:33:57 UTC
[superset] branch master updated: chore: make control panel sub sections look better (#24736)
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 22a0fe555c chore: make control panel sub sections look better (#24736)
22a0fe555c is described below
commit 22a0fe555cbfa2ca8e7b95505f116fbac258eceb
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Thu Jul 20 16:33:50 2023 -0700
chore: make control panel sub sections look better (#24736)
---
.../ControlSubSectionHeader.tsx} | 23 +++++++---------------
.../superset-ui-chart-controls/src/index.ts | 1 +
.../src/sections/advancedAnalytics.tsx | 8 +++++---
.../src/sections/chartTitle.tsx | 10 ++++++----
.../src/controlPanel.tsx | 15 +++++++++++---
.../legacy-plugin-chart-rose/src/controlPanel.tsx | 15 +++++++++++---
.../legacy-preset-chart-nvd3/src/NVD3Controls.tsx | 15 +++++++++++---
.../BigNumberWithTrendline/controlPanel.tsx | 9 +++++++--
.../src/Funnel/controlPanel.tsx | 3 ++-
.../src/Gauge/controlPanel.tsx | 9 +++++----
.../src/Graph/controlPanel.tsx | 3 ++-
.../src/MixedTimeseries/controlPanel.tsx | 7 ++++---
.../plugin-chart-echarts/src/Pie/controlPanel.tsx | 5 +++--
.../src/Radar/controlPanel.tsx | 5 +++--
.../src/Sunburst/controlPanel.tsx | 3 ++-
.../src/Timeseries/Area/controlPanel.tsx | 5 +++--
.../src/Timeseries/Regular/Bar/controlPanel.tsx | 9 +++++----
.../src/Timeseries/Regular/Line/controlPanel.tsx | 5 +++--
.../Timeseries/Regular/Scatter/controlPanel.tsx | 5 +++--
.../Timeseries/Regular/SmoothLine/controlPanel.tsx | 5 +++--
.../src/Timeseries/Step/controlPanel.tsx | 5 +++--
.../plugin-chart-echarts/src/Tree/controlPanel.tsx | 3 ++-
.../src/Treemap/controlPanel.tsx | 3 ++-
.../plugins/plugin-chart-echarts/src/controls.tsx | 7 ++++---
.../src/explore/controlPanels/sections.tsx | 19 ++++++++++++++----
25 files changed, 126 insertions(+), 71 deletions(-)
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/index.ts b/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx
similarity index 59%
copy from superset-frontend/packages/superset-ui-chart-controls/src/index.ts
copy to superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx
index 7c57a3e170..731b34b6af 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/index.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx
@@ -16,20 +16,11 @@
* specific language governing permissions and limitations
* under the License.
*/
-import * as sectionsModule from './sections';
+import { styled } from '@superset-ui/core';
-export * from './utils';
-export * from './constants';
-export * from './operators';
-
-// can't do `export * as sections from './sections'`, babel-transformer will fail
-export const sections = sectionsModule;
-
-export * from './components/InfoTooltipWithTrigger';
-export * from './components/ColumnOption';
-export * from './components/ColumnTypeLabel/ColumnTypeLabel';
-export * from './components/MetricOption';
-
-export * from './shared-controls';
-export * from './types';
-export * from './fixtures';
+export const ControlSubSectionHeader = styled.div`
+ font-weight: ${({ theme }) => theme.typography.weights.bold};
+ font-size: ${({ theme }) => theme.typography.sizes.s};
+ margin-bottom: ${({ theme }) => theme.gridUnit}px;
+`;
+export default ControlSubSectionHeader;
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/index.ts b/superset-frontend/packages/superset-ui-chart-controls/src/index.ts
index 7c57a3e170..223f2caf17 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/index.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/index.ts
@@ -29,6 +29,7 @@ export * from './components/InfoTooltipWithTrigger';
export * from './components/ColumnOption';
export * from './components/ColumnTypeLabel/ColumnTypeLabel';
export * from './components/MetricOption';
+export * from './components/ControlSubSectionHeader';
export * from './shared-controls';
export * from './types';
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/sections/advancedAnalytics.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/sections/advancedAnalytics.tsx
index f17139cf10..326e26fd5d 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/sections/advancedAnalytics.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/sections/advancedAnalytics.tsx
@@ -18,6 +18,8 @@
*/
import React from 'react';
import { t, RollingType, ComparisonType } from '@superset-ui/core';
+
+import { ControlSubSectionHeader } from '../components/ControlSubSectionHeader';
import { ControlPanelSectionConfig } from '../types';
import { formatSelectOptions } from '../utils';
@@ -30,7 +32,7 @@ export const advancedAnalyticsControls: ControlPanelSectionConfig = {
'of query results',
),
controlSetRows: [
- [<div className="section-header">{t('Rolling window')}</div>],
+ [<ControlSubSectionHeader>{t('Rolling window')}</ControlSubSectionHeader>],
[
{
name: 'rolling_type',
@@ -99,7 +101,7 @@ export const advancedAnalyticsControls: ControlPanelSectionConfig = {
},
},
],
- [<div className="section-header">{t('Time comparison')}</div>],
+ [<ControlSubSectionHeader>{t('Time comparison')}</ControlSubSectionHeader>],
[
{
name: 'time_compare',
@@ -150,7 +152,7 @@ export const advancedAnalyticsControls: ControlPanelSectionConfig = {
},
},
],
- [<div className="section-header">{t('Resample')}</div>],
+ [<ControlSubSectionHeader>{t('Resample')}</ControlSubSectionHeader>],
[
{
name: 'resample_rule',
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/sections/chartTitle.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/sections/chartTitle.tsx
index 5e010c27e2..0b824a3271 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/sections/chartTitle.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/sections/chartTitle.tsx
@@ -18,6 +18,8 @@
*/
import React from 'react';
import { t } from '@superset-ui/core';
+
+import { ControlSubSectionHeader } from '../components/ControlSubSectionHeader';
import { ControlPanelSectionConfig } from '../types';
import { formatSelectOptions } from '../utils';
@@ -33,7 +35,7 @@ export const titleControls: ControlPanelSectionConfig = {
tabOverride: 'customize',
expanded: true,
controlSetRows: [
- [<div className="section-header">{t('X Axis')}</div>],
+ [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
[
{
name: 'x_axis_title',
@@ -61,7 +63,7 @@ export const titleControls: ControlPanelSectionConfig = {
},
},
],
- [<div className="section-header">{t('Y Axis')}</div>],
+ [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
[
{
name: 'y_axis_title',
@@ -81,7 +83,7 @@ export const titleControls: ControlPanelSectionConfig = {
type: 'SelectControl',
freeForm: true,
clearable: true,
- label: t('Y AXIS TITLE MARGIN'),
+ label: t('Y Axis Title Margin'),
renderTrigger: true,
default: TITLE_MARGIN_OPTIONS[0],
choices: formatSelectOptions(TITLE_MARGIN_OPTIONS),
@@ -96,7 +98,7 @@ export const titleControls: ControlPanelSectionConfig = {
type: 'SelectControl',
freeForm: true,
clearable: false,
- label: t('Y AXIS TITLE POSITION'),
+ label: t('Y Axis Title Position'),
renderTrigger: true,
default: TITLE_POSITION_OPTIONS[0][0],
choices: TITLE_POSITION_OPTIONS,
diff --git a/superset-frontend/plugins/legacy-plugin-chart-partition/src/controlPanel.tsx b/superset-frontend/plugins/legacy-plugin-chart-partition/src/controlPanel.tsx
index f910a8bbfd..061c54c1c6 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-partition/src/controlPanel.tsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-partition/src/controlPanel.tsx
@@ -21,6 +21,7 @@ import { t, validateNonEmpty } from '@superset-ui/core';
import {
ColumnMeta,
ControlPanelConfig,
+ ControlSubSectionHeader,
D3_FORMAT_DOCS,
D3_FORMAT_OPTIONS,
D3_TIME_FORMAT_OPTIONS,
@@ -241,7 +242,11 @@ const config: ControlPanelConfig = {
),
controlSetRows: [
// eslint-disable-next-line react/jsx-key
- [<div className="section-header">{t('Rolling Window')}</div>],
+ [
+ <ControlSubSectionHeader>
+ {t('Rolling Window')}
+ </ControlSubSectionHeader>,
+ ],
[
{
name: 'rolling_type',
@@ -293,7 +298,11 @@ const config: ControlPanelConfig = {
},
],
// eslint-disable-next-line react/jsx-key
- [<div className="section-header">{t('Time Comparison')}</div>],
+ [
+ <ControlSubSectionHeader>
+ {t('Time Comparison')}
+ </ControlSubSectionHeader>,
+ ],
[
{
name: 'time_compare',
@@ -342,7 +351,7 @@ const config: ControlPanelConfig = {
},
},
],
- [<div className="section-header">{t('Resample')}</div>],
+ [<ControlSubSectionHeader>{t('Resample')}</ControlSubSectionHeader>],
[
{
name: 'resample_rule',
diff --git a/superset-frontend/plugins/legacy-plugin-chart-rose/src/controlPanel.tsx b/superset-frontend/plugins/legacy-plugin-chart-rose/src/controlPanel.tsx
index 11bb451d57..71d6d8bba1 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-rose/src/controlPanel.tsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-rose/src/controlPanel.tsx
@@ -20,6 +20,7 @@ import React from 'react';
import { t } from '@superset-ui/core';
import {
ControlPanelConfig,
+ ControlSubSectionHeader,
D3_FORMAT_DOCS,
D3_FORMAT_OPTIONS,
D3_TIME_FORMAT_OPTIONS,
@@ -123,7 +124,11 @@ const config: ControlPanelConfig = {
),
controlSetRows: [
// eslint-disable-next-line react/jsx-key
- [<div className="section-header">{t('Rolling Window')}</div>],
+ [
+ <ControlSubSectionHeader>
+ {t('Rolling Window')}
+ </ControlSubSectionHeader>,
+ ],
[
{
name: 'rolling_type',
@@ -175,7 +180,11 @@ const config: ControlPanelConfig = {
},
],
// eslint-disable-next-line react/jsx-key
- [<div className="section-header">{t('Time Comparison')}</div>],
+ [
+ <ControlSubSectionHeader>
+ {t('Time Comparison')}
+ </ControlSubSectionHeader>,
+ ],
[
{
name: 'time_compare',
@@ -224,7 +233,7 @@ const config: ControlPanelConfig = {
},
},
],
- [<div className="section-header">{t('Resample')}</div>],
+ [<ControlSubSectionHeader>{t('Resample')}</ControlSubSectionHeader>],
[
{
name: 'resample_rule',
diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Controls.tsx b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Controls.tsx
index a466b33742..01b1bad46f 100644
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Controls.tsx
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Controls.tsx
@@ -22,6 +22,7 @@ import React from 'react';
import { t } from '@superset-ui/core';
import {
ControlPanelSectionConfig,
+ ControlSubSectionHeader,
CustomControlItem,
D3_TIME_FORMAT_OPTIONS,
D3_FORMAT_DOCS,
@@ -390,7 +391,11 @@ export const timeSeriesSection: ControlPanelSectionConfig[] = [
'of query results',
),
controlSetRows: [
- [<div className="section-header">{t('Rolling Window')}</div>],
+ [
+ <ControlSubSectionHeader>
+ {t('Rolling Window')}
+ </ControlSubSectionHeader>,
+ ],
[
{
name: 'rolling_type',
@@ -443,7 +448,11 @@ export const timeSeriesSection: ControlPanelSectionConfig[] = [
},
},
],
- [<div className="section-header">{t('Time Comparison')}</div>],
+ [
+ <ControlSubSectionHeader>
+ {t('Time Comparison')}
+ </ControlSubSectionHeader>,
+ ],
[
{
name: 'time_compare',
@@ -494,7 +503,7 @@ export const timeSeriesSection: ControlPanelSectionConfig[] = [
},
},
],
- [<div className="section-header">{t('Resample')}</div>],
+ [<ControlSubSectionHeader>{t('Resample')}</ControlSubSectionHeader>],
[
{
name: 'resample_rule',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx
index 81e6d20128..3b98f05645 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx
@@ -19,6 +19,7 @@
import { hasGenericChartAxes, smartDateFormatter, t } from '@superset-ui/core';
import {
ControlPanelConfig,
+ ControlSubSectionHeader,
D3_FORMAT_DOCS,
D3_TIME_FORMAT_OPTIONS,
getStandardizedControls,
@@ -170,7 +171,11 @@ const config: ControlPanelConfig = {
expanded: false,
controlSetRows: [
// eslint-disable-next-line react/jsx-key
- [<div className="section-header">{t('Rolling Window')}</div>],
+ [
+ <ControlSubSectionHeader>
+ {t('Rolling Window')}
+ </ControlSubSectionHeader>,
+ ],
[
{
name: 'rolling_type',
@@ -223,7 +228,7 @@ const config: ControlPanelConfig = {
},
},
],
- [<div className="section-header">{t('Resample')}</div>],
+ [<ControlSubSectionHeader>{t('Resample')}</ControlSubSectionHeader>],
[
{
name: 'resample_rule',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
index 203b86e219..75d062ce92 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
@@ -20,6 +20,7 @@ import React from 'react';
import { t } from '@superset-ui/core';
import {
ControlPanelConfig,
+ ControlSubSectionHeader,
D3_FORMAT_OPTIONS,
D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
sections,
@@ -77,7 +78,7 @@ const config: ControlPanelConfig = {
['color_scheme'],
...funnelLegendSection,
// eslint-disable-next-line react/jsx-key
- [<div className="section-header">{t('Labels')}</div>],
+ [<ControlSubSectionHeader>{t('Labels')}</ControlSubSectionHeader>],
[
{
name: 'label_type',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
index 1af718a989..5193961556 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
@@ -21,6 +21,7 @@ import { t } from '@superset-ui/core';
import {
sharedControls,
ControlPanelConfig,
+ ControlSubSectionHeader,
D3_FORMAT_OPTIONS,
sections,
getStandardizedControls,
@@ -73,7 +74,7 @@ const config: ControlPanelConfig = {
label: t('Chart Options'),
expanded: true,
controlSetRows: [
- [<div className="section-header">{t('General')}</div>],
+ [<ControlSubSectionHeader>{t('General')}</ControlSubSectionHeader>],
[
{
name: 'min_val',
@@ -193,7 +194,7 @@ const config: ControlPanelConfig = {
},
},
],
- [<div className="section-header">{t('Axis')}</div>],
+ [<ControlSubSectionHeader>{t('Axis')}</ControlSubSectionHeader>],
[
{
name: 'show_axis_tick',
@@ -232,7 +233,7 @@ const config: ControlPanelConfig = {
},
},
],
- [<div className="section-header">{t('Progress')}</div>],
+ [<ControlSubSectionHeader>{t('Progress')}</ControlSubSectionHeader>],
[
{
name: 'show_progress',
@@ -273,7 +274,7 @@ const config: ControlPanelConfig = {
},
},
],
- [<div className="section-header">{t('Intervals')}</div>],
+ [<ControlSubSectionHeader>{t('Intervals')}</ControlSubSectionHeader>],
[
{
name: 'intervals',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx
index fef948f5a6..2aed1584ee 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx
@@ -20,6 +20,7 @@ import React from 'react';
import { t } from '@superset-ui/core';
import {
ControlPanelConfig,
+ ControlSubSectionHeader,
getStandardizedControls,
sections,
sharedControls,
@@ -99,7 +100,7 @@ const controlPanel: ControlPanelConfig = {
controlSetRows: [
['color_scheme'],
...legendSection,
- [<div className="section-header">{t('Layout')}</div>],
+ [<ControlSubSectionHeader>{t('Layout')}</ControlSubSectionHeader>],
[
{
name: 'layout',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
index 76abcb0b21..58be782859 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
@@ -23,6 +23,7 @@ import {
ControlPanelConfig,
ControlPanelSectionConfig,
ControlSetRow,
+ ControlSubSectionHeader,
CustomControlItem,
getStandardizedControls,
sections,
@@ -128,7 +129,7 @@ function createCustomizeSection(
controlSuffix: string,
): ControlSetRow[] {
return [
- [<div className="section-header">{label}</div>],
+ [<ControlSubSectionHeader>{label}</ControlSubSectionHeader>],
[
{
name: `seriesType${controlSuffix}`,
@@ -311,7 +312,7 @@ const config: ControlPanelConfig = {
},
],
...legendSection,
- [<div className="section-header">{t('X Axis')}</div>],
+ [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
['x_axis_time_format'],
[
{
@@ -335,7 +336,7 @@ const config: ControlPanelConfig = {
],
...richTooltipSection,
// eslint-disable-next-line react/jsx-key
- [<div className="section-header">{t('Y Axis')}</div>],
+ [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
[
{
name: 'minorSplitLine',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx
index 952419e83b..a82768b085 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx
@@ -21,6 +21,7 @@ import { ensureIsInt, t, validateNonEmpty } from '@superset-ui/core';
import {
ControlPanelConfig,
ControlPanelsContainerProps,
+ ControlSubSectionHeader,
D3_FORMAT_DOCS,
D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
D3_FORMAT_OPTIONS,
@@ -90,7 +91,7 @@ const config: ControlPanelConfig = {
],
...legendSection,
// eslint-disable-next-line react/jsx-key
- [<div className="section-header">{t('Labels')}</div>],
+ [<ControlSubSectionHeader>{t('Labels')}</ControlSubSectionHeader>],
[
{
name: 'label_type',
@@ -195,7 +196,7 @@ const config: ControlPanelConfig = {
},
],
// eslint-disable-next-line react/jsx-key
- [<div className="section-header">{t('Pie shape')}</div>],
+ [<ControlSubSectionHeader>{t('Pie shape')}</ControlSubSectionHeader>],
[
{
name: 'outerRadius',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx
index 61ac18209a..838620768a 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx
@@ -26,6 +26,7 @@ import {
} from '@superset-ui/core';
import {
ControlPanelConfig,
+ ControlSubSectionHeader,
D3_FORMAT_DOCS,
D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
D3_FORMAT_OPTIONS,
@@ -85,7 +86,7 @@ const config: ControlPanelConfig = {
controlSetRows: [
['color_scheme'],
...legendSection,
- [<div className="section-header">{t('Labels')}</div>],
+ [<ControlSubSectionHeader>{t('Labels')}</ControlSubSectionHeader>],
[
{
name: 'show_labels',
@@ -156,7 +157,7 @@ const config: ControlPanelConfig = {
},
},
],
- [<div className="section-header">{t('Radar')}</div>],
+ [<ControlSubSectionHeader>{t('Radar')}</ControlSubSectionHeader>],
[
{
name: 'column_config',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/controlPanel.tsx
index 1187fee0a8..bc0a515141 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/controlPanel.tsx
@@ -21,6 +21,7 @@ import { t } from '@superset-ui/core';
import {
ControlPanelConfig,
ControlPanelsContainerProps,
+ ControlSubSectionHeader,
D3_FORMAT_DOCS,
D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
D3_FORMAT_OPTIONS,
@@ -64,7 +65,7 @@ const config: ControlPanelConfig = {
controlSetRows: [
['color_scheme'],
['linear_color_scheme'],
- [<div className="section-header">{t('Labels')}</div>],
+ [<ControlSubSectionHeader>{t('Labels')}</ControlSubSectionHeader>],
[
{
name: 'show_labels',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
index e439fa6930..941face406 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
@@ -21,6 +21,7 @@ import { t } from '@superset-ui/core';
import {
ControlPanelConfig,
ControlPanelsContainerProps,
+ ControlSubSectionHeader,
D3_TIME_FORMAT_DOCS,
getStandardizedControls,
sections,
@@ -179,7 +180,7 @@ const config: ControlPanelConfig = {
},
],
...legendSection,
- [<div className="section-header">{t('X Axis')}</div>],
+ [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
[
{
name: 'x_axis_time_format',
@@ -212,7 +213,7 @@ const config: ControlPanelConfig = {
],
...richTooltipSection,
// eslint-disable-next-line react/jsx-key
- [<div className="section-header">{t('Y Axis')}</div>],
+ [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
['y_axis_format'],
[
{
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx
index 358c2dc949..ea43c875a1 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx
@@ -23,6 +23,7 @@ import {
ControlPanelsContainerProps,
ControlSetRow,
ControlStateMapping,
+ ControlSubSectionHeader,
D3_TIME_FORMAT_DOCS,
formatSelectOptions,
getStandardizedControls,
@@ -292,9 +293,9 @@ const config: ControlPanelConfig = {
tabOverride: 'customize',
expanded: true,
controlSetRows: [
- [<div className="section-header">{t('X Axis')}</div>],
+ [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
...createAxisTitleControl('x'),
- [<div className="section-header">{t('Y Axis')}</div>],
+ [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
...createAxisTitleControl('y'),
],
},
@@ -318,10 +319,10 @@ const config: ControlPanelConfig = {
},
],
...legendSection,
- [<div className="section-header">{t('X Axis')}</div>],
+ [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
...createAxisControl('x'),
...richTooltipSection,
- [<div className="section-header">{t('Y Axis')}</div>],
+ [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
...createAxisControl('y'),
],
},
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/controlPanel.tsx
index d7e7800c99..396b3c7289 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/controlPanel.tsx
@@ -21,6 +21,7 @@ import { t } from '@superset-ui/core';
import {
ControlPanelConfig,
ControlPanelsContainerProps,
+ ControlSubSectionHeader,
D3_TIME_FORMAT_DOCS,
getStandardizedControls,
sections,
@@ -167,7 +168,7 @@ const config: ControlPanelConfig = {
},
],
...legendSection,
- [<div className="section-header">{t('X Axis')}</div>],
+ [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
[
{
name: 'x_axis_time_format',
@@ -200,7 +201,7 @@ const config: ControlPanelConfig = {
],
...richTooltipSection,
// eslint-disable-next-line react/jsx-key
- [<div className="section-header">{t('Y Axis')}</div>],
+ [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
['y_axis_format'],
[
{
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx
index 5f1ff29090..ae4ea31e1d 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx
@@ -21,6 +21,7 @@ import { t } from '@superset-ui/core';
import {
ControlPanelConfig,
ControlPanelsContainerProps,
+ ControlSubSectionHeader,
D3_TIME_FORMAT_DOCS,
getStandardizedControls,
sections,
@@ -109,7 +110,7 @@ const config: ControlPanelConfig = {
},
],
...legendSection,
- [<div className="section-header">{t('X Axis')}</div>],
+ [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
[
{
@@ -144,7 +145,7 @@ const config: ControlPanelConfig = {
// eslint-disable-next-line react/jsx-key
...richTooltipSection,
// eslint-disable-next-line react/jsx-key
- [<div className="section-header">{t('Y Axis')}</div>],
+ [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
['y_axis_format'],
[
{
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/controlPanel.tsx
index 749737d251..67b896d225 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/controlPanel.tsx
@@ -21,6 +21,7 @@ import { t } from '@superset-ui/core';
import {
ControlPanelConfig,
ControlPanelsContainerProps,
+ ControlSubSectionHeader,
D3_TIME_FORMAT_DOCS,
getStandardizedControls,
sections,
@@ -109,7 +110,7 @@ const config: ControlPanelConfig = {
},
],
...legendSection,
- [<div className="section-header">{t('X Axis')}</div>],
+ [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
[
{
name: 'x_axis_time_format',
@@ -143,7 +144,7 @@ const config: ControlPanelConfig = {
// eslint-disable-next-line react/jsx-key
...richTooltipSection,
// eslint-disable-next-line react/jsx-key
- [<div className="section-header">{t('Y Axis')}</div>],
+ [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
['y_axis_format'],
[
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx
index 020446d462..b9a9da8573 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx
@@ -21,6 +21,7 @@ import { t } from '@superset-ui/core';
import {
ControlPanelConfig,
ControlPanelsContainerProps,
+ ControlSubSectionHeader,
D3_TIME_FORMAT_DOCS,
getStandardizedControls,
sections,
@@ -161,7 +162,7 @@ const config: ControlPanelConfig = {
},
],
...legendSection,
- [<div className="section-header">{t('X Axis')}</div>],
+ [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
[
{
name: 'x_axis_time_format',
@@ -194,7 +195,7 @@ const config: ControlPanelConfig = {
],
...richTooltipSection,
// eslint-disable-next-line react/jsx-key
- [<div className="section-header">{t('Y Axis')}</div>],
+ [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
['y_axis_format'],
[
{
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/controlPanel.tsx
index a6ee81589a..46ef10fa2b 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/controlPanel.tsx
@@ -20,6 +20,7 @@ import React from 'react';
import { FeatureFlag, isFeatureEnabled, t } from '@superset-ui/core';
import {
ControlPanelConfig,
+ ControlSubSectionHeader,
getStandardizedControls,
sections,
sharedControls,
@@ -108,7 +109,7 @@ const controlPanel: ControlPanelConfig = {
label: t('Chart options'),
expanded: true,
controlSetRows: [
- [<div className="section-header">{t('Layout')}</div>],
+ [<ControlSubSectionHeader>{t('Layout')}</ControlSubSectionHeader>],
[
{
name: 'layout',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx
index e5f4704701..3ba079e180 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx
@@ -20,6 +20,7 @@ import React from 'react';
import { t } from '@superset-ui/core';
import {
ControlPanelConfig,
+ ControlSubSectionHeader,
D3_FORMAT_DOCS,
D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
D3_FORMAT_OPTIONS,
@@ -62,7 +63,7 @@ const config: ControlPanelConfig = {
expanded: true,
controlSetRows: [
['color_scheme'],
- [<div className="section-header">{t('Labels')}</div>],
+ [<ControlSubSectionHeader>{t('Labels')}</ControlSubSectionHeader>],
[
{
name: 'show_labels',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
index bfd2634ac9..8f311e47e5 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
@@ -22,6 +22,7 @@ import {
ControlPanelsContainerProps,
ControlSetItem,
ControlSetRow,
+ ControlSubSectionHeader,
DEFAULT_SORT_SERIES_DATA,
SORT_SERIES_CHOICES,
sharedControls,
@@ -96,7 +97,7 @@ const legendOrientationControl: ControlSetItem = {
};
export const legendSection: ControlSetRow[] = [
- [<div className="section-header">{t('Legend')}</div>],
+ [<ControlSubSectionHeader>{t('Legend')}</ControlSubSectionHeader>],
[showLegendControl],
[legendTypeControl],
[legendOrientationControl],
@@ -210,7 +211,7 @@ const tooltipSortByMetricControl: ControlSetItem = {
};
export const richTooltipSection: ControlSetRow[] = [
- [<div className="section-header">{t('Tooltip')}</div>],
+ [<ControlSubSectionHeader>{t('Tooltip')}</ControlSubSectionHeader>],
[richTooltipControl],
[tooltipSortByMetricControl],
[tooltipTimeFormatControl],
@@ -243,7 +244,7 @@ const sortSeriesAscending: ControlSetItem = {
};
export const seriesOrderSection: ControlSetRow[] = [
- [<div className="section-header">{t('Series Order')}</div>],
+ [<ControlSubSectionHeader>{t('Series Order')}</ControlSubSectionHeader>],
[sortSeriesType],
[sortSeriesAscending],
];
diff --git a/superset-frontend/src/explore/controlPanels/sections.tsx b/superset-frontend/src/explore/controlPanels/sections.tsx
index 51b6b9c2f2..22bd69f382 100644
--- a/superset-frontend/src/explore/controlPanels/sections.tsx
+++ b/superset-frontend/src/explore/controlPanels/sections.tsx
@@ -18,7 +18,10 @@
*/
import React from 'react';
import { t } from '@superset-ui/core';
-import { ControlPanelSectionConfig } from '@superset-ui/chart-controls';
+import {
+ ControlPanelSectionConfig,
+ ControlSubSectionHeader,
+} from '@superset-ui/chart-controls';
export const datasourceAndVizType: ControlPanelSectionConfig = {
controlSetRows: [
@@ -122,7 +125,11 @@ export const NVD3TimeSeries: ControlPanelSectionConfig[] = [
'of query results',
),
controlSetRows: [
- [<div className="section-header">{t('Rolling window')}</div>],
+ [
+ <ControlSubSectionHeader>
+ {t('Rolling window')}
+ </ControlSubSectionHeader>,
+ ],
[
{
name: 'rolling_type',
@@ -171,7 +178,11 @@ export const NVD3TimeSeries: ControlPanelSectionConfig[] = [
},
},
],
- [<div className="section-header">{t('Time comparison')}</div>],
+ [
+ <ControlSubSectionHeader>
+ {t('Time comparison')}
+ </ControlSubSectionHeader>,
+ ],
[
{
name: 'time_compare',
@@ -220,7 +231,7 @@ export const NVD3TimeSeries: ControlPanelSectionConfig[] = [
},
},
],
- [<div className="section-header">{t('Resample')}</div>],
+ [<ControlSubSectionHeader>{t('Resample')}</ControlSubSectionHeader>],
[
{
name: 'resample_rule',