@sybilion/uilib 1.2.26 → 1.3.1

package/src/components/ui/ChartAreaInteractive/ChartAreaInteractive.tsx

@@ -18,6 +18,7 @@ import {
 } from './ChartAreaInteractive.helpers';
 import S from './ChartAreaInteractive.styl';
 import { ChartAreaInteractiveProps } from './ChartAreaInteractive.types';
+import { TimeRangeBrushHost } from './TimeRangeBrushLayer';
 import { IntervalsOverlay, PinOverlay, ThresholdsOverlay } from './overlays';
 
 export const chartConfig = {
@@ -68,6 +69,7 @@ export function ChartAreaInteractive({
   overlayForecastData = {},
   hiddenSeries,
   disableForecastHistoricalBridge,
+  overlayElements: overlayElementsProp,
   ...restProps
 }: ChartAreaInteractiveProps) {
   const seriesHidden = hiddenSeries ?? new Set<string>();
@@ -161,10 +163,14 @@ export function ChartAreaInteractive({
     loadingMessage,
     excludeLegendIds,
     forecastLineStyle,
+    overlayElements: overlayElementsProp,
     // loadingAnalyses,
     ...restProps,
   };
 
+  const brushEnabled =
+    !disableTimeRangeSelector && !loading && bridgedChartData.length > 1;
+
   const renderChart = () => {
     const overlayClassName = cn(chartContainerClassName);
 
@@ -237,7 +243,14 @@ export function ChartAreaInteractive({
         </div>
       )}
 
-      {renderChart()}
+      <TimeRangeBrushHost
+        chartData={bridgedChartData}
+        onTimeRangeChange={onTimeRangeChange}
+        enabled={brushEnabled}
+        layoutKey={chartRenderId ?? null}
+      >
+        {renderChart()}
+      </TimeRangeBrushHost>
     </InteractionOverlay>
   );
 }

package/src/components/ui/ChartAreaInteractive/ChartAreaInteractive.types.ts

@@ -2,8 +2,6 @@ import { BaseChartWrapperProps } from '#uilib/components/ui/Chart/components/Bas
 import type { ForecastData } from '#uilib/types/forecast-data';
 import { LegendPayload } from 'recharts';
 
-import { TimeRange } from './ChartAreaInteractive.helpers';
-
 export type OverlayMode = 'pin' | 'intervals' | 'thresholds';
 
 export interface ChartDataPoint {
@@ -28,7 +26,8 @@ export interface Analysis {
 
 export interface ChartAreaInteractiveProps extends BaseChartWrapperProps {
   chartContainerClassName?: string;
-  timeRange: TimeRange;
+  /** Preset (`6m`, `1y`, …, `All`) or `__drag:startMs,endMs` from chart brush. */
+  timeRange: string;
   onTimeRangeChange: (range: string) => void;
   pinMonth: string | undefined;
   onPinMonthChange: (month: string | undefined) => void;

package/src/components/ui/ChartAreaInteractive/TimeRangeBrushLayer.styl

@@ -0,0 +1,21 @@
+.selection
+  position absolute
+  top 0
+  bottom 0
+  background-color var(--brand-color-500)
+  opacity 0.1
+  border 1px solid var(--ring)
+  pointer-events none
+  box-sizing border-box
+
+.host
+  position relative
+  width 100%
+  overflow visible
+  touch-action pan-y
+
+.plotBox
+  position absolute
+  z-index 8
+  pointer-events none
+  box-sizing border-box

package/src/components/{widgets/DriverMap/LoadingSpinner/LoadingSpinner.styl.d.ts → ui/ChartAreaInteractive/TimeRangeBrushLayer.styl.d.ts}

@@ -1,9 +1,9 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
-  'loadingSpinner': string;
-  'loadingSpinnerContainer': string;
-  'spin': string;
+  'host': string;
+  'plotBox': string;
+  'selection': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

package/src/components/ui/ChartAreaInteractive/TimeRangeBrushLayer.tsx

@@ -0,0 +1,285 @@
+import {
+  type CSSProperties,
+  type ReactNode,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+import debounce from '#uilib/tools/debounce';
+
+import { CHART_MARGINS } from './ChartAreaInteractive.constants';
+import { encodeDragTimeRange } from './ChartAreaInteractive.helpers';
+import S from './TimeRangeBrushLayer.styl';
+import {
+  BRUSH_DOUBLE_TAP_MAX_DIST_PX,
+  BRUSH_DOUBLE_TAP_MS,
+  BRUSH_LAYOUT_RESIZE_DEBOUNCE_MS,
+  BRUSH_MIN_DRAG_PX,
+  type BrushPlotLayout,
+  brushClientXToDate,
+  brushPlotLayoutsEqual,
+  measureBrushPlotLayout,
+  resolveChartMargin,
+} from './TimeRangeBrushLayout.helpers';
+
+type LastUp = { t: number; x: number; y: number };
+
+export interface TimeRangeBrushHostProps {
+  chartData: ChartDataPoint[];
+  onTimeRangeChange: (range: string) => void;
+  enabled: boolean;
+  /** Bumps layout sync when chart remounts (e.g. dataset / render id). */
+  layoutKey?: string | number | null;
+  children: ReactNode;
+}
+
+/**
+ * Wraps chart; pointerdown on SVG starts horizontal brush. Plot box tracks the
+ * painted grid / Recharts plot (see TimeRangeBrushLayout.helpers).
+ */
+export function TimeRangeBrushHost({
+  chartData,
+  onTimeRangeChange,
+  enabled,
+  layoutKey,
+  children,
+}: TimeRangeBrushHostProps) {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const plotRef = useRef<HTMLDivElement>(null);
+  const lastUpRef = useRef<LastUp | null>(null);
+  const dragPointerIdRef = useRef<number | null>(null);
+  const startClientXRef = useRef(0);
+  const chartDataRef = useRef(chartData);
+  const onTimeRangeChangeRef = useRef(onTimeRangeChange);
+  const lastLayoutRef = useRef<BrushPlotLayout | null>(null);
+
+  chartDataRef.current = chartData;
+  onTimeRangeChangeRef.current = onTimeRangeChange;
+
+  const moveRef = useRef<(e: PointerEvent) => void>(() => {});
+  const upRef = useRef<(e: PointerEvent) => void>(() => {});
+
+  const onMoveStableRef = useRef<(e: PointerEvent) => void>((e: PointerEvent) =>
+    moveRef.current(e),
+  );
+  const onUpStableRef = useRef<(e: PointerEvent) => void>((e: PointerEvent) =>
+    upRef.current(e),
+  );
+
+  const [band, setBand] = useState<{ left: number; width: number } | null>(
+    null,
+  );
+  const [plotLayout, setPlotLayout] = useState<BrushPlotLayout | null>(null);
+
+  useLayoutEffect(() => {
+    if (!enabled) {
+      lastLayoutRef.current = null;
+      setPlotLayout(null);
+      return;
+    }
+
+    const host = hostRef.current;
+    if (!host) return;
+
+    const margin = resolveChartMargin(CHART_MARGINS);
+
+    let raf = 0;
+    let wrapperRo: ResizeObserver | null = null;
+    let observedWrapper: Element | null = null;
+
+    const commitLayout = (next: BrushPlotLayout | null) => {
+      if (brushPlotLayoutsEqual(next, lastLayoutRef.current)) return;
+      lastLayoutRef.current = next;
+      setPlotLayout(next);
+    };
+
+    const runSync = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        const h = hostRef.current;
+        if (!h) {
+          commitLayout(null);
+          return;
+        }
+
+        const wrappers = h.querySelectorAll('.recharts-wrapper');
+        const wrapper = wrappers[wrappers.length - 1];
+        if (!(wrapper instanceof HTMLElement)) {
+          if (wrapperRo) {
+            wrapperRo.disconnect();
+            wrapperRo = null;
+          }
+          observedWrapper = null;
+          commitLayout(null);
+          return;
+        }
+
+        if (wrapper !== observedWrapper) {
+          if (wrapperRo) {
+            wrapperRo.disconnect();
+            wrapperRo = null;
+          }
+          observedWrapper = wrapper;
+          wrapperRo = new ResizeObserver(() => runSync());
+          wrapperRo.observe(wrapper);
+        }
+
+        let next = measureBrushPlotLayout(h, margin);
+        if (!next) {
+          requestAnimationFrame(() => {
+            const h2 = hostRef.current;
+            if (!h2) {
+              commitLayout(null);
+              return;
+            }
+            commitLayout(measureBrushPlotLayout(h2, margin));
+          });
+          return;
+        }
+        commitLayout(next);
+      });
+    };
+
+    const debouncedWindowResize = debounce(
+      runSync,
+      BRUSH_LAYOUT_RESIZE_DEBOUNCE_MS,
+      { leading: false },
+    );
+
+    runSync();
+
+    const roHost = new ResizeObserver(() => runSync());
+    roHost.observe(host);
+
+    const mo = new MutationObserver(() => runSync());
+    mo.observe(host, { childList: true, subtree: true });
+
+    window.addEventListener('resize', debouncedWindowResize);
+
+    return () => {
+      cancelAnimationFrame(raf);
+      debouncedWindowResize.cancel();
+      roHost.disconnect();
+      mo.disconnect();
+      wrapperRo?.disconnect();
+      window.removeEventListener('resize', debouncedWindowResize);
+    };
+  }, [enabled, chartData.length, layoutKey]);
+
+  useLayoutEffect(() => {
+    moveRef.current = (e: PointerEvent) => {
+      if (e.pointerId !== dragPointerIdRef.current) return;
+      const plot = plotRef.current?.getBoundingClientRect();
+      if (!plot) return;
+      const x0 = startClientXRef.current;
+      const x1 = e.clientX;
+      const left = Math.min(x0, x1);
+      const right = Math.max(x0, x1);
+      const leftClamped = Math.max(plot.left, Math.min(plot.right, left));
+      const rightClamped = Math.max(plot.left, Math.min(plot.right, right));
+      setBand({
+        left: leftClamped - plot.left,
+        width: Math.max(0, rightClamped - leftClamped),
+      });
+    };
+
+    upRef.current = (e: PointerEvent) => {
+      if (e.pointerId !== dragPointerIdRef.current) return;
+      const mv = onMoveStableRef.current;
+      const up = onUpStableRef.current;
+      if (mv) window.removeEventListener('pointermove', mv);
+      if (up) {
+        window.removeEventListener('pointerup', up);
+        window.removeEventListener('pointercancel', up);
+      }
+      dragPointerIdRef.current = null;
+
+      const data = chartDataRef.current;
+      const plot = plotRef.current?.getBoundingClientRect();
+      const span = Math.abs(e.clientX - startClientXRef.current);
+      let committed = false;
+
+      if (plot && data.length > 1 && span >= BRUSH_MIN_DRAG_PX) {
+        const d0 = brushClientXToDate(startClientXRef.current, plot, data);
+        const d1 = brushClientXToDate(e.clientX, plot, data);
+        if (d0 && d1) {
+          onTimeRangeChangeRef.current(encodeDragTimeRange(d0, d1));
+          committed = true;
+        }
+      }
+
+      setBand(null);
+
+      if (committed) {
+        lastUpRef.current = null;
+        return;
+      }
+
+      const now = performance.now();
+      const prev = lastUpRef.current;
+      if (
+        prev &&
+        now - prev.t <= BRUSH_DOUBLE_TAP_MS &&
+        Math.hypot(e.clientX - prev.x, e.clientY - prev.y) <=
+          BRUSH_DOUBLE_TAP_MAX_DIST_PX
+      ) {
+        onTimeRangeChangeRef.current('All');
+        lastUpRef.current = null;
+      } else {
+        lastUpRef.current = { t: now, x: e.clientX, y: e.clientY };
+      }
+    };
+  }, []);
+
+  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!enabled || e.button !== 0) return;
+    if ((e.target as HTMLElement).tagName !== 'svg') return;
+    if (chartData.length < 2) return;
+
+    dragPointerIdRef.current = e.pointerId;
+    startClientXRef.current = e.clientX;
+
+    const plot = plotRef.current?.getBoundingClientRect();
+    if (plot) {
+      const x = Math.max(plot.left, Math.min(plot.right, e.clientX));
+      setBand({ left: x - plot.left, width: 0 });
+    }
+
+    window.addEventListener('pointermove', onMoveStableRef.current);
+    window.addEventListener('pointerup', onUpStableRef.current);
+    window.addEventListener('pointercancel', onUpStableRef.current);
+  };
+
+  if (!enabled) {
+    return <>{children}</>;
+  }
+
+  const plotBoxStyle: CSSProperties | undefined =
+    plotLayout && plotLayout.width > 0 && plotLayout.height > 0
+      ? {
+          position: 'absolute',
+          zIndex: 8,
+          pointerEvents: 'none',
+          left: plotLayout.left,
+          top: plotLayout.top,
+          width: plotLayout.width,
+          height: plotLayout.height,
+        }
+      : { display: 'none' };
+
+  return (
+    <div ref={hostRef} className={S.host} onPointerDown={onPointerDown}>
+      {children}
+      <div ref={plotRef} className={S.plotBox} style={plotBoxStyle} aria-hidden>
+        {band != null && band.width > 0 && (
+          <div
+            className={S.selection}
+            style={{ left: band.left, width: band.width }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/ChartAreaInteractive/TimeRangeBrushLayout.helpers.ts

@@ -0,0 +1,55 @@
+import {
+  type ChartMargin,
+  type PlotRect,
+  measureHostRelativePlotRect,
+  resolveChartMargin,
+} from '#uilib/components/ui/Chart/tools/chartPlotGeometry';
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+
+/** Debounce for `window` resize only (RO uses rAF-coalesced sync). */
+export const BRUSH_LAYOUT_RESIZE_DEBOUNCE_MS = 500;
+
+export const BRUSH_MIN_DRAG_PX = 8;
+export const BRUSH_DOUBLE_TAP_MS = 300;
+export const BRUSH_DOUBLE_TAP_MAX_DIST_PX = 24;
+
+export type { ChartMargin };
+export { resolveChartMargin };
+
+export type BrushPlotLayout = PlotRect;
+
+/** Host-relative plot rect (grid-first, then wrapper + margins). */
+export const measureBrushPlotLayout = measureHostRelativePlotRect;
+
+export function brushPlotLayoutsEqual(
+  a: BrushPlotLayout | null,
+  b: BrushPlotLayout | null,
+): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return (
+    a.left === b.left &&
+    a.top === b.top &&
+    a.width === b.width &&
+    a.height === b.height
+  );
+}
+
+export function brushClientXToDate(
+  clientX: number,
+  plotRect: DOMRect,
+  chartData: ChartDataPoint[],
+): Date | null {
+  if (!chartData.length || plotRect.width <= 0) return null;
+  const rel = clientX - plotRect.left;
+  const pct = Math.max(0, Math.min(100, (rel / plotRect.width) * 100));
+  const n = chartData.length;
+  if (n === 1) {
+    const d = chartData[0]?.date;
+    return d ? new Date(d) : null;
+  }
+  const idx = Math.round((pct / 100) * (n - 1));
+  const clamped = Math.max(0, Math.min(n - 1, idx));
+  const raw = chartData[clamped]?.date;
+  return raw ? new Date(raw) : null;
+}

package/src/components/ui/ChartAreaInteractive/overlays/IntervalsOverlay/IntervalsOverlay.hooks.ts

@@ -134,6 +134,7 @@ export function useQuantileButton({
 
   const handleDragStart = useCallback(
     (e: PointerEvent) => {
+      e.stopPropagation();
       setIsDragging(true);
       if (buttonRef.current) {
         buttonRef.current.style.transition = 'none';

package/src/components/ui/ChartAreaInteractive/overlays/PinOverlay/PinOverlay.styl

@@ -46,8 +46,6 @@
     transition background-color 300ms ease-out
     border-radius 12px
 
-  .pinDragging &::after
-    background-color var(--background-alpha-700)
   .pinAnimating &
     transition left 300ms ease-out
 
@@ -64,14 +62,11 @@
   border-radius 9999px
   transition transform 200ms ease-out
   background-color var(--background)
-  cursor grab
+  cursor pointer
   user-select none
   pointer-events auto
   touch-action none
 
-  .pinDragging &
-    transition none
-
   .pinHovered &
     transform scale(1.1)
 
@@ -94,7 +89,7 @@
   margin-top -40px
   z-index 20
   pointer-events auto
-  cursor grab
+  cursor pointer
   touch-action none
   // Debug: uncomment to visualize
   // background-color rgba(255, 0, 0, 0.1)

package/src/components/ui/ChartAreaInteractive/overlays/PinOverlay/PinOverlay.styl.d.ts

@@ -4,7 +4,6 @@ interface CssExports {
   'pinAnimating': string;
   'pinButton': string;
   'pinContainer': string;
-  'pinDragging': string;
   'pinHovered': string;
   'pinIcon': string;
   'pinLineBase': string;

package/src/components/ui/ChartAreaInteractive/overlays/PinOverlay/PinOverlay.tsx

@@ -4,7 +4,6 @@ import { useEffect, useRef, useState } from 'react';
 import { BaseChartWrapper } from '#uilib/components/ui/Chart/components';
 import { BaseChartWrapperProps } from '#uilib/components/ui/Chart/components/BaseChartWrapper';
 import { useDebounceCallback } from '#uilib/hooks/useDebounceCallback';
-import useDragElem, { Delta } from '#uilib/hooks/useDragElem';
 import { ChevronsLeftRight } from 'lucide-react';
 
 import CAS from '../../ChartAreaInteractive.styl';
@@ -23,7 +22,7 @@ export function PinOverlay({
   baseChartProps,
   pinMonth,
   onPinMonthChange,
-  onPreviewMonthChange,
+  onPreviewMonthChange: _onPreviewMonthChange,
   className,
 }: PinOverlayProps) {
   const { chartData } = baseChartProps;
@@ -32,12 +31,9 @@ export function PinOverlay({
   const pinPlaceholderRef = useRef<HTMLDivElement>(null);
   const pinContainerRef = useRef<HTMLDivElement>(null);
 
-  const [isDraggingPin, setIsDraggingPin] = useState(false);
-  const [isPinAnimating, setIsPinAnimating] = useState(true);
   const [isPinHovered, setIsPinHovered] = useState(false);
 
   const pinPosRef = useRef<number>(0);
-  const containerRectRef = useRef<DOMRect | null>(null);
   const currPinMonthRef = useRef<string | undefined>(pinMonth);
 
   const debouncedOnPinMonthChange = useDebounceCallback(
@@ -61,7 +57,6 @@ export function PinOverlay({
     }
   };
 
-  // Get full month and year for pin position to send to parent component
   const getPinMonthAndYear = (position?: number) => {
     if (!chartData.length) return null;
 
@@ -79,7 +74,6 @@ export function PinOverlay({
     }
   };
 
-  // Handle chart click to move pin to specific position
   const snapPinToPosition = (
     eventX: number,
     needMonthUpdate: boolean = true,
@@ -91,7 +85,6 @@ export function PinOverlay({
     const effectiveLeft = pinContainerRect.left;
     const effectiveWidth = pinContainerRect.width;
 
-    // Calculate relative position within plotted area
     const relativeX = eventX - effectiveLeft;
     const rawPercentage =
       effectiveWidth > 0 ? (relativeX / effectiveWidth) * 100 : 0;
@@ -100,7 +93,6 @@ export function PinOverlay({
       Math.min(100, isNaN(rawPercentage) ? 0 : rawPercentage),
     );
 
-    // Snap to nearest data point
     const totalPoints = chartData.length;
     if (totalPoints > 1) {
       const nearestIndex = Math.round((percentage / 100) * (totalPoints - 1));
@@ -110,12 +102,10 @@ export function PinOverlay({
       setPinPosition(isNaN(snappedPercentage) ? 0 : snappedPercentage);
 
       if (needMonthUpdate) {
-        // Update news for all months (historical and forecast)
         const monthAndYear = getPinMonthAndYear();
         if (monthAndYear) {
           const isNewMonth = monthAndYear !== currPinMonthRef.current;
           if (isNewMonth) currPinMonthRef.current = monthAndYear;
-          // When immediate (e.g. dragEnd), always notify parent so showFutureOutlook is correct
           if (immediateMonthUpdate) {
             onPinMonthChange?.(monthAndYear);
           } else if (isNewMonth) {
@@ -126,11 +116,9 @@ export function PinOverlay({
     }
   };
 
-  // Update pin position when pinMonth prop changes
   useEffect(() => {
     if (!pinMonth || !chartData.length) return;
 
-    // Find the data point index for the given month
     const dataPointIndex = chartData.findIndex(point => {
       const date = new Date(point.date);
       const month = date.toLocaleDateString('en-US', { month: 'short' });
@@ -147,59 +135,10 @@ export function PinOverlay({
     }
   }, [pinMonth, chartData]);
 
-  useDragElem({
-    elem: [chartRef],
-    onDragStart: () => {
-      setIsDraggingPin(true);
-
-      containerRectRef.current =
-        pinContainerRef.current?.getBoundingClientRect() || null;
-    },
-    onDrag: (delta: Delta) => {
-      if (pinRef.current) {
-        const containerRect = containerRectRef.current;
-        if (!containerRect) return;
-
-        const pinCurrentLeft = (pinPosRef.current / 100) * containerRect.width;
-
-        const leftLimit = -pinCurrentLeft;
-        const rightLimit = containerRect.width - pinCurrentLeft;
-
-        const clampedDeltaX = Math.max(
-          leftLimit,
-          Math.min(rightLimit, delta.x),
-        );
-
-        setIsPinAnimating(false);
-        pinRef.current.style.transform = `translateX(${clampedDeltaX}px)`;
-
-        // Calculate preview month based on current drag position
-        if (onPreviewMonthChange && chartData.length > 0) {
-          const newPositionPixels = pinCurrentLeft + clampedDeltaX;
-          const newPercentage = (newPositionPixels / containerRect.width) * 100;
-          const clampedPercentage = Math.max(0, Math.min(100, newPercentage));
-          const previewMonth = getPinMonthAndYear(clampedPercentage);
-
-          if (previewMonth) {
-            onPreviewMonthChange(previewMonth);
-          }
-        }
-      }
-    },
-    onDragEnd: (e: PointerEvent) => {
-      setIsDraggingPin(false);
-      setTimeout(() => setIsPinAnimating(true), 200);
-      if (pinRef.current) pinRef.current.style.transform = '';
-      // Snap first so onPinMonthChange runs before we clear preview (avoids showFutureOutlook fallback)
-      snapPinToPosition(e.clientX, true, true);
-      if (onPreviewMonthChange) {
-        onPreviewMonthChange(undefined);
-      }
-    },
-  });
-
-  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
-    if ((e.target as HTMLElement).tagName !== 'svg') return;
+  const onChartClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.button !== 0) return;
+    const target = e.target as HTMLElement;
+    if (!target.closest?.('svg')) return;
     snapPinToPosition(e.clientX, true, false);
   };
 
@@ -220,7 +159,6 @@ export function PinOverlay({
           </div>
         </div>
       </div>
-      {/* Hover placeholder for easier pin access - on top of everything */}
       <div
         className={S.pinPlaceholder}
         style={{ left: `${pinPosRef.current}%` }}
@@ -236,12 +174,10 @@ export function PinOverlay({
       className={cn(
         className,
         S.root,
-        isDraggingPin && S.pinDragging,
-        isPinAnimating && S.pinAnimating,
+        S.pinAnimating,
         isPinHovered && S.pinHovered,
       )}
-      onPointerDown={onPointerDown}
-      // onClick={e => snapPinToPosition(e.clientX)}
+      onClick={onChartClick}
       ref={chartRef}
     >
       <BaseChartWrapper

package/src/components/ui/ChartAreaInteractive/overlays/ThresholdsOverlay/ThresholdsOverlay.hooks.ts

@@ -127,6 +127,7 @@ export function useThresholdButton({
 
   const handleDragStart = useCallback(
     (e: PointerEvent) => {
+      e.stopPropagation();
       initialValueRef.current = initialValue;
       startYRef.current = e.clientY;
       setIsDragging(true);

package/src/components/ui/ChartAreaInteractive/overlays/useChartYRange.ts

@@ -42,10 +42,9 @@ export function useChartYRange({
       Object.entries(point).forEach(([key, value]) => {
         if (key === 'date') return;
 
-        // When selectedForecastId is provided, scale only from selected forecast + its quantile band
-        // (exclude historical, other forecasts, and other forecasts' quantile values)
+        // When selectedForecastId is provided, scale from historical + selected forecast + its
+        // quantile band (exclude other forecasts and their quantile values only).
         if (forecastId !== undefined) {
-          if (key === 'historical') return;
           if (key.startsWith('forecast_') && key !== `forecast_${forecastId}`)
             return;
           // Exclude q{quantile}_{otherAnalysisId} - only include selected forecast's quantiles