@sybilion/uilib 1.0.20

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

@@ -0,0 +1,204 @@
+import { memo, useMemo } from 'react';
+
+import { Line } from 'recharts';
+
+import { ChartDataPoint } from './ChartAreaInteractive.types';
+
+export interface LineConfig {
+  dataKey: string;
+  color: string;
+  name: string;
+}
+
+export type ForecastItemData = {
+  id: number;
+  name?: string;
+  color?: string;
+  icon?: string;
+  status?: string;
+  // pending?: boolean;
+  tooltip?: string;
+  dimmed?: boolean;
+  updated_at?: string;
+};
+
+export type Dot = {
+  x: number;
+  y: number;
+  color: string;
+};
+
+const ANIMATION_DURATION = 300;
+
+// Colors for different forecast series
+
+export const FORECAST_COLORS_MAP = {
+  '#C08F09': '#F9D56733',
+  '#216BF7': '#84C6FB33',
+  '#F103F1': '#EDB1F733',
+  '#059643': '#80F3B033',
+  '#FD1515': '#80F3B033',
+  '#04ADC3': '#65EEFF33',
+  '#3C42A9': '#ADB1F633',
+  '#795548': '#D0B8AF33',
+};
+export const FORECAST_LINE_COLORS = Object.keys(FORECAST_COLORS_MAP);
+
+export const getForecastColor = (index: number) =>
+  FORECAST_LINE_COLORS[index % FORECAST_LINE_COLORS.length];
+
+export const getForecastQuantileBandColor = (index: number) =>
+  FORECAST_COLORS_MAP[
+    FORECAST_LINE_COLORS[index % FORECAST_LINE_COLORS.length]
+  ];
+
+// Memoized component for chart lines - only re-renders when data/analyses/hiddenSeries change
+export const ChartLines = memo(
+  ({
+    chartData,
+    forecastData,
+    hiddenSeries,
+    isDarkTheme,
+    shouldAnimate,
+    historicalLineColor = isDarkTheme ? '#ffffff' : '#000000',
+    showLegend = true,
+    forecastLineStyle = 'dashed',
+    disableHistoricalAnimation = false,
+  }: {
+    chartData: ChartDataPoint[];
+    forecastData?: ForecastItemData[];
+    hiddenSeries?: Set<string>;
+    isDarkTheme: boolean;
+    shouldAnimate?: boolean;
+    historicalLineColor?: string;
+    showLegend?: boolean;
+    forecastLineStyle?: 'dashed' | 'solid';
+    disableHistoricalAnimation?: boolean;
+  }) => {
+    const dotStroke = isDarkTheme ? '#000000' : '#FFFFFF';
+
+    const activeDotHistorical = {
+      r: 6,
+      fill: historicalLineColor,
+      stroke: dotStroke,
+      strokeWidth: 3,
+      filter: 'drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2))',
+      style: { zIndex: 20 },
+    };
+
+    const activeDotForecast = (color: string) => ({
+      ...activeDotHistorical,
+      fill: color,
+    });
+
+    // Memoize last historical index to avoid recalculating on every render call
+    const lastHistoricalIndex = useMemo(() => {
+      for (let i = chartData.length - 1; i >= 0; i--) {
+        const value = chartData[i].historical;
+        if (value !== undefined && value !== null) {
+          return i;
+        }
+      }
+      return -1;
+    }, [chartData]);
+
+    // Memoize last forecast indices per forecast ID
+    const lastForecastIndices = useMemo(() => {
+      const indices: Record<number, number> = {};
+      forecastData?.forEach(({ id }) => {
+        const dataKey = `forecast_${id}`;
+        for (let i = chartData.length - 1; i >= 0; i--) {
+          const value = chartData[i][dataKey];
+          if (value !== undefined && value !== null) {
+            indices[id] = i;
+            break;
+          }
+        }
+      });
+      return indices;
+    }, [chartData, forecastData]);
+
+    // Helper to render dot at last data point
+    const renderDot = (
+      props: any,
+      lastIndex: number,
+      dataKey: string,
+      color: string,
+    ) => {
+      if (
+        lastIndex >= 0 &&
+        props.index === lastIndex &&
+        chartData[props.index]?.[dataKey] != null &&
+        props.cy != null &&
+        props.cx != null
+      ) {
+        return <circle cx={props.cx} cy={props.cy} r={3} fill={color} />;
+      }
+      return null;
+    };
+
+    const renderHistoricalDot = (props: any) =>
+      renderDot(props, lastHistoricalIndex, 'historical', historicalLineColor);
+
+    const renderForecastDot = (props: any, id: number, color: string) =>
+      renderDot(props, lastForecastIndices[id] ?? -1, `forecast_${id}`, color);
+    return (
+      <>
+        {/* Historical Data Line */}
+        <Line
+          key="historical"
+          type="monotone"
+          dataKey="historical"
+          stroke={historicalLineColor}
+          strokeWidth={1}
+          dot={props => renderHistoricalDot(props)}
+          activeDot={activeDotHistorical}
+          name="Historical Data"
+          legendType={showLegend === false ? 'none' : undefined}
+          strokeDasharray="0"
+          hide={hiddenSeries?.has('historical')}
+          isAnimationActive={shouldAnimate && !disableHistoricalAnimation}
+          animationDuration={
+            disableHistoricalAnimation ? 0 : ANIMATION_DURATION
+          }
+          animationBegin={0}
+          animationEasing="ease-out"
+        />
+
+        {/* Forecast Lines */}
+        {forecastData?.map((data: ForecastItemData, index: number) => {
+          const {
+            id,
+            name,
+            color = FORECAST_LINE_COLORS[index % FORECAST_LINE_COLORS.length],
+          } = data;
+          const dataKey = `forecast_${id}`;
+
+          return (
+            <Line
+              key={`forecast-${id}`}
+              type="monotone"
+              dataKey={dataKey}
+              stroke={color}
+              strokeWidth={1}
+              strokeDasharray={forecastLineStyle === 'dashed' ? '4 2' : '0'}
+              dot={props => renderForecastDot(props, id, color)}
+              activeDot={activeDotForecast(color)}
+              name={`${name || `${id}`}`}
+              legendType={showLegend === false ? 'none' : undefined}
+              hide={hiddenSeries?.has(dataKey)}
+              isAnimationActive={shouldAnimate}
+              animationDuration={ANIMATION_DURATION}
+              animationBegin={0}
+              animationEasing="ease-out"
+              className="chart-line-blinking"
+              // className={pending ? 'chart-line-blinking' : undefined}
+            />
+          );
+        })}
+      </>
+    );
+  },
+);
+
+ChartLines.displayName = 'ChartLines';

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

@@ -0,0 +1,3 @@
+export * from './ChartAreaInteractive';
+export * from './ChartAreaInteractive.types';
+export type { OverlayMode } from './ChartAreaInteractive.types';

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

@@ -0,0 +1,29 @@
+.draggingButton
+  width: 36px
+  height: 36px
+  background: var(--background, #ffffff)
+  border: 1px solid var(--input, #e4e4e7)
+  border-radius: 9999px
+  display: flex
+  align-items: center
+  justify-content: center
+  cursor: grab
+  z-index: 10
+  pointer-events: auto
+  transition: all 0.2s
+
+  &:hover
+    border-color: var(--foreground, #001b1b)
+    background: var(--accent, #f4f4f5)
+
+  &:active
+    cursor: grabbing
+
+  svg
+    width: 16px
+    height: 16px
+    color: var(--foreground, #001b1b)
+
+.dragging
+  cursor: grabbing
+

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

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

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

@@ -0,0 +1,211 @@
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
+
+import useElemDrag, { Delta } from '#uilib/hooks/useDragElem';
+
+export function useQuantileButton({
+  buttonRef,
+  overlayContainerRef,
+  quantiles,
+  selectedQuantile,
+  onQuantileChange,
+  calculateQuantilePosition,
+  yMin,
+  yMax,
+  minPercent = 0,
+  maxPercent = 100,
+}: {
+  buttonRef: RefObject<HTMLButtonElement>;
+  overlayContainerRef: RefObject<HTMLDivElement>;
+  quantiles: string[];
+  selectedQuantile: string | null | undefined;
+  onQuantileChange?: (quantile: string | null) => void;
+  calculateQuantilePosition: (
+    quantile: string,
+    yMin: number,
+    yMax: number,
+  ) => number;
+  yMin: number;
+  yMax: number;
+  minPercent?: number;
+  maxPercent?: number;
+}) {
+  const [isDragging, setIsDragging] = useState(false);
+  const cachedRectRef = useRef<DOMRect | null>(null);
+
+  const clientYToPercent = useCallback(
+    (clientY: number): number => {
+      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: number) => {
+      if (buttonRef.current) {
+        buttonRef.current.style.top = `${percent}%`;
+      }
+    },
+    [buttonRef],
+  );
+
+  const findClosestQuantile = useCallback(
+    (percent: number, yMin: number, yMax: number): string | null => {
+      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: Delta, e: PointerEvent) => {
+      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: PointerEvent) => {
+      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: PointerEvent) => {
+      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 };
+}

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

@@ -0,0 +1,17 @@
+.root
+  position absolute
+  inset 0
+  margin var(--p-5) var(--p-8) auto var(--p-12)
+  pointer-events none
+  user-select none
+  z-index 4
+  height calc(var(--chart-height) - 71px) // 518px
+  touch-action none
+
+.inner
+  position absolute
+  top 0
+  right 0
+  bottom 0
+  left 0
+  height 100%

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

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