okengine 0.11.2 → 0.12.0

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

@@ -0,0 +1,400 @@
+"use client";
+
+import { motion, useSpring } from "motion/react";
+import { memo, useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import {
+  resolveTooltipBoxMotion,
+  type SpringConfig,
+  useChartConfig,
+} from "../chart-config-context";
+import { chartCssVars, type LineConfig, useChart, useChartStable } from "../chart-context";
+import { weekdayDateFmt } from "../chart-formatters";
+import type { IndicatorFadeEdges } from "../indicator-fade";
+import { DateTicker } from "./date-ticker";
+import { TooltipBox } from "./tooltip-box";
+import { TooltipContent, type TooltipRow } from "./tooltip-content";
+import { TooltipDot } from "./tooltip-dot";
+import { TooltipIndicator } from "./tooltip-indicator";
+
+export interface ChartTooltipProps {
+  /** Whether to show the date pill at bottom. Default: true */
+  showDatePill?: boolean;
+  /** Whether to show the vertical crosshair line. Default: true */
+  showCrosshair?: boolean;
+  /** Whether to show dots on the lines. Default: true */
+  showDots?: boolean;
+  /** Dot style: filled circle or transparent ring. Default: "dot" */
+  dotVariant?: "dot" | "ring";
+  /** Dot / ring radius in pixels. Default: 5 */
+  dotSize?: number;
+  /** Ring corner radius as a fraction of side length (0 = square, 0.5 = circle). */
+  dotRadiusFraction?: number;
+  /** Multiplier applied to the computed dot / ring pixel radius. Default: 1 */
+  dotScale?: number;
+  /** Ring stroke width in pixels. Default: 1.5 for ring variant */
+  dotStrokeWidth?: number;
+  /**
+   * Color for the crosshair/indicator line. When a function, receives the hovered point
+   * (e.g. for candlestick: match candle color from close vs open). Default: --chart-crosshair.
+   */
+  indicatorColor?: string | ((point: Record<string, unknown>) => string);
+  /** Custom content renderer for the tooltip box */
+  content?: (props: { point: Record<string, unknown>; index: number }) => React.ReactNode;
+  /** Custom row renderer - return array of TooltipRow */
+  rows?: (point: Record<string, unknown>) => TooltipRow[];
+  /**
+   * Override tooltip dot fill. When omitted and `rows` is set, dot colors match row colors.
+   * When a function, receives the hovered point and line config.
+   */
+  dotColor?: string | ((point: Record<string, unknown>, line: LineConfig) => string);
+  /** Additional content to show below rows (e.g., markers) */
+  children?: React.ReactNode;
+  /** Custom class name */
+  className?: string;
+  /** Per-chart override for the crosshair / dot / date-pill spring. */
+  springConfig?: SpringConfig;
+  /**
+   * When `true`, the floating panel uses the crosshair spring and stays in sync.
+   * Default `false` — panel follow uses `damping` (`20`).
+   */
+  matchCrosshair?: boolean;
+  /**
+   * Spring damping for the floating tooltip panel when `matchCrosshair` is `false`.
+   * `0` disables spring motion (instant). Default: `20`.
+   */
+  damping?: number;
+  /** SVG stroke dash pattern for the crosshair. Omit for solid. */
+  indicatorDasharray?: string;
+  /** Vertical crosshair fade: `both`, `top`, `bottom`, or `none` (solid). Default: `both`. */
+  indicatorFadeEdges?: IndicatorFadeEdges;
+  /** Crosshair fade zone size (% of height). Default: `10`. */
+  indicatorFadeLength?: number;
+  /** Per-chart override for the floating-panel spring. */
+  boxSpringConfig?: SpringConfig;
+  /** Inline styles for the tooltip panel (background, blur, etc.). */
+  panelStyle?: React.CSSProperties;
+  /**
+   * Tooltip panel background color (CSS variable or color value).
+   * Default: `var(--chart-tooltip-background)`.
+   */
+  backgroundColor?: string;
+}
+
+interface ChartTooltipInnerProps extends ChartTooltipProps {
+  container: HTMLElement;
+}
+
+const ChartTooltipInner = memo(function ChartTooltipInner({
+  showDatePill = true,
+  showCrosshair = true,
+  showDots = true,
+  dotVariant = "dot",
+  dotSize = 5,
+  dotRadiusFraction,
+  dotScale = 1,
+  dotStrokeWidth,
+  indicatorColor: indicatorColorProp,
+  content,
+  rows: rowsRenderer,
+  dotColor: dotColorProp,
+  children,
+  className = "",
+  container,
+  springConfig,
+  matchCrosshair = false,
+  damping,
+  indicatorDasharray,
+  indicatorFadeEdges,
+  indicatorFadeLength,
+  boxSpringConfig,
+  panelStyle,
+  backgroundColor,
+}: ChartTooltipInnerProps) {
+  const {
+    tooltipData,
+    width,
+    height,
+    innerHeight,
+    margin,
+    columnWidth,
+    lines,
+    xAccessor,
+    dateLabels,
+    containerRef,
+    orientation,
+    barXAccessor,
+    bandWidth,
+    squareSnap,
+  } = useChart();
+  const { tooltipSpring } = useChartConfig();
+
+  const isHorizontal = orientation === "horizontal";
+  const discreteInteraction = dateLabels.length > 60;
+
+  const resolvedDotSize = useMemo(() => {
+    if (dotVariant !== "ring" || !bandWidth || lines.length === 0) {
+      return dotSize * dotScale;
+    }
+    const seriesCount = lines.length;
+    const gap = squareSnap?.groupGap ?? (seriesCount > 1 ? 4 : 0);
+    const squareSize = (bandWidth - gap * (seriesCount - 1)) / seriesCount;
+    return (squareSize / 2) * dotScale;
+  }, [bandWidth, dotScale, dotSize, dotVariant, lines.length, squareSnap?.groupGap]);
+  const boxMotion = useMemo(() => {
+    if (boxSpringConfig) {
+      return {
+        animate: !discreteInteraction,
+        springConfig: boxSpringConfig,
+      };
+    }
+    if (matchCrosshair) {
+      return {
+        animate: !discreteInteraction,
+        springConfig: springConfig ?? tooltipSpring,
+      };
+    }
+    return resolveTooltipBoxMotion(damping);
+  }, [boxSpringConfig, damping, discreteInteraction, matchCrosshair, springConfig, tooltipSpring]);
+
+  const visible = tooltipData !== null;
+  const x = tooltipData?.x ?? 0;
+  const xWithMargin = x + margin.left;
+
+  // For horizontal charts, get the y position from the first line's yPosition (center of bar)
+  const firstLineDataKey = lines[0]?.dataKey;
+  const firstLineY = firstLineDataKey ? (tooltipData?.yPositions[firstLineDataKey] ?? 0) : 0;
+  const yWithMargin = firstLineY + margin.top;
+
+  const tooltipRows = useMemo(() => {
+    if (!tooltipData) {
+      return [];
+    }
+
+    if (rowsRenderer) {
+      return rowsRenderer(tooltipData.point);
+    }
+
+    // Default: generate rows from registered lines
+    return lines.map((line) => ({
+      color: line.stroke,
+      label: line.dataKey,
+      value: (tooltipData.point[line.dataKey] as number) ?? 0,
+    }));
+  }, [tooltipData, lines, rowsRenderer]);
+
+  const resolveDotColor = useMemo(() => {
+    return (line: LineConfig, index: number): string => {
+      if (rowsRenderer && tooltipRows[index]?.color) {
+        return tooltipRows[index].color;
+      }
+      if (dotColorProp != null) {
+        if (typeof dotColorProp === "function" && tooltipData) {
+          return dotColorProp(tooltipData.point, line);
+        }
+        if (typeof dotColorProp === "string") {
+          return dotColorProp;
+        }
+      }
+      return line.stroke;
+    };
+  }, [dotColorProp, rowsRenderer, tooltipData, tooltipRows]);
+
+  // Resolve indicator color (static or from hovered point)
+  const indicatorColor = useMemo(() => {
+    if (indicatorColorProp == null) {
+      return chartCssVars.crosshair;
+    }
+    if (typeof indicatorColorProp === "function") {
+      return tooltipData ? indicatorColorProp(tooltipData.point) : chartCssVars.crosshair;
+    }
+    return indicatorColorProp;
+  }, [indicatorColorProp, tooltipData]);
+
+  // Title from date or category
+  const title = useMemo(() => {
+    if (!tooltipData) {
+      return undefined;
+    }
+    // For bar charts (horizontal or vertical), use the category name
+    if (barXAccessor) {
+      return barXAccessor(tooltipData.point);
+    }
+    // For line/area charts, use the date
+    return weekdayDateFmt.format(xAccessor(tooltipData.point));
+  }, [tooltipData, barXAccessor, xAccessor]);
+
+  const tooltipContent = (
+    <>
+      {/* Crosshair indicator - rendered as SVG overlay */}
+      {showCrosshair && (
+        <svg
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0"
+          height="100%"
+          width="100%"
+        >
+          <g transform={`translate(${margin.left},${margin.top})`}>
+            <TooltipIndicator
+              animate={!discreteInteraction}
+              colorEdge={indicatorColor}
+              colorMid={indicatorColor}
+              columnWidth={columnWidth}
+              fadeEdges={indicatorDasharray ? "none" : (indicatorFadeEdges ?? "both")}
+              fadeLength={indicatorFadeLength}
+              height={innerHeight}
+              springConfig={springConfig}
+              strokeDasharray={indicatorDasharray}
+              visible={visible}
+              width="line"
+              x={x}
+            />
+          </g>
+        </svg>
+      )}
+
+      {/* Dots on bars/lines - show for vertical charts only */}
+      {showDots && visible && !isHorizontal && (
+        <svg
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0"
+          height="100%"
+          width="100%"
+        >
+          <g transform={`translate(${margin.left},${margin.top})`}>
+            {lines.map((line, index) => (
+              <TooltipDot
+                color={resolveDotColor(line, index)}
+                cornerRadiusFraction={dotVariant === "ring" ? dotRadiusFraction : undefined}
+                key={line.dataKey}
+                size={resolvedDotSize}
+                springConfig={springConfig}
+                strokeColor={chartCssVars.background}
+                strokeWidth={dotVariant === "ring" ? dotStrokeWidth : undefined}
+                variant={dotVariant}
+                visible={visible}
+                x={tooltipData?.xPositions?.[line.dataKey] ?? x}
+                y={tooltipData?.yPositions[line.dataKey] ?? 0}
+              />
+            ))}
+          </g>
+        </svg>
+      )}
+
+      {/* Tooltip Box */}
+      <TooltipBox
+        animate={boxMotion.animate}
+        backgroundColor={backgroundColor}
+        className={className}
+        containerHeight={height}
+        containerRef={containerRef}
+        containerWidth={width}
+        panelStyle={panelStyle}
+        springConfig={boxMotion.springConfig}
+        top={isHorizontal ? undefined : margin.top}
+        visible={visible}
+        x={xWithMargin}
+        y={isHorizontal ? yWithMargin : margin.top}
+      >
+        {content && tooltipData
+          ? content({
+              point: tooltipData.point,
+              index: tooltipData.index,
+            })
+          : !content && (
+              <TooltipContent rows={tooltipRows} title={title}>
+                {children}
+              </TooltipContent>
+            )}
+      </TooltipBox>
+
+      {/* Date/Category Ticker - only show for vertical charts */}
+      <DatePillTracker
+        currentIndex={tooltipData?.index ?? 0}
+        discreteInteraction={discreteInteraction}
+        enabled={showDatePill && !isHorizontal}
+        labels={dateLabels}
+        springConfig={springConfig}
+        visible={visible}
+        xWithMargin={xWithMargin}
+      />
+    </>
+  );
+
+  return createPortal(tooltipContent, container);
+});
+
+export function ChartTooltip(props: ChartTooltipProps) {
+  const { containerRef } = useChartStable();
+  const [mounted, setMounted] = useState(false);
+
+  // Only render portals on client side after mount
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const container = containerRef.current;
+  if (!(mounted && container)) {
+    return null;
+  }
+
+  return <ChartTooltipInner {...props} container={container} />;
+}
+
+ChartTooltip.displayName = "ChartTooltip";
+
+interface DatePillTrackerProps {
+  enabled: boolean;
+  visible: boolean;
+  labels: string[];
+  currentIndex: number;
+  xWithMargin: number;
+  discreteInteraction: boolean;
+  springConfig?: SpringConfig;
+}
+
+// Inner-only-on-visible so `useSpring` initializes at the real cursor x
+// instead of `margin.left` on first hover.
+function DatePillTracker(props: DatePillTrackerProps) {
+  if (!(props.enabled && props.visible && props.labels.length > 0)) {
+    return null;
+  }
+  return <DatePillTrackerInner {...props} />;
+}
+
+function DatePillTrackerInner({
+  labels,
+  currentIndex,
+  xWithMargin,
+  discreteInteraction,
+  springConfig,
+  visible,
+}: DatePillTrackerProps) {
+  const { tooltipSpring } = useChartConfig();
+  const effectiveSpring = springConfig ?? tooltipSpring;
+  const animatedX = useSpring(xWithMargin, effectiveSpring);
+
+  if (!discreteInteraction) {
+    animatedX.set(xWithMargin);
+  }
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we need to jump the animatedX when the visible prop changes
+  useEffect(() => {
+    animatedX.set(xWithMargin);
+  }, [animatedX, visible]);
+
+  return (
+    <motion.div
+      className="pointer-events-none absolute z-50"
+      style={{
+        left: discreteInteraction ? xWithMargin : animatedX,
+        transform: "translateX(-50%)",
+        bottom: 4,
+      }}
+    >
+      <DateTicker currentIndex={currentIndex} labels={labels} visible={visible} />
+    </motion.div>
+  );
+}
+
+export default ChartTooltip;

package/src/console/ui-next/src/components/charts/tooltip/date-ticker.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { motion, useSpring } from "motion/react";
+import { memo, useMemo, useRef } from "react";
+
+const TICKER_ITEM_HEIGHT = 24;
+/** Full scroll stacks are skipped above this count — single label + instant updates. */
+const COMPACT_TICKER_THRESHOLD = 60;
+
+export interface DateTickerProps {
+  currentIndex: number;
+  labels: string[];
+  visible: boolean;
+}
+
+const DateTickerCompact = memo(function DateTickerCompact({
+  currentIndex,
+  labels,
+}: Omit<DateTickerProps, "visible">) {
+  const label = labels[currentIndex] ?? labels[0] ?? "";
+
+  return (
+    <div className="overflow-hidden rounded-full bg-zinc-900 px-4 py-1 text-white shadow-lg dark:bg-zinc-100 dark:text-zinc-900">
+      <div className="flex h-6 items-center justify-center">
+        <span className="whitespace-nowrap font-medium text-sm">{label}</span>
+      </div>
+    </div>
+  );
+});
+
+const DateTickerInner = memo(function DateTickerInner({
+  currentIndex,
+  labels,
+}: Omit<DateTickerProps, "visible">) {
+  // Parse labels into month and day parts
+  const parsedLabels = useMemo(() => {
+    return labels.map((label, index) => {
+      const parts = label.split(" ");
+      const month = parts[0] || "";
+      const day = parts[1] || "";
+      return { month, day, full: label, key: `${label}::${index}` };
+    });
+  }, [labels]);
+
+  // Month segments: one entry per consecutive run (Jan → Feb → …), keyed by start index
+  const monthSegments = useMemo(() => {
+    const segments: { month: string; key: string; startIndex: number }[] = [];
+
+    parsedLabels.forEach((label, index) => {
+      const prev = segments.at(-1);
+      if (!prev || prev.month !== label.month) {
+        segments.push({
+          month: label.month,
+          key: `${label.month}-${index}`,
+          startIndex: index,
+        });
+      }
+    });
+
+    return segments;
+  }, [parsedLabels]);
+
+  // Index into monthSegments for the current data point
+  const currentMonthIndex = useMemo(() => {
+    if (currentIndex < 0 || currentIndex >= parsedLabels.length) {
+      return 0;
+    }
+    for (let i = monthSegments.length - 1; i >= 0; i--) {
+      const segment = monthSegments[i];
+      if (segment && segment.startIndex <= currentIndex) {
+        return i;
+      }
+    }
+    return 0;
+  }, [currentIndex, parsedLabels.length, monthSegments]);
+
+  // Track previous month index
+  const prevMonthIndexRef = useRef(-1);
+
+  // Animated Y offsets
+  const dayY = useSpring(0, { stiffness: 400, damping: 35 });
+  const monthY = useSpring(0, { stiffness: 400, damping: 35 });
+
+  dayY.set(-currentIndex * TICKER_ITEM_HEIGHT);
+
+  if (currentMonthIndex >= 0) {
+    const isFirstRender = prevMonthIndexRef.current === -1;
+    const monthChanged = prevMonthIndexRef.current !== currentMonthIndex;
+    if (isFirstRender || monthChanged) {
+      monthY.set(-currentMonthIndex * TICKER_ITEM_HEIGHT);
+      prevMonthIndexRef.current = currentMonthIndex;
+    }
+  }
+
+  return (
+    <div className="overflow-hidden rounded-full bg-zinc-900 px-4 py-1 text-white shadow-lg dark:bg-zinc-100 dark:text-zinc-900">
+      <div className="relative h-6 overflow-hidden">
+        <div className="flex items-center justify-center gap-1">
+          {/* Month stack */}
+          <div className="relative h-6 overflow-hidden">
+            <motion.div className="flex flex-col" style={{ y: monthY }}>
+              {monthSegments.map((segment) => (
+                <div className="flex h-6 shrink-0 items-center justify-center" key={segment.key}>
+                  <span className="whitespace-nowrap font-medium text-sm">{segment.month}</span>
+                </div>
+              ))}
+            </motion.div>
+          </div>
+
+          {/* Day stack */}
+          <div className="relative h-6 overflow-hidden">
+            <motion.div className="flex flex-col" style={{ y: dayY }}>
+              {parsedLabels.map((label) => (
+                <div className="flex h-6 shrink-0 items-center justify-center" key={label.key}>
+                  <span className="whitespace-nowrap font-medium text-sm">{label.day}</span>
+                </div>
+              ))}
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export function DateTicker({ currentIndex, labels, visible }: DateTickerProps) {
+  if (!visible || labels.length === 0) {
+    return null;
+  }
+
+  if (labels.length > COMPACT_TICKER_THRESHOLD) {
+    return <DateTickerCompact currentIndex={currentIndex} labels={labels} />;
+  }
+
+  return <DateTickerInner currentIndex={currentIndex} labels={labels} />;
+}
+
+DateTicker.displayName = "DateTicker";
+
+export default DateTicker;

package/src/console/ui-next/src/components/charts/tooltip/index.ts

@@ -0,0 +1,10 @@
+export { ChartTooltip, type ChartTooltipProps } from "./chart-tooltip";
+export { DateTicker, type DateTickerProps } from "./date-ticker";
+export { TooltipBox, type TooltipBoxProps } from "./tooltip-box";
+export { TooltipContent, type TooltipContentProps, type TooltipRow } from "./tooltip-content";
+export { TooltipDot, type TooltipDotProps } from "./tooltip-dot";
+export {
+  type IndicatorWidth,
+  TooltipIndicator,
+  type TooltipIndicatorProps,
+} from "./tooltip-indicator";