@sybilion/uilib 1.3.63 → 1.3.65

package/src/components/widgets/PerformanceChart/index.ts

@@ -15,6 +15,9 @@ export {
   averageForecastErrorsVsHistoricalForMatrixColumn,
   buildDriftSpaghettiMatrixForCustomDialog,
   buildPerHorizonSpaghettiEntries,
+  extendCustomPerformanceDriftSeedToHistoricalEnd,
+  extendCustomPerformanceMatrixWithDriftSeed,
+  latestHistoricalMonthKey,
   buildSpaghettiMergedChartData,
   calculateYRangeFromChartData,
   getForecastModelDisplayName,

package/src/components/widgets/PerformanceChart/performanceChart.helpers.ts

@@ -5,6 +5,7 @@
 import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
 import type { ForecastData } from '#uilib/types/forecast-data';
 import {
+  getNextMonth,
   getPreviousMonth,
   normalizeToMonthStart,
 } from '#uilib/utils/chartConnectionPoint';
@@ -67,19 +68,16 @@ function addSpaghettiHistoricalBridgeForSeries(
   map.set(connectionDate, row);
 }
 
-/**
- * Converts `performance.model` / `performance.drift` per-horizon forecasts into synthetic
- * backtest-shaped entries: each line is [horizon_1[i], …, horizon_n[i]] as date→value points
- * (aligned by sorted key index per horizon).
- */
-export function buildPerHorizonSpaghettiEntries(
-  forecastRoot:
-    | { forecasts?: Record<string, Record<string, number>> }
-    | null
-    | undefined,
+type PerHorizonForecastRoot = {
+  forecasts?: Record<string, Record<string, number>>;
+};
+
+/** When horizons have different lengths, align on the latest `n` months (suffix), not the oldest. */
+function perHorizonSortedKeyLists(
+  forecastRoot: PerHorizonForecastRoot,
   horizonKeys: string[],
-): RealBacktestsEntry[] {
-  if (!forecastRoot?.forecasts || horizonKeys.length === 0) return [];
+): { sortedHorizons: string[]; perHorizonKeyLists: string[][] } | null {
+  if (!forecastRoot.forecasts || horizonKeys.length === 0) return null;
 
   const forecasts = forecastRoot.forecasts;
   const sortedHorizons = [...horizonKeys].sort((a, b) => {
@@ -99,16 +97,57 @@ export function buildPerHorizonSpaghettiEntries(
   });
 
   const lengths = perHorizonKeyLists.map(l => l.length).filter(l => l > 0);
-  if (lengths.length === 0) return [];
-  const n = Math.min(...lengths);
+  if (lengths.length === 0) return null;
+
+  return { sortedHorizons, perHorizonKeyLists };
+}
+
+function alignedHorizonRowCount(perHorizonKeyLists: string[][]): number {
+  const lengths = perHorizonKeyLists.map(l => l.length).filter(l => l > 0);
+  if (lengths.length === 0) return 0;
+  return Math.min(...lengths);
+}
+
+function horizonDateKeyAtRow(
+  perHorizonKeyLists: string[][],
+  horizonIndex: number,
+  rowIndex: number,
+  rowCount: number,
+): string | undefined {
+  const keys = perHorizonKeyLists[horizonIndex];
+  if (!keys?.length) return undefined;
+  const offset = keys.length - rowCount;
+  return keys[offset + rowIndex];
+}
+
+/**
+ * Converts `performance.model` / `performance.drift` per-horizon forecasts into synthetic
+ * backtest-shaped entries: each line is [horizon_1[i], …, horizon_n[i]] as date→value points
+ * (aligned on the latest shared months per horizon).
+ */
+export function buildPerHorizonSpaghettiEntries(
+  forecastRoot:
+    | { forecasts?: Record<string, Record<string, number>> }
+    | null
+    | undefined,
+  horizonKeys: string[],
+): RealBacktestsEntry[] {
+  const aligned = perHorizonSortedKeyLists(forecastRoot ?? {}, horizonKeys);
+  if (!aligned) return [];
+
+  const { sortedHorizons, perHorizonKeyLists } = aligned;
+  const forecasts = forecastRoot!.forecasts!;
+  const normalizeDateKey = (d: string) => d.split(' ')[0];
+  const n = alignedHorizonRowCount(perHorizonKeyLists);
+  if (n === 0) return [];
 
   const entries: RealBacktestsEntry[] = [];
   for (let i = 0; i < n; i++) {
     const forecast_series: Record<string, number> = {};
     for (let hi = 0; hi < sortedHorizons.length; hi++) {
       const h = sortedHorizons[hi];
-      const keys = perHorizonKeyLists[hi];
-      const dateKey = keys[i];
+      const dateKey = horizonDateKeyAtRow(perHorizonKeyLists, hi, i, n);
+      if (!dateKey) continue;
       const rawVal = forecasts[h]?.[dateKey];
       if (typeof rawVal !== 'number' || !Number.isFinite(rawVal)) continue;
       const norm = normalizeToMonthStart(normalizeDateKey(dateKey));
@@ -127,7 +166,7 @@ export function buildPerHorizonSpaghettiEntries(
 
 /**
  * Same row alignment as {@link buildPerHorizonSpaghettiEntries}: row `i` uses each horizon's
- * i-th sorted forecast month; `dates[i]` is horizon_1's month at that row (Date column).
+ * latest-aligned forecast month; `dates[i]` is horizon_1's month at that row (Date column).
  * Use this for custom dialog seed + “copy statistical baseline (drift)” prefill.
  */
 export function buildDriftSpaghettiMatrixForCustomDialog(
@@ -141,28 +180,14 @@ export function buildDriftSpaghettiMatrixForCustomDialog(
   grid: number[][];
   perHorizonDates: string[][];
 } | null {
-  if (!driftRoot?.forecasts || horizonKeys.length === 0) return null;
-
-  const forecasts = driftRoot.forecasts;
-  const sortedHorizons = [...horizonKeys].sort((a, b) => {
-    const na = parseInt(a.replace(/\D/g, ''), 10) || 0;
-    const nb = parseInt(b.replace(/\D/g, ''), 10) || 0;
-    return na - nb;
-  });
+  const aligned = perHorizonSortedKeyLists(driftRoot ?? {}, horizonKeys);
+  if (!aligned) return null;
 
+  const { sortedHorizons, perHorizonKeyLists } = aligned;
+  const forecasts = driftRoot!.forecasts!;
   const normalizeDateKey = (d: string) => d.split(' ')[0];
-
-  const perHorizonKeyLists: string[][] = sortedHorizons.map(h => {
-    const m = forecasts[h];
-    if (!m || typeof m !== 'object') return [];
-    return Object.keys(m).sort((a, b) =>
-      normalizeDateKey(a).localeCompare(normalizeDateKey(b)),
-    );
-  });
-
-  const lengths = perHorizonKeyLists.map(l => l.length).filter(l => l > 0);
-  if (lengths.length === 0) return null;
-  const n = Math.min(...lengths);
+  const n = alignedHorizonRowCount(perHorizonKeyLists);
+  if (n === 0) return null;
 
   const dates: string[] = [];
   const grid: number[][] = [];
@@ -173,16 +198,20 @@ export function buildDriftSpaghettiMatrixForCustomDialog(
     const dateRow: string[] = [];
     for (let hi = 0; hi < sortedHorizons.length; hi++) {
       const h = sortedHorizons[hi];
-      const keys = perHorizonKeyLists[hi];
-      const dateKey = keys[i];
+      const dateKey = horizonDateKeyAtRow(perHorizonKeyLists, hi, i, n);
+      if (!dateKey) {
+        row.push(0);
+        dateRow.push('');
+        continue;
+      }
       dateRow.push(normalizeToMonthStart(normalizeDateKey(dateKey)));
       const rawVal = forecasts[h]?.[dateKey];
       const v =
         typeof rawVal === 'number' && Number.isFinite(rawVal) ? rawVal : NaN;
       row.push(v);
     }
-    const d0 = perHorizonKeyLists[0][i];
-    dates.push(normalizeToMonthStart(normalizeDateKey(d0)));
+    const d0 = horizonDateKeyAtRow(perHorizonKeyLists, 0, i, n);
+    dates.push(d0 ? normalizeToMonthStart(normalizeDateKey(d0)) : '');
     perHorizonDates.push(dateRow);
     grid.push(row.map(c => (Number.isFinite(c) ? c : 0)));
   }
@@ -194,6 +223,133 @@ export function buildDriftSpaghettiMatrixForCustomDialog(
   };
 }
 
+export function latestHistoricalMonthKey(
+  historicalByDate: Map<string, number>,
+): string | null {
+  let latest: string | null = null;
+  historicalByDate.forEach((_, d) => {
+    if (!latest || d.localeCompare(latest) > 0) latest = d;
+  });
+  return latest;
+}
+
+/**
+ * Append monthly spaghetti rows after drift backtests so the dialog (and chart) reach the latest
+ * historical month (e.g. Apr 2026), not only the last drift origin (e.g. Nov 2025).
+ */
+export function extendCustomPerformanceDriftSeedToHistoricalEnd(
+  seed: {
+    dates: string[];
+    grid: number[][];
+    perHorizonDates: string[][];
+  },
+  historicalByDate: Map<string, number>,
+): {
+  dates: string[];
+  grid: number[][];
+  perHorizonDates: string[][];
+} {
+  const latest = latestHistoricalMonthKey(historicalByDate);
+  if (!latest || seed.dates.length === 0) return seed;
+
+  const norm = (d: string) =>
+    normalizeToMonthStart(String(d).split(' ')[0] ?? d);
+
+  const dates = seed.dates.map(d => norm(d));
+  const grid = seed.grid.map(r => [...r]);
+  const perHorizonDates = seed.perHorizonDates.map(row =>
+    row.map(d => norm(String(d))),
+  );
+  const horizonCount = grid[0]?.length ?? perHorizonDates[0]?.length ?? 0;
+  if (horizonCount === 0) return seed;
+
+  let lastOrigin = dates[dates.length - 1];
+  if (!lastOrigin) return seed;
+
+  while (lastOrigin.localeCompare(latest) < 0) {
+    const nextOrigin = norm(getNextMonth(lastOrigin));
+    const prevPh = perHorizonDates[perHorizonDates.length - 1];
+    const newPh =
+      prevPh.length === horizonCount
+        ? prevPh.map(d => norm(getNextMonth(norm(d))))
+        : Array.from({ length: horizonCount }, () => nextOrigin);
+
+    perHorizonDates.push(newPh);
+    dates.push(nextOrigin);
+
+    const baselineRow = spaghettiGridFromHistoricalPreviousMonth(
+      [newPh],
+      horizonCount,
+      historicalByDate,
+    );
+    grid.push(baselineRow[0] ?? Array.from({ length: horizonCount }, () => 0));
+
+    lastOrigin = nextOrigin;
+  }
+
+  return { dates, grid, perHorizonDates };
+}
+
+/** Pad a saved custom matrix with drift/baseline rows so edit + chart cover latest backtest months. */
+export function extendCustomPerformanceMatrixWithDriftSeed(
+  saved: SpaghettiPerformanceMatrixPayload,
+  driftSeed: {
+    dates: string[];
+    grid: number[][];
+    perHorizonDates: string[][];
+  },
+  baselineGrid?: number[][],
+): SpaghettiPerformanceMatrixPayload {
+  const norm = (d: string) =>
+    normalizeToMonthStart(String(d).split(' ')[0] ?? d);
+  const horizonCount = saved.horizonKeys.length;
+
+  const savedByDate = new Map<
+    string,
+    { grid: number[]; perHorizon?: string[] }
+  >();
+  for (let r = 0; r < saved.dates.length; r++) {
+    savedByDate.set(norm(saved.dates[r]), {
+      grid: saved.grid[r],
+      perHorizon: saved.perHorizonDates?.[r],
+    });
+  }
+
+  const dates: string[] = [];
+  const grid: number[][] = [];
+  const perHorizonDates: string[][] = [];
+
+  for (let i = 0; i < driftSeed.dates.length; i++) {
+    const d = norm(driftSeed.dates[i]);
+    if (!d) continue;
+    dates.push(d);
+    const existing = savedByDate.get(d);
+    if (existing) {
+      grid.push([...existing.grid]);
+      const ph =
+        existing.perHorizon && existing.perHorizon.length === horizonCount
+          ? existing.perHorizon.map(c => norm(String(c)))
+          : (driftSeed.perHorizonDates[i]?.map(c => norm(String(c))) ?? []);
+      perHorizonDates.push(ph);
+      continue;
+    }
+    grid.push(
+      baselineGrid?.[i] ? [...baselineGrid[i]] : [...driftSeed.grid[i]],
+    );
+    perHorizonDates.push(
+      (driftSeed.perHorizonDates[i] ?? []).map(c => norm(String(c))),
+    );
+  }
+
+  return {
+    v: saved.v,
+    dates,
+    horizonKeys: [...saved.horizonKeys],
+    grid,
+    perHorizonDates,
+  };
+}
+
 /**
  * Prefill for custom performance when copying drift layout: each spaghetti row is flat at the
  * historical value for the month before the earliest forecast month in that row (same anchor as

package/src/docs/pages/IncludeHiddenInYScalePage.tsx

@@ -0,0 +1,152 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import { ChartAreaInteractive } from '#uilib/components/ui/ChartAreaInteractive';
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+import type { ForecastItemData } from '#uilib/components/ui/ChartAreaInteractive/ChartLines';
+import { calculateChartYRange } from '#uilib/components/ui/ChartAreaInteractive/overlays/useChartYRange';
+import { Label } from '#uilib/components/ui/Label';
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { Switch } from '#uilib/components/ui/Switch';
+import { useTheme } from '#uilib/contexts/theme-context';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+const FORECAST_BASELINE_ID = 1;
+const FORECAST_HIGH_ID = 2;
+
+const DEMO_FORECAST_ITEMS: ForecastItemData[] = [
+  { id: FORECAST_BASELINE_ID, name: 'Baseline forecast' },
+  { id: FORECAST_HIGH_ID, name: 'High scenario (hidden)' },
+];
+
+const INITIAL_CHART: ChartDataPoint[] = [
+  { date: '2022-01-01', historical: 8 },
+  { date: '2022-02-01', historical: 10 },
+  { date: '2022-03-01', historical: 9 },
+  { date: '2022-04-01', historical: 12 },
+  { date: '2022-05-01', historical: 11 },
+  { date: '2022-06-01', historical: 12 },
+  { date: '2022-07-01', historical: 13 },
+  { date: '2022-08-01', historical: 12 },
+  { date: '2022-09-01', historical: 14 },
+  { date: '2022-10-01', historical: 13 },
+  { date: '2022-11-01', historical: 15 },
+  { date: '2022-12-01', historical: 14 },
+  { date: '2023-01-01', historical: 10 },
+  { date: '2023-02-01', historical: 12 },
+  { date: '2023-03-01', historical: 11 },
+  { date: '2023-04-01', historical: 14 },
+  { date: '2023-05-01', historical: 13 },
+  {
+    date: '2023-06-01',
+    [`forecast_${FORECAST_BASELINE_ID}`]: 13.5,
+    [`forecast_${FORECAST_HIGH_ID}`]: 88,
+  },
+  {
+    date: '2023-07-01',
+    [`forecast_${FORECAST_BASELINE_ID}`]: 14,
+    [`forecast_${FORECAST_HIGH_ID}`]: 92,
+  },
+  {
+    date: '2023-08-01',
+    [`forecast_${FORECAST_BASELINE_ID}`]: 15,
+    [`forecast_${FORECAST_HIGH_ID}`]: 95,
+  },
+];
+
+export default function IncludeHiddenInYScalePage() {
+  const { isDarkMode } = useTheme();
+  const [timeRange, setTimeRange] = useState<string>('All');
+  const [chartData] = useState<ChartDataPoint[]>(INITIAL_CHART);
+  const [hidden, setHidden] = useState<Set<string>>(
+    () => new Set([`forecast_${FORECAST_HIGH_ID}`]),
+  );
+  const [includeHiddenInYScale, setIncludeHiddenInYScale] = useState(false);
+
+  const toggleLegendSeries = useCallback((key: string) => {
+    setHidden(prev => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+
+  const ensureAnalysisSeriesVisible = useCallback(() => {}, []);
+
+  const yRange = useMemo(
+    () =>
+      calculateChartYRange(chartData, {
+        excludeQuantileBands: true,
+        hiddenSeries: hidden,
+        includeHiddenInYScale,
+      }),
+    [chartData, hidden, includeHiddenInYScale],
+  );
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'includeHiddenInYScale' }]}
+        title="includeHiddenInYScale"
+        subheader={
+          <>
+            <code>BaseChartWrapper</code> / <code>ChartAreaInteractive</code>{' '}
+            prop. When <code>false</code> (default), hidden legend series are
+            excluded from Y-axis domain; when <code>true</code>, hidden values
+            still expand the scale (legacy behavior). Toggle the high scenario
+            in the legend, then flip the switch to compare.
+          </>
+        }
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <div
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            gap: 16,
+            marginBottom: 16,
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <Switch
+              id="include-hidden-y-scale"
+              checked={includeHiddenInYScale}
+              onCheckedChange={setIncludeHiddenInYScale}
+            />
+            <Label htmlFor="include-hidden-y-scale">
+              includeHiddenInYScale
+            </Label>
+          </div>
+          <span style={{ color: 'var(--muted-foreground)', fontSize: 13 }}>
+            Y domain: {yRange.yMin} – {yRange.yMax}
+            {hidden.has(`forecast_${FORECAST_HIGH_ID}`)
+              ? ' (high scenario hidden)'
+              : ' (all series visible)'}
+          </span>
+        </div>
+        <ChartAreaInteractive
+          timeRange={timeRange}
+          onTimeRangeChange={setTimeRange}
+          pinMonth={undefined}
+          onPinMonthChange={() => {}}
+          chartData={chartData}
+          forecastData={DEMO_FORECAST_ITEMS}
+          loading={false}
+          isDarkTheme={isDarkMode}
+          toggleLegendSeries={toggleLegendSeries}
+          ensureAnalysisSeriesVisible={ensureAnalysisSeriesVisible}
+          hiddenSeries={hidden}
+          includeHiddenInYScale={includeHiddenInYScale}
+          yMin={yRange.yMin}
+          yMax={yRange.yMax}
+          autoScaleYAxis={false}
+          disableTimeRangeSelector
+        />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/registry.ts

@@ -97,6 +97,12 @@ export const DOC_REGISTRY: DocEntry[] = [
     section: 'Charts',
     load: () => import('./pages/ChartAreaInteractivePage'),
   },
+  {
+    slug: 'include-hidden-in-y-scale',
+    title: 'includeHiddenInYScale',
+    section: 'Charts',
+    load: () => import('./pages/IncludeHiddenInYScalePage'),
+  },
   {
     slug: 'lightweight-forecast-chart',
     title: 'LightweightForecastChart',