okengine 0.11.2 → 0.12.0

package/src/console/ui-next/src/components/charts/series-markers.tsx

@@ -0,0 +1,267 @@
+"use client";
+
+import { type ReactNode, useCallback, useMemo } from "react";
+import { clipRevealTransition } from "./animation";
+import { defaultScatterColors, useChartHover, useChartStable, useYScale } from "./chart-context";
+import { useChartLegendHover } from "./chart-legend-hover";
+import {
+  getSeriesMarkerVisualExtent,
+  SeriesPointMarker,
+  type SeriesPointMarkerStyle,
+  StaticSeriesPointMarker,
+} from "./series-point-marker";
+
+export interface SeriesMarkersProps extends SeriesPointMarkerStyle {
+  dataKey: string;
+  /** Marker fill color. Defaults to series stroke or chart palette color. */
+  fill?: string;
+  /** Whether to animate markers with clip reveal. Default: true */
+  animate?: boolean;
+}
+
+interface PointAt {
+  index: number;
+  cx: number;
+  cy: number;
+  revealDelay: number;
+}
+
+interface MarkerStyle {
+  fill: string;
+  stroke: string;
+  strokeWidth: number;
+  ringGap: number;
+  outlineWidth: number;
+  outlineColor?: string;
+  radius: number;
+}
+
+export function SeriesMarkers({
+  dataKey,
+  fill,
+  stroke,
+  strokeWidth = 2,
+  ringGap = 2,
+  outlineWidth = 0,
+  outlineColor,
+  radius = 5,
+  animate = true,
+  fadeOnHover = true,
+  inactiveOpacity = 0.5,
+  inactiveBlur = 2,
+  enterBlur = 2,
+  showActiveHighlight = true,
+}: SeriesMarkersProps) {
+  // Stable slice only. Hover-driven dim + active-highlight live in the inner
+  // <SeriesMarkersDimWrapper> / <SeriesMarkersActiveHighlight> components, so
+  // mouse motion does not re-render the full point grid.
+  const {
+    data,
+    xScale,
+    innerWidth,
+    enterTransition,
+    animationDuration,
+    revealEpoch,
+    isLoaded,
+    xAccessor,
+    lines,
+  } = useChartStable();
+
+  const seriesIndex = useMemo(() => {
+    const index = lines.findIndex((line) => line.dataKey === dataKey);
+    return index >= 0 ? index : 0;
+  }, [lines, dataKey]);
+
+  const seriesConfig = lines[seriesIndex];
+  const yScale = useYScale(seriesConfig?.yAxisId);
+  const seriesColor =
+    defaultScatterColors[seriesIndex % defaultScatterColors.length] ?? defaultScatterColors[0];
+
+  const resolvedFill = fill ?? seriesConfig?.stroke ?? seriesColor;
+  const resolvedStroke = stroke ?? resolvedFill;
+
+  const visualExtent = useMemo(
+    () =>
+      getSeriesMarkerVisualExtent({
+        radius,
+        strokeWidth,
+        ringGap,
+        outlineWidth,
+        showActiveHighlight,
+      }),
+    [radius, strokeWidth, ringGap, outlineWidth, showActiveHighlight],
+  );
+
+  const revealDurationSec =
+    clipRevealTransition(enterTransition).duration ?? animationDuration / 1000;
+  const enterDuration = 0.5;
+  const isRevealing = animate && !isLoaded;
+
+  const getY = useCallback(
+    (d: Record<string, unknown>) => {
+      const value = d[dataKey];
+      return typeof value === "number" ? (yScale(value) ?? 0) : null;
+    },
+    [dataKey, yScale],
+  );
+
+  const points = useMemo<PointAt[]>(
+    () =>
+      data.flatMap((d, index) => {
+        const cy = getY(d);
+        if (cy === null) {
+          return [];
+        }
+        const cx = xScale(xAccessor(d)) ?? 0;
+        const leadingEdge = Math.max(0, cx - visualExtent);
+        const revealDelay =
+          innerWidth > 0 && isRevealing ? (leadingEdge / innerWidth) * revealDurationSec : 0;
+
+        return [{ index, cx, cy, revealDelay }];
+      }),
+    [data, getY, xScale, xAccessor, innerWidth, isRevealing, revealDurationSec, visualExtent],
+  );
+
+  // Memo so the inner <SeriesMarkersActiveHighlight> sees a stable prop and
+  // can be cheaply re-rendered on hover without re-creating the spread.
+  const markerStyle = useMemo<MarkerStyle>(
+    () => ({
+      fill: resolvedFill,
+      stroke: resolvedStroke,
+      strokeWidth,
+      ringGap,
+      outlineWidth,
+      outlineColor,
+      radius,
+    }),
+    [resolvedFill, resolvedStroke, strokeWidth, ringGap, outlineWidth, outlineColor, radius],
+  );
+
+  if (isRevealing) {
+    return (
+      <g>
+        {points.map((point) => (
+          <SeriesPointMarker
+            cx={point.cx}
+            cy={point.cy}
+            dataKey={dataKey}
+            enterBlur={enterBlur}
+            enterDuration={enterDuration}
+            index={point.index}
+            key={`${dataKey}-${point.index}`}
+            revealDelay={point.revealDelay}
+            revealEpoch={revealEpoch ?? 0}
+            {...markerStyle}
+          />
+        ))}
+      </g>
+    );
+  }
+
+  // Stable base layer — its children come from the parent and stay
+  // referentially identical when the dim wrapper re-renders for hover.
+  const baseMarkers = points.map((point) => (
+    <StaticSeriesPointMarker
+      cx={point.cx}
+      cy={point.cy}
+      key={`${dataKey}-${point.index}`}
+      {...markerStyle}
+    />
+  ));
+  const activeScale = showActiveHighlight ? 1.35 : 1;
+
+  return (
+    <g>
+      <SeriesMarkersDimWrapper
+        enabled={fadeOnHover}
+        inactiveBlur={inactiveBlur}
+        inactiveOpacity={inactiveOpacity}
+        seriesIndex={seriesIndex}
+      >
+        {baseMarkers}
+      </SeriesMarkersDimWrapper>
+      <SeriesMarkersActiveHighlight
+        activeScale={activeScale}
+        enabled={fadeOnHover}
+        markerStyle={markerStyle}
+        points={points}
+      />
+    </g>
+  );
+}
+
+SeriesMarkers.displayName = "SeriesMarkers";
+
+interface SeriesMarkersDimWrapperProps {
+  enabled: boolean;
+  inactiveOpacity: number;
+  inactiveBlur: number;
+  seriesIndex: number;
+  children: ReactNode;
+}
+
+/**
+ * Wraps the stable point grid with hover-driven opacity + blur. Subscribes to
+ * hover internally so the grid (passed as `children`) keeps a stable reference
+ * and React skips reconciling it when this wrapper re-renders.
+ */
+function SeriesMarkersDimWrapper({
+  enabled,
+  inactiveOpacity,
+  inactiveBlur,
+  seriesIndex,
+  children,
+}: SeriesMarkersDimWrapperProps) {
+  const { tooltipData } = useChartHover();
+  const { hoveredIndex: legendHoveredIndex } = useChartLegendHover();
+  const isLegendDimmed = legendHoveredIndex !== null && legendHoveredIndex !== seriesIndex;
+  const dimBase = enabled && (tooltipData !== null || isLegendDimmed);
+  return (
+    <g
+      opacity={dimBase ? inactiveOpacity : 1}
+      style={{
+        transition: "opacity 0.15s ease-in-out, filter 0.15s ease-in-out",
+        filter: dimBase && inactiveBlur > 0 ? `blur(${inactiveBlur}px)` : "none",
+      }}
+    >
+      {children}
+    </g>
+  );
+}
+
+interface SeriesMarkersActiveHighlightProps {
+  enabled: boolean;
+  points: PointAt[];
+  markerStyle: MarkerStyle;
+  activeScale: number;
+}
+
+/**
+ * Renders the scaled "active" marker on top of the base grid. Subscribes to
+ * hover internally; the parent doesn't re-render on cursor motion.
+ */
+function SeriesMarkersActiveHighlight({
+  enabled,
+  points,
+  markerStyle,
+  activeScale,
+}: SeriesMarkersActiveHighlightProps) {
+  const { tooltipData } = useChartHover();
+  if (!enabled || tooltipData === null) {
+    return null;
+  }
+  const activePoint = points.find((point) => point.index === tooltipData.index);
+  if (!activePoint) {
+    return null;
+  }
+  return (
+    <StaticSeriesPointMarker
+      cx={activePoint.cx}
+      cy={activePoint.cy}
+      scale={activeScale}
+      {...markerStyle}
+    />
+  );
+}
+
+export default SeriesMarkers;

