Line Chart

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

"use client";

import { useEffect, useState } from "react";

/**
 * Returns true only on devices that have a true hover (mouse / trackpad).
 * Touch devices fire phantom `:hover` on tap that sticks until tap-elsewhere
 * — gate hover-only effects (scale lifts, magnetic pulls) behind this.
 */
export function useHoverCapable() {
  const [canHover, setCanHover] = useState(false);

  useEffect(() => {
    if (typeof window === "undefined" || !window.matchMedia) return;
    const mq = window.matchMedia("(hover: hover) and (pointer: fine)");
    const update = () => setCanHover(mq.matches);
    update();
    mq.addEventListener?.("change", update);
    return () => mq.removeEventListener?.("change", update);
  }, []);

  return canHover;
}

// Shared motion tokens. Easing curves mirror the CSS custom properties in
// globals.css; springs are the canonical physics used across components.
// Strong custom variants — defaults like `ease-in`/`ease-out` feel weak.

export const EASE_OUT = [0.16, 1, 0.3, 1] as const;
export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;
export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;

/** CSS string form of EASE_OUT for inline style transitions. */
export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)";

/** Press feedback on buttons and other tappable surfaces. */
export const SPRING_PRESS = {
  type: "spring",
  stiffness: 500,
  damping: 30,
  mass: 0.6,
} as const;

/** Content swaps — label/icon slots trading places inside a control. */
export const SPRING_SWAP = {
  type: "spring",
  stiffness: 460,
  damping: 30,
  mass: 0.55,
} as const;

/** Overlay panel entrances — modals and sheets summoned by pointer. */
export const SPRING_PANEL = {
  type: "spring",
  stiffness: 420,
  damping: 40,
  mass: 0.5,
} as const;

/** Shared-layout glides — pills, indicators and panels morphing between positions. */
export const SPRING_LAYOUT = {
  type: "spring",
  stiffness: 360,
  damping: 32,
  mass: 0.6,
} as const;

/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */
export const SPRING_MOUSE = {
  stiffness: 200,
  damping: 15,
  mass: 0.3,
} as const;

/** Dragged handles and fills (sliders) — critically damped `useSpring` config,
 * so the value follows the pointer butterily and never rebounds off an end. */
export const SPRING_GLIDE = {
  stiffness: 700,
  damping: 50,
  mass: 0.5,
} as const;

import type { CSSProperties } from "react";

// The reduced-motion rule travels with the component. app/globals.css calms CSS
// animation globally, but the registry bundles imports only, so an installed
// copy never receives that reset.
//
// `!important` because the sweep is an inline style, which outranks a plain rule
// in a media query. It selects a marker class carried by TEXT_SHIMMER_CLASS_NAME
// so it also reaches consumers that build their own span out of these exports.
export const TEXT_SHIMMER_KEYFRAMES =
  "@keyframes beui-text-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}" +
  "@media (prefers-reduced-motion: reduce){.beui-text-shimmer{animation:none !important}}";

export const TEXT_SHIMMER_CLASS_NAME =
  "beui-text-shimmer bg-[length:200%_100%] bg-clip-text text-transparent bg-[linear-gradient(110deg,var(--muted-foreground)_30%,var(--foreground)_50%,var(--muted-foreground)_70%)]";

export function textShimmerStyle(duration: number): CSSProperties {
  return {
    animation: `beui-text-shimmer ${duration}s linear infinite`,
  };
}

"use client";
// beui.dev/charts/line-chart

import { cn } from "@/lib/utils";
import { LineChartContext, type LineChartProps, useLineChartModel } from "./line-chart/context";
import { LineChartLegend } from "./line-chart/legend";
import { LineChartPlot } from "./line-chart/plot";
import { LineChartTooltip } from "./line-chart/tooltip";
import { XYDataTable } from "./xy/data-table";

/** Compose Plot, Tooltip and Legend, or omit children for the complete chart. */
export function LineChart({
  series,
  categories,
  variant,
  curve,
  domain,
  activeId,
  defaultActiveId,
  onActiveChange,
  hiddenSeries,
  defaultHiddenSeries,
  onHiddenSeriesChange,
  formatValue,
  formatTick,
  label,
  status,
  loadingLabel,
  children,
  className,
  ...props
}: LineChartProps) {
  const model = useLineChartModel({
    series,
    categories,
    variant,
    curve,
    domain,
    activeId,
    defaultActiveId,
    onActiveChange,
    hiddenSeries,
    defaultHiddenSeries,
    onHiddenSeriesChange,
    formatValue,
    formatTick,
    label,
    status,
    loadingLabel,
  });
  return (
    <LineChartContext.Provider value={model}>
      <section
        aria-label={model.label}
        aria-busy={model.loading || undefined}
        {...props}
        data-slot="line-chart"
        className={cn("w-full min-w-0 space-y-3", className)}
      >
        {children === undefined ? (
          <>
            <LineChartPlot />
            <LineChartTooltip />
            {model.rows.length > 1 ? <LineChartLegend /> : null}
          </>
        ) : (
          children
        )}
        {/* Placeholder or stale values are not data yet. */}
        {model.loading ? null : (
          <XYDataTable
            label={model.label}
            rows={model.rows}
            categories={model.categories}
            formatValue={model.formatValue}
          />
        )}
      </section>
    </LineChartContext.Provider>
  );
}

