@sybilion/uilib 1.0.20

package/dist/esm/components/ui/ChartAreaInteractive/overlays/IntervalsOverlay/IntervalsOverlay.hooks.js

@@ -0,0 +1,134 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import useElemDrag from '../../../../../hooks/useDragElem.js';
+
+function useQuantileButton({ buttonRef, overlayContainerRef, quantiles, selectedQuantile, onQuantileChange, calculateQuantilePosition, yMin, yMax, minPercent = 0, maxPercent = 100, }) {
+    const [isDragging, setIsDragging] = useState(false);
+    const cachedRectRef = useRef(null);
+    const clientYToPercent = useCallback((clientY) => {
+        const boundingRect = cachedRectRef.current ||
+            overlayContainerRef.current?.getBoundingClientRect();
+        if (!boundingRect)
+            return 50;
+        const relativeY = clientY - boundingRect.top;
+        const percent = (relativeY / boundingRect.height) * 100;
+        // Clamp to min/max percent constraints
+        return Math.max(minPercent, Math.min(maxPercent, percent));
+    }, [overlayContainerRef, minPercent, maxPercent]);
+    const setButtonPosition = useCallback((percent) => {
+        if (buttonRef.current) {
+            buttonRef.current.style.top = `${percent}%`;
+        }
+    }, [buttonRef]);
+    const findClosestQuantile = useCallback((percent, yMin, yMax) => {
+        if (quantiles.length === 0)
+            return null;
+        // Clamp percent to constraints before finding closest quantile
+        const clampedPercent = Math.max(minPercent, Math.min(maxPercent, percent));
+        let closestQuantile = quantiles[0];
+        let minDiff = Math.abs(calculateQuantilePosition(quantiles[0], yMin, yMax) - clampedPercent);
+        for (const quantile of quantiles) {
+            const quantilePercent = calculateQuantilePosition(quantile, yMin, yMax);
+            // Only consider quantiles within constraints
+            if (quantilePercent < minPercent || quantilePercent > maxPercent) {
+                continue;
+            }
+            const diff = Math.abs(quantilePercent - clampedPercent);
+            if (diff < minDiff) {
+                minDiff = diff;
+                closestQuantile = quantile;
+            }
+        }
+        return closestQuantile;
+    }, [quantiles, calculateQuantilePosition, minPercent, maxPercent]);
+    // Sync button position when selectedQuantile changes (outside of drag)
+    useEffect(() => {
+        if (!isDragging && buttonRef.current && selectedQuantile) {
+            const percent = calculateQuantilePosition(selectedQuantile, yMin, yMax);
+            setButtonPosition(percent);
+        }
+    }, [
+        selectedQuantile,
+        isDragging,
+        buttonRef,
+        calculateQuantilePosition,
+        yMin,
+        yMax,
+        setButtonPosition,
+    ]);
+    const handleDrag = useCallback((delta, e) => {
+        if (!buttonRef.current || !cachedRectRef.current)
+            return;
+        const percent = clientYToPercent(e.clientY);
+        // Update position directly to DOM, following cursor freely
+        setButtonPosition(percent);
+        // Find closest quantile and update state if changed (without visual snapping)
+        const closestQuantile = findClosestQuantile(percent, yMin, yMax);
+        if (closestQuantile && closestQuantile !== selectedQuantile) {
+            onQuantileChange?.(closestQuantile);
+        }
+    }, [
+        buttonRef,
+        clientYToPercent,
+        findClosestQuantile,
+        yMin,
+        yMax,
+        selectedQuantile,
+        onQuantileChange,
+    ]);
+    const handleDragStart = useCallback((e) => {
+        setIsDragging(true);
+        if (buttonRef.current) {
+            buttonRef.current.style.transition = 'none';
+        }
+        // Cache bounding rect at drag start
+        if (overlayContainerRef.current) {
+            cachedRectRef.current =
+                overlayContainerRef.current.getBoundingClientRect();
+        }
+    }, [buttonRef, overlayContainerRef]);
+    const handleDragEnd = useCallback((e) => {
+        if (!buttonRef.current || !overlayContainerRef.current)
+            return;
+        const finalPercent = clientYToPercent(e.clientY);
+        // Find nearest quantile and snap to it
+        const closestQuantile = findClosestQuantile(finalPercent, yMin, yMax);
+        if (closestQuantile && onQuantileChange) {
+            // Update visual position to snapped quantile position
+            let snappedPercent = calculateQuantilePosition(closestQuantile, yMin, yMax);
+            // Clamp snapped position to constraints
+            snappedPercent = Math.max(minPercent, Math.min(maxPercent, snappedPercent));
+            setButtonPosition(snappedPercent);
+            // Update React state for persistence
+            onQuantileChange(closestQuantile);
+        }
+        // Re-enable transitions
+        if (buttonRef.current) {
+            buttonRef.current.style.transition = '';
+        }
+        // Clear cached rect
+        cachedRectRef.current = null;
+        setIsDragging(false);
+    }, [
+        buttonRef,
+        overlayContainerRef,
+        clientYToPercent,
+        findClosestQuantile,
+        yMin,
+        yMax,
+        calculateQuantilePosition,
+        setButtonPosition,
+        onQuantileChange,
+        minPercent,
+        maxPercent,
+    ]);
+    useElemDrag({
+        elem: buttonRef,
+        onDrag: handleDrag,
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        isActive: quantiles.length > 0,
+    });
+    return { isDragging };
+}
+
+export { useQuantileButton };

