Cross-filter

CrossFilter.tsxDrag on the chart, the facets re-sum from the selected buckets, a chip says the selection in words and one control clears it.Copy

import { useState } from "react";
import { Line, LineChart, ReferenceArea, XAxis, YAxis } from "recharts";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

/** One interval of the series, with its count broken down by every facet. */
export type Bucket = { t: number; count: number; by: Record<string, Record<string, number>> };
export type Facet = { key: string; label: string };
/** Half-open: from is inside, to is not. */
export type Selection = { from: number; to: number };

const hhmm = (t: number) => {
  const d = new Date(t);
  return `${String(d.getUTCHours()).padStart(2, "0")}:${String(d.getUTCMinutes()).padStart(2, "0")}`;
};

/** Sum a facet over the buckets in play, largest first. */
const tally = (buckets: Bucket[], facet: string) => {
  const sums: Record<string, number> = {};
  for (const b of buckets) for (const [k, n] of Object.entries(b.by[facet] ?? {})) sums[k] = (sums[k] ?? 0) + n;
  return Object.entries(sums).sort((a, b) => b[1] - a[1]);
};

/**
 * Brushing and linking. The selection is controlled, so the page can put it in
 * the URL, and it is always shown in words with one control to clear it: a
 * page that has silently filtered itself will be screenshotted and misread.
 */
export function CrossFilter({ title, buckets, facets, selection, onSelectionChange }: {
  title: string;
  buckets: Bucket[];
  facets: Facet[];
  selection: Selection | null;
  onSelectionChange: (s: Selection | null) => void;
}) {
  const [anchor, setAnchor] = useState<number | null>(null);
  const inPlay = selection ? buckets.filter((b) => b.t >= selection.from && b.t < selection.to) : buckets;
  const total = inPlay.reduce((n, b) => n + b.count, 0);

  // Drag on the chart. The anchor is where the press landed; every move
  // redraws the region from there, and release commits it.
  const drag = (e: { activeLabel?: string | number }, phase: "down" | "move" | "up") => {
    const t = Number(e?.activeLabel);
    if (Number.isNaN(t)) return;
    if (phase === "down") { setAnchor(t); onSelectionChange(null); return; }
    if (anchor === null) return;
    const [from, to] = anchor < t ? [anchor, t] : [t, anchor];
    if (from !== to) onSelectionChange({ from, to: to + 60_000 });
    if (phase === "up") setAnchor(null);
  };

  return (
    <div className="grid grid-cols-[300px_1fr] gap-5">
      <div className="rounded-lg border bg-card p-4">
        <p className="border-b pb-2 text-[11px] uppercase tracking-wide text-muted-foreground">{title}</p>
        <div className="mt-2 cursor-crosshair select-none overflow-x-auto">
          <LineChart width={268} height={150} data={buckets} margin={{ top: 8, right: 4, bottom: 0, left: 4 }}
            onMouseDown={(e) => drag(e, "down")} onMouseMove={(e) => drag(e, "move")} onMouseUp={(e) => drag(e, "up")}>
            <XAxis interval={0} dataKey="t" type="number" domain={["dataMin", "dataMax"]} tickFormatter={hhmm} tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }} stroke="hsl(var(--border))" />
            <YAxis hide domain={[0, "auto"]} />
            {selection && (
              <ReferenceArea x1={selection.from} x2={selection.to} fill="hsl(var(--chart-1))" fillOpacity={0.15} stroke="hsl(var(--chart-1))" strokeWidth={2} />
            )}
            <Line type="linear" dataKey="count" stroke="hsl(var(--chart-1))" strokeWidth={2} dot={false} isAnimationActive={false} />
          </LineChart>
        </div>
      </div>

      <div className="flex flex-col gap-2.5">
        {selection && (
          <div className="flex items-center justify-between rounded-md border border-chart-1 bg-chart-1/10 py-1 pl-3 pr-1" role="status">
            <span className="text-[11px] tabular-nums text-card-foreground">
              {hhmm(selection.from)}–{hhmm(selection.to)} · {total.toLocaleString("en-US")} requests
            </span>
            <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-chart-1" onClick={() => onSelectionChange(null)} aria-label="clear selection">✕</Button>
          </div>
        )}
        {facets.map((f) => {
          const rows = tally(inPlay, f.key);
          const max = rows[0]?.[1] ?? 1;
          // One value taking two-thirds of the selection is the "because". Say so.
          const dominant = selection && rows[0] && rows[0][1] / total > 2 / 3 ? rows[0][0] : null;
          return (
            <div key={f.key} className="rounded-lg border bg-card p-2.5">
              <p className="text-[10px] uppercase tracking-wide text-muted-foreground">{f.label}</p>
              <ul className="mt-1.5 flex flex-col gap-1">
                {rows.map(([k, n]) => (
                  <li key={k} className="grid grid-cols-[64px_1fr_40px] items-center gap-2 text-[10px] tabular-nums">
                    <span className="truncate text-muted-foreground">{k}</span>
                    <span className={cn("h-2 rounded-[1px]", dominant ? (k === dominant ? "bg-chart-1" : "bg-muted") : "bg-chart-1")} style={{ width: `${(100 * n) / max}%` }} />
                    <span className="text-right text-muted-foreground">{n.toLocaleString("en-US")}</span>
                  </li>
                ))}
              </ul>
            </div>
          );
        })}
      </div>
    </div>
  );
}

demo.tsxHow it is called: per-minute buckets with their facet splits, and the selection held in state so it can go in the URL.Copy

import { useState } from "react";
import { CrossFilter, type Bucket, type Selection } from "./CrossFilter";

/**
 * Requests per minute from 13:50, flat until a bump at 14:05 that one build
 * explains. Each minute carries its own split by build, region and endpoint,
 * so the facets can be re-summed for any selection.
 */
const T0 = Date.UTC(2026, 8, 15, 13, 50);
const BUMP_AT = 15;
const BUMP = [100, 108, 116, 124, 130, 136, 140, 142, 148, 142, 140, 136, 130, 124, 116, 108, 100];
const QUIET = [40, 44, 42, 46, 44, 48];

const split = (count: number, shares: Record<string, number>) => {
  const out: Record<string, number> = {};
  let left = count;
  const keys = Object.keys(shares);
  keys.forEach((k, i) => { out[k] = i === keys.length - 1 ? left : Math.round(count * shares[k]); left -= out[k]; });
  return out;
};

const BUCKETS: Bucket[] = Array.from({ length: 50 }, (_, m) => {
  const inBump = m >= BUMP_AT && m < BUMP_AT + BUMP.length;
  const count = inBump ? BUMP[m - BUMP_AT] : QUIET[m % QUIET.length];
  return {
    t: T0 + m * 60_000,
    count,
    by: {
      build: split(count, inBump ? { "4a91c": 0.82, "3f07e": 0.11, "2b1d9": 0.07 } : { "4a91c": 0.34, "3f07e": 0.33, "2b1d9": 0.33 }),
      region: split(count, { "eu-west": 0.38, "us-east": 0.32, "ap-south": 0.3 }),
      endpoint: split(count, { "/checkout": 0.4, "/cart": 0.34, "/search": 0.26 }),
    },
  };
});

const FACETS = [
  { key: "build", label: "By build" },
  { key: "region", label: "By region" },
  { key: "endpoint", label: "By endpoint" },
];

export default function Demo() {
  // Starts with the bump selected. Drag on the chart to move it; ✕ clears it.
  const [selection, setSelection] = useState<Selection | null>({ from: T0 + 15 * 60_000, to: T0 + 32 * 60_000 });
  return <CrossFilter title="Requests by time" buckets={BUCKETS} facets={FACETS} selection={selection} onSelectionChange={setSelection} />;
}