feat: x axis interval control to show ALL ticks on timeseries charts (#33729)

2026-04-19 08:04:53 +00:00 · 2025-06-10 21:40:56 -06:00
parent 86e7139245
commit e05ccb3824
17 changed files with 56 additions and 0 deletions
--- 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,
 };

--- 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',
--- 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',
--- 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>],
--- 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:
--- 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,
 };

--- 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>],
--- 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',
--- 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>],
--- 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
--- 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
--- 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>],
--- 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,
--- 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:
--- 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;
--- 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],
--- 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 = {