package/dist/esm/components/ui/ChartAreaInteractive/overlays/IntervalsOverlay/IntervalsOverlay.js

@@ -0,0 +1,257 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useMemo, useRef, useState, useEffect, useCallback } from 'react';
+import { BaseChartWrapper } from '../../../Chart/components/BaseChartWrapper.js';
+import 'recharts';
+import '../../../Chart/Chart.context.js';
+import '../../../Chart/Chart.styl.js';
+import { DraggingButton } from '../../../DraggingButton/DraggingButton.js';
+import { useIsMobile } from '../../../../../hooks/useIsMobile.js';
+import { formatQuantileRangeLabel, normalizeQuantileKey } from '../../../../../utils/quantileFormat.js';
+import { ChevronsUpDown } from 'lucide-react';
+import { useChartYRange } from '../useChartYRange.js';
+import { useForecastColor } from '../useForecastColor.js';
+import { useQuantileBands } from '../useQuantileBands.js';
+import { useQuantileButton } from './IntervalsOverlay.hooks.js';
+import SI from './IntervalsOverlay.styl.js';
+
+function IntervalsOverlay({ baseChartProps, selectedForecast, className, upperQuantiles: propUpperQuantiles, lowerQuantiles: propLowerQuantiles, selectedLowerQuantile: propSelectedLowerQuantile, selectedUpperQuantile: propSelectedUpperQuantile, onLowerQuantileChange, onUpperQuantileChange, overlayForecastData: forecastData, }) {
+    // Discover available quantiles dynamically (fallback if props not provided)
+    const { upperQuantiles, lowerQuantiles, allQuantiles } = useMemo(() => {
+        if (propUpperQuantiles && propLowerQuantiles) {
+            // Use props if provided
+            const all = [...propLowerQuantiles, ...propUpperQuantiles]
+                .map(Number)
+                .sort((a, b) => a - b)
+                .map(String);
+            return {
+                upperQuantiles: propUpperQuantiles,
+                lowerQuantiles: propLowerQuantiles,
+                allQuantiles: all,
+            };
+        }
+        // Fallback to computing from forecastData
+        const allQuantilesData = forecastData[selectedForecast?.id]?.allQuantiles;
+        if (!allQuantilesData) {
+            return { upperQuantiles: [], lowerQuantiles: [], allQuantiles: [] };
+        }
+        const keys = Object.keys(allQuantilesData);
+        const sortedKeys = keys.map(Number).sort((a, b) => a - b);
+        return {
+            upperQuantiles: sortedKeys.filter(q => q > 0.5).map(String),
+            lowerQuantiles: sortedKeys.filter(q => q < 0.5).map(String),
+            allQuantiles: sortedKeys.map(String),
+        };
+    }, [
+        propUpperQuantiles,
+        propLowerQuantiles,
+        selectedForecast?.id,
+        forecastData,
+    ]);
+    // Derive selected quantiles from props or use defaults
+    const selectedUpperQuantile = propSelectedUpperQuantile ?? upperQuantiles[upperQuantiles.length - 1];
+    const selectedLowerQuantile = propSelectedLowerQuantile ?? lowerQuantiles[0];
+    const quantileBandName = formatQuantileRangeLabel(selectedLowerQuantile || '0.1', selectedUpperQuantile || '0.9');
+    // Button refs
+    const upperButtonRef = useRef(null);
+    const lowerButtonRef = useRef(null);
+    // Refs
+    const overlayContainerRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const [chartHeight, setChartHeight] = useState(0);
+    const [chartWidth, setChartWidth] = useState(0);
+    // Measure chart dimensions from wrapper (always mounted); overlay mounts later via render queue
+    const OVERLAY_MARGIN_LEFT = 48;
+    const OVERLAY_MARGIN_RIGHT = 32;
+    useEffect(() => {
+        const el = wrapperRef.current;
+        if (!el)
+            return;
+        const updateDimensions = () => {
+            const rect = el.getBoundingClientRect();
+            const w = rect.width - OVERLAY_MARGIN_LEFT - OVERLAY_MARGIN_RIGHT;
+            const h = rect.height;
+            if (w > 0)
+                setChartWidth(w);
+            if (h > 0)
+                setChartHeight(h);
+        };
+        updateDimensions();
+        const resizeObserver = new ResizeObserver(updateDimensions);
+        resizeObserver.observe(el);
+        return () => resizeObserver.disconnect();
+    }, []);
+    const getBandValues = useCallback((date, dateIndex, allQuantiles) => {
+        if (!selectedUpperQuantile || !selectedLowerQuantile)
+            return null;
+        // Get available quantile keys and normalize the selected quantiles
+        const availableKeys = Object.keys(allQuantiles);
+        const normalizedLowerQuantile = normalizeQuantileKey(selectedLowerQuantile, availableKeys);
+        const normalizedUpperQuantile = normalizeQuantileKey(selectedUpperQuantile, availableKeys);
+        const lowerValue = allQuantiles[normalizedLowerQuantile]?.[dateIndex];
+        const upperValue = allQuantiles[normalizedUpperQuantile]?.[dateIndex];
+        if (lowerValue !== undefined &&
+            upperValue !== undefined &&
+            typeof lowerValue === 'number' &&
+            typeof upperValue === 'number') {
+            return [lowerValue, upperValue];
+        }
+        return null;
+    }, [selectedUpperQuantile, selectedLowerQuantile, normalizeQuantileKey]);
+    const { quantileBandColor } = useForecastColor(selectedForecast, baseChartProps.forecastData);
+    const getBandConfig = useCallback((bandKey) => {
+        return {
+            key: bandKey,
+            quantiles: [
+                selectedLowerQuantile || '0.10',
+                selectedUpperQuantile || '0.90',
+            ],
+            opacity: 0.15,
+            color: quantileBandColor,
+            name: quantileBandName,
+            type: 'monotone',
+        };
+    }, [
+        quantileBandColor,
+        quantileBandName,
+        selectedLowerQuantile,
+        selectedUpperQuantile,
+    ]);
+    const { transformedChartData, quantileBands } = useQuantileBands({
+        chartData: baseChartProps.chartData,
+        selectedForecastId: selectedForecast?.id,
+        forecastData,
+        bandKey: quantileBandName,
+        getBandValues,
+        getBandConfig,
+    });
+    // Position inner overlay: right offset = base align + distance from latest forecast to chart end
+    // Overlay right margin 32px (--p-8), chart right margin 30px; overlay is 2px left of data edge
+    const OVERLAY_TO_CHART_OFFSET = -2;
+    const innerRightOffsetPx = useMemo(() => {
+        if (!chartWidth || transformedChartData.length < 2)
+            return 0;
+        const { xMin, xMax } = baseChartProps;
+        const chartStartDate = (xMin ?? transformedChartData[0].date);
+        const chartEndDate = (xMax ??
+            transformedChartData[transformedChartData.length - 1].date);
+        const latestQuantileBandDate = selectedForecast?.id
+            ? forecastData[selectedForecast.id]?.dates?.at(-1)
+            : undefined;
+        if (!latestQuantileBandDate)
+            return 0;
+        const start = new Date(chartStartDate).getTime();
+        const end = new Date(chartEndDate).getTime();
+        const latest = new Date(latestQuantileBandDate).getTime();
+        const totalMs = end - start;
+        const deltaMs = end - latest;
+        const dateBasedOffset = totalMs > 0 && deltaMs >= 0 ? (deltaMs / totalMs) * chartWidth : 0;
+        return dateBasedOffset + OVERLAY_TO_CHART_OFFSET;
+    }, [
+        chartWidth,
+        transformedChartData,
+        baseChartProps.xMin,
+        baseChartProps.xMax,
+        selectedForecast?.id,
+        forecastData,
+    ]);
+    // Calculate button positions
+    const calculateButtonYPosition = useCallback((quantileLevel, yMin, yMax) => {
+        if (!selectedForecast?.id ||
+            !forecastData[selectedForecast.id]?.allQuantiles) {
+            return 50;
+        }
+        const allQuantiles = forecastData[selectedForecast.id].allQuantiles;
+        const availableKeys = Object.keys(allQuantiles);
+        const normalizedQuantileLevel = normalizeQuantileKey(quantileLevel, availableKeys);
+        const quantileArray = allQuantiles[normalizedQuantileLevel];
+        if (!quantileArray?.length)
+            return 50;
+        const value = quantileArray[quantileArray.length - 1];
+        if (value === undefined || value === null)
+            return 50;
+        const normalized = (value - yMin) / (yMax - yMin);
+        return Math.max(0, Math.min(100, (1 - normalized) * 100));
+    }, [selectedForecast?.id, forecastData, normalizeQuantileKey]);
+    const { yMin, yMax } = useChartYRange({
+        baseChartProps,
+        chartData: transformedChartData,
+        disableRescaleWhenQuantileChanges: true,
+        selectedForecastId: selectedForecast?.id,
+    });
+    const getButtonTop = useCallback((quantile) => quantile ? `${calculateButtonYPosition(quantile, yMin, yMax)}%` : '50%', [calculateButtonYPosition, yMin, yMax]);
+    // Get latest forecast point (median/0.5 quantile at last index)
+    const latestForecastPoint = useMemo(() => {
+        if (!selectedForecast?.id || !forecastData[selectedForecast.id]) {
+            return null;
+        }
+        const forecastDataForSelected = forecastData[selectedForecast.id];
+        const allQuantiles = forecastDataForSelected.allQuantiles;
+        const dates = forecastDataForSelected.dates;
+        if (!allQuantiles || !dates || dates.length === 0) {
+            return null;
+        }
+        const lastIndex = dates.length - 1;
+        const availableKeys = Object.keys(allQuantiles);
+        const medianKey = normalizeQuantileKey('0.5', availableKeys);
+        const median = allQuantiles[medianKey]?.[lastIndex];
+        if (median === undefined) {
+            return null;
+        }
+        return median;
+    }, [selectedForecast?.id, forecastData, normalizeQuantileKey]);
+    // Calculate boundary constraints in percent
+    const boundaryConstraints = useMemo(() => {
+        if (!latestForecastPoint) {
+            return {
+                upperMinPercent: 0,
+                upperMaxPercent: 100,
+                lowerMinPercent: 0,
+                lowerMaxPercent: 100,
+            };
+        }
+        // Convert latest forecast point to percent position
+        const normalized = (latestForecastPoint - yMin) / (yMax - yMin);
+        const latestForecastPercent = Math.max(0, Math.min(100, (1 - normalized) * 100));
+        return {
+            // Upper button: cannot go below latest forecast point
+            upperMinPercent: latestForecastPercent,
+            upperMaxPercent: 100,
+            // Lower button: cannot go above latest forecast point
+            lowerMinPercent: 0,
+            lowerMaxPercent: latestForecastPercent,
+        };
+    }, [latestForecastPoint, yMin, yMax]);
+    // Use quantile button hooks
+    const upperButton = useQuantileButton({
+        buttonRef: upperButtonRef,
+        overlayContainerRef,
+        quantiles: upperQuantiles,
+        selectedQuantile: selectedUpperQuantile,
+        onQuantileChange: onUpperQuantileChange,
+        calculateQuantilePosition: calculateButtonYPosition,
+        yMin,
+        yMax,
+        minPercent: boundaryConstraints.lowerMinPercent,
+        maxPercent: boundaryConstraints.lowerMaxPercent,
+    });
+    const lowerButton = useQuantileButton({
+        buttonRef: lowerButtonRef,
+        overlayContainerRef,
+        quantiles: lowerQuantiles,
+        selectedQuantile: selectedLowerQuantile,
+        onQuantileChange: onLowerQuantileChange,
+        calculateQuantilePosition: calculateButtonYPosition,
+        yMin,
+        yMax,
+        minPercent: boundaryConstraints.upperMinPercent,
+        maxPercent: boundaryConstraints.upperMaxPercent,
+    });
+    const isMobile = useIsMobile();
+    const draggingButtonsSize = isMobile ? 'sm' : 'md';
+    // Render overlay elements
+    const overlay = (jsx("div", { ref: overlayContainerRef, className: SI.root, children: jsxs("div", { className: SI.inner, style: { right: `${innerRightOffsetPx}px` }, children: [upperQuantiles.length > 0 && selectedUpperQuantile && (jsx(DraggingButton, { size: draggingButtonsSize, ref: upperButtonRef, top: getButtonTop(selectedUpperQuantile), icon: jsx(ChevronsUpDown, { size: 16 }), title: `Upper quantile: ${(parseFloat(selectedUpperQuantile) * 100).toFixed(0)}%`, isDragging: upperButton.isDragging })), lowerQuantiles.length > 0 && selectedLowerQuantile && (jsx(DraggingButton, { size: draggingButtonsSize, ref: lowerButtonRef, top: getButtonTop(selectedLowerQuantile), icon: jsx(ChevronsUpDown, { size: 16 }), title: `Lower quantile: ${(parseFloat(selectedLowerQuantile) * 100).toFixed(0)}%`, isDragging: lowerButton.isDragging }))] }) }));
+    return (jsx("div", { ref: wrapperRef, className: cn(className), children: jsx(BaseChartWrapper, { ...baseChartProps, yMin: yMin, yMax: yMax, showTooltip: !upperButton.isDragging && !lowerButton.isDragging, autoScaleYAxis: false, chartData: transformedChartData, quantileBands: quantileBands, quantileBandKey: selectedForecast ? `quantile-band-${selectedForecast.id}` : undefined, overlayElements: overlay }) }));
+}
+
+export { IntervalsOverlay };

