@sybilion/uilib 1.3.56 → 1.3.58

package/dist/esm/components/ui/Card/Card.js

@@ -19,7 +19,7 @@ function CardTitle({ className, ...props }) {
     return (jsx(TextWithDeferTooltip, { maxWidth: 400, "data-slot": "card-title", className: cn(S.title, className), ...props }));
 }
 function CardDescription({ className, ...props }) {
-    return (jsx(TextWithDeferTooltip, { maxWidth: 400, "data-slot": "card-description", className: cn(S.description, className), ...props }));
+    return (jsx(TextWithDeferTooltip, { maxWidth: 400, "data-slot": "card-description", className: cn(S.description, className), overTrigger: true, ...props }));
 }
 function CardAction({ className, ...props }) {
     return (jsx("div", { "data-slot": "card-action", className: cn(S.action, className), ...props }));

package/dist/esm/components/ui/Chart/components/BaseChartWrapper.js

@@ -315,7 +315,7 @@ const BaseChartWrapperContent = forwardRef((props, ref) => {
     }
     const ChartComponent = chartType === 'line' ? LineChart : ComposedChart;
     const defaultLabelFormatter = (v) => formatDateFn(v, true);
-    return (jsxs("div", { className: cn(S.root, !showLegend && S.noLegend, !showChartAxesLegend && S.hideChartAxesLegend, disableLineDrawAnimation && S.noLineDrawAnimation, isLoaded && S.loaded, className), ref: setRefs, children: [loading && (jsx("div", { className: S.loadingOverlay, children: jsx(Skeleton, {}) })), showGrid && (jsx(ChartContainer, { config: chartConfig, className: cn(S.gridLayer, chartClassName), style: height ? { height: `${height}px` } : undefined, children: jsxs(ChartComponent, { data: chartData, margin: margin, isAnimationActive: !disableAnimation, children: [jsx(ChartGrid, {}), showAxes && (jsx(ChartAxes, { formatDate: formatDateFn, formatNumber: formatNumber, xAxisClassName: xAxisClassName, yAxisClassName: yAxisClassName, xAxisLabel: xAxisLabel, yAxisLabel: yAxisLabel, xMin: xMin, xMax: xMax, yMin: yMin, yMax: yMax, autoScaleYAxis: effectiveAutoScale }))] }) })), jsx(ChartContainer, { config: chartConfig, className: cn(S.chartLayer, chartClassName), style: height ? { height: `${height}px` } : undefined, ...containerProps, children: jsxs(ChartComponent, { data: chartData, margin: margin, isAnimationActive: !disableAnimation, children: [showAxes && (jsx(ChartAxes, { formatDate: formatDateFn, formatNumber: formatNumber, xAxisClassName: cn(xAxisClassName), yAxisClassName: cn(yAxisClassName), xAxisLabel: xAxisLabel, yAxisLabel: yAxisLabel, xMin: xMin, xMax: xMax, yMin: yMin, yMax: yMax, autoScaleYAxis: effectiveAutoScale })), quantileBands?.[0] && (jsx(QuantileBands, { hiddenBands: hiddenSeries, quantileBandKey: quantileBandKey, animate: true, animationDuration: 150, animationBegin: 0, customBands: quantileBands, showLegend: showLegend })), jsx(ChartLines, { historicalLineColor: historicalLineColor, chartData: chartData, forecastData: forecastData, hiddenSeries: hiddenSeries, isDarkTheme: isDarkTheme, shouldAnimate: shouldAnimate, disableAnimation: disableAnimation, disableHistoricalAnimation: disableHistoricalAnimation, showLegend: showLegend, forecastLineStyle: forecastLineStyle }), showTooltip && (jsx("div", { children: jsx(Tooltip, { cursor: false, offset: TOOLTIP_OFFSET, allowEscapeViewBox: { x: false, y: false }, content: renderTooltipContent }) }))] }) }), overlayElements, jsxs("div", { className: cn(S.footer, footerClassName), children: [showLegend &&
+    return (jsxs("div", { className: cn(S.root, !showLegend && S.noLegend, !showChartAxesLegend && S.hideChartAxesLegend, disableLineDrawAnimation && S.noLineDrawAnimation, isLoaded && S.loaded, className), ref: setRefs, children: [loading && (jsx("div", { className: S.loadingOverlay, children: jsx(Skeleton, {}) })), showGrid && (jsx(ChartContainer, { config: chartConfig, className: cn(S.gridLayer, chartClassName), style: height ? { height: `${height}px` } : undefined, children: jsxs(ChartComponent, { data: chartData, margin: margin, children: [jsx(ChartGrid, {}), showAxes && (jsx(ChartAxes, { formatDate: formatDateFn, formatNumber: formatNumber, xAxisClassName: xAxisClassName, yAxisClassName: yAxisClassName, xAxisLabel: xAxisLabel, yAxisLabel: yAxisLabel, xMin: xMin, xMax: xMax, yMin: yMin, yMax: yMax, autoScaleYAxis: effectiveAutoScale }))] }) })), jsx(ChartContainer, { config: chartConfig, className: cn(S.chartLayer, chartClassName), style: height ? { height: `${height}px` } : undefined, ...containerProps, children: jsxs(ChartComponent, { data: chartData, margin: margin, children: [showAxes && (jsx(ChartAxes, { formatDate: formatDateFn, formatNumber: formatNumber, xAxisClassName: cn(xAxisClassName), yAxisClassName: cn(yAxisClassName), xAxisLabel: xAxisLabel, yAxisLabel: yAxisLabel, xMin: xMin, xMax: xMax, yMin: yMin, yMax: yMax, autoScaleYAxis: effectiveAutoScale })), quantileBands?.[0] && (jsx(QuantileBands, { hiddenBands: hiddenSeries, quantileBandKey: quantileBandKey, animate: true, animationDuration: 150, animationBegin: 0, customBands: quantileBands, showLegend: showLegend })), jsx(ChartLines, { historicalLineColor: historicalLineColor, chartData: chartData, forecastData: forecastData, hiddenSeries: hiddenSeries, isDarkTheme: isDarkTheme, shouldAnimate: shouldAnimate, disableAnimation: disableAnimation, disableHistoricalAnimation: disableHistoricalAnimation, showLegend: showLegend, forecastLineStyle: forecastLineStyle }), showTooltip && (jsx("div", { children: jsx(Tooltip, { cursor: false, offset: TOOLTIP_OFFSET, allowEscapeViewBox: { x: false, y: false }, content: renderTooltipContent }) }))] }) }), overlayElements, jsxs("div", { className: cn(S.footer, footerClassName), children: [showLegend &&
                         (legendVariant === 'svg' ? (jsx(LegendSvg, { payload: legendPayload.map(p => ({
                                 value: p.value,
                                 color: p.color,

package/dist/esm/components/widgets/DriversComparisonChart/DriversComparisonChart.js

@@ -28,7 +28,7 @@ import { Table, TableHeader, TableRow, TableHead, TableCellValue, TableBody, Tab
 import { TextShimmer } from '../../ui/TextShimmer/TextShimmer.js';
 import { TIME_RANGES } from '../../ui/TimeRangeControls/TimeRangeControls.constants.js';
 import S from './DriversComparisonChart.styl.js';
-import { applyDriversComparisonViewToPayload, mergeBacktestsChartData, mergeDatasetHistoricalWithBacktestsChartData, DRIVER_FORECAST_ID_BASE, getLagDisplayForView, resolveDriverLagLabel, INITIAL_VISIBLE_SERIES_COUNT, buildDriversComparisonChartData, formatSeriesImportance } from './driversComparisonChart.helpers.js';
+import { applyDriversComparisonViewToPayload, mergeBacktestsChartData, mergeDatasetHistoricalWithBacktestsChartData, computeDriversComparisonHistoricalWindowFloor, DRIVER_FORECAST_ID_BASE, getLagDisplayForView, resolveDriverLagLabel, INITIAL_VISIBLE_SERIES_COUNT, buildDriversComparisonChartData, formatSeriesImportance } from './driversComparisonChart.helpers.js';
 
 const ALL_TIME_RANGE = TIME_RANGES[TIME_RANGES.length - 1];
 function toForecastDataKey(id) {
@@ -82,6 +82,16 @@ function DriversComparisonChart({ payload, datasetHistorical = [], loading = fal
     }, [payloadForView?.drivers]);
     const mergedChartData = useMemo(() => mergeBacktestsChartData(payloadForView), [payloadForView]);
     const mergedWithHistorical = useMemo(() => mergeDatasetHistoricalWithBacktestsChartData(datasetHistorical, mergedChartData), [datasetHistorical, mergedChartData]);
+    const historicalWindowFloor = useMemo(() => {
+        const overlappedMerged = mergeBacktestsChartData(payload);
+        const merged = mergeDatasetHistoricalWithBacktestsChartData(datasetHistorical, overlappedMerged);
+        const sortedDrivers = [...(payload?.drivers ?? [])]
+            .filter(d => d.normalized_series &&
+            Object.keys(d.normalized_series).some(key => d.normalized_series[key] != null))
+            .sort((a, b) => String(a.id).localeCompare(String(b.id)));
+        const forecastIds = sortedDrivers.map((_, idx) => DRIVER_FORECAST_ID_BASE + idx);
+        return computeDriversComparisonHistoricalWindowFloor(merged, forecastIds);
+    }, [payload, datasetHistorical]);
     const chartForecastData = useMemo(() => {
         if (!payloadForView?.target?.normalized_series)
             return [];
@@ -114,8 +124,7 @@ function DriversComparisonChart({ payload, datasetHistorical = [], loading = fal
             };
         });
     }, [originalDriversById, sortedDriversWithData, viewTab]);
-    const seriesInitKeyResolved = seriesInitKey ??
-        `${tableSeriesRows.map(r => r.id).join(',') || 'none'}`;
+    const seriesInitKeyResolved = seriesInitKey ?? `${tableSeriesRows.map(r => r.id).join(',') || 'none'}`;
     const backtestsSeriesInitKeyRef = useRef('');
     useEffect(() => {
         if (tableSeriesRows.length === 0)
@@ -135,7 +144,12 @@ function DriversComparisonChart({ payload, datasetHistorical = [], loading = fal
             return next;
         });
     }, [seriesInitKeyResolved, tableSeriesRows]);
-    const driversComparisonChartData = useMemo(() => buildDriversComparisonChartData(mergedWithHistorical, datasetHistorical, chartForecastData.map(f => f.id)), [chartForecastData, datasetHistorical, mergedWithHistorical]);
+    const driversComparisonChartData = useMemo(() => buildDriversComparisonChartData(mergedWithHistorical, datasetHistorical, chartForecastData.map(f => f.id), historicalWindowFloor), [
+        chartForecastData,
+        datasetHistorical,
+        historicalWindowFloor,
+        mergedWithHistorical,
+    ]);
     const showEmptyOverlay = (runAnalysisHint || Boolean(statusHint)) && !loading;
     return (jsxs("div", { className: cn(S.root, className), children: [jsxs("div", { className: cn(S.chartShell, loading && S.chartShellLoading), children: [jsx("div", { className: S.chartSlot, children: jsxs("div", { className: S.chartWithOverlay, children: [jsx("div", { className: cn(S.chartInteractiveLayer, showEmptyOverlay && S.chartInteractiveDimmed), children: jsx(ChartAreaInteractive, { chartRenderId: "drivers-comparison", disableLineDrawAnimation: true, disableHistoricalAnimation: true, disableTimeRangeSelector: true, enableTimeRangeBrush: true, chartContainerClassName: S.chartContainer, chartData: driversComparisonChartData, forecastData: chartForecastData, timeRange: timeRange, onTimeRangeChange: handleTimeRangeChange, pinMonth: undefined, onPinMonthChange: () => { }, isDarkTheme: isDarkTheme, loading: chartLoading, hasCombinedData: mergedWithHistorical.length > 0, forecastLineStyle: "solid", showLegend: false, hiddenSeries: hiddenSeries, toggleLegendSeries: toggleSeries, ensureAnalysisSeriesVisible: showSeries }) }), showEmptyOverlay && (jsx("div", { className: S.chartEmptyOverlay, role: "status", "aria-live": "polite", children: jsx("div", { className: S.chartEmptyBlurb, children: jsx(ChartEmptyState, { variant: "inline", hint: runAnalysisHint
                                                 ? 'Run a completed analysis to load the drivers comparison chart for an analysis.'

package/dist/esm/components/widgets/DriversComparisonChart/driversComparisonChart.helpers.js

@@ -231,17 +231,26 @@ function prependHistoricalLeadFromDataset(points, datasetHistorical, xMin) {
     }
     return [...lead, ...points];
 }
-function buildDriversComparisonChartData(mergedWithHistorical, datasetHistorical, forecastIds) {
+/** Overlapped (unshifted) anchor minus lead months — stable xMin across lagged/overlapped tabs. */
+function computeDriversComparisonHistoricalWindowFloor(mergedWithHistorical, forecastIds) {
+    if (mergedWithHistorical.length === 0 || forecastIds.length === 0)
+        return null;
+    const { anchor: anchorMonth } = getZoomAnchorMonthFromDriverMaterialStarts(mergedWithHistorical, forecastIds);
+    if (anchorMonth === null)
+        return null;
+    return subtractMonthsFromMonthStart(anchorMonth, DRIVER_COMPARISON_CHART_LEAD_MONTHS);
+}
+function buildDriversComparisonChartData(mergedWithHistorical, datasetHistorical, forecastIds, historicalWindowFloor) {
     if (mergedWithHistorical.length === 0)
         return mergedWithHistorical;
     if (forecastIds.length === 0)
         return mergedWithHistorical;
-    const { anchor: anchorMonth } = getZoomAnchorMonthFromDriverMaterialStarts(mergedWithHistorical, forecastIds);
-    if (anchorMonth === null)
+    const xMin = historicalWindowFloor ??
+        computeDriversComparisonHistoricalWindowFloor(mergedWithHistorical, forecastIds);
+    if (xMin === null)
         return mergedWithHistorical;
-    const xMin = subtractMonthsFromMonthStart(anchorMonth, DRIVER_COMPARISON_CHART_LEAD_MONTHS);
     const withLead = prependHistoricalLeadFromDataset(mergedWithHistorical, datasetHistorical, xMin);
     return withLead.filter(p => normalizeToMonthStart(p.date) >= xMin);
 }
 
-export { DRIVER_COMPARISON_CHART_LEAD_MONTHS, DRIVER_FORECAST_ID_BASE, INITIAL_VISIBLE_SERIES_COUNT, applyDriversComparisonViewToPayload, buildDriversComparisonChartData, formatLagMonthsLabel, formatSeriesImportance, getLagDisplayForView, getZoomAnchorMonthFromDriverMaterialStarts, mergeBacktestsChartData, mergeDatasetHistoricalWithBacktestsChartData, parseLagMonthsFromLabel, prependHistoricalLeadFromDataset, resolveDriverLagLabel, shiftNormalizedSeriesForward, subtractMonthsFromMonthStart };
+export { DRIVER_COMPARISON_CHART_LEAD_MONTHS, DRIVER_FORECAST_ID_BASE, INITIAL_VISIBLE_SERIES_COUNT, applyDriversComparisonViewToPayload, buildDriversComparisonChartData, computeDriversComparisonHistoricalWindowFloor, formatLagMonthsLabel, formatSeriesImportance, getLagDisplayForView, getZoomAnchorMonthFromDriverMaterialStarts, mergeBacktestsChartData, mergeDatasetHistoricalWithBacktestsChartData, parseLagMonthsFromLabel, prependHistoricalLeadFromDataset, resolveDriverLagLabel, shiftNormalizedSeriesForward, subtractMonthsFromMonthStart };

package/dist/esm/types/src/components/widgets/DriversComparisonChart/driversComparisonChart.helpers.d.ts

@@ -35,4 +35,6 @@ export declare function subtractMonthsFromMonthStart(date: string, count: number
  * (scaled to the first normalized point) so the lead-in shows the target line alone.
  */
 export declare function prependHistoricalLeadFromDataset(points: ChartDataPoint[], datasetHistorical: ChartDataPoint[], xMin: string): ChartDataPoint[];
-export declare function buildDriversComparisonChartData(mergedWithHistorical: ChartDataPoint[], datasetHistorical: ChartDataPoint[], forecastIds: number[]): ChartDataPoint[];
+/** Overlapped (unshifted) anchor minus lead months — stable xMin across lagged/overlapped tabs. */
+export declare function computeDriversComparisonHistoricalWindowFloor(mergedWithHistorical: ChartDataPoint[], forecastIds: number[]): string | null;
+export declare function buildDriversComparisonChartData(mergedWithHistorical: ChartDataPoint[], datasetHistorical: ChartDataPoint[], forecastIds: number[], historicalWindowFloor?: string | null): ChartDataPoint[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.56",
+  "version": "1.3.58",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/Card/Card.tsx

@@ -107,6 +107,7 @@ function CardDescription({ className, ...props }: CardDescriptionProps) {
       maxWidth={400}
       data-slot="card-description"
       className={cn(S.description, className)}
+      overTrigger
       {...props}
     />
   );

package/src/components/ui/Chart/components/BaseChartWrapper.tsx

@@ -620,11 +620,7 @@ const BaseChartWrapperContent = forwardRef<
           className={cn(S.gridLayer, chartClassName)}
           style={height ? { height: `${height}px` } : undefined}
         >
-          <ChartComponent
-            data={chartData}
-            margin={margin}
-            isAnimationActive={!disableAnimation}
-          >
+          <ChartComponent data={chartData} margin={margin}>
             <ChartGrid />
             {showAxes && (
               <ChartAxes
@@ -652,11 +648,7 @@ const BaseChartWrapperContent = forwardRef<
         style={height ? { height: `${height}px` } : undefined}
         {...containerProps}
       >
-        <ChartComponent
-          data={chartData}
-          margin={margin}
-          isAnimationActive={!disableAnimation}
-        >
+        <ChartComponent data={chartData} margin={margin}>
           {/* Render invisible axes for coordinate system, but hide labels */}
           {showAxes && (
             <ChartAxes

package/src/components/widgets/DriversComparisonChart/AGENT.md

@@ -20,4 +20,6 @@ Requires: `payload` — target + driver normalized_series; `loading` / `chartLoa
 
 Lag column: **Overlapped** shows API `lag` string (may be a range). **Lagged** shows single `N month(s)` from `parseLagMonthsFromLabel` (range uses max month).
 
+Historical window: lead-in is anchored to the **overlapped** view (`computeDriversComparisonHistoricalWindowFloor`); lagged tab shifts driver lines only — switching tabs does not change historical extent.
+
 Empty/loading: loading props shimmer chart; null `payload` with `runAnalysisHint` prompts to run analysis.

package/src/components/widgets/DriversComparisonChart/DriversComparisonChart.tsx

@@ -35,6 +35,7 @@ import {
   INITIAL_VISIBLE_SERIES_COUNT,
   applyDriversComparisonViewToPayload,
   buildDriversComparisonChartData,
+  computeDriversComparisonHistoricalWindowFloor,
   formatSeriesImportance,
   getLagDisplayForView,
   mergeBacktestsChartData,
@@ -158,6 +159,27 @@ export function DriversComparisonChart({
     [datasetHistorical, mergedChartData],
   );
 
+  const historicalWindowFloor = useMemo(() => {
+    const overlappedMerged = mergeBacktestsChartData(payload);
+    const merged = mergeDatasetHistoricalWithBacktestsChartData(
+      datasetHistorical,
+      overlappedMerged,
+    );
+    const sortedDrivers = [...(payload?.drivers ?? [])]
+      .filter(
+        d =>
+          d.normalized_series &&
+          Object.keys(d.normalized_series).some(
+            key => d.normalized_series![key] != null,
+          ),
+      )
+      .sort((a, b) => String(a.id).localeCompare(String(b.id)));
+    const forecastIds = sortedDrivers.map(
+      (_, idx) => DRIVER_FORECAST_ID_BASE + idx,
+    );
+    return computeDriversComparisonHistoricalWindowFloor(merged, forecastIds);
+  }, [payload, datasetHistorical]);
+
   const chartForecastData = useMemo((): ForecastItemData[] => {
     if (!payloadForView?.target?.normalized_series) return [];
     return sortedDriversWithData.map((driver, idx) => ({
@@ -193,8 +215,7 @@ export function DriversComparisonChart({
   }, [originalDriversById, sortedDriversWithData, viewTab]);
 
   const seriesInitKeyResolved =
-    seriesInitKey ??
-    `${tableSeriesRows.map(r => r.id).join(',') || 'none'}`;
+    seriesInitKey ?? `${tableSeriesRows.map(r => r.id).join(',') || 'none'}`;
 
   const backtestsSeriesInitKeyRef = useRef<string>('');
 
@@ -222,8 +243,14 @@ export function DriversComparisonChart({
         mergedWithHistorical,
         datasetHistorical,
         chartForecastData.map(f => f.id),
+        historicalWindowFloor,
       ),
-    [chartForecastData, datasetHistorical, mergedWithHistorical],
+    [
+      chartForecastData,
+      datasetHistorical,
+      historicalWindowFloor,
+      mergedWithHistorical,
+    ],
   );
 
   const showEmptyOverlay = (runAnalysisHint || Boolean(statusHint)) && !loading;

package/src/components/widgets/DriversComparisonChart/driversComparisonChart.helpers.test.ts

@@ -1,10 +1,19 @@
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+
 import {
+  DRIVER_COMPARISON_CHART_LEAD_MONTHS,
+  DRIVER_FORECAST_ID_BASE,
   applyDriversComparisonViewToPayload,
+  buildDriversComparisonChartData,
+  computeDriversComparisonHistoricalWindowFloor,
   formatLagMonthsLabel,
   getLagDisplayForView,
+  mergeBacktestsChartData,
+  mergeDatasetHistoricalWithBacktestsChartData,
   parseLagMonthsFromLabel,
   resolveDriverLagLabel,
   shiftNormalizedSeriesForward,
+  subtractMonthsFromMonthStart,
 } from './driversComparisonChart.helpers';
 
 describe('parseLagMonthsFromLabel', () => {
@@ -133,3 +142,173 @@ describe('applyDriversComparisonViewToPayload', () => {
     expect(lagged?.drivers[0].normalized_series['2015-07-01']).toBe(0.8);
   });
 });
+
+describe('computeDriversComparisonHistoricalWindowFloor', () => {
+  const laggedDriverPayload = {
+    target: {
+      id: 'target',
+      name: 'Target',
+      normalized_series: {
+        '2014-10-01': 1.0,
+        '2014-11-01': 1.01,
+        '2014-12-01': 1.02,
+        '2015-01-01': 1.03,
+        '2015-02-01': 1.04,
+        '2015-03-01': 1.05,
+        '2015-04-01': 1.06,
+        '2015-05-01': 1.07,
+      },
+    },
+    drivers: [
+      {
+        id: 'd1',
+        name: 'Driver',
+        lag: '3 month(s)',
+        normalized_series: {
+          '2015-04-01': 0.5,
+          '2015-05-01': 0.6,
+        },
+      },
+    ],
+  };
+
+  const datasetHistorical: ChartDataPoint[] = [
+    { date: '2014-10-01', historical: 100 },
+    { date: '2014-11-01', historical: 101 },
+    { date: '2014-12-01', historical: 102 },
+    { date: '2015-01-01', historical: 103 },
+    { date: '2015-02-01', historical: 104 },
+    { date: '2015-03-01', historical: 105 },
+    { date: '2015-04-01', historical: 106 },
+  ];
+
+  const forecastIds = [DRIVER_FORECAST_ID_BASE];
+
+  it('returns anchor minus lead months from overlapped merged data', () => {
+    const merged = mergeDatasetHistoricalWithBacktestsChartData(
+      datasetHistorical,
+      mergeBacktestsChartData(laggedDriverPayload),
+    );
+    const floor = computeDriversComparisonHistoricalWindowFloor(
+      merged,
+      forecastIds,
+    );
+    expect(floor).toBe(
+      subtractMonthsFromMonthStart(
+        '2015-04-01',
+        DRIVER_COMPARISON_CHART_LEAD_MONTHS,
+      ),
+    );
+    expect(floor).toBe('2014-10-01');
+  });
+});
+
+describe('buildDriversComparisonChartData historical window floor', () => {
+  const laggedDriverPayload = {
+    target: {
+      id: 'target',
+      name: 'Target',
+      normalized_series: {
+        '2014-10-01': 1.0,
+        '2014-11-01': 1.01,
+        '2014-12-01': 1.02,
+        '2015-01-01': 1.03,
+        '2015-02-01': 1.04,
+        '2015-03-01': 1.05,
+        '2015-04-01': 1.06,
+        '2015-05-01': 1.07,
+      },
+    },
+    drivers: [
+      {
+        id: 'd1',
+        name: 'Driver',
+        lag: '3 month(s)',
+        normalized_series: {
+          '2015-04-01': 0.5,
+          '2015-05-01': 0.6,
+        },
+      },
+    ],
+  };
+
+  const datasetHistorical: ChartDataPoint[] = [
+    { date: '2014-10-01', historical: 100 },
+    { date: '2014-11-01', historical: 101 },
+    { date: '2014-12-01', historical: 102 },
+    { date: '2015-01-01', historical: 103 },
+    { date: '2015-02-01', historical: 104 },
+    { date: '2015-03-01', historical: 105 },
+    { date: '2015-04-01', historical: 106 },
+  ];
+
+  const forecastIds = [DRIVER_FORECAST_ID_BASE];
+
+  it('keeps same xMin for lagged and overlapped when floor is pinned', () => {
+    const overlappedMerged = mergeDatasetHistoricalWithBacktestsChartData(
+      datasetHistorical,
+      mergeBacktestsChartData(laggedDriverPayload),
+    );
+    const laggedPayload = applyDriversComparisonViewToPayload(
+      laggedDriverPayload,
+      'lagged',
+    );
+    const laggedMerged = mergeDatasetHistoricalWithBacktestsChartData(
+      datasetHistorical,
+      mergeBacktestsChartData(laggedPayload),
+    );
+    const floor = computeDriversComparisonHistoricalWindowFloor(
+      overlappedMerged,
+      forecastIds,
+    )!;
+
+    const overlappedChart = buildDriversComparisonChartData(
+      overlappedMerged,
+      datasetHistorical,
+      forecastIds,
+      floor,
+    );
+    const laggedChart = buildDriversComparisonChartData(
+      laggedMerged,
+      datasetHistorical,
+      forecastIds,
+      floor,
+    );
+
+    expect(overlappedChart[0]?.date).toBe('2014-10-01');
+    expect(laggedChart[0]?.date).toBe('2014-10-01');
+    expect(laggedChart[0]?.date).toBe(overlappedChart[0]?.date);
+  });
+
+  it('without floor override lagged chart starts later than overlapped', () => {
+    const overlappedMerged = mergeDatasetHistoricalWithBacktestsChartData(
+      datasetHistorical,
+      mergeBacktestsChartData(laggedDriverPayload),
+    );
+    const laggedPayload = applyDriversComparisonViewToPayload(
+      laggedDriverPayload,
+      'lagged',
+    );
+    const laggedMerged = mergeDatasetHistoricalWithBacktestsChartData(
+      datasetHistorical,
+      mergeBacktestsChartData(laggedPayload),
+    );
+
+    const overlappedChart = buildDriversComparisonChartData(
+      overlappedMerged,
+      datasetHistorical,
+      forecastIds,
+    );
+    const laggedChart = buildDriversComparisonChartData(
+      laggedMerged,
+      datasetHistorical,
+      forecastIds,
+    );
+
+    expect(overlappedChart[0]?.date).toBe('2014-10-01');
+    expect(laggedChart[0]?.date).toBe('2015-01-01');
+    expect(laggedChart[0]?.date!.localeCompare(overlappedChart[0]?.date!)).toBe(
+      1,
+    );
+  });
+});

package/src/components/widgets/DriversComparisonChart/driversComparisonChart.helpers.ts

@@ -290,22 +290,41 @@ export function prependHistoricalLeadFromDataset(
   return [...lead, ...points];
 }
 
-export function buildDriversComparisonChartData(
+/** Overlapped (unshifted) anchor minus lead months — stable xMin across lagged/overlapped tabs. */
+export function computeDriversComparisonHistoricalWindowFloor(
   mergedWithHistorical: ChartDataPoint[],
-  datasetHistorical: ChartDataPoint[],
   forecastIds: number[],
-): ChartDataPoint[] {
-  if (mergedWithHistorical.length === 0) return mergedWithHistorical;
-  if (forecastIds.length === 0) return mergedWithHistorical;
+): string | null {
+  if (mergedWithHistorical.length === 0 || forecastIds.length === 0)
+    return null;
   const { anchor: anchorMonth } = getZoomAnchorMonthFromDriverMaterialStarts(
     mergedWithHistorical,
     forecastIds,
   );
-  if (anchorMonth === null) return mergedWithHistorical;
-  const xMin = subtractMonthsFromMonthStart(
+  if (anchorMonth === null) return null;
+  return subtractMonthsFromMonthStart(
     anchorMonth,
     DRIVER_COMPARISON_CHART_LEAD_MONTHS,
   );
+}
+
+export function buildDriversComparisonChartData(
+  mergedWithHistorical: ChartDataPoint[],
+  datasetHistorical: ChartDataPoint[],
+  forecastIds: number[],
+  historicalWindowFloor?: string | null,
+): ChartDataPoint[] {
+  if (mergedWithHistorical.length === 0) return mergedWithHistorical;
+  if (forecastIds.length === 0) return mergedWithHistorical;
+
+  const xMin =
+    historicalWindowFloor ??
+    computeDriversComparisonHistoricalWindowFloor(
+      mergedWithHistorical,
+      forecastIds,
+    );
+  if (xMin === null) return mergedWithHistorical;
+
   const withLead = prependHistoricalLeadFromDataset(
     mergedWithHistorical,
     datasetHistorical,