export type { LineChartProps } from "./line-chart/context";
export { useLineChart } from "./line-chart/context";
export type { LineChartLegendProps } from "./line-chart/legend";
export { LineChartLegend } from "./line-chart/legend";
export type { LineChartPlotProps } from "./line-chart/plot";
export { LineChartPlot } from "./line-chart/plot";
export type { LineChartTooltipData, LineChartTooltipProps } from "./line-chart/tooltip";
export { LineChartTooltip } from "./line-chart/tooltip";
export type { XYSeries as LineChartSeries } from "./xy/model";
export type { XYCurve as LineChartCurve } from "./xy/path";

"use client";

import { useReducedMotion } from "motion/react";
import { type ComponentProps, createContext, type ReactNode, useContext, useMemo, useState } from "react";
import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
import { normalizeXY, type XYSeries } from "../xy/model";
import type { XYCurve } from "../xy/path";
import { niceDomain } from "../xy/scale";
import { useControllable, useInspection } from "../xy/use-inspection";

export interface LineChartProps extends Omit<ComponentProps<"section">, "children"> {
  series: readonly XYSeries[];
  /** Unique x-axis labels in display order. Values align with them by index. */
  categories: readonly string[];
  /** `area` fills each line down to zero with a fading gradient. */
  variant?: "line" | "area";
  curve?: XYCurve;
  /** Fixed value-axis bounds. Defaults to rounded bounds around the visible series. */
  domain?: readonly [number, number];
  /** Inspected category, by label. */
  activeId?: string | null;
  defaultActiveId?: string | null;
  onActiveChange?: (id: string | null) => void;
  /** Series ids hidden through the legend. */
  hiddenSeries?: readonly string[];
  defaultHiddenSeries?: readonly string[];
  onHiddenSeriesChange?: (ids: readonly string[]) => void;
  formatValue?: (value: number) => string;
  /** Axis tick labels. Defaults to compact notation (1.2K). */
  formatTick?: (value: number) => string;
  label?: string;
  /**
   * `loading` hides the lines behind a pulsing placeholder until your data
   * arrives; switching to `ready` hands off to the draw-in. Keep one chart
   * mounted across both states.
   */
  status?: "ready" | "loading";
  /** Shown over the placeholder while loading. An empty string hides it. */
  loadingLabel?: string;
  children?: ReactNode;
}

const number = new Intl.NumberFormat("en", { maximumFractionDigits: 2 });
const compact = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
const NONE: readonly string[] = [];

export function useLineChartModel({
  series,
  categories,
  variant = "line",
  curve = "monotone",
  domain: fixedDomain,
  activeId,
  defaultActiveId,
  onActiveChange,
  hiddenSeries,
  defaultHiddenSeries = NONE,
  onHiddenSeriesChange,
  formatValue = (value) => number.format(value),
  formatTick = (value) => compact.format(value),
  label = "Line chart",
  status = "ready",
  loadingLabel = "Loading data",
}: Omit<LineChartProps, "children">) {
  // The plot area hosts the tooltip panel, and its measured size places it.
  const [overlay, setOverlay] = useState<HTMLDivElement | null>(null);
  const [geometry, setGeometry] = useState({ width: 0, height: 0 });
  const data = useMemo(() => normalizeXY(series, categories), [series, categories]);
  const [hidden, setHidden] = useControllable(hiddenSeries, defaultHiddenSeries, onHiddenSeriesChange);
  const visibleRows = data.rows.filter((row) => !hidden.includes(row.id));
  const [hovered, setHovered] = useState<string | null>(null);
  const highlight = visibleRows.some((row) => row.id === hovered) ? hovered : null;
  // Hiding a series rescales the axis to what is left, and every mark springs there.
  const domain = niceDomain(
    visibleRows.flatMap((row) => row.values.filter((value): value is number => value !== null)),
    { includeZero: variant === "area", fixed: fixedDomain },
  );
  const inspection = useInspection({
    ids: data.categories,
    activeId,
    defaultActiveId,
    onActiveChange,
  });
  return {
    ...data,
    ...inspection,
    visibleRows,
    hidden,
    toggle: (id: string) =>
      setHidden(hidden.includes(id) ? hidden.filter((h) => h !== id) : [...hidden, id]),
    highlight,
    setHovered,
    domain,
    variant,
    curve,
    formatValue,
    formatTick,
    label,
    status,
    loading: status === "loading",
    loadingLabel,
    overlay,
    setOverlay,
    geometry,
    setGeometry,
    reduce: useReducedMotion() ?? false,
    canHover: useHoverCapable(),
  };
}

export type LineChartModel = ReturnType<typeof useLineChartModel>;

export const LineChartContext = createContext<LineChartModel | null>(null);

export function useLineChart() {
  const context = useContext(LineChartContext);
  if (!context) throw new Error("Line chart parts must be rendered inside LineChart.");
  return context;
}

"use client";

import { XYLegend } from "../xy/legend";
import { useLineChart } from "./context";

export interface LineChartLegendProps {
  className?: string;
}