package/dist/esm/components/ui/ChartAreaInteractive/overlays/IntervalsOverlay/IntervalsOverlay.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".IntervalsOverlay_root__S9NN8{height:calc(var(--chart-height) - 71px);inset:0;margin:var(--p-5) var(--p-8) auto var(--p-12);pointer-events:none;position:absolute;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:4}.IntervalsOverlay_inner__-myaK{bottom:0;height:100%;left:0;position:absolute;right:0;top:0}";
+var SI = {"root":"IntervalsOverlay_root__S9NN8","inner":"IntervalsOverlay_inner__-myaK"};
+styleInject(css_248z);
+
+export { SI as default };

package/dist/esm/components/ui/ChartAreaInteractive/overlays/PinOverlay/PinOverlay.js

@@ -0,0 +1,165 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useRef, useState, useEffect } from 'react';
+import { BaseChartWrapper } from '../../../Chart/components/BaseChartWrapper.js';
+import 'recharts';
+import '../../../Chart/Chart.context.js';
+import '../../../Chart/Chart.styl.js';
+import { useDebounceCallback } from '../../../../../hooks/useDebounceCallback.js';
+import useElemDrag from '../../../../../hooks/useDragElem.js';
+import { ChevronsLeftRight } from 'lucide-react';
+import S from '../../ChartAreaInteractive.styl.js';
+import { useChartYRange } from '../useChartYRange.js';
+import S$1 from './PinOverlay.styl.js';
+
+function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonthChange, className, }) {
+    const { chartData } = baseChartProps;
+    const chartRef = useRef(null);
+    const pinRef = useRef(null);
+    const pinPlaceholderRef = useRef(null);
+    const pinContainerRef = useRef(null);
+    const [isDraggingPin, setIsDraggingPin] = useState(false);
+    const [isPinAnimating, setIsPinAnimating] = useState(true);
+    const [isPinHovered, setIsPinHovered] = useState(false);
+    const pinPosRef = useRef(0);
+    const containerRectRef = useRef(null);
+    const currPinMonthRef = useRef(pinMonth);
+    const debouncedOnPinMonthChange = useDebounceCallback((...args) => onPinMonthChange?.(args[0]), 500, [onPinMonthChange]);
+    const { yMin, yMax } = useChartYRange({
+        baseChartProps,
+        excludeQuantileBands: true,
+    });
+    const setPinPosition = (position) => {
+        pinPosRef.current = position;
+        if (pinRef.current) {
+            pinRef.current.style.left = `${position}%`;
+        }
+        if (pinPlaceholderRef.current) {
+            pinPlaceholderRef.current.style.left = `${position}%`;
+        }
+    };
+    // Get full month and year for pin position to send to parent component
+    const getPinMonthAndYear = (position) => {
+        if (!chartData.length)
+            return null;
+        const totalPoints = chartData.length;
+        const positionToUse = position !== undefined ? position : pinPosRef.current;
+        const index = Math.round((positionToUse / 100) * (totalPoints - 1));
+        const clampedIndex = Math.max(0, Math.min(totalPoints - 1, index));
+        const dataPoint = chartData[clampedIndex];
+        if (dataPoint && dataPoint.date) {
+            const date = new Date(dataPoint.date);
+            const month = date.toLocaleDateString('en-US', { month: 'short' });
+            const year = date.getFullYear();
+            return `${month} ${year}`;
+        }
+    };
+    // Handle chart click to move pin to specific position
+    const snapPinToPosition = (eventX, needMonthUpdate = true, immediateMonthUpdate = false) => {
+        if (!pinContainerRef.current || !chartData.length)
+            return;
+        const pinContainerRect = pinContainerRef.current.getBoundingClientRect();
+        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;
+        const percentage = Math.max(0, 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));
+            const clampedIndex = Math.max(0, Math.min(totalPoints - 1, nearestIndex));
+            const snappedPercentage = (clampedIndex / (totalPoints - 1)) * 100;
+            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) {
+                        debouncedOnPinMonthChange(monthAndYear);
+                    }
+                }
+            }
+        }
+    };
+    // 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' });
+            const year = date.getFullYear();
+            const pointMonth = `${month} ${year}`;
+            return pointMonth === pinMonth;
+        });
+        if (dataPointIndex !== -1) {
+            const totalPoints = chartData.length;
+            const newPosition = (dataPointIndex / (totalPoints - 1)) * 100;
+            setPinPosition(isNaN(newPosition) ? 0 : newPosition);
+            currPinMonthRef.current = pinMonth;
+        }
+    }, [pinMonth, chartData]);
+    useElemDrag({
+        elem: [chartRef],
+        onDragStart: () => {
+            setIsDraggingPin(true);
+            containerRectRef.current =
+                pinContainerRef.current?.getBoundingClientRect() || null;
+        },
+        onDrag: (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) => {
+            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) => {
+        if (e.target.tagName !== 'svg')
+            return;
+        snapPinToPosition(e.clientX, true, false);
+    };
+    const overlay = (jsxs(Fragment, { children: [jsx("div", { className: cn(S.overlay, S$1.pinContainer), ref: pinContainerRef, children: jsx("div", { className: S$1.pinLineBase, style: { left: `${pinPosRef.current}%` }, ref: pinRef, children: jsx("div", { className: S$1.pinButton, "aria-label": "News pin", title: `Current month: ${getPinMonthAndYear() || 'Loading...'}`, children: jsx(ChevronsLeftRight, { className: S$1.pinIcon, "aria-hidden": "true" }) }) }) }), jsx("div", { className: S$1.pinPlaceholder, style: { left: `${pinPosRef.current}%` }, ref: pinPlaceholderRef, onPointerEnter: () => setIsPinHovered(true), onPointerLeave: () => setIsPinHovered(false) })] }));
+    return (jsx("div", { className: cn(className, S$1.root, isDraggingPin && S$1.pinDragging, isPinAnimating && S$1.pinAnimating, isPinHovered && S$1.pinHovered), onPointerDown: onPointerDown, 
+        // onClick={e => snapPinToPosition(e.clientX)}
+        ref: chartRef, children: jsx(BaseChartWrapper, { ...baseChartProps, yMin: yMin, yMax: yMax, autoScaleYAxis: false, overlayElements: overlay }) }));
+}
+
+export { PinOverlay };

package/dist/esm/components/ui/ChartAreaInteractive/overlays/PinOverlay/PinOverlay.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".PinOverlay_root__RUZxO{touch-action:pan-y}.PinOverlay_pinContainer__6sc1J{height:calc(var(--chart-height) - 70px);inset:0;margin:var(--p-5) var(--p-8) var(--p-24) var(--p-12);pointer-events:none;position:absolute;touch-action:pan-y;transition:transform .2s ease-out,z-index 0ms;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:2}.PinOverlay_pinHovered__cGPjN .PinOverlay_pinContainer__6sc1J{z-index:10}.PinOverlay_pinLineBase__0BWsD{height:100%;pointer-events:none;position:absolute;width:3px}.PinOverlay_pinLineBase__0BWsD:before{border-radius:50%;box-shadow:0 4px 6px -1px var(--shadow-color);content:\"\";height:36px;left:-16px;position:absolute;top:-8px;width:36px;z-index:-1}.PinOverlay_pinLineBase__0BWsD:after{background-color:var(--background);border-radius:12px;bottom:0;content:\"\";left:0;position:absolute;top:0;transform:translate3d(.5px,0,0);transition:background-color .3s ease-out;width:100%;z-index:1}.PinOverlay_pinDragging__gu3xp .PinOverlay_pinLineBase__0BWsD:after{background-color:var(--background-alpha-700)}.PinOverlay_pinAnimating__5XMJG .PinOverlay_pinLineBase__0BWsD{transition:left .3s ease-out}.PinOverlay_pinButton__cnV1K{position:absolute;--offset:-8px;align-items:center;background-color:var(--background);border-radius:9999px;cursor:grab;display:flex;justify-content:center;left:-8px;left:var(--offset);margin-left:-8px;margin-left:var(--offset);padding:10px;pointer-events:auto;top:-18px;touch-action:none;transition:transform .2s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none}.PinOverlay_pinDragging__gu3xp .PinOverlay_pinButton__cnV1K{transition:none}.PinOverlay_pinHovered__cGPjN .PinOverlay_pinButton__cnV1K{transform:scale(1.1)}.PinOverlay_pinButton__cnV1K:active{cursor:grabbing}.PinOverlay_pinIcon__s7Ze0{color:var(--foreground);height:16px;width:16px}.PinOverlay_pinPlaceholder__JhKcQ{cursor:grab;height:72px;margin-left:-40px;margin-top:-40px;pointer-events:auto;position:absolute;top:var(--p-5);touch-action:none;width:72px;z-index:20}.PinOverlay_pinAnimating__5XMJG .PinOverlay_pinPlaceholder__JhKcQ{transition:left .3s ease-out}.PinOverlay_pinPlaceholder__JhKcQ:active{cursor:grabbing}";
+var S = {"root":"PinOverlay_root__RUZxO","pinContainer":"PinOverlay_pinContainer__6sc1J","pinHovered":"PinOverlay_pinHovered__cGPjN","pinLineBase":"PinOverlay_pinLineBase__0BWsD","pinDragging":"PinOverlay_pinDragging__gu3xp","pinAnimating":"PinOverlay_pinAnimating__5XMJG","pinButton":"PinOverlay_pinButton__cnV1K","pinIcon":"PinOverlay_pinIcon__s7Ze0","pinPlaceholder":"PinOverlay_pinPlaceholder__JhKcQ"};
+styleInject(css_248z);
+
+export { S as default };