Hover detail

HoverDetail.tsxOne hovered index drives a crosshair through every panel and a readout sorted by value, with units and a stated timezone. Arrow keys move it.Copy

import { useState, type KeyboardEvent } from "react";
import { Line, LineChart, ReferenceDot, ReferenceLine, XAxis, YAxis } from "recharts";
import { cn } from "@/lib/utils";

export type Series = { key: string; label: string; color: string };
export type Panel = { title: string; unit: string; series: Series[] };
/** One row per sample; `t` is epoch ms and every series key is a column. */
export type Row = { t: number } & Record<string, number>;

/** Full precision with the unit, never the axis's rounded version. */
const fmt = (v: number, unit: string) => `${v}${unit}`;
const hhmmss = (t: number) => new Date(t).toISOString().slice(11, 19);

/**
 * One crosshair through every panel and one readout for the instant under it.
 * The hovered index is the only state, so all the panels agree on the
 * timestamp by construction, and the readout is a list of exact values sorted
 * by size rather than by name.
 */
export function HoverDetail({ panels, data, defaultIndex = 0, width = 340, height = 64 }: {
  panels: Panel[];
  data: Row[];
  /** Which sample the crosshair starts on. */
  defaultIndex?: number;
  width?: number;
  height?: number;
}) {
  const [i, setI] = useState(defaultIndex);
  const row = data[i];
  const move = (e: { activeTooltipIndex?: number }) => {
    if (typeof e?.activeTooltipIndex === "number") setI(e.activeTooltipIndex);
  };
  // The keyboard equivalent: arrows walk the samples.
  const key = (e: KeyboardEvent) => {
    if (e.key === "ArrowLeft") setI((n) => Math.max(0, n - 1));
    if (e.key === "ArrowRight") setI((n) => Math.min(data.length - 1, n + 1));
  };

  return (
    <div className="grid grid-cols-[1.4fr_1fr] gap-5" tabIndex={0} onKeyDown={key} aria-label="hover detail; arrow keys move the crosshair">
      <div className="flex flex-col gap-2 rounded-lg border bg-card p-4">
        {panels.map((p) => (
          <div key={p.title}>
            <p className="text-[11px] uppercase tracking-wide text-muted-foreground">{p.title}</p>
            <div className="overflow-x-auto">
              <LineChart width={width} height={height} data={data} margin={{ top: 6, right: 4, bottom: 2, left: 4 }} onMouseMove={move}>
                <XAxis interval={0} dataKey="t" type="number" domain={["dataMin", "dataMax"]} hide />
                <YAxis hide domain={[0, "auto"]} />
                {p.series.map((s) => (
                  <Line key={s.key} type="linear" dataKey={s.key} stroke={s.color} strokeWidth={2} dot={false} isAnimationActive={false} />
                ))}
                <ReferenceLine x={row.t} stroke="hsl(var(--foreground))" />
                {p.series.map((s) => (
                  <ReferenceDot key={s.key} x={row.t} y={row[s.key]} r={3} fill={s.color} stroke="none" />
                ))}
              </LineChart>
            </div>
          </div>
        ))}
      </div>

      <div className="self-start rounded-lg border bg-popover p-3" role="status" aria-live="polite">
        <p className="border-b pb-2 text-[11px] tabular-nums text-popover-foreground">{hhmmss(row.t)} UTC</p>
        {panels.map((p, n) => (
          <ul key={p.title} className={cn("text-[11px] tabular-nums", n > 0 && "border-t")}>
            {[...p.series].sort((a, b) => row[b.key] - row[a.key]).map((s) => (
              <li key={s.key} className="flex justify-between py-1">
                <span className="inline-flex items-center gap-1.5 text-popover-foreground">
                  <span className="size-2 rounded-[1px]" style={{ background: s.color }} aria-hidden />
                  {s.label}
                </span>
                <span className="text-popover-foreground">{fmt(row[s.key], p.unit)}</span>
              </li>
            ))}
          </ul>
        ))}
      </div>
    </div>
  );
}

demo.tsxHow it is called: three panels over one set of rows, starting on the sample the drawing points at.Copy

import { HoverDetail, type Panel, type Row } from "./HoverDetail";

/** Forty seconds at five-second resolution. The crosshair starts on 14:07:20. */
const T0 = Date.UTC(2026, 8, 15, 14, 7, 0);
const cols = {
  checkout: [180, 236, 210, 356, 412, 268, 302, 290],
  search: [96, 130, 112, 240, 308, 160, 200, 240],
  cart: [120, 130, 125, 170, 191, 140, 150, 145],
  user: [60, 70, 64, 88, 96, 72, 80, 76],
  rss: [640, 720, 760, 1240, 1280, 920, 840, 880],
  errors: [2, 4, 6, 30, 34, 12, 8, 6],
};
const DATA: Row[] = cols.checkout.map((_, i) => ({
  t: T0 + i * 5_000,
  ...Object.fromEntries(Object.entries(cols).map(([k, v]) => [k, v[i]])),
}));

const PANELS: Panel[] = [
  {
    title: "Latency", unit: "ms",
    series: [
      { key: "checkout", label: "checkout", color: "hsl(var(--chart-1))" },
      { key: "search", label: "search", color: "hsl(var(--chart-2))" },
      { key: "cart", label: "cart", color: "hsl(var(--chart-3))" },
      { key: "user", label: "user", color: "hsl(var(--chart-4))" },
    ],
  },
  { title: "Memory", unit: "MB", series: [{ key: "rss", label: "rss", color: "hsl(var(--chart-2))" }] },
  { title: "Errors", unit: "/s", series: [{ key: "errors", label: "5xx", color: "hsl(var(--status-critical))" }] },
];

export default function Demo() {
  return <HoverDetail panels={PANELS} data={DATA} defaultIndex={4} />;
}