/** Toggle a series to hide it; the axis rescales to what is left. */
export function LineChartLegend({ className }: LineChartLegendProps) {
  const { rows, hidden, toggle, setHovered, canHover } = useLineChart();
  return (
    <XYLegend
      rows={rows}
      hidden={hidden}
      onToggle={toggle}
      onHover={setHovered}
      canHover={canHover}
      label="Series"
      className={className}
    />
  );
}

"use client";

/* Lines draw in left to right through a clip the first time the chart scrolls
 * into view, and fade out at both ends of the plot. Every sample is a pair of
 * springs keyed by series and category, so new data, a hidden series or a
 * rescaled axis morph the lines, fills and dots together; a resize snaps.
 *
 * Inspecting glides a crosshair that fades toward its ends, haloed dots, and a
 * pill on the category axis that rolls to the new label while the labels it
 * would cover step aside. Everything right of the crosshair recedes, so the
 * line reads "up to here".
 *
 * While loading, a placeholder line breathes under a travelling highlight.
 * When data arrives it fades away and the real lines draw in.
 *
 * Reduced motion: no draw-in, springs, roll or travelling highlight; values
 * update in place and the placeholder only pulses its opacity. */

import {
  AnimatePresence,
  type MotionValue,
  motion,
  type Transition,
  useInView,
  useTransform,
} from "motion/react";
import { useId, useLayoutEffect, useState } from "react";
import { TextShimmer } from "@/components/motion/text-shimmer";
import { EASE_IN_OUT, EASE_OUT, SPRING_LAYOUT, SPRING_SWAP } from "@/lib/ease";
import { cn } from "@/lib/utils";
import { XYGridLines, XYTickLabels } from "../xy/axis";
import { XYInspector } from "../xy/inspector";
import type { XYRow } from "../xy/model";
import { areaPath, linePath, type XYCurve } from "../xy/path";
import { labelStride } from "../xy/scale";
import { useAnimatedPoints, type XYAnimatedPoint, type XYPointTarget } from "../xy/use-points";
import { useElementWidth } from "../xy/use-width";
import { useLineChart } from "./context";

/** Left gutter for value labels, in px. */
const AXIS = 44;
const PAD = { top: 12, right: 16, bottom: 8 } as const;
const BASELINE = "baseline";
/** Category labels closer than this to the inspected one hide behind its pill, in px. */
const PILL_CLEAR = 40;
/** How much the line right of the crosshair recedes (mask darkness, 0 to 1). */
const RECEDE = 0.6;
const PLACEHOLDER_SAMPLES = 16;
const pointKey = (series: string, category: string) => JSON.stringify([series, category]);

export interface LineChartPlotProps {
  /** Plot height in px, excluding the category labels. */
  height?: number;
  /** Stroke width of each line, in px. */
  strokeWidth?: number;
  showGrid?: boolean;
  /** Fade lines and fills out toward the left and right edges of the plot. */
  fadeEdges?: boolean;
  className?: string;
}