package/src/console/ui-next/src/components/charts/series-path-utils.ts

@@ -0,0 +1,103 @@
+import { line as d3Line } from "d3-shape";
+
+// biome-ignore lint/suspicious/noExplicitAny: d3 curve factory type
+type CurveFactory = any;
+
+export interface SeriesPathPoint {
+  x: number;
+  y: number;
+  key: string;
+}
+
+export function computeSeriesPathPoints(
+  data: Record<string, unknown>[],
+  xAccessor: (datum: Record<string, unknown>) => Date,
+  xScale: (value: Date) => number | undefined,
+  yScale: (value: number) => number | undefined,
+  dataKey: string,
+): SeriesPathPoint[] {
+  return data.map((datum, index) => {
+    const xValue = xAccessor(datum);
+    const yValue = datum[dataKey];
+    return {
+      x: xScale(xValue) ?? 0,
+      y: typeof yValue === "number" ? (yScale(yValue) ?? 0) : 0,
+      key: String(xValue.getTime?.() ?? index),
+    };
+  });
+}
+
+export function interpolateSeriesPathPoints(
+  from: SeriesPathPoint[],
+  to: SeriesPathPoint[],
+  progress: number,
+): SeriesPathPoint[] {
+  if (progress >= 1) {
+    return to;
+  }
+  if (progress <= 0) {
+    return from.length > 0 ? from : to;
+  }
+
+  const fromByKey = new Map(from.map((point) => [point.key, point]));
+
+  return to.map((target, index) => {
+    const source = fromByKey.get(target.key);
+    if (source) {
+      return {
+        key: target.key,
+        x: source.x + (target.x - source.x) * progress,
+        y: source.y + (target.y - source.y) * progress,
+      };
+    }
+
+    const previousTarget = index > 0 ? to[index - 1] : undefined;
+    const previousSource = previousTarget ? fromByKey.get(previousTarget.key) : undefined;
+    const nextTarget = index < to.length - 1 ? to[index + 1] : undefined;
+    const nextSource = nextTarget ? fromByKey.get(nextTarget.key) : undefined;
+    const anchor = previousSource ?? nextSource ?? from[0] ?? target;
+
+    return {
+      key: target.key,
+      x: anchor.x + (target.x - anchor.x) * progress,
+      y: anchor.y + (target.y - anchor.y) * progress,
+    };
+  });
+}
+
+export function seriesPathFromPoints(points: SeriesPathPoint[], curve: CurveFactory): string {
+  if (points.length === 0) {
+    return "";
+  }
+
+  const generator = d3Line<SeriesPathPoint>()
+    .x((point) => point.x)
+    .y((point) => point.y)
+    .curve(curve);
+
+  return generator(points) ?? "";
+}
+
+export function seriesPathTransitionSignature({
+  renderData,
+  xAccessor,
+  dataKey,
+  innerWidth,
+  xDomainMin,
+  xDomainMax,
+}: {
+  renderData: Record<string, unknown>[];
+  xAccessor: (datum: Record<string, unknown>) => Date;
+  dataKey: string;
+  innerWidth: number;
+  xDomainMin: number;
+  xDomainMax: number;
+}): string {
+  const values = renderData.map((datum) => {
+    const xValue = xAccessor(datum);
+    const yValue = datum[dataKey];
+    return `${xValue.getTime()}:${typeof yValue === "number" ? yValue : ""}`;
+  });
+
+  return `${innerWidth}|${xDomainMin}|${xDomainMax}|${values.join(",")}`;
+}

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

