chore: Moves xAxisLabelRotation to shared controls (#26212)

This commit is contained in:
Michael S. Molina 2023-12-08 13:37:06 -03:00 committed by GitHub
parent dbed64a2c6
commit 005cf5947b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 57 additions and 176 deletions

View File

@ -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<EchartsBubbleFormData> = {
@ -29,7 +30,7 @@ export const DEFAULT_FORM_DATA: Partial<EchartsBubbleFormData> = {
truncateXAxis: false,
truncateYAxis: false,
yAxisBounds: [null, null],
xAxisLabelRotation: 0,
xAxisLabelRotation: defaultXAxis.xAxisLabelRotation,
opacity: 0.6,
};

View File

@ -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°',

View File

@ -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,
[<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
['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
[<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],

View File

@ -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
[<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],

View File

@ -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),
},

View File

@ -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
[<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],

View File

@ -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

View File

@ -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

View File

@ -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
[<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],

View File

@ -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,

View File

@ -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[] = [
[<ControlSubSectionHeader>{t('Series Order')}</ControlSubSectionHeader>],
[sortSeriesType],

View File

@ -24,6 +24,11 @@ export const defaultGrid = {
export const defaultYAxis = {
scale: true,
yAxisLabelRotation: 0,
};
export const defaultXAxis = {
xAxisLabelRotation: 0,
};
export const defaultLegendPadding = {