okengine 0.11.2 → 0.13.0

package/src/console/ui-next/src/components/charts/line-chart-loading.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { curveNatural } from "@visx/curve";
+import { useMemo } from "react";
+import type { Margin } from "./chart-context";
+import type { LoadingStyle } from "./chart-phase";
+import {
+  DEFAULT_SKELETON_DATA_KEY,
+  DEFAULT_SKELETON_POINT_COUNT,
+  generateChartSkeletonData,
+} from "./generate-chart-skeleton-data";
+import { Grid } from "./grid";
+import { Line } from "./line";
+import { LineChart } from "./line-chart";
+
+const LOADING_DATA_KEY = DEFAULT_SKELETON_DATA_KEY;
+const DEFAULT_LOADING_STROKE = "var(--foreground)";
+const DEFAULT_LOADING_GRID_STROKE = "color-mix(in oklch, var(--chart-grid) 50%, transparent)";
+const DEFAULT_LOADING_GRID_SHIMMER_STROKE =
+  "color-mix(in oklch, var(--foreground) 68%, transparent)";
+const DEFAULT_LOADING_STROKE_OPACITY = 0.5;
+
+export interface LineChartLoadingProps {
+  /** Chart margins */
+  margin?: Partial<Margin>;
+  /** Stroke color for the animated loading segment. */
+  stroke?: string;
+  /** Stroke opacity for the animated loading segment. Default: 0.5 */
+  strokeOpacity?: number;
+  /** Grid line stroke (color and opacity via color-mix or oklch alpha). */
+  gridStroke?: string;
+  /** Shimmer band stroke (color and opacity via color-mix or oklch alpha). */
+  gridShimmerStroke?: string;
+  /** Animate a shimmer band across grid lines. Default: true */
+  gridShimmer?: boolean;
+  /** Shimmer band width in pixels. Default: 140 */
+  gridShimmerLength?: number;
+  /** Shimmer speed multiplier (higher = faster). Default: 1 */
+  gridShimmerSpeed?: number;
+  /** Match shimmer loop to the loading line pulse (cycle + inter-loop pause). */
+  gridShimmerSync?: boolean;
+  /** Loading animation: `"pulse"` (default traveling pulse) or `"sweep"` (a
+   * diagonal shimmer across the skeleton line). Default: `"pulse"`. */
+  loadingStyle?: LoadingStyle;
+  /** Centered shimmer label text. Default: "Loading" */
+  label?: string;
+  /** Aspect ratio as "width / height". Default: "2 / 1" */
+  aspectRatio?: string;
+  /** Additional class name for the container */
+  className?: string;
+}
+
+export function LineChartLoading({
+  margin,
+  stroke = DEFAULT_LOADING_STROKE,
+  strokeOpacity = DEFAULT_LOADING_STROKE_OPACITY,
+  gridStroke = DEFAULT_LOADING_GRID_STROKE,
+  gridShimmerStroke = DEFAULT_LOADING_GRID_SHIMMER_STROKE,
+  gridShimmer = true,
+  gridShimmerLength,
+  gridShimmerSpeed,
+  gridShimmerSync = false,
+  loadingStyle = "pulse",
+  label = "Loading",
+  aspectRatio = "2 / 1",
+  className = "",
+}: LineChartLoadingProps) {
+  const data = useMemo(
+    () =>
+      generateChartSkeletonData({
+        dataKey: DEFAULT_SKELETON_DATA_KEY,
+        pointCount: DEFAULT_SKELETON_POINT_COUNT,
+      }),
+    [],
+  );
+
+  return (
+    <LineChart
+      animationDuration={0}
+      aspectRatio={aspectRatio}
+      className={className}
+      data={data}
+      loadingLabel={label}
+      margin={margin}
+      status="loading"
+    >
+      <Grid
+        horizontal
+        shimmer={loadingStyle === "sweep" ? false : gridShimmer}
+        shimmerLength={gridShimmerLength}
+        shimmerSpeed={gridShimmerSpeed}
+        shimmerStroke={gridShimmerStroke}
+        shimmerSync={gridShimmerSync}
+        stroke={gridStroke}
+      />
+      <Line
+        curve={curveNatural}
+        dataKey={LOADING_DATA_KEY}
+        fadeEdges={false}
+        loadingStroke={stroke}
+        loadingStrokeOpacity={strokeOpacity}
+        loadingStyle={loadingStyle}
+        showHighlight={false}
+        stroke="transparent"
+        strokeWidth={2.5}
+      />
+    </LineChart>
+  );
+}
+
+export default LineChartLoading;