export function LineChartPlot({
  height = 288,
  strokeWidth = 2,
  showGrid = true,
  fadeEdges = true,
  className,
}: LineChartPlotProps) {
  const {
    rows,
    categories,
    visibleRows,
    hidden,
    highlight,
    domain,
    variant,
    curve,
    formatValue,
    formatTick,
    label,
    loading,
    loadingLabel,
    activeIndex,
    setActive,
    open,
    setOpen,
    touching,
    setTouching,
    setOverlay,
    setGeometry,
    tooltipId,
    reduce,
    canHover,
  } = useLineChart();
  const { ref, width } = useElementWidth<HTMLDivElement>();
  const inView = useInView(ref, { once: true, amount: 0.3 });
  const id = useId();
  const ids = {
    clip: `${id}-clip`,
    mask: `${id}-mask`,
    edges: `${id}-edges`,
    crosshair: `${id}-crosshair`,
    pulse: `${id}-pulse`,
    band: `${id}-band`,
  };
  const n = categories.length;
  const plotWidth = Math.max(0, width - AXIS - PAD.right);
  const innerHeight = height - PAD.top - PAD.bottom;
  const x = (i: number) => AXIS + (n === 1 ? plotWidth / 2 : (i / (n - 1)) * plotWidth);
  const y = (value: number) =>
    PAD.top + ((domain.max - value) / (domain.max - domain.min || 1)) * innerHeight;
  const baseline = y(Math.min(domain.max, Math.max(domain.min, 0)));

  useLayoutEffect(() => {
    setGeometry((previous) =>
      previous.width === plotWidth && previous.height === innerHeight
        ? previous
        : { width: plotWidth, height: innerHeight },
    );
  }, [plotWidth, innerHeight, setGeometry]);

  const targets: XYPointTarget[] = [];
  if (width > 0) {
    targets.push({ key: BASELINE, x: 0, y: baseline });
    for (const row of rows)
      row.values.forEach((value, i) => {
        if (value !== null)
          targets.push({ key: pointKey(row.id, categories[i]), x: x(i), y: y(value) });
      });
  }
  const points = useAnimatedPoints(targets, reduce, width);

  const active = activeIndex >= 0 && !loading ? activeIndex : null;
  const inspecting = open && active !== null;
  // Roll the pill's label up when moving right and down when moving left.
  const [lastActive, setLastActive] = useState(active);
  const [direction, setDirection] = useState(1);
  if (active !== lastActive) {
    if (active !== null && lastActive !== null) setDirection(active < lastActive ? -1 : 1);
    setLastActive(active);
  }

  if ((!n || !rows.length) && !loading)
    return (
      <p
        className={cn("flex items-center justify-center text-sm text-muted-foreground", className)}
        style={{ height }}
      >
        No data
      </p>
    );

  const activeValues =
    active === null
      ? []
      : visibleRows.flatMap((row) => {
          const value = row.values[active];
          return value === null ? [] : [{ row, value }];
        });
  const stride = labelStride(n, plotWidth, 64);
  const baselinePoint = points.get(BASELINE);
  // Inspection marks glide between samples for a mouse or keys, but under a
  // finger any glide reads as lag, so they track the touch directly.
  const spring: Transition = reduce || touching ? { duration: 0 } : SPRING_LAYOUT;
  const revealed = (inView || reduce) && !loading;
  const fade = plotWidth > 0 ? Math.min(32, plotWidth * 0.08) / plotWidth : 0;
  const crossX = active === null ? AXIS : x(active);

  return (
    <div className={cn("min-w-0 select-none", className)}>
      <div ref={ref} className="relative w-full" style={{ height }}>
        {width > 0 ? (
          <>
            <svg
              aria-hidden="true"
              width={width}
              height={height}
              className="absolute inset-0 overflow-visible"
            >
              <defs>
                <clipPath id={ids.clip}>
                  <motion.rect
                    x={0}
                    y={-16}
                    width={width}
                    height={height + 32}
                    style={{ originX: 0 }}
                    initial={reduce ? false : { scaleX: 0 }}
                    animate={{ scaleX: revealed || reduce ? 1 : 0 }}
                    // Wait for the placeholder to leave before drawing in, and
                    // collapse only after the lines have faded on the way back.
                    transition={
                      revealed
                        ? { duration: 0.7, ease: EASE_OUT, delay: 0.12 }
                        : { duration: 0, delay: 0.16 }
                    }
                  />
                </clipPath>
                <linearGradient
                  id={ids.edges}
                  gradientUnits="userSpaceOnUse"
                  x1={AXIS}
                  x2={AXIS + plotWidth}
                  y1={0}
                  y2={0}
                >
                  <stop offset={0} stopColor="white" stopOpacity={fadeEdges ? 0 : 1} />
                  <stop offset={fade} stopColor="white" />
                  <stop offset={1 - fade} stopColor="white" />
                  <stop offset={1} stopColor="white" stopOpacity={fadeEdges ? 0 : 1} />
                </linearGradient>
                <mask
                  id={ids.mask}
                  maskUnits="userSpaceOnUse"
                  x={0}
                  y={-16}
                  width={width}
                  height={height + 32}
                >
                  <rect x={0} y={-16} width={width} height={height + 32} fill={`url(#${ids.edges})`} />
                  <motion.rect
                    x={0}
                    y={-16}
                    width={width}
                    height={height + 32}
                    fill="black"
                    initial={{ x: crossX, opacity: 0 }}
                    animate={{ x: crossX, opacity: inspecting ? RECEDE : 0 }}
                    transition={{ x: spring, opacity: { duration: 0.18, ease: EASE_OUT } }}
                  />
                </mask>
                <linearGradient
                  id={ids.crosshair}
                  gradientUnits="userSpaceOnUse"
                  x1={0}
                  x2={0}
                  y1={PAD.top}
                  y2={height - PAD.bottom}
                >
                  <stop offset={0} stopColor="var(--foreground)" stopOpacity={0} />
                  <stop offset={0.25} stopColor="var(--foreground)" stopOpacity={0.35} />
                  <stop offset={0.75} stopColor="var(--foreground)" stopOpacity={0.35} />
                  <stop offset={1} stopColor="var(--foreground)" stopOpacity={0} />
                </linearGradient>
              </defs>
              {showGrid ? (
                <XYGridLines
                  ticks={domain.ticks}
                  position={y}
                  axis="y"
                  from={AXIS}
                  to={AXIS + plotWidth}
                  reduce={reduce}
                />
              ) : null}
              {baselinePoint ? (
                <g mask={`url(#${ids.mask})`}>
                  <motion.g
                    clipPath={`url(#${ids.clip})`}
                    initial={false}
                    animate={{ opacity: loading ? 0 : 1 }}
                    transition={{ duration: 0.15, ease: EASE_OUT }}
                  >
                    {rows.map((row) => (
                      <Series
                        key={row.id}
                        row={row}
                        points={row.values.map((value, i) =>
                          value === null
                            ? null
                            : (points.get(pointKey(row.id, categories[i])) ?? null),
                        )}
                        baseline={baselinePoint.y}
                        curve={curve}
                        area={variant === "area"}
                        // Overlapping fills compound; keep several series from muddying into one slab.
                        fillOpacity={rows.length > 1 ? 0.14 : 0.28}
                        strokeWidth={strokeWidth}
                        hidden={hidden.includes(row.id)}
                        dimmed={highlight !== null && highlight !== row.id}
                      />
                    ))}
                  </motion.g>
                </g>
              ) : null}
              <AnimatePresence>
                {loading ? (
                  <Placeholder
                    key="placeholder"
                    ids={ids}
                    left={AXIS}
                    width={plotWidth}
                    top={PAD.top}
                    height={innerHeight}
                    strokeWidth={strokeWidth}
                    reduce={reduce}
                  />
                ) : null}
              </AnimatePresence>
              {inspecting && active !== null ? (
                <>
                  <motion.line
                    y1={PAD.top}
                    y2={height - PAD.bottom}
                    x1={0}
                    x2={0}
                    stroke={`url(#${ids.crosshair})`}
                    initial={{ x: x(active), opacity: 0 }}
                    animate={{ x: x(active), opacity: 1 }}
                    transition={{ x: spring, opacity: { duration: 0.12 } }}
                  />
                  {activeValues.map(({ row, value }) => (
                    <motion.g
                      key={row.id}
                      initial={{ x: x(active), y: y(value), opacity: 0, scale: 0.5 }}
                      animate={{ x: x(active), y: y(value), opacity: 1, scale: 1 }}
                      transition={{ default: spring, opacity: { duration: 0.12 } }}
                    >
                      <circle r={10} fill={row.color} opacity={0.18} />
                      <circle r={4} fill={row.color} stroke="var(--background)" strokeWidth={2} />
                    </motion.g>
                  ))}
                </>
              ) : null}
            </svg>
            <motion.div
              className="pointer-events-none absolute inset-0"
              initial={false}
              animate={{ opacity: loading ? 0 : 1 }}
              transition={{ duration: 0.15, ease: EASE_OUT }}
            >
              <XYTickLabels
                ticks={domain.ticks}
                position={y}
                axis="y"
                format={formatTick}
                reduce={reduce}
                offset={AXIS}
              />
            </motion.div>
          </>
        ) : null}
        <AnimatePresence>
          {loading ? (
            <motion.output
              key="loading"
              className="pointer-events-none absolute flex items-center justify-center text-xs text-muted-foreground"
              style={{ left: AXIS, right: PAD.right, top: PAD.top, bottom: PAD.bottom }}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{
                opacity: 0,
                y: reduce ? 0 : 8,
                transition: { duration: 0.18, ease: EASE_OUT },
              }}
              transition={{ duration: 0.2, ease: EASE_OUT }}
            >
              {loadingLabel ? (
                <TextShimmer>{loadingLabel}</TextShimmer>
              ) : (
                <span className="sr-only">Loading</span>
              )}
            </motion.output>
          ) : null}
        </AnimatePresence>
        <div
          ref={setOverlay}
          className="absolute rounded-sm has-focus-visible:outline-2 has-focus-visible:outline-offset-4 has-focus-visible:outline-ring"
          style={{ left: AXIS, right: PAD.right, top: PAD.top, bottom: PAD.bottom }}
        >
          {loading ? null : (
            <XYInspector
              count={n}
              activeIndex={activeIndex}
              onActive={(i) => setActive(categories[i])}
              label={`${label}: inspect values`}
              valueText={(i) =>
                [
                  categories[i],
                  ...visibleRows.map((row) => {
                    const value = row.values[i];
                    return `${row.name} ${value === null ? "no data" : formatValue(value)}`;
                  }),
                ].join(". ")
              }
              mode="point"
              open={open}
              setOpen={setOpen}
              onTouchChange={setTouching}
              tooltipId={tooltipId}
              canHover={canHover}
              className="inset-0 size-full"
            />
          )}
        </div>
      </div>
      <motion.div
        aria-hidden="true"
        className="relative mt-2 h-5"
        initial={false}
        animate={{ opacity: loading ? 0 : 1 }}
        transition={{ duration: 0.15, ease: EASE_OUT }}
      >
        {width > 0
          ? categories.map((category, i) =>
              (n - 1 - i) % stride === 0 ? (
                <span
                  key={category}
                  className="absolute top-0.5 -translate-x-1/2 text-[11px] whitespace-nowrap text-muted-foreground transition-opacity duration-150"
                  style={{
                    left: x(i),
                    opacity: inspecting && Math.abs(x(i) - crossX) < PILL_CLEAR ? 0 : 1,
                  }}
                >
                  {category}
                </span>
              ) : null,
            )
          : null}
        <AnimatePresence>
          {inspecting && active !== null ? (
            <motion.div
              key="pill"
              className="pointer-events-none absolute top-0 left-0"
              initial={{ x: x(active), opacity: 0 }}
              animate={{ x: x(active), opacity: 1 }}
              exit={{ opacity: 0, transition: { duration: 0.1, ease: EASE_OUT } }}
              transition={{ x: spring, opacity: { duration: 0.12 } }}
            >
              <span className="block -translate-x-1/2 overflow-hidden rounded-full bg-foreground px-2 py-0.5 text-[11px] leading-4 font-medium whitespace-nowrap text-background">
                <AnimatePresence mode="popLayout" initial={false}>
                  <motion.span
                    key={categories[active]}
                    className="block"
                    initial={{ y: reduce ? 0 : direction * 10, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    exit={{ y: reduce ? 0 : direction * -10, opacity: 0 }}
                    transition={reduce ? { duration: 0.12 } : SPRING_SWAP}
                  >
                    {categories[active]}
                  </motion.span>
                </AnimatePresence>
              </span>
            </motion.div>
          ) : null}
        </AnimatePresence>
      </motion.div>
    </div>
  );
}

function Placeholder({
  ids,
  left,
  width,
  top,
  height,
  strokeWidth,
  reduce,
}: {
  ids: { pulse: string; band: string; mask: string };
  left: number;
  width: number;
  top: number;
  height: number;
  strokeWidth: number;
  reduce: boolean;
}) {
  // A calm, slightly rising wave: reads as "a line goes here", not as data.
  const d = linePath(
    Array.from({ length: PLACEHOLDER_SAMPLES }, (_, i) => {
      const t = i / (PLACEHOLDER_SAMPLES - 1);
      return {
        x: left + t * width,
        y: top + height * (0.62 - t * 0.18 + Math.sin(t * Math.PI * 3) * 0.07),
      };
    }),
    "monotone",
  );
  const band = Math.max(80, width * 0.28);
  return (
    <motion.g
      className="text-muted-foreground"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0, transition: { duration: 0.12, ease: EASE_OUT } }}
      transition={{ duration: 0.2, ease: EASE_OUT }}
    >
      <defs>
        <linearGradient id={ids.band} x1="0" x2="1" y1="0" y2="0">
          <stop offset={0} stopColor="white" stopOpacity={0} />
          <stop offset={0.5} stopColor="white" />
          <stop offset={1} stopColor="white" stopOpacity={0} />
        </linearGradient>
        <mask id={ids.pulse} maskUnits="userSpaceOnUse" x={left - band} y={0} width={width + band * 2} height={top * 2 + height}>
          <motion.rect
            x={0}
            y={0}
            width={band}
            height={top * 2 + height}
            fill={`url(#${ids.band})`}
            initial={{ x: left - band }}
            animate={{ x: left + width }}
            transition={{ duration: 1.6, ease: EASE_IN_OUT, repeat: Infinity, repeatDelay: 0.35 }}
          />
        </mask>
      </defs>
      {/* Shares the plot's edge fade, so the handoff to real lines keeps its silhouette. */}
      <g mask={`url(#${ids.mask})`}>
        <motion.path
          d={d}
          fill="none"
          stroke="currentColor"
          strokeWidth={strokeWidth}
          strokeLinecap="round"
          initial={{ strokeOpacity: 0.22 }}
          animate={reduce ? { strokeOpacity: [0.22, 0.45, 0.22] } : { strokeOpacity: 0.22 }}
          transition={reduce ? { duration: 1.8, ease: EASE_IN_OUT, repeat: Infinity } : undefined}
        />
        {reduce ? null : (
          <path
            d={d}
            fill="none"
            stroke="currentColor"
            strokeOpacity={0.75}
            strokeWidth={strokeWidth}
            strokeLinecap="round"
            mask={`url(#${ids.pulse})`}
          />
        )}
      </g>
    </motion.g>
  );
}

