feat(Timeseries & MixedTimeseries): Force selected timegrain on timeseries intervals when the x-axis is of timestamp type (#34595)

2026-04-19 16:14:52 +00:00 · 2025-09-11 08:57:23 +05:30
parent 5a2411fa64
commit eb4351af83
12 changed files with 47 additions and 2 deletions
--- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
@@ -42,6 +42,7 @@ import {
  xAxisBounds,
  xAxisLabelRotation,
  xAxisLabelInterval,
+  forceMaxInterval,
 } from '../controls';

 const {
@@ -358,6 +359,7 @@ const config: ControlPanelConfig = {
        ['x_axis_time_format'],
        [xAxisLabelRotation],
        [xAxisLabelInterval],
+        [forceMaxInterval],
        [<ControlSubSectionHeader>{t('Tooltip')}</ControlSubSectionHeader>],
        [
          {
--- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
@@ -214,6 +214,7 @@ export default function transformProps(
    sortSeriesAscending,
    sortSeriesAscendingB,
    timeGrainSqla,
+    forceMaxInterval,
    percentageThreshold,
    showQueryIdentifiers = false,
    metrics = [],
@@ -583,11 +584,17 @@ export default function transformProps(
      },
      minorTick: { show: minorTicks },
      minInterval:
-        xAxisType === AxisType.Time && timeGrainSqla
+        xAxisType === AxisType.Time && timeGrainSqla && !forceMaxInterval
          ? TIMEGRAIN_TO_TIMESTAMP[
              timeGrainSqla as keyof typeof TIMEGRAIN_TO_TIMESTAMP
            ]
          : 0,
+      maxInterval:
+        xAxisType === AxisType.Time && timeGrainSqla && forceMaxInterval
+          ? TIMEGRAIN_TO_TIMESTAMP[
+              timeGrainSqla as keyof typeof TIMEGRAIN_TO_TIMESTAMP
+            ]
+          : undefined,
      ...getMinAndMaxFromBounds(
        xAxisType,
        truncateXAxis,
--- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts
@@ -57,6 +57,7 @@ export type EchartsMixedTimeseriesFormData = QueryFormData & {
  truncateYAxis: boolean;
  truncateYAxisSecondary: boolean;
  timeGrainSqla?: TimeGranularity;
+  forceMaxInterval?: boolean;
  tooltipTimeFormat?: string;
  zoomable: boolean;
  richTooltip: boolean;
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
@@ -41,6 +41,7 @@ import {
  truncateXAxis,
  xAxisBounds,
  minorTicks,
+  forceMaxInterval,
 } from '../../controls';
 import { AreaChartStackControlOptions } from '../../constants';

@@ -185,6 +186,7 @@ const config: ControlPanelConfig = {
        ],
        [xAxisLabelRotation],
        [xAxisLabelInterval],
+        [forceMaxInterval],
        ...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
@@ -39,6 +39,7 @@ import {
  xAxisBounds,
  xAxisLabelRotation,
  xAxisLabelInterval,
+  forceMaxInterval,
 } from '../../../controls';

 import { OrientationType } from '../../types';
@@ -364,6 +365,7 @@ const config: ControlPanelConfig = {
        ...createAxisControl('x'),
        [truncateXAxis],
        [xAxisBounds],
+        [forceMaxInterval],
        ...richTooltipSection,
        [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
        ...createAxisControl('y'),
--- 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
@@ -42,6 +42,7 @@ import {
  xAxisBounds,
  xAxisLabelRotation,
  xAxisLabelInterval,
+  forceMaxInterval,
 } from '../../../controls';

 const {
@@ -173,6 +174,7 @@ const config: ControlPanelConfig = {
        ],
        [xAxisLabelRotation],
        [xAxisLabelInterval],
+        [forceMaxInterval],
        ...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
@@ -41,6 +41,7 @@ import {
  xAxisBounds,
  xAxisLabelRotation,
  xAxisLabelInterval,
+  forceMaxInterval,
 } from '../../../controls';

 const {
@@ -116,6 +117,7 @@ const config: ControlPanelConfig = {
        ],
        [xAxisLabelRotation],
        [xAxisLabelInterval],
+        [forceMaxInterval],
        // 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
@@ -41,6 +41,7 @@ import {
  xAxisBounds,
  xAxisLabelRotation,
  xAxisLabelInterval,
+  forceMaxInterval,
 } from '../../../controls';

 const {
@@ -115,6 +116,7 @@ const config: ControlPanelConfig = {
        ],
        [xAxisLabelRotation],
        [xAxisLabelInterval],
+        [forceMaxInterval],
        // 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
@@ -39,6 +39,7 @@ import {
  xAxisBounds,
  xAxisLabelRotation,
  xAxisLabelInterval,
+  forceMaxInterval,
 } from '../../controls';

 const {
@@ -167,6 +168,7 @@ const config: ControlPanelConfig = {
        ],
        [xAxisLabelRotation],
        [xAxisLabelInterval],
+        [forceMaxInterval],
        ...richTooltipSection,
        // eslint-disable-next-line react/jsx-key
        [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
@@ -168,6 +168,7 @@ export default function transformProps(
    sortSeriesType,
    sortSeriesAscending,
    timeGrainSqla,
+    forceMaxInterval,
    timeCompare,
    timeShiftColor,
    stack,
@@ -510,11 +511,17 @@ export default function transformProps(
    },
    minorTick: { show: minorTicks },
    minInterval:
-      xAxisType === AxisType.Time && timeGrainSqla
+      xAxisType === AxisType.Time && timeGrainSqla && !forceMaxInterval
        ? TIMEGRAIN_TO_TIMESTAMP[
            timeGrainSqla as keyof typeof TIMEGRAIN_TO_TIMESTAMP
          ]
        : 0,
+    maxInterval:
+      xAxisType === AxisType.Time && timeGrainSqla && forceMaxInterval
+        ? TIMEGRAIN_TO_TIMESTAMP[
+            timeGrainSqla as keyof typeof TIMEGRAIN_TO_TIMESTAMP
+          ]
+        : undefined,
    ...getMinAndMaxFromBounds(
      xAxisType,
      truncateXAxis,
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts
@@ -85,6 +85,7 @@ export type EchartsTimeseriesFormData = QueryFormData & {
  xAxisForceCategorical?: boolean;
  xAxisTimeFormat?: string;
  timeGrainSqla?: TimeGranularity;
+  forceMaxInterval?: boolean;
  xAxisBounds: [number | undefined | null, number | undefined | null];
  yAxisBounds: [number | undefined | null, number | undefined | null];
  zoomable: boolean;
--- a/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
@@ -338,6 +338,21 @@ export const xAxisLabelInterval = {
  },
 };

+export const forceMaxInterval = {
+  name: 'force_max_interval',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Force Time Grain as Max Interval'),
+    renderTrigger: true,
+    default: false,
+    description: t(
+      'Forces selected Time Grain as the maximum interval for X Axis Labels',
+    ),
+    visibility: ({ controls }: ControlPanelsContainerProps) =>
+      Boolean(controls?.time_grain_sqla?.value),
+  },
+};
+
 export const seriesOrderSection: ControlSetRow[] = [
  [<ControlSubSectionHeader>{t('Series Order')}</ControlSubSectionHeader>],
  [sortSeriesType],