package/src/console/ui-next/src/components/charts/line-chart.tsx

@@ -0,0 +1,293 @@
+"use client";
+
+import { ParentSize } from "@visx/responsive";
+import type { Transition } from "motion/react";
+import {
+  Children,
+  type CSSProperties,
+  isValidElement,
+  type ReactElement,
+  type ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { cn } from "@/lib/utils";
+import type { LineConfig, Margin } from "./chart-context";
+import { ChartLoadingLabel } from "./chart-loading-label";
+import {
+  type ChartPhase,
+  type ChartStatus,
+  DEFAULT_CHART_STATUS,
+  DEFAULT_Y_DOMAIN_TWEEN_MS,
+  resolveRestingChartPhase,
+} from "./chart-phase";
+import { Line, type LineProps } from "./line";
+import { TimeSeriesChartInner } from "./time-series-chart-shell";
+
+export interface LineChartProps {
+  /** Data array - each item should have a date field and numeric values */
+  data: Record<string, unknown>[];
+  /** Key in data for the x-axis (date). Default: "date" */
+  xDataKey?: string;
+  /** Chart margins */
+  margin?: Partial<Margin>;
+  /** Animation duration in milliseconds. Default: 1100 */
+  animationDuration?: number;
+  /** CSS easing for clip-reveal. Default: cubic-bezier(0.85, 0, 0.15, 1) */
+  animationEasing?: string;
+  enterTransition?: Transition;
+  revealSignature?: string;
+  /** Aspect ratio as "width / height". Default: "2 / 1". Omit to fill a sized parent. */
+  aspectRatio?: string;
+  /** Additional class name for the container */
+  className?: string;
+  /** Loading vs ready — drives chart phase and loading chrome. Default: `"ready"`. */
+  status?: ChartStatus;
+  /** Centered shimmer label while loading. */
+  loadingLabel?: string;
+  /** Animate y-domain over this duration (ms) on status transitions. Default: 500. */
+  yDomainTweenDuration?: number;
+  /** Animate y-domain when status or target domain changes. Default: true */
+  yDomainTween?: boolean;
+  /** Visible x-domain for brush zoom. */
+  xDomain?: [Date, Date];
+  /** Full dataset length for x-scale padding when `xDomain` is set. */
+  xDomainSlotCount?: number;
+  /** Tween y-domain when brush changes the visible x-range. Default: false */
+  tweenYDomainOnXDomainChange?: boolean;
+  /** Inline container styles (e.g. fixed height for brush strip). */
+  style?: CSSProperties;
+  /** Fires when the internal chart phase changes (e.g. OG capture readiness). */
+  onPhaseChange?: (phase: ChartPhase) => void;
+  /** Child components (Line, Grid, ChartTooltip, etc.) */
+  children: ReactNode;
+}
+
+const DEFAULT_MARGIN: Margin = { top: 40, right: 40, bottom: 40, left: 40 };
+
+/** Series renderers that carry a dataKey but must not drive the shared y-domain. */
+const LINE_DOMAIN_EXCLUDED_NAMES = new Set([
+  "ProfitLossLine",
+  "LineSeriesTerminalMarker",
+  "Area",
+  "SeriesBar",
+  "Scatter",
+  "Candlestick",
+  "Bar",
+  "PatternArea",
+]);
+
+function getChildComponentName(child: ReactElement) {
+  const childType = child.type as { displayName?: string; name?: string };
+  return typeof child.type === "function" ? childType.displayName || childType.name || "" : "";
+}
+
+function registersLineDomain(child: ReactElement, props: LineProps | undefined) {
+  if (!props?.dataKey) {
+    return false;
+  }
+
+  const componentName = getChildComponentName(child);
+  if (componentName === "Line" || child.type === Line) {
+    return true;
+  }
+  if (LINE_DOMAIN_EXCLUDED_NAMES.has(componentName)) {
+    return false;
+  }
+  // MDX / duplicate bundle instances may not share the same `Line` reference.
+  return typeof props.dataKey === "string" && props.dataKey.length > 0;
+}
+
+function extractLineConfigs(children: ReactNode): LineConfig[] {
+  const configs: LineConfig[] = [];
+
+  const visit = (node: ReactNode) => {
+    Children.forEach(node, (child) => {
+      if (!isValidElement(child)) {
+        return;
+      }
+
+      const props = child.props as LineProps | undefined;
+
+      if (registersLineDomain(child, props) && props?.dataKey) {
+        configs.push({
+          dataKey: props.dataKey,
+          stroke: props.stroke || "var(--chart-line-primary)",
+          strokeWidth: props.strokeWidth || 2.5,
+          yAxisId: props.yAxisId,
+        });
+        return;
+      }
+
+      const childProps = child.props as { children?: ReactNode } | undefined;
+      if (childProps?.children) {
+        visit(childProps.children);
+      }
+    });
+  };
+
+  visit(children);
+  return configs;
+}
+
+interface ChartInnerProps {
+  width: number;
+  height: number;
+  data: Record<string, unknown>[];
+  xDataKey: string;
+  margin: Margin;
+  animationDuration: number;
+  animationEasing?: string;
+  enterTransition?: Transition;
+  revealSignature?: string;
+  chartStatus: ChartStatus;
+  loadingLabel?: string;
+  yDomainTweenDuration: number;
+  yDomainTween: boolean;
+  xDomain?: [Date, Date];
+  xDomainSlotCount?: number;
+  tweenYDomainOnXDomainChange?: boolean;
+  children: ReactNode;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  onPhaseChange: (phase: ChartPhase) => void;
+}
+
+function ChartInner({
+  width,
+  height,
+  data,
+  xDataKey,
+  margin,
+  animationDuration,
+  animationEasing,
+  enterTransition,
+  revealSignature,
+  chartStatus,
+  loadingLabel,
+  yDomainTweenDuration,
+  yDomainTween,
+  xDomain,
+  xDomainSlotCount,
+  tweenYDomainOnXDomainChange,
+  children,
+  containerRef,
+  onPhaseChange,
+}: ChartInnerProps) {
+  const lines = useMemo(() => extractLineConfigs(children), [children]);
+
+  return (
+    <TimeSeriesChartInner
+      animationDuration={animationDuration}
+      animationEasing={animationEasing}
+      chartStatus={chartStatus}
+      clipPathId="chart-grow-clip"
+      containerRef={containerRef}
+      data={data}
+      enterTransition={enterTransition}
+      height={height}
+      lines={lines}
+      loadingLabel={loadingLabel}
+      margin={margin}
+      onPhaseChange={onPhaseChange}
+      revealSignature={revealSignature}
+      tweenYDomainOnXDomainChange={tweenYDomainOnXDomainChange}
+      width={width}
+      xDataKey={xDataKey}
+      xDomain={xDomain}
+      xDomainSlotCount={xDomainSlotCount}
+      yDomainTween={yDomainTween}
+      yDomainTweenDuration={yDomainTweenDuration}
+    >
+      {children}
+    </TimeSeriesChartInner>
+  );
+}
+
+export function LineChart({
+  data,
+  xDataKey = "date",
+  margin: marginProp,
+  animationDuration = 1100,
+  animationEasing,
+  enterTransition,
+  revealSignature,
+  aspectRatio = "2 / 1",
+  className = "",
+  status = DEFAULT_CHART_STATUS,
+  loadingLabel,
+  yDomainTweenDuration = DEFAULT_Y_DOMAIN_TWEEN_MS,
+  yDomainTween = true,
+  xDomain,
+  xDomainSlotCount,
+  tweenYDomainOnXDomainChange = false,
+  style,
+  onPhaseChange,
+  children,
+}: LineChartProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const margin = { ...DEFAULT_MARGIN, ...marginProp };
+  const [chartPhase, setChartPhase] = useState<ChartPhase>(() => resolveRestingChartPhase(status));
+  const handlePhaseChange = useCallback(
+    (phase: ChartPhase) => {
+      setChartPhase(phase);
+      onPhaseChange?.(phase);
+    },
+    [onPhaseChange],
+  );
+
+  const showLoadingLabel = Boolean(
+    loadingLabel?.trim() &&
+    (chartPhase === "loading" ||
+      chartPhase === "exiting" ||
+      chartPhase === "gridTweenReady" ||
+      chartPhase === "revealingLoading"),
+  );
+
+  return (
+    <div
+      className={cn("relative w-full", className)}
+      ref={containerRef}
+      style={{
+        ...(aspectRatio ? { aspectRatio } : undefined),
+        touchAction: "none",
+        ...style,
+      }}
+    >
+      <ParentSize debounceTime={10}>
+        {({ width, height }) => (
+          <ChartInner
+            animationDuration={animationDuration}
+            animationEasing={animationEasing}
+            chartStatus={status}
+            containerRef={containerRef}
+            data={data}
+            enterTransition={enterTransition}
+            height={height}
+            loadingLabel={loadingLabel}
+            margin={margin}
+            onPhaseChange={handlePhaseChange}
+            revealSignature={revealSignature}
+            tweenYDomainOnXDomainChange={tweenYDomainOnXDomainChange}
+            width={width}
+            xDataKey={xDataKey}
+            xDomain={xDomain}
+            xDomainSlotCount={xDomainSlotCount}
+            yDomainTween={yDomainTween}
+            yDomainTweenDuration={yDomainTweenDuration}
+          >
+            {children}
+          </ChartInner>
+        )}
+      </ParentSize>
+      {showLoadingLabel ? (
+        <ChartLoadingLabel exiting={chartPhase !== "loading"} text={loadingLabel} />
+      ) : null}
+    </div>
+  );
+}
+
+export { Line, type LineProps } from "./line";
+
+export default LineChart;

package/src/console/ui-next/src/components/charts/line-loading-pulse.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import { animate, motion, useMotionValue, useTransform } from "motion/react";
+import { useEffect, useId } from "react";
+import { chartCssVars, useChartStable } from "./chart-context";
+import type { ChartPhase } from "./chart-phase";
+import { fadeGradientStops, resolveFadeSides, viewportFadeGradientAttrs } from "./fade-edges";
+import { LINE_LOADING_PULSE_CYCLE_S, LINE_LOADING_PULSE_EASE } from "./line-loading-timing";
+
+const CLIP_PADDING = 10;
+
+export type LineLoadingPulseMode = "loop" | "exit" | "enter";
+
+export function resolveLineLoadingPulseMode(phase: ChartPhase): LineLoadingPulseMode | null {
+  switch (phase) {
+    case "loading":
+      return "loop";
+    case "exiting":
+      return "exit";
+    case "revealingLoading":
+      return "enter";
+    default:
+      return null;
+  }
+}
+
+export interface LineLoadingPulseStrokeProps {
+  pathD: string;
+  mode?: LineLoadingPulseMode;
+  /** Bumps to restart loop cycles without remounting the stroke. */
+  loopEpoch?: number;
+  stroke?: string;
+  /** Stroke opacity for the animated segment. Default: 0.5 */
+  strokeOpacity?: number;
+  strokeWidth?: number;
+  onCycleComplete?: () => void;
+}
+
+function useGrowExitClip(
+  innerWidth: number,
+  mode: LineLoadingPulseMode,
+  loopEpoch: number,
+  onComplete?: () => void,
+) {
+  const progress = useMotionValue(0);
+  const paddedFullWidth = innerWidth + CLIP_PADDING * 2;
+  const rightEdge = innerWidth + CLIP_PADDING;
+
+  const clipWidth = useTransform(progress, (p) => {
+    if (p <= 0.5) {
+      return (p / 0.5) * paddedFullWidth;
+    }
+    const shrink = (p - 0.5) / 0.5;
+    return (1 - shrink) * paddedFullWidth;
+  });
+
+  const clipX = useTransform(progress, (p) => {
+    if (p <= 0.5) {
+      return -CLIP_PADDING;
+    }
+    const shrink = (p - 0.5) / 0.5;
+    return rightEdge - (1 - shrink) * paddedFullWidth;
+  });
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: loopEpoch restarts pulse when orchestrator advances
+  useEffect(() => {
+    if (innerWidth <= 0) {
+      return;
+    }
+
+    const halfCycleS = LINE_LOADING_PULSE_CYCLE_S / 2;
+    let cancelled = false;
+    let controls: ReturnType<typeof animate> | undefined;
+
+    const finish = () => {
+      if (!cancelled) {
+        onComplete?.();
+      }
+    };
+
+    const runShrink = (from: number) => {
+      const shrinkDuration = halfCycleS * ((1 - from) / 0.5);
+      controls = animate(progress, 1, {
+        duration: Math.max(shrinkDuration, 0.01),
+        ease: [...LINE_LOADING_PULSE_EASE],
+        onComplete: finish,
+      });
+    };
+
+    if (mode === "loop") {
+      progress.set(0);
+      controls = animate(progress, 1, {
+        duration: LINE_LOADING_PULSE_CYCLE_S,
+        ease: [...LINE_LOADING_PULSE_EASE],
+        onComplete: finish,
+      });
+      return () => {
+        cancelled = true;
+        controls?.stop();
+      };
+    }
+
+    if (mode === "exit") {
+      const current = progress.get();
+
+      if (current < 0.5) {
+        const growDuration = halfCycleS * ((0.5 - current) / 0.5);
+        controls = animate(progress, 0.5, {
+          duration: Math.max(growDuration, 0.01),
+          ease: [...LINE_LOADING_PULSE_EASE],
+          onComplete: () => {
+            if (!cancelled) {
+              runShrink(0.5);
+            }
+          },
+        });
+      } else {
+        runShrink(current);
+      }
+
+      return () => {
+        cancelled = true;
+        controls?.stop();
+      };
+    }
+
+    if (mode === "enter") {
+      progress.set(0);
+      controls = animate(progress, 0.5, {
+        duration: halfCycleS,
+        ease: [...LINE_LOADING_PULSE_EASE],
+        onComplete: finish,
+      });
+      return () => {
+        cancelled = true;
+        controls?.stop();
+      };
+    }
+  }, [innerWidth, loopEpoch, mode, onComplete, progress]);
+
+  return { clipX, clipWidth };
+}
+
+export function LineLoadingPulseStroke({
+  pathD,
+  mode = "loop",
+  loopEpoch = 0,
+  stroke = chartCssVars.foreground,
+  strokeOpacity = 0.5,
+  strokeWidth = 2.5,
+  onCycleComplete,
+}: LineLoadingPulseStrokeProps) {
+  const { innerWidth, innerHeight } = useChartStable();
+  const reactId = useId();
+  const clipPathId = `line-loading-clip-${reactId}`;
+  const gradientId = `line-loading-gradient-${reactId}`;
+  const fadeStops = fadeGradientStops(resolveFadeSides(true));
+  const clipHeight = innerHeight + CLIP_PADDING * 2;
+  const { clipX, clipWidth } = useGrowExitClip(innerWidth, mode, loopEpoch, onCycleComplete);
+
+  if (innerWidth <= 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <defs>
+        <clipPath id={clipPathId}>
+          <motion.rect
+            height={clipHeight}
+            style={{ width: clipWidth, x: clipX }}
+            y={-CLIP_PADDING}
+          />
+        </clipPath>
+        <linearGradient id={gradientId} {...viewportFadeGradientAttrs(innerWidth)}>
+          {fadeStops.map((stop) => (
+            <stop
+              key={stop.offset}
+              offset={stop.offset}
+              stopColor={stroke}
+              stopOpacity={stop.opacity}
+            />
+          ))}
+        </linearGradient>
+      </defs>
+      <path
+        clipPath={`url(#${clipPathId})`}
+        d={pathD}
+        fill="none"
+        opacity={strokeOpacity}
+        stroke={`url(#${gradientId})`}
+        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+      />
+    </>
+  );
+}
+
+LineLoadingPulseStroke.displayName = "LineLoadingPulseStroke";
+
+export default LineLoadingPulseStroke;

package/src/console/ui-next/src/components/charts/line-loading-timing.ts

@@ -0,0 +1,12 @@
+export const LINE_LOADING_PULSE_CYCLE_S = 2.2;
+
+/** Idle gap before the loading line pulse restarts (milliseconds). */
+export const LINE_LOADING_LOOP_PAUSE_MS = 280;
+
+/** Loading label exit on loading → ready (seconds). */
+export const LOADING_LABEL_EXIT_S = 0.45;
+
+/** Loading label drops this many pixels while exiting. */
+export const LOADING_LABEL_EXIT_Y_PX = 30;
+
+export const LINE_LOADING_PULSE_EASE = [0.85, 0, 0.15, 1] as const;

package/src/console/ui-next/src/components/charts/line-series-terminal-marker.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { motion } from "motion/react";
+import { useMemo } from "react";
+import { useChartStable, useYScale } from "./chart-context";
+import { StaticSeriesPointMarker } from "./series-point-marker";
+
+export interface LineSeriesTerminalMarkerProps {
+  dataKey: string;
+  yAxisId?: string | number;
+  fill?: string;
+  stroke?: string;
+  radius?: number;
+  ringGap?: number;
+  strokeWidth?: number;
+}
+
+function isTerminalMarkerPhaseVisible(phase: string): boolean {
+  return phase === "ready" || phase === "exitingReady";
+}
+
+/** Hollow ring at the last data point — shared anchor for projection lines. */
+export function LineSeriesTerminalMarker({
+  dataKey,
+  yAxisId,
+  fill = "transparent",
+  stroke = "var(--chart-1)",
+  radius = 5,
+  ringGap = 0,
+  strokeWidth = 1.5,
+}: LineSeriesTerminalMarkerProps) {
+  const { data, xScale, xAccessor, chartPhase, revealEpoch, enterTransition } = useChartStable();
+  const yScale = useYScale(yAxisId);
+
+  const point = useMemo(() => {
+    const lastRow = data.at(-1);
+    if (!lastRow) {
+      return null;
+    }
+    const value = lastRow[dataKey];
+    if (typeof value !== "number") {
+      return null;
+    }
+    return {
+      cx: xScale(xAccessor(lastRow)) ?? 0,
+      cy: yScale(value) ?? 0,
+    };
+  }, [data, dataKey, xAccessor, xScale, yScale]);
+
+  const visible = isTerminalMarkerPhaseVisible(chartPhase);
+  const fadeTransition =
+    enterTransition && typeof enterTransition === "object"
+      ? enterTransition
+      : { duration: 0.28, ease: [0.22, 1, 0.36, 1] as const };
+
+  if (!point) {
+    return null;
+  }
+
+  return (
+    <motion.g
+      animate={{
+        opacity: visible ? 1 : 0,
+        scale: visible ? 1 : 0.55,
+      }}
+      initial={{ opacity: 0, scale: 0.55 }}
+      key={revealEpoch ?? 0}
+      style={{
+        transformBox: "fill-box" as const,
+        transformOrigin: `${point.cx}px ${point.cy}px`,
+      }}
+      transition={fadeTransition}
+    >
+      <StaticSeriesPointMarker
+        cx={point.cx}
+        cy={point.cy}
+        fill={fill}
+        radius={radius}
+        ringGap={ringGap}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+      />
+    </motion.g>
+  );
+}
+
+LineSeriesTerminalMarker.displayName = "LineSeriesTerminalMarker";
+
+(LineSeriesTerminalMarker as unknown as Record<string, boolean>).__isPostOverlay = true;
+
+export default LineSeriesTerminalMarker;