@@ -0,0 +1,205 @@
+"use client";
+
+import type { Variants } from "motion/react";
+import { motion } from "motion/react";
+import { memo } from "react";
+import { DEFAULT_CHART_ENTER_TRANSITION } from "./animation";
+
+export interface SeriesPointMarkerStyle {
+  /** Fill color for the inner circle */
+  fill?: string;
+  /** Outer ring stroke color. Default: same as `fill` */
+  stroke?: string;
+  /** Outer ring stroke width in px. Default: 2. Set to 0 to disable. */
+  strokeWidth?: number;
+  /** Gap between the inner fill and outer ring in px. Default: 2 */
+  ringGap?: number;
+  /** Optional outer outline beyond the ring. Default: 0 */
+  outlineWidth?: number;
+  /** Outer outline color. Default: same as `stroke` */
+  outlineColor?: string;
+  /** Point radius in px. Default: 5 */
+  radius?: number;
+  /** Dim non-active points while hovering. Default: true */
+  fadeOnHover?: boolean;
+  /** Opacity for non-hovered points when `fadeOnHover` is true. Default: 0.5 */
+  inactiveOpacity?: number;
+  /**
+   * Blur in px for non-hovered points when `fadeOnHover` is true.
+   * Applied once on the dimmed layer (not per dot) for performance. Default: 2
+   */
+  inactiveBlur?: number;
+  /** Initial blur in px during enter animation. Default: 2 */
+  enterBlur?: number;
+  /** Enlarge the active point while hovering. Default: true */
+  showActiveHighlight?: boolean;
+}
+
+interface MarkerCirclesProps {
+  fill?: string;
+  stroke?: string;
+  strokeWidth: number;
+  ringGap: number;
+  outlineWidth: number;
+  outlineColor?: string;
+  radius: number;
+}
+
+function MarkerCircles({
+  fill,
+  stroke,
+  strokeWidth,
+  ringGap,
+  outlineWidth,
+  outlineColor,
+  radius,
+}: MarkerCirclesProps) {
+  const resolvedStroke = stroke ?? fill ?? "currentColor";
+  const resolvedOutlineColor = outlineColor ?? resolvedStroke;
+  const ringOuter = strokeWidth > 0 ? radius + ringGap + strokeWidth : radius;
+  const outlineRadius = outlineWidth > 0 ? ringOuter + outlineWidth / 2 : 0;
+
+  return (
+    <>
+      {outlineWidth > 0 ? (
+        <circle
+          cx={0}
+          cy={0}
+          fill="none"
+          r={outlineRadius}
+          stroke={resolvedOutlineColor}
+          strokeWidth={outlineWidth}
+        />
+      ) : null}
+      <circle cx={0} cy={0} fill={fill} r={radius} />
+      {strokeWidth > 0 ? (
+        <circle
+          cx={0}
+          cy={0}
+          fill="none"
+          r={radius + ringGap + strokeWidth / 2}
+          stroke={resolvedStroke}
+          strokeWidth={strokeWidth}
+        />
+      ) : null}
+    </>
+  );
+}
+
+export interface StaticSeriesPointMarkerProps extends SeriesPointMarkerStyle {
+  cx: number;
+  cy: number;
+  scale?: number;
+}
+
+export const StaticSeriesPointMarker = memo(function StaticSeriesPointMarker({
+  cx,
+  cy,
+  scale = 1,
+  fill,
+  stroke,
+  strokeWidth = 2,
+  ringGap = 2,
+  outlineWidth = 0,
+  outlineColor,
+  radius = 5,
+}: StaticSeriesPointMarkerProps) {
+  return (
+    <g transform={`translate(${cx}, ${cy}) scale(${scale})`}>
+      <MarkerCircles
+        fill={fill}
+        outlineColor={outlineColor}
+        outlineWidth={outlineWidth}
+        radius={radius}
+        ringGap={ringGap}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+      />
+    </g>
+  );
+});
+
+export interface SeriesPointMarkerProps extends SeriesPointMarkerStyle {
+  dataKey: string;
+  index: number;
+  cx: number;
+  cy: number;
+  revealDelay: number;
+  revealEpoch: number;
+  enterDuration: number;
+}
+
+/** Motion enter marker — used only while the chart reveal is running. */
+export function SeriesPointMarker({
+  dataKey,
+  index,
+  cx,
+  cy,
+  enterBlur = 2,
+  revealDelay,
+  revealEpoch,
+  enterDuration,
+  fill,
+  stroke,
+  strokeWidth = 2,
+  ringGap = 2,
+  outlineWidth = 0,
+  outlineColor,
+  radius = 5,
+}: SeriesPointMarkerProps) {
+  const variants: Variants = {
+    hidden: {
+      opacity: 0,
+      filter: `blur(${enterBlur}px)`,
+      scale: 1,
+    },
+    visible: {
+      opacity: 1,
+      filter: "blur(0px)",
+      scale: 1,
+      transition: {
+        delay: revealDelay,
+        duration: enterDuration,
+        ease: DEFAULT_CHART_ENTER_TRANSITION.ease,
+      },
+    },
+  };
+
+  return (
+    <g transform={`translate(${cx}, ${cy})`}>
+      <motion.g
+        animate="visible"
+        initial="hidden"
+        key={`${dataKey}-${index}-${revealEpoch}`}
+        variants={variants}
+      >
+        <MarkerCircles
+          fill={fill}
+          outlineColor={outlineColor}
+          outlineWidth={outlineWidth}
+          radius={radius}
+          ringGap={ringGap}
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+        />
+      </motion.g>
+    </g>
+  );
+}
+
+export function getSeriesMarkerVisualExtent(
+  style: Pick<
+    SeriesPointMarkerStyle,
+    "radius" | "strokeWidth" | "ringGap" | "outlineWidth" | "showActiveHighlight"
+  >,
+): number {
+  const radius = style.radius ?? 5;
+  const strokeWidth = style.strokeWidth ?? 2;
+  const ringGap = style.ringGap ?? 2;
+  const outlineWidth = style.outlineWidth ?? 0;
+  const showActiveHighlight = style.showActiveHighlight ?? true;
+  const ring = strokeWidth > 0 ? ringGap + strokeWidth : 0;
+  const outline = outlineWidth > 0 ? outlineWidth : 0;
+  const highlightPad = showActiveHighlight ? radius * 0.35 : 0;
+  return radius + ring + outline + highlightPad + 2;
+}

package/src/console/ui-next/src/components/charts/static-chart-preview-context.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { createContext, type ReactNode, useContext } from "react";
+
+const StaticChartPreviewContext = createContext(false);
+
+/** Disables cartesian reveal clip-path for static docs previews. */
+export function StaticChartPreviewProvider({ children }: { children: ReactNode }) {
+  return (
+    <StaticChartPreviewContext.Provider value={true}>{children}</StaticChartPreviewContext.Provider>
+  );
+}
+
+export function useStaticChartPreview() {
+  return useContext(StaticChartPreviewContext);
+}