function Series({
  row,
  points,
  baseline,
  curve,
  area,
  fillOpacity,
  strokeWidth,
  hidden,
  dimmed,
}: {
  row: XYRow;
  points: (XYAnimatedPoint | null)[];
  baseline: MotionValue<number>;
  curve: XYCurve;
  area: boolean;
  fillOpacity: number;
  strokeWidth: number;
  hidden: boolean;
  dimmed: boolean;
}) {
  const gradientId = useId();
  const values = [baseline, ...points.flatMap((point) => (point ? [point.x, point.y] : []))];
  const read = (coordinates: number[]) => {
    let cursor = 1;
    return points.map((point) =>
      point ? { x: coordinates[cursor++], y: coordinates[cursor++] } : null,
    );
  };
  // SVG geometry has to reshape with the data; no transform of the whole path can express it.
  const line = useTransform(values, (coordinates: number[]) => linePath(read(coordinates), curve));
  const fill = useTransform(values, (coordinates: number[]) =>
    areaPath(read(coordinates), coordinates[0], curve),
  );
  return (
    <motion.g
      initial={false}
      animate={{ opacity: hidden ? 0 : dimmed ? 0.2 : 1 }}
      transition={{ duration: 0.18, ease: EASE_OUT }}
    >
      {area ? (
        <>
          <defs>
            <linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor={row.color} stopOpacity={fillOpacity} />
              <stop offset="100%" stopColor={row.color} stopOpacity={0} />
            </linearGradient>
          </defs>
          <motion.path d={fill} fill={`url(#${gradientId})`} />
        </>
      ) : null}
      <motion.path
        d={line}
        fill="none"
        stroke={row.color}
        strokeWidth={strokeWidth}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </motion.g>
  );
}

