This is an automated email from the ASF dual-hosted git repository. rusackas pushed a commit to branch x-axis-interval-control in repository https://gitbox.apache.org/repos/asf/superset.git
commit cc7f4de71e219f0e643d74ab799f687618efb672 Author: Evan Rusackas <[email protected]> AuthorDate: Mon Jun 9 17:31:52 2025 -0600 feat: x axis interval control to show ALL ticks on timeseries charts --- .../plugin-chart-echarts/src/Bubble/constants.ts | 1 + .../plugin-chart-echarts/src/Bubble/controlPanel.tsx | 2 ++ .../plugin-chart-echarts/src/Bubble/transformProps.ts | 2 ++ .../src/MixedTimeseries/controlPanel.tsx | 2 ++ .../src/MixedTimeseries/transformProps.ts | 2 ++ .../plugin-chart-echarts/src/MixedTimeseries/types.ts | 2 ++ .../src/Timeseries/Area/controlPanel.tsx | 2 ++ .../src/Timeseries/Regular/Bar/controlPanel.tsx | 13 +++++++++++++ .../src/Timeseries/Regular/Line/controlPanel.tsx | 2 ++ .../src/Timeseries/Regular/Scatter/controlPanel.tsx | 2 ++ .../src/Timeseries/Regular/SmoothLine/controlPanel.tsx | 2 ++ .../src/Timeseries/Step/controlPanel.tsx | 2 ++ .../plugin-chart-echarts/src/Timeseries/constants.ts | 1 + .../src/Timeseries/transformProps.ts | 2 ++ .../plugin-chart-echarts/src/Timeseries/types.ts | 1 + .../plugins/plugin-chart-echarts/src/controls.tsx | 17 +++++++++++++++++ .../plugins/plugin-chart-echarts/src/defaults.ts | 1 + 17 files changed, 56 insertions(+) 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 1c70e872e6..12e928b139 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/constants.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/constants.ts @@ -32,6 +32,7 @@ export const DEFAULT_FORM_DATA: Partial<EchartsBubbleFormData> = { xAxisBounds: [null, null], yAxisBounds: [null, null], xAxisLabelRotation: defaultXAxis.xAxisLabelRotation, + xAxisLabelInterval: defaultXAxis.xAxisLabelInterval, 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 521ae98130..3c58e0aecf 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/controlPanel.tsx @@ -31,6 +31,7 @@ import { truncateXAxis, xAxisBounds, xAxisLabelRotation, + xAxisLabelInterval, } from '../controls'; import { defaultYAxis } from '../defaults'; @@ -133,6 +134,7 @@ const config: ControlPanelConfig = { }, ], [xAxisLabelRotation], + [xAxisLabelInterval], [ { name: 'x_axis_title_margin', diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/transformProps.ts index 49e51f511b..68c152d07d 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/transformProps.ts @@ -120,6 +120,7 @@ export default function transformProps(chartProps: EchartsBubbleChartProps) { truncateXAxis, truncateYAxis, xAxisLabelRotation, + xAxisLabelInterval, yAxisLabelRotation, tooltipSizeFormat, opacity, @@ -197,6 +198,7 @@ export default function transformProps(chartProps: EchartsBubbleChartProps) { }, }, nameRotate: xAxisLabelRotation, + interval: xAxisLabelInterval, scale: true, name: bubbleXAxisTitle, nameLocation: 'middle', 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 3d67f51e83..c45d85d92c 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx @@ -41,6 +41,7 @@ import { truncateXAxis, xAxisBounds, xAxisLabelRotation, + xAxisLabelInterval, } from '../controls'; const { @@ -368,6 +369,7 @@ const config: ControlPanelConfig = { [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>], ['x_axis_time_format'], [xAxisLabelRotation], + [xAxisLabelInterval], ...richTooltipSection, // eslint-disable-next-line react/jsx-key [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>], diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts index 18e4636877..fc2a6fe438 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts @@ -195,6 +195,7 @@ export default function transformProps( tooltipSortByMetric, xAxisBounds, xAxisLabelRotation, + xAxisLabelInterval, groupby, groupbyB, xAxis: xAxisOrig, @@ -554,6 +555,7 @@ export default function transformProps( axisLabel: { formatter: xAxisFormatter, rotate: xAxisLabelRotation, + interval: xAxisLabelInterval, }, minorTick: { show: minorTicks }, minInterval: diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts index e79523d176..a8a2bac65d 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts @@ -61,6 +61,7 @@ export type EchartsMixedTimeseriesFormData = QueryFormData & { zoomable: boolean; richTooltip: boolean; xAxisLabelRotation: number; + xAxisLabelInterval?: number | string; colorScheme?: string; // types specific to Query A and Query B area: boolean; @@ -133,6 +134,7 @@ export const DEFAULT_FORM_DATA: EchartsMixedTimeseriesFormData = { zoomable: TIMESERIES_DEFAULTS.zoomable, richTooltip: TIMESERIES_DEFAULTS.richTooltip, xAxisLabelRotation: TIMESERIES_DEFAULTS.xAxisLabelRotation, + xAxisLabelInterval: TIMESERIES_DEFAULTS.xAxisLabelInterval, ...DEFAULT_TITLE_FORM_DATA, }; 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 daf42f6228..aafdc86037 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 { seriesOrderSection, percentageThresholdControl, xAxisLabelRotation, + xAxisLabelInterval, truncateXAxis, xAxisBounds, minorTicks, @@ -195,6 +196,7 @@ const config: ControlPanelConfig = { }, ], [xAxisLabelRotation], + [xAxisLabelInterval], ...richTooltipSection, // eslint-disable-next-line react/jsx-key [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>], 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 3c61cab809..5d480c3e09 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 @@ -38,6 +38,7 @@ import { truncateXAxis, xAxisBounds, xAxisLabelRotation, + xAxisLabelInterval, } from '../../../controls'; import { OrientationType } from '../../types'; @@ -188,6 +189,18 @@ function createAxisControl(axis: 'x' | 'y'): ControlSetRow[] { }, }, ], + [ + { + name: xAxisLabelInterval.name, + config: { + ...xAxisLabelInterval.config, + visibility: ({ controls }: ControlPanelsContainerProps) => + isXAxis ? isVertical(controls) : isHorizontal(controls), + disableStash: true, + resetOnHide: false, + }, + }, + ], [ { name: 'y_axis_format', 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 8bf40c06c8..847b1645a3 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 @@ -41,6 +41,7 @@ import { truncateXAxis, xAxisBounds, xAxisLabelRotation, + xAxisLabelInterval, } from '../../../controls'; const { @@ -183,6 +184,7 @@ const config: ControlPanelConfig = { }, ], [xAxisLabelRotation], + [xAxisLabelInterval], ...richTooltipSection, // eslint-disable-next-line react/jsx-key [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>], 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 c5bbe03ffb..6991196cdf 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 @@ -40,6 +40,7 @@ import { truncateXAxis, xAxisBounds, xAxisLabelRotation, + xAxisLabelInterval, } from '../../../controls'; const { @@ -126,6 +127,7 @@ const config: ControlPanelConfig = { }, ], [xAxisLabelRotation], + [xAxisLabelInterval], // 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 3275fad158..676b727887 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 @@ -40,6 +40,7 @@ import { truncateXAxis, xAxisBounds, xAxisLabelRotation, + xAxisLabelInterval, } from '../../../controls'; const { @@ -125,6 +126,7 @@ const config: ControlPanelConfig = { }, ], [xAxisLabelRotation], + [xAxisLabelInterval], // 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 5956d2efe1..6146db2572 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 @@ -38,6 +38,7 @@ import { truncateXAxis, xAxisBounds, xAxisLabelRotation, + xAxisLabelInterval, } from '../../controls'; const { @@ -177,6 +178,7 @@ const config: ControlPanelConfig = { }, ], [xAxisLabelRotation], + [xAxisLabelInterval], ...richTooltipSection, // eslint-disable-next-line react/jsx-key [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>], 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 32e8d876aa..e7e3034a5f 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/constants.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/constants.ts @@ -78,6 +78,7 @@ export const DEFAULT_FORM_DATA: EchartsTimeseriesFormData = { richTooltip: true, xAxisForceCategorical: false, xAxisLabelRotation: defaultXAxis.xAxisLabelRotation, + xAxisLabelInterval: defaultXAxis.xAxisLabelInterval, groupby: [], showValue: false, onlyTotal: false, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts index ac39507964..6a7119a33c 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts @@ -179,6 +179,7 @@ export default function transformProps( xAxisBounds, xAxisForceCategorical, xAxisLabelRotation, + xAxisLabelInterval, xAxisSort, xAxisSortAsc, xAxisTimeFormat, @@ -501,6 +502,7 @@ export default function transformProps( hideOverlap: true, formatter: xAxisFormatter, rotate: xAxisLabelRotation, + interval: xAxisLabelInterval, }, minorTick: { show: minorTicks }, minInterval: diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts index bdcb736956..76f8b6387f 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts @@ -90,6 +90,7 @@ export type EchartsTimeseriesFormData = QueryFormData & { zoomable: boolean; richTooltip: boolean; xAxisLabelRotation: number; + xAxisLabelInterval: number | string; showValue: boolean; onlyTotal: boolean; showExtraControls: boolean; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx index 5c52bb1762..b6055d8688 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx @@ -292,6 +292,23 @@ export const xAxisLabelRotation = { }, }; +export const xAxisLabelInterval = { + name: 'xAxisLabelInterval', + config: { + type: 'SelectControl', + freeForm: false, + clearable: false, + label: t('X Axis Label Interval'), + choices: [ + ['auto', t('Auto')], + ['0', t('All')], + ], + default: defaultXAxis.xAxisLabelInterval, + renderTrigger: true, + description: t('Choose how many X-Axis labels to show'), + }, +}; + export const seriesOrderSection: ControlSetRow[] = [ [<ControlSubSectionHeader>{t('Series Order')}</ControlSubSectionHeader>], [sortSeriesType], diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/defaults.ts b/superset-frontend/plugins/plugin-chart-echarts/src/defaults.ts index be37d6fcbf..798e785f05 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/defaults.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/defaults.ts @@ -29,6 +29,7 @@ export const defaultYAxis = { export const defaultXAxis = { xAxisLabelRotation: 0, + xAxisLabelInterval: 'auto', }; export const defaultLegendPadding = {
