feat(time-pivot): limit the overlay to the N most recent periods

A long daily history pivoted weekly overlays a hundred-plus series at
once; the new Number of periods control keeps only the N most recent,
clamped between 1 and the periods present in the data, with empty
keeping them all.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: claude

superset-frontend/plugins/plugin-chart-echarts/src/TimePivot/controlPanel.ts

@@ -71,6 +71,22 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [
+          {
+            name: 'period_limit',
+            config: {
+              type: 'TextControl',
+              isInt: true,
+              label: t('Number of periods'),
+              renderTrigger: true,
+              default: '',
+              description: t(
+                'Show only the N most recent periods, from 1 up to the number ' +
+                  'of periods in the data. Leave empty to overlay them all.',
+              ),
+            },
+          },
+        ],
       ],
     },
     {

superset-frontend/plugins/plugin-chart-echarts/src/TimePivot/transformData.ts

@@ -109,6 +109,7 @@ export default function transformData(
   records: Record<string, unknown>[],
   metricLabel: string,
   freq: string,
+  periodLimit?: number,
 ): TimePivotSeries[] {
   const rows = records
     .filter(record => record[DTTM_ALIAS] != null)
@@ -124,9 +125,13 @@ export default function transformData(
     return [];
   }
 
-  const periods = Array.from(new Set(rows.map(row => row.period))).sort(
-    (a, b) => b - a,
-  );
+  const periods = Array.from(new Set(rows.map(row => row.period)))
+    .sort((a, b) => b - a)
+    .slice(
+      0,
+      // clamp to [1, available periods]; undefined keeps them all
+      periodLimit && periodLimit > 0 ? Math.floor(periodLimit) : undefined,
+    );
   const maxPeriod = periods[0];
   const rankOf = new Map(periods.map((period, index) => [period, index]));
   const maxRank = periods.length - 1;
@@ -137,6 +142,9 @@ export default function transformData(
   const values = new Map<string, Map<number, number | null>>();
   const shiftedTimestamps = new Set<number>();
   rows.forEach(({ timestamp, period, value }) => {
+    if (!rankOf.has(period)) {
+      return; // period dropped by the limit
+    }
     const series = seriesOf(rankOf.get(period)!);
     const shifted = timestamp + (maxPeriod - period);
     shiftedTimestamps.add(shifted);

superset-frontend/plugins/plugin-chart-echarts/src/TimePivot/transformProps.ts

@@ -41,6 +41,7 @@ export default function transformProps(
   const {
     metric,
     freq,
+    periodLimit,
     colorPicker,
     showLegend,
     lineInterpolation,
@@ -57,7 +58,12 @@ export default function transformProps(
   const metricLabel = getMetricLabel(metric ?? '');
   const records = (queriesData[0]?.data ?? []) as Record<string, unknown>[];
   const series: TimePivotSeries[] = Array.isArray(records)
-    ? transformData(records, metricLabel, (freq as string) || 'W-MON')
+    ? transformData(
+        records,
+        metricLabel,
+        (freq as string) || 'W-MON',
+        periodLimit ? Number(periodLimit) : undefined,
+      )
     : [];
 
   const { r, g, b } = colorPicker ?? DEFAULT_COLOR;

superset-frontend/plugins/plugin-chart-echarts/src/TimePivot/types.ts

@@ -27,6 +27,8 @@ export type EchartsTimePivotFormData = QueryFormData & {
   metric?: QueryFormMetric;
   /** pandas-style period offset, e.g. W-MON, D, AS */
   freq?: string;
+  /** keep only the N most recent periods; empty keeps all */
+  periodLimit?: number | string;
   colorPicker?: { r: number; g: number; b: number; a: number };
   showLegend?: boolean;
   lineInterpolation?: string;

superset-frontend/plugins/plugin-chart-echarts/test/TimePivot/transformData.test.ts

@@ -93,3 +93,16 @@ describe('TimePivot transformData', () => {
     expect(transformData([], 'sum__num', 'W-MON')).toEqual([]);
   });
 });
+
+test('limits to the N most recent periods, clamped to what exists', () => {
+  const WEEK = 7 * 24 * 3600 * 1000;
+  const M1 = 1578268800000;
+  const records = [0, 1, 2, 3].map(i => ({
+    __timestamp: M1 + i * WEEK,
+    m: 10 + i,
+  }));
+  const limited = transformData(records, 'm', 'W-MON', 2);
+  expect(limited.map(s => s.key).sort()).toEqual(['-1', 'current']);
+  // clamped: asking for more than available keeps them all
+  expect(transformData(records, 'm', 'W-MON', 99)).toHaveLength(4);
+});