diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/constants.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/constants.ts index 9c157d33ac1f0..89b03d5e90d27 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/constants.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/constants.ts @@ -17,6 +17,7 @@ * under the License. */ import { DEFAULT_LEGEND_FORM_DATA } from '../constants'; +import { defaultXAxis } from '../defaults'; import { EchartsBubbleFormData } from './types'; export const DEFAULT_FORM_DATA: Partial = { @@ -29,7 +30,7 @@ export const DEFAULT_FORM_DATA: Partial = { truncateXAxis: false, truncateYAxis: false, yAxisBounds: [null, null], - xAxisLabelRotation: 0, + xAxisLabelRotation: defaultXAxis.xAxisLabelRotation, opacity: 0.6, }; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/controlPanel.tsx index 532888b48577d..521ae98130dc6 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/controlPanel.tsx @@ -26,10 +26,15 @@ import { } from '@superset-ui/chart-controls'; import { DEFAULT_FORM_DATA } from './constants'; -import { legendSection, truncateXAxis, xAxisBounds } from '../controls'; +import { + legendSection, + truncateXAxis, + xAxisBounds, + xAxisLabelRotation, +} from '../controls'; +import { defaultYAxis } from '../defaults'; -const { logAxis, truncateYAxis, yAxisBounds, xAxisLabelRotation, opacity } = - DEFAULT_FORM_DATA; +const { logAxis, truncateYAxis, yAxisBounds, opacity } = DEFAULT_FORM_DATA; const config: ControlPanelConfig = { controlPanelSections: [ @@ -127,27 +132,7 @@ const config: ControlPanelConfig = { }, }, ], - [ - { - name: 'xAxisLabelRotation', - config: { - type: 'SelectControl', - freeForm: true, - clearable: false, - label: t('Rotate x axis label'), - choices: [ - [0, '0°'], - [45, '45°'], - [90, '90°'], - ], - default: xAxisLabelRotation, - renderTrigger: true, - description: t( - 'Input field supports custom rotation. e.g. 30 for 30°', - ), - }, - }, - ], + [xAxisLabelRotation], [ { name: 'x_axis_title_margin', @@ -212,7 +197,7 @@ const config: ControlPanelConfig = { [0, '0°'], [45, '45°'], ], - default: xAxisLabelRotation, + default: defaultYAxis.yAxisLabelRotation, renderTrigger: true, description: t( 'Input field supports custom rotation. e.g. 30 for 30°', 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 ec2443bb60fbf..f54b3d01dc73e 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx @@ -32,7 +32,11 @@ import { import { DEFAULT_FORM_DATA } from './types'; import { EchartsTimeseriesSeriesType } from '../Timeseries/types'; -import { legendSection, richTooltipSection } from '../controls'; +import { + legendSection, + richTooltipSection, + xAxisLabelRotation, +} from '../controls'; const { area, @@ -49,7 +53,6 @@ const { truncateYAxis, yAxisBounds, zoomable, - xAxisLabelRotation, yAxisIndex, } = DEFAULT_FORM_DATA; @@ -314,27 +317,7 @@ const config: ControlPanelConfig = { ...legendSection, [{t('X Axis')}], ['x_axis_time_format'], - [ - { - name: 'xAxisLabelRotation', - config: { - type: 'SelectControl', - freeForm: true, - clearable: false, - label: t('Rotate x axis label'), - choices: [ - [0, '0°'], - [45, '45°'], - [90, '90°'], - ], - default: xAxisLabelRotation, - renderTrigger: true, - description: t( - 'Input field supports custom rotation. e.g. 30 for 30°', - ), - }, - }, - ], + [xAxisLabelRotation], ...richTooltipSection, // eslint-disable-next-line react/jsx-key [{t('Y Axis')}], 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 018038772c092..1ca2805b2f77a 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 @@ -37,6 +37,7 @@ import { richTooltipSection, seriesOrderSection, percentageThresholdControl, + xAxisLabelRotation, truncateXAxis, xAxisBounds, } from '../../controls'; @@ -53,7 +54,6 @@ const { truncateYAxis, yAxisBounds, zoomable, - xAxisLabelRotation, } = DEFAULT_FORM_DATA; const config: ControlPanelConfig = { controlPanelSections: [ @@ -193,27 +193,7 @@ const config: ControlPanelConfig = { }, }, ], - [ - { - name: 'xAxisLabelRotation', - config: { - type: 'SelectControl', - freeForm: true, - clearable: false, - label: t('Rotate x axis label'), - choices: [ - [0, '0°'], - [45, '45°'], - [90, '90°'], - ], - default: xAxisLabelRotation, - renderTrigger: true, - description: t( - 'Input field supports custom rotation. e.g. 30 for 30°', - ), - }, - }, - ], + [xAxisLabelRotation], ...richTooltipSection, // eslint-disable-next-line react/jsx-key [{t('Y Axis')}], 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 c3002a24980c8..1fecf64e6a87d 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 @@ -37,6 +37,7 @@ import { showValueSection, truncateXAxis, xAxisBounds, + xAxisLabelRotation, } from '../../../controls'; import { OrientationType } from '../../types'; @@ -51,7 +52,6 @@ const { truncateYAxis, yAxisBounds, zoomable, - xAxisLabelRotation, orientation, } = DEFAULT_FORM_DATA; @@ -165,22 +165,9 @@ function createAxisControl(axis: 'x' | 'y'): ControlSetRow[] { ], [ { - name: 'xAxisLabelRotation', + name: xAxisLabelRotation.name, config: { - type: 'SelectControl', - freeForm: true, - clearable: false, - label: t('Rotate axis label'), - choices: [ - [0, '0°'], - [45, '45°'], - [90, '90°'], - ], - default: xAxisLabelRotation, - renderTrigger: true, - description: t( - 'Input field supports custom rotation. e.g. 30 for 30°', - ), + ...xAxisLabelRotation.config, visibility: ({ controls }: ControlPanelsContainerProps) => isXAxis ? isVertical(controls) : isHorizontal(controls), }, 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 5c5f7a0ab1cb3..488dac0738ee7 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 @@ -40,6 +40,7 @@ import { showValueSection, truncateXAxis, xAxisBounds, + xAxisLabelRotation, } from '../../../controls'; const { @@ -54,7 +55,6 @@ const { truncateYAxis, yAxisBounds, zoomable, - xAxisLabelRotation, } = DEFAULT_FORM_DATA; const config: ControlPanelConfig = { controlPanelSections: [ @@ -181,27 +181,7 @@ const config: ControlPanelConfig = { }, }, ], - [ - { - name: 'xAxisLabelRotation', - config: { - type: 'SelectControl', - freeForm: true, - clearable: false, - label: t('Rotate x axis label'), - choices: [ - [0, '0°'], - [45, '45°'], - [90, '90°'], - ], - default: xAxisLabelRotation, - renderTrigger: true, - description: t( - 'Input field supports custom rotation. e.g. 30 for 30°', - ), - }, - }, - ], + [xAxisLabelRotation], ...richTooltipSection, // eslint-disable-next-line react/jsx-key [{t('Y Axis')}], 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 6701647694b4e..436000c62de26 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 @@ -39,6 +39,7 @@ import { showValueSection, truncateXAxis, xAxisBounds, + xAxisLabelRotation, } from '../../../controls'; const { @@ -50,7 +51,6 @@ const { truncateYAxis, yAxisBounds, zoomable, - xAxisLabelRotation, } = DEFAULT_FORM_DATA; const config: ControlPanelConfig = { controlPanelSections: [ @@ -124,27 +124,7 @@ const config: ControlPanelConfig = { }, }, ], - [ - { - name: 'xAxisLabelRotation', - config: { - type: 'SelectControl', - freeForm: true, - clearable: false, - label: t('Rotate x axis label'), - choices: [ - [0, '0°'], - [45, '45°'], - [90, '90°'], - ], - default: xAxisLabelRotation, - renderTrigger: true, - description: t( - 'Input field supports custom rotation. e.g. 30 for 30°', - ), - }, - }, - ], + [xAxisLabelRotation], // eslint-disable-next-line react/jsx-key ...richTooltipSection, // eslint-disable-next-line react/jsx-key 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 0c6623f216ec4..2e05ab8202059 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 @@ -39,6 +39,7 @@ import { showValueSectionWithoutStack, truncateXAxis, xAxisBounds, + xAxisLabelRotation, } from '../../../controls'; const { @@ -50,7 +51,6 @@ const { truncateYAxis, yAxisBounds, zoomable, - xAxisLabelRotation, } = DEFAULT_FORM_DATA; const config: ControlPanelConfig = { controlPanelSections: [ @@ -123,27 +123,7 @@ const config: ControlPanelConfig = { }, }, ], - [ - { - name: 'xAxisLabelRotation', - config: { - type: 'SelectControl', - freeForm: true, - clearable: false, - label: t('Rotate x axis label'), - choices: [ - [0, '0°'], - [45, '45°'], - [90, '90°'], - ], - default: xAxisLabelRotation, - renderTrigger: true, - description: t( - 'Input field supports custom rotation. e.g. 30 for 30°', - ), - }, - }, - ], + [xAxisLabelRotation], // eslint-disable-next-line react/jsx-key ...richTooltipSection, // eslint-disable-next-line react/jsx-key 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 021c306d05cb8..311b85cac0ead 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 @@ -37,6 +37,7 @@ import { showValueSection, truncateXAxis, xAxisBounds, + xAxisLabelRotation, } from '../../controls'; const { @@ -50,7 +51,6 @@ const { truncateYAxis, yAxisBounds, zoomable, - xAxisLabelRotation, } = DEFAULT_FORM_DATA; const config: ControlPanelConfig = { controlPanelSections: [ @@ -175,27 +175,7 @@ const config: ControlPanelConfig = { }, }, ], - [ - { - name: 'xAxisLabelRotation', - config: { - type: 'SelectControl', - freeForm: true, - clearable: false, - label: t('Rotate x axis label'), - choices: [ - [0, '0°'], - [45, '45°'], - [90, '90°'], - ], - default: xAxisLabelRotation, - renderTrigger: true, - description: t( - 'Input field supports custom rotation. e.g. 30 for 30°', - ), - }, - }, - ], + [xAxisLabelRotation], ...richTooltipSection, // eslint-disable-next-line react/jsx-key [{t('Y Axis')}], diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/constants.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/constants.ts index a95a14077d8e8..215996ab122a5 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/constants.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/constants.ts @@ -30,6 +30,7 @@ import { DEFAULT_LEGEND_FORM_DATA, DEFAULT_TITLE_FORM_DATA, } from '../constants'; +import { defaultXAxis } from '../defaults'; // @ts-ignore export const DEFAULT_FORM_DATA: EchartsTimeseriesFormData = { @@ -62,7 +63,7 @@ export const DEFAULT_FORM_DATA: EchartsTimeseriesFormData = { yAxisBounds: [null, null], zoomable: false, richTooltip: true, - xAxisLabelRotation: 0, + xAxisLabelRotation: defaultXAxis.xAxisLabelRotation, groupby: [], showValue: false, onlyTotal: false, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx index 093617446a659..13fe754d99558 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx @@ -29,6 +29,7 @@ import { } from '@superset-ui/chart-controls'; import { DEFAULT_LEGEND_FORM_DATA, StackControlOptions } from './constants'; import { DEFAULT_FORM_DATA } from './Timeseries/constants'; +import { defaultXAxis } from './defaults'; const { legendMargin, legendOrientation, legendType, showLegend } = DEFAULT_LEGEND_FORM_DATA; @@ -243,6 +244,24 @@ const sortSeriesAscending: ControlSetItem = { }, }; +export const xAxisLabelRotation = { + name: 'xAxisLabelRotation', + config: { + type: 'SelectControl', + freeForm: true, + clearable: false, + label: t('Rotate x axis label'), + choices: [ + [0, '0°'], + [45, '45°'], + [90, '90°'], + ], + default: defaultXAxis.xAxisLabelRotation, + renderTrigger: true, + description: t('Input field supports custom rotation. e.g. 30 for 30°'), + }, +}; + export const seriesOrderSection: ControlSetRow[] = [ [{t('Series Order')}], [sortSeriesType], diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/defaults.ts b/superset-frontend/plugins/plugin-chart-echarts/src/defaults.ts index c5ada14932ebf..be37d6fcbf748 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/defaults.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/defaults.ts @@ -24,6 +24,11 @@ export const defaultGrid = { export const defaultYAxis = { scale: true, + yAxisLabelRotation: 0, +}; + +export const defaultXAxis = { + xAxisLabelRotation: 0, }; export const defaultLegendPadding = {