chore: Moves xAxisLabelRotation to shared controls (#26212)
This commit is contained in:
parent
dbed64a2c6
commit
005cf5947b
|
|
@ -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,
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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°',
|
||||
|
|
|
|||
|
|
@ -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>],
|
||||
|
|
|
|||
|
|
@ -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>],
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>],
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>],
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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],
|
||||
|
|
|
|||
|
|
@ -24,6 +24,11 @@ export const defaultGrid = {
|
|||
|
||||
export const defaultYAxis = {
|
||||
scale: true,
|
||||
yAxisLabelRotation: 0,
|
||||
};
|
||||
|
||||
export const defaultXAxis = {
|
||||
xAxisLabelRotation: 0,
|
||||
};
|
||||
|
||||
export const defaultLegendPadding = {
|
||||
|
|
|
|||
Loading…
Reference in New Issue