@sybilion/uilib 1.0.20

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

@@ -0,0 +1,256 @@
+import cn from 'classnames';
+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';
+import { useChartYRange } from '../useChartYRange';
+import S from './PinOverlay.styl';
+
+interface PinOverlayProps {
+  baseChartProps: BaseChartWrapperProps;
+  pinMonth: string | undefined;
+  onPinMonthChange: (month: string | undefined) => void;
+  onPreviewMonthChange?: (month: string | undefined) => void;
+  className?: string;
+}
+
+export function PinOverlay({
+  baseChartProps,
+  pinMonth,
+  onPinMonthChange,
+  onPreviewMonthChange,
+  className,
+}: PinOverlayProps) {
+  const { chartData } = baseChartProps;
+  const chartRef = useRef<HTMLDivElement>(null);
+  const pinRef = useRef<HTMLDivElement>(null);
+  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(
+    (...args: unknown[]) => onPinMonthChange?.(args[0] as string),
+    500,
+    [onPinMonthChange],
+  );
+
+  const { yMin, yMax } = useChartYRange({
+    baseChartProps,
+    excludeQuantileBands: true,
+  });
+
+  const setPinPosition = (position: number) => {
+    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?: number) => {
+    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: number,
+    needMonthUpdate: boolean = true,
+    immediateMonthUpdate: boolean = 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]);
+
+  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;
+    snapPinToPosition(e.clientX, true, false);
+  };
+
+  const overlay = (
+    <>
+      <div className={cn(CAS.overlay, S.pinContainer)} ref={pinContainerRef}>
+        <div
+          className={S.pinLineBase}
+          style={{ left: `${pinPosRef.current}%` }}
+          ref={pinRef}
+        >
+          <div
+            className={S.pinButton}
+            aria-label="News pin"
+            title={`Current month: ${getPinMonthAndYear() || 'Loading...'}`}
+          >
+            <ChevronsLeftRight className={S.pinIcon} aria-hidden="true" />
+          </div>
+        </div>
+      </div>
+      {/* Hover placeholder for easier pin access - on top of everything */}
+      <div
+        className={S.pinPlaceholder}
+        style={{ left: `${pinPosRef.current}%` }}
+        ref={pinPlaceholderRef}
+        onPointerEnter={() => setIsPinHovered(true)}
+        onPointerLeave={() => setIsPinHovered(false)}
+      />
+    </>
+  );
+
+  return (
+    <div
+      className={cn(
+        className,
+        S.root,
+        isDraggingPin && S.pinDragging,
+        isPinAnimating && S.pinAnimating,
+        isPinHovered && S.pinHovered,
+      )}
+      onPointerDown={onPointerDown}
+      // onClick={e => snapPinToPosition(e.clientX)}
+      ref={chartRef}
+    >
+      <BaseChartWrapper
+        {...baseChartProps}
+        yMin={yMin}
+        yMax={yMax}
+        autoScaleYAxis={false}
+        overlayElements={overlay}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,185 @@
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
+
+import useElemDrag, { Delta } from '#uilib/hooks/useDragElem';
+import { useThrottledCallback } from '#uilib/hooks/useThrottledCallback';
+
+export function useThresholdButton({
+  lineRef,
+  overlayContainerRef,
+  initialValue,
+  minValue,
+  maxValue,
+  yMin,
+  yMax,
+  onValueChange,
+  discreteValues,
+}: {
+  lineRef: RefObject<HTMLDivElement>;
+  gradientRef?: RefObject<HTMLDivElement>;
+  overlayContainerRef: RefObject<HTMLDivElement>;
+  initialValue: number;
+  minValue: number;
+  maxValue: number;
+  yMin: number;
+  yMax: number;
+  onValueChange: (value: number) => void;
+  discreteValues?: number[];
+}) {
+  const [isDragging, setIsDragging] = useState(false);
+  const initialValueRef = useRef<number>(initialValue);
+  const startYRef = useRef<number>(0);
+
+  const onValueChangeThrottled = useThrottledCallback(onValueChange, 50);
+
+  const percentToValue = useCallback(
+    (percent: number): number => {
+      const normalized = 1 - percent / 100;
+      return yMin + normalized * (yMax - yMin);
+    },
+    [yMin, yMax],
+  );
+
+  const valueToPercent = useCallback(
+    (value: number): number => {
+      const normalized = (value - yMin) / (yMax - yMin);
+      return Math.max(0, Math.min(100, (1 - normalized) * 100));
+    },
+    [yMin, yMax],
+  );
+
+  const minPercent = valueToPercent(maxValue);
+  const maxPercent = valueToPercent(minValue);
+
+  const clientYToValue = useCallback(
+    (clientY: number): number => {
+      if (!overlayContainerRef.current) return initialValueRef.current;
+
+      const rect = overlayContainerRef.current.getBoundingClientRect();
+      const relativeY = clientY - rect.top;
+      const rawPercent = (relativeY / rect.height) * 100;
+      const clampedPercent = Math.max(
+        minPercent,
+        Math.min(maxPercent, rawPercent),
+      );
+      const value = Math.max(
+        minValue,
+        Math.min(maxValue, percentToValue(clampedPercent)),
+      );
+      return value;
+    },
+    [
+      overlayContainerRef,
+      percentToValue,
+      minPercent,
+      maxPercent,
+      minValue,
+      maxValue,
+    ],
+  );
+
+  const setLinePosition = percent => {
+    if (lineRef.current) {
+      lineRef.current.style.top = `${percent}%`;
+    }
+  };
+
+  // Helper function to find closest discrete value
+  const findClosestDiscreteValue = useCallback(
+    (value: number, discreteValues: number[]): number => {
+      if (discreteValues.length === 0) return value;
+
+      let closest = discreteValues[0];
+      let minDiff = Math.abs(discreteValues[0] - value);
+
+      for (const discreteValue of discreteValues) {
+        const diff = Math.abs(discreteValue - value);
+        if (diff < minDiff) {
+          minDiff = diff;
+          closest = discreteValue;
+        }
+      }
+
+      return closest;
+    },
+    [],
+  );
+
+  // Sync button position when initialValue changes (outside of drag)
+  useEffect(() => {
+    if (!isDragging && lineRef.current) {
+      const clampedValue = Math.max(minValue, Math.min(maxValue, initialValue));
+      const percent = valueToPercent(clampedValue);
+      setLinePosition(percent);
+    }
+  }, [initialValue, isDragging, lineRef, minValue, maxValue, valueToPercent]);
+
+  const handleDrag = useCallback(
+    (delta: Delta, e: PointerEvent) => {
+      const newValue = clientYToValue(e.clientY);
+      const clampedValue = Math.max(minValue, Math.min(maxValue, newValue));
+      const percent = valueToPercent(clampedValue);
+
+      setLinePosition(percent);
+      onValueChangeThrottled(clampedValue);
+    },
+    [clientYToValue, valueToPercent, minValue, maxValue],
+  );
+
+  const handleDragStart = useCallback(
+    (e: PointerEvent) => {
+      initialValueRef.current = initialValue;
+      startYRef.current = e.clientY;
+      setIsDragging(true);
+    },
+    [initialValue],
+  );
+
+  const handleDragEnd = useCallback(
+    (e: PointerEvent) => {
+      const finalValue = clientYToValue(e.clientY);
+      let clampedValue = Math.max(minValue, Math.min(maxValue, finalValue));
+
+      // Snap to nearest discrete value if provided (only values within bounds)
+      if (discreteValues && discreteValues.length > 0) {
+        const validDiscreteValues = discreteValues.filter(
+          v => v >= minValue && v <= maxValue,
+        );
+        if (validDiscreteValues.length > 0) {
+          clampedValue = findClosestDiscreteValue(
+            clampedValue,
+            validDiscreteValues,
+          );
+        }
+        clampedValue = Math.max(minValue, Math.min(maxValue, clampedValue));
+
+        const percent = valueToPercent(clampedValue);
+        setLinePosition(percent);
+      }
+
+      // Update React state for persistence
+      onValueChange(clampedValue);
+
+      setIsDragging(false);
+    },
+    [
+      overlayContainerRef,
+      clientYToValue,
+      minValue,
+      maxValue,
+      onValueChange,
+      discreteValues,
+      findClosestDiscreteValue,
+      valueToPercent,
+    ],
+  );
+
+  useElemDrag({
+    elem: lineRef,
+    onDrag: handleDrag,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    isActive: true,
+  });
+
+  return { isDragging };
+}

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

@@ -0,0 +1,21 @@
+
+.line
+  position absolute
+  left 0
+  width 100%
+  height 1px
+  translateY(-50px)
+
+  &::before
+    content ''
+    z-index 4
+    position absolute
+    pointer-events none
+    height 1px
+    width 100%
+    left 0
+    background-color var(--brand-color-400)
+
+.centeredButton
+  transform translate(-50%, -50%) !important
+

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

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'centeredButton': string;
+  'line': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

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

@@ -0,0 +1,206 @@
+import { useCallback, useMemo, useRef } from 'react';
+
+import type { QuantileBandConfig } from '#uilib/components/ui/Chart/chartForecastVisualization.types';
+import { BaseChartWrapper } from '#uilib/components/ui/Chart/components';
+import { BaseChartWrapperProps } from '#uilib/components/ui/Chart/components/BaseChartWrapper';
+import { DraggingButton } from '#uilib/components/ui/DraggingButton/DraggingButton';
+import type { ForecastData } from '#uilib/types/forecast-data';
+import { formatQuantileRangeLabel } from '#uilib/utils/quantileFormat';
+import { ChevronsUpDown } from 'lucide-react';
+
+import { Analysis } from '../../ChartAreaInteractive.types';
+import SI from '../IntervalsOverlay/IntervalsOverlay.styl';
+import { useChartYRange } from '../useChartYRange';
+import { useForecastColor } from '../useForecastColor';
+import { useQuantileBands } from '../useQuantileBands';
+import { useThresholdButton } from './ThresholdsOverlay.hooks';
+import S from './ThresholdsOverlay.styl';
+
+interface ThresholdsOverlayProps {
+  baseChartProps: BaseChartWrapperProps;
+  selectedForecast?: Analysis;
+  className?: string;
+  lowerThreshold?: number;
+  upperThreshold?: number;
+  onLowerThresholdChange?: (value: number) => void;
+  onUpperThresholdChange?: (value: number) => void;
+  discreteThresholdValues?: { lower: number[]; upper: number[] };
+  overlayForecastData: Record<number, ForecastData>;
+}
+
+export function ThresholdsOverlay({
+  baseChartProps,
+  selectedForecast,
+  className,
+  lowerThreshold = 0,
+  upperThreshold = 0,
+  onLowerThresholdChange,
+  onUpperThresholdChange,
+  discreteThresholdValues,
+  overlayForecastData: forecastData,
+}: ThresholdsOverlayProps) {
+  // Discover available quantiles dynamically
+  const availableQuantiles = useMemo(() => {
+    if (!selectedForecast?.id || !forecastData[selectedForecast.id]) {
+      return null;
+    }
+
+    const forecastDataForSelected = forecastData[selectedForecast.id];
+    const allQuantiles = forecastDataForSelected.allQuantiles;
+
+    if (!allQuantiles) {
+      return null;
+    }
+
+    const keys = Object.keys(allQuantiles);
+    const sortedKeys = keys.map(Number).sort((a, b) => a - b);
+
+    return {
+      lowerQuantiles: sortedKeys.filter(q => q < 0.5).map(String),
+      upperQuantiles: sortedKeys.filter(q => q > 0.5).map(String),
+      allQuantiles: sortedKeys.map(String),
+      medianQuantile: sortedKeys.find(q => q === 0.5)?.toString() || null,
+      lowestQuantile: sortedKeys[0]?.toString() || null,
+      highestQuantile: sortedKeys[sortedKeys.length - 1]?.toString() || null,
+    };
+  }, [selectedForecast?.id, forecastData]);
+
+  // Refs
+  const overlayContainerRef = useRef<HTMLDivElement>(null);
+  const lineRef = useRef<HTMLDivElement>(null);
+
+  // Transform chart data with quantile band - needed before useChartYRange
+  const bandKey = selectedForecast?.id
+    ? `band_10_90_${selectedForecast.id}`
+    : 'band_10_90';
+
+  const getBandValues = useCallback(
+    (
+      date: string,
+      dateIndex: number,
+      allQuantiles: Record<string, number[]>,
+    ): [number, number] | null => {
+      if (
+        !availableQuantiles ||
+        !availableQuantiles.lowestQuantile ||
+        !availableQuantiles.highestQuantile
+      ) {
+        return null;
+      }
+
+      const lowerValue =
+        allQuantiles[availableQuantiles.lowestQuantile]?.[dateIndex];
+      const upperValue =
+        allQuantiles[availableQuantiles.highestQuantile]?.[dateIndex];
+
+      if (
+        lowerValue !== undefined &&
+        upperValue !== undefined &&
+        typeof lowerValue === 'number' &&
+        typeof upperValue === 'number'
+      ) {
+        return [lowerValue, upperValue];
+      }
+
+      return null;
+    },
+    [availableQuantiles],
+  );
+
+  const { quantileBandColor } = useForecastColor(
+    selectedForecast,
+    baseChartProps.forecastData,
+  );
+
+  const getBandConfig = useCallback(
+    (bk: string): QuantileBandConfig => {
+      const lowerQuantile = availableQuantiles?.lowestQuantile || '0.1';
+      const upperQuantile = availableQuantiles?.highestQuantile || '0.9';
+
+      return {
+        key: bk,
+        quantiles: [lowerQuantile, upperQuantile],
+        opacity: 0.15,
+        color: quantileBandColor,
+        name: formatQuantileRangeLabel(lowerQuantile, upperQuantile),
+        type: 'monotone',
+      };
+    },
+    [quantileBandColor, availableQuantiles],
+  );
+
+  const { transformedChartData, quantileBands } = useQuantileBands({
+    chartData: baseChartProps.chartData,
+    selectedForecastId: selectedForecast?.id,
+    forecastData,
+    bandKey,
+    getBandValues,
+    getBandConfig,
+  });
+
+  const { yMin, yMax } = useChartYRange({
+    baseChartProps,
+    chartData: transformedChartData,
+    selectedForecastId: selectedForecast?.id,
+  });
+
+  // Full chart range for threshold drag
+  const boundaryConstraints = useMemo(
+    () => ({ upperMin: yMin, upperMax: yMax }),
+    [yMin, yMax],
+  );
+
+  // Convert value to percentage position
+  const valueToPercent = useCallback(
+    (value: number): string => {
+      const normalized = (value - yMin) / (yMax - yMin);
+      const percent = Math.max(0, Math.min(100, (1 - normalized) * 100));
+      return `${percent}%`;
+    },
+    [yMin, yMax],
+  );
+
+  // Use threshold button hooks
+  const upperButton = useThresholdButton({
+    lineRef,
+    overlayContainerRef,
+    initialValue: upperThreshold,
+    minValue: boundaryConstraints.upperMin,
+    maxValue: boundaryConstraints.upperMax,
+    yMin,
+    yMax,
+    onValueChange: onUpperThresholdChange || (() => {}),
+    discreteValues: discreteThresholdValues?.upper,
+  });
+
+  // Render overlay elements - always render container, conditionally render buttons
+  const overlay = (
+    <div ref={overlayContainerRef} className={SI.root}>
+      <div className={S.line} ref={lineRef}>
+        <DraggingButton
+          size="md"
+          left="50%"
+          icon={<ChevronsUpDown size={16} />}
+          title={`Upper threshold: ${upperThreshold.toFixed(2)}`}
+          isDragging={upperButton.isDragging}
+          className={S.centeredButton}
+        />
+      </div>
+    </div>
+  );
+
+  return (
+    <div className={className}>
+      <BaseChartWrapper
+        {...baseChartProps}
+        yMin={yMin}
+        yMax={yMax}
+        showTooltip={!upperButton.isDragging}
+        autoScaleYAxis={false}
+        chartData={transformedChartData}
+        quantileBands={quantileBands}
+        overlayElements={overlay}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,3 @@
+export { PinOverlay } from './PinOverlay/PinOverlay';
+export { IntervalsOverlay } from './IntervalsOverlay/IntervalsOverlay';
+export { ThresholdsOverlay } from './ThresholdsOverlay/ThresholdsOverlay';