"use client";

import { AnimatePresence, motion } from "motion/react";
import { type CSSProperties, type ReactNode, useLayoutEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { TooltipSurface } from "@/components/motion/tooltip-surface";
import { cn } from "@/lib/utils";
import { XYTooltipContent, type XYTooltipRow } from "../xy/tooltip-content";
import { useLineChart } from "./context";

export interface LineChartTooltipData {
  category: string;
  index: number;
  rows: XYTooltipRow[];
}

export interface LineChartTooltipProps {
  children?: ReactNode | ((data: LineChartTooltipData) => ReactNode);
  className?: string;
  /**
   * `auto` sits right of the point, flips left near the right edge, and on
   * plots too narrow for either moves above or below the point instead.
   */
  side?: "auto" | "left" | "right";
}

const GAP = 16;
/** The panel may extend this far into the axis gutters beside the plot, in px. */
const BLEED = { left: 40, right: 12 } as const;
// Softer than the crosshair's layout spring on purpose: the panel trails a
// beat behind the point it describes instead of moving rigidly with it.
const FOLLOW = { type: "spring", stiffness: 260, damping: 28, mass: 0.7 } as const;

/**
 * A panel inside the plot that springs after the inspected point, beside its
 * highest visible value, so it never covers the dots it describes.
 */
export function LineChartTooltip({ children, className, side = "auto" }: LineChartTooltipProps) {
  const {
    categories,
    visibleRows,
    domain,
    activeIndex,
    open,
    loading,
    overlay,
    geometry,
    tooltipId,
    formatValue,
    reduce,
    touching,
  } = useLineChart();
  const panelRef = useRef<HTMLDivElement>(null);
  // Kept between openings: the panel's size barely changes from one point to the next.
  const [size, setSize] = useState({ width: 224, height: 96 });
  const category = loading ? undefined : categories[activeIndex];
  const visible = open && category !== undefined;
  useLayoutEffect(() => {
    const node = panelRef.current;
    if (!visible || !node) return;
    const update = () =>
      setSize((previous) =>
        previous.width === node.offsetWidth && previous.height === node.offsetHeight
          ? previous
          : { width: node.offsetWidth, height: node.offsetHeight },
      );
    update();
    const observer = new ResizeObserver(update);
    observer.observe(node);
    return () => observer.disconnect();
  }, [visible]);
  if (!overlay) return null;

  const rows: XYTooltipRow[] = visibleRows.map((row) => ({
    id: row.id,
    name: row.name,
    color: row.color,
    value: row.values[activeIndex] ?? null,
  }));
  const values = rows.flatMap((row) => (row.value === null ? [] : [row.value]));
  const top = values.length ? Math.max(...values) : domain.max;
  const n = categories.length;
  const { width: W, height: H } = geometry;
  const px = (n === 1 ? 0.5 : Math.max(activeIndex, 0) / (n - 1)) * W;
  const py = ((domain.max - top) / (domain.max - domain.min || 1)) * H;
  const minX = -BLEED.left;
  const maxX = W + BLEED.right;
  const fitsRight = px + GAP + size.width <= maxX;
  const fitsLeft = px - GAP - size.width >= minX;
  const placement =
    side === "right" || (side === "auto" && fitsRight)
      ? "right"
      : side === "left" || (side === "auto" && fitsLeft)
        ? "left"
        : py - GAP - size.height >= 0
          ? "above"
          : "below";
  const clampX = (value: number) => Math.min(Math.max(value, minX), maxX - size.width);
  const clampY = (value: number) => Math.min(Math.max(value, -8), Math.max(-8, H + 8 - size.height));
  const position =
    placement === "right"
      ? { x: px + GAP, y: clampY(py - size.height / 2) }
      : placement === "left"
        ? { x: px - GAP - size.width, y: clampY(py - size.height / 2) }
        : {
            x: clampX(px - size.width / 2),
            y: placement === "above" ? py - GAP - size.height : py + GAP,
          };
  const origin = {
    right: "left center",
    left: "right center",
    above: "bottom center",
    below: "top center",
  }[placement];

  return createPortal(
    <AnimatePresence>
      {visible ? (
        <motion.div
          key="tooltip"
          ref={panelRef}
          className="pointer-events-none absolute top-0 left-0 z-10 w-max"
          initial={position}
          animate={position}
          // The trailing follow suits a mouse; under a finger it reads as lag.
          transition={reduce || touching ? { duration: 0 } : FOLLOW}
        >
          <TooltipSurface
            id={tooltipId}
            style={{ "--tooltip-origin": origin } as CSSProperties}
            className={cn("max-w-[min(20rem,calc(100vw-2rem))] py-2", className)}
          >
            {typeof children === "function"
              ? children({ category, index: activeIndex, rows })
              : (children ?? (
                  <XYTooltipContent title={category} rows={rows} formatValue={formatValue} />
                ))}
          </TooltipSurface>
        </motion.div>
      ) : null}
    </AnimatePresence>,
    overlay,
  );
}

import type { XYRow } from "./model";

/** Every value stays readable by screen readers without a tab stop per mark. */
export function XYDataTable({
  label,
  rows,
  categories,
  formatValue,
}: {
  label: string;
  rows: readonly XYRow[];
  categories: readonly string[];
  formatValue: (value: number) => string;
}) {
  return (
    <div className="sr-only">
      <table>
        <caption>{label} data</caption>
        <thead>
          <tr>
            <th scope="col">Category</th>
            {rows.map((row) => (
              <th key={row.id} scope="col">
                {row.name}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {categories.map((category, i) => (
            <tr key={category}>
              <th scope="row">{category}</th>
              {rows.map((row) => {
                const value = row.values[i];
                return <td key={row.id}>{value === null ? "No data" : formatValue(value)}</td>;
              })}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export interface XYSeries {
  /** Stable, unique identity. Keep it when updating values so marks morph in place. */
  id: string;
  name: string;
  /** Any CSS color, including theme variables. */
  color: string;
  /** Values aligned with categories. Missing or non-finite values leave a gap. */
  values: readonly (number | null)[];
}

export type XYRow = Omit<XYSeries, "values"> & { values: (number | null)[] };

/** First of repeated series and category ids wins. Invalid values become gaps, never zeros. */
export function normalizeXY(
  series: readonly XYSeries[],
  categories: readonly string[],
  { nonnegative = false }: { nonnegative?: boolean } = {},
) {
  const columns: { id: string; source: number }[] = [];
  const seenColumns = new Set<string>();
  categories.forEach((id, source) => {
    if (seenColumns.has(id)) return;
    seenColumns.add(id);
    columns.push({ id, source });
  });
  const seenRows = new Set<string>();
  const rows: XYRow[] = [];
  for (const { values, ...row } of series) {
    if (seenRows.has(row.id)) continue;
    seenRows.add(row.id);
    rows.push({
      ...row,
      values: columns.map(({ source }) => {
        const value = values[source];
        return typeof value === "number" && Number.isFinite(value) && (!nonnegative || value >= 0)
          ? value
          : null;
      }),
    });
  }
  return { rows, categories: columns.map((column) => column.id) };
}

export type XYCurve = "monotone" | "linear" | "step";
export type XYPathPoint = { x: number; y: number } | null;

const f = (value: number) => Math.round(value * 100) / 100;

/** Contiguous runs. A gap in the data is a gap in the line, never an interpolation. */
function runs(points: readonly XYPathPoint[]) {
  const out: { x: number; y: number }[][] = [];
  let run: { x: number; y: number }[] = [];
  for (const point of points) {
    if (point) run.push(point);
    else if (run.length) {
      out.push(run);
      run = [];
    }
  }
  if (run.length) out.push(run);
  return out;
}

// Monotone cubic interpolation (Fritsch–Carlson): smooth, but it never
// overshoots a local peak or dips below a local trough the data doesn't have.
function tangents(run: { x: number; y: number }[]) {
  const n = run.length;
  const t = new Array<number>(n).fill(0);
  for (let i = 1; i < n - 1; i++) {
    const h0 = run[i].x - run[i - 1].x;
    const h1 = run[i + 1].x - run[i].x;
    const s0 = h0 ? (run[i].y - run[i - 1].y) / h0 : 0;
    const s1 = h1 ? (run[i + 1].y - run[i].y) / h1 : 0;
    const p = h0 + h1 ? (s0 * h1 + s1 * h0) / (h0 + h1) : 0;
    t[i] = (Math.sign(s0) + Math.sign(s1)) * Math.min(Math.abs(s0), Math.abs(s1), 0.5 * Math.abs(p));
  }
  const end = (a: number, b: number, neighbour: number) => {
    const h = run[b].x - run[a].x;
    return h ? (3 * (run[b].y - run[a].y)) / h / 2 - neighbour / 2 : neighbour;
  };
  t[0] = end(0, 1, t[1]);
  t[n - 1] = end(n - 2, n - 1, t[n - 2]);
  return t;
}

function segment(run: { x: number; y: number }[], curve: XYCurve) {
  const [first, ...rest] = run;
  let d = `M${f(first.x)},${f(first.y)}`;
  // A lone sample draws as a dot with a round line cap.
  if (!rest.length) return `${d}h0`;
  if (curve === "linear" || run.length === 2) {
    for (const p of rest) d += `L${f(p.x)},${f(p.y)}`;
    return d;
  }
  if (curve === "step") {
    for (let i = 1; i < run.length; i++) {
      const mid = (run[i - 1].x + run[i].x) / 2;
      d += `H${f(mid)}V${f(run[i].y)}`;
    }
    return `${d}H${f(run[run.length - 1].x)}`;
  }
  const t = tangents(run);
  for (let i = 1; i < run.length; i++) {
    const a = run[i - 1];
    const b = run[i];
    const dx = (b.x - a.x) / 3;
    d += `C${f(a.x + dx)},${f(a.y + dx * t[i - 1])},${f(b.x - dx)},${f(b.y - dx * t[i])},${f(b.x)},${f(b.y)}`;
  }
  return d;
}

export function linePath(points: readonly XYPathPoint[], curve: XYCurve = "monotone") {
  return runs(points)
    .map((run) => segment(run, curve))
    .join("");
}

/** Close each run down to the baseline. Lone samples have no area to fill. */
export function areaPath(
  points: readonly XYPathPoint[],
  baseline: number,
  curve: XYCurve = "monotone",
) {
  return runs(points)
    .filter((run) => run.length > 1)
    .map(
      (run) =>
        `${segment(run, curve)}L${f(run[run.length - 1].x)},${f(baseline)}L${f(run[0].x)},${f(baseline)}Z`,
    )
    .join("");
}