@sybilion/uilib 1.2.24 → 1.3.0

package/src/components/ui/Chart/tools/chartPlotGeometry.ts

@@ -0,0 +1,89 @@
+/**
+ * Shared Recharts plot / margin math (DOM-agnostic except measurement entry points).
+ * Keeps BaseChartWrapper tooltip clamp and ChartAreaInteractive brush in sync.
+ */
+
+export type ChartMargin = {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+};
+
+export const DEFAULT_CHART_MARGIN: ChartMargin = {
+  top: 5,
+  right: 5,
+  bottom: 5,
+  left: 5,
+};
+
+export function resolveChartMargin(
+  margin: Partial<ChartMargin> | undefined,
+): ChartMargin {
+  return {
+    top: margin?.top ?? DEFAULT_CHART_MARGIN.top,
+    right: margin?.right ?? DEFAULT_CHART_MARGIN.right,
+    bottom: margin?.bottom ?? DEFAULT_CHART_MARGIN.bottom,
+    left: margin?.left ?? DEFAULT_CHART_MARGIN.left,
+  };
+}
+
+/** Plot box inside `.recharts-wrapper` (Recharts cartesian convention). */
+export function getPlotViewBox(wrapper: HTMLElement, m: ChartMargin) {
+  const w = wrapper.clientWidth;
+  const h = wrapper.clientHeight;
+  return {
+    x: m.left,
+    y: m.top,
+    width: Math.max(0, w - m.left - m.right),
+    height: Math.max(0, h - m.top - m.bottom),
+  };
+}
+
+export type PlotRect = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+};
+
+const GRID_BOUNDS_MIN_PX = 2;
+
+/**
+ * Plot area in `host` local px: prefer painted `.recharts-cartesian-grid`, else
+ * last `.recharts-wrapper` + margins. One `hostRect` read; grid/wrapper rects as needed.
+ */
+export function measureHostRelativePlotRect(
+  host: HTMLElement,
+  margin: ChartMargin,
+): PlotRect | null {
+  const hostRect = host.getBoundingClientRect();
+
+  const grid = host.querySelector<SVGGElement>('.recharts-cartesian-grid');
+  if (grid) {
+    const gr = grid.getBoundingClientRect();
+    if (gr.width > GRID_BOUNDS_MIN_PX && gr.height > GRID_BOUNDS_MIN_PX) {
+      return {
+        left: gr.left - hostRect.left,
+        top: gr.top - hostRect.top,
+        width: gr.width,
+        height: gr.height,
+      };
+    }
+  }
+
+  const wrappers = host.querySelectorAll('.recharts-wrapper');
+  const wrapper = wrappers[wrappers.length - 1];
+  if (!(wrapper instanceof HTMLElement)) return null;
+
+  const vb = getPlotViewBox(wrapper, margin);
+  if (vb.width <= 0 || vb.height <= 0) return null;
+
+  const wrapRect = wrapper.getBoundingClientRect();
+  return {
+    left: wrapRect.left - hostRect.left + vb.x,
+    top: wrapRect.top - hostRect.top + vb.y,
+    width: vb.width,
+    height: vb.height,
+  };
+}

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

@@ -65,7 +65,37 @@ const timeRangeToMonths = {
   All: 12,
 } as const;
 
-export type TimeRange = keyof typeof timeRangeToMonths;
+export type TimeRangePreset = keyof typeof timeRangeToMonths;
+
+/** @deprecated Use `TimeRangePreset` or `string` for brush-encoded ranges. */
+export type TimeRange = TimeRangePreset;
+
+export const DRAG_TIME_RANGE_PREFIX = '__drag:' as const;
+
+export function encodeDragTimeRange(a: Date, b: Date): string {
+  const t0 = Math.min(a.getTime(), b.getTime());
+  const t1 = Math.max(a.getTime(), b.getTime());
+  return `${DRAG_TIME_RANGE_PREFIX}${t0},${t1}`;
+}
+
+export function parseDragTimeRange(
+  s: string,
+): { start: Date; end: Date } | null {
+  if (!s.startsWith(DRAG_TIME_RANGE_PREFIX)) return null;
+  const body = s.slice(DRAG_TIME_RANGE_PREFIX.length);
+  const comma = body.indexOf(',');
+  if (comma === -1) return null;
+  const a = Number(body.slice(0, comma));
+  const b = Number(body.slice(comma + 1));
+  if (!Number.isFinite(a) || !Number.isFinite(b)) return null;
+  const t0 = Math.min(a, b);
+  const t1 = Math.max(a, b);
+  return { start: new Date(t0), end: new Date(t1) };
+}
+
+export function isTimeRangePreset(s: string): s is TimeRangePreset {
+  return Object.prototype.hasOwnProperty.call(timeRangeToMonths, s);
+}
 
 function isPlottableNumber(value: unknown): value is number {
   return typeof value === 'number' && Number.isFinite(value);
@@ -154,11 +184,23 @@ export type FilterDataForTimeRangeOptions = {
 
 export const filterDataForTimeRange = (
   data: ChartDataPoint[],
-  currentTimeRange: TimeRange,
+  currentTimeRange: string,
   options?: FilterDataForTimeRangeOptions,
 ) => {
+  const dragRange = parseDragTimeRange(currentTimeRange);
+  if (dragRange) {
+    const { start, end } = dragRange;
+    return data.filter(item => {
+      if (!item.date) return false;
+      const d = new Date(item.date);
+      return d >= start && d <= end;
+    });
+  }
+
   if (currentTimeRange === 'All') return data;
 
+  if (!isTimeRangePreset(currentTimeRange)) return data;
+
   const latestDate = computeLatestPlottableDate(data, options);
 
   // Pre-compute start date based on latest date in data

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/ui/ChartAreaInteractive/TimeRangeBrushLayer.styl.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  '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;