Order book

The densest display in this collection and the one with the most trained audience. Depth is drawn as a background fill behind the numbers so the shape and the values occupy the same pixels.


Tokens this needs: --card, --card-foreground, --accent, --muted-foreground, --border, --status-warn, --direction-up, --direction-down
The status, chart, scale, state and direction names are an extension,
not a rename. shadcn has --destructive and five --chart-* and nothing
else in this territory.

────────────────────────────────────────────────────────────────────────
// OrderBook.tsx
────────────────────────────────────────────────────────────────────────

import { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export type Level = { price: number; size: number };

type Props = {
  /** Best first on both sides: asks ascending, bids descending. */
  asks: Level[];
  bids: Level[];
  /** The price increment levels are aggregated to. Shown, because a ladder at
   *  0.01 and one at 0.10 are different books. */
  increment: number;
  feed: "live" | "delayed" | "disconnected";
  /** Side by position, colour second. Markets that invert red and green flip
   *  this and nothing else. */
  upIsBid?: boolean;
};

const qty = (n: number) => n.toLocaleString("en-US");
const median = (xs: number[]) => [...xs].sort((a, b) => a - b)[Math.floor(xs.length / 2)] ?? 0;
const cumulative = (side: Level[]) => side.reduce<number[]>((acc, l) => [...acc, (acc[acc.length - 1] ?? 0) + l.size], []);

export function OrderBook({ asks, bids, increment, feed, upIsBid = true }: Props) {
  const decimals = Math.max(0, -Math.floor(Math.log10(increment)));
  const px = (p: number) => p.toFixed(decimals);
  const spread = asks[0].price - bids[0].price;
  const mid = (asks[0].price + bids[0].price) / 2;

  // A wall is a level holding far more than its neighbours. It gets the strong
  // fill and is clamped, so the rest of the ladder keeps its scale.
  const isWall = (l: Level, side: Level[]) => l.size > 5 * median(side.map((s) => s.size));
  const full = 2 * Math.max(...[...asks, ...bids].filter((l) => !isWall(l, asks) && !isWall(l, bids)).map((l) => l.size));

  // Rows hold position by price. A size that changed since the last render
  // flashes and decays; the ladder never reorders under the eye.
  const prev = useRef(new Map<number, number>());
  const [flash, setFlash] = useState<Set<number>>(new Set());
  useEffect(() => {
    const changed = new Set<number>();
    for (const l of [...asks, ...bids]) if (prev.current.has(l.price) && prev.current.get(l.price) !== l.size) changed.add(l.price);
    prev.current = new Map([...asks, ...bids].map((l) => [l.price, l.size]));
    if (changed.size) { setFlash(changed); const t = setTimeout(() => setFlash(new Set()), 700); return () => clearTimeout(t); }
  }, [asks, bids]);

  const row = (l: Level, side: "ask" | "bid") => {
    const wall = isWall(l, side === "ask" ? asks : bids);
    const up = (side === "bid") === upIsBid;
    return (
      <li key={l.price} className={cn("relative flex justify-between py-1 transition-colors", flash.has(l.price) && "bg-accent")}>
        <span
          className={cn("absolute inset-y-0 right-0", up ? (wall ? "bg-direction-up/40" : "bg-direction-up/10") : (wall ? "bg-direction-down/40" : "bg-direction-down/10"))}
          style={{ width: `${Math.min(100, (l.size / full) * 100)}%` }}
        />
        <span className={cn("relative", up ? "text-direction-up" : "text-direction-down")}>{px(l.price)}</span>
        <span className={cn("relative tabular-nums", wall ? "font-semibold text-card-foreground" : "text-card-foreground")}>{qty(l.size)}</span>
      </li>
    );
  };

  // Depth: cumulative size against price, mirrored about one baseline at
  // the mid. Bids stack upward to the left, asks downward to the right, so the
  // two sides read as one shape and a wall is a step on either arm.
  const W = 240, H = 176, Y0 = H / 2;
  // The wall is clamped here the same way the ladder clamps it, so one
  // level cannot flatten the other arm. The ladder still says how big it is.
  const capped = (side: Level[]) => {
    const cap = 5 * median(side.map((s) => s.size));
    return side.map((l) => ({ ...l, size: Math.min(l.size, cap) }));
  };
  const cumB = cumulative(capped(bids)), cumA = cumulative(capped(asks));
  const maxCum = Math.max(cumB[cumB.length - 1], cumA[cumA.length - 1]);
  const lo = bids[bids.length - 1].price, hi = asks[asks.length - 1].price;
  const X = (p: number) => 4 + ((p - lo) / (hi - lo)) * (W - 8);
  const rise = (c: number) => (c / maxCum) * (Y0 - 10);
  const line = (side: Level[], cum: number[], dir: 1 | -1) =>
    `M${X(mid).toFixed(1)} ${Y0} ` + side.map((l, i) => `L${X(l.price).toFixed(1)} ${(Y0 - dir * rise(cum[i])).toFixed(1)}`).join(" ");
  const area = (side: Level[], cum: number[], dir: 1 | -1) =>
    `${line(side, cum, dir)} L${X(side[side.length - 1].price).toFixed(1)} ${Y0} Z`;
  // Spelled out in full: Tailwind only emits a class it can read verbatim.
  const UP = { fill: "fill-direction-up/20", stroke: "stroke-direction-up" };
  const DOWN = { fill: "fill-direction-down/20", stroke: "stroke-direction-down" };
  const bidTone = upIsBid ? UP : DOWN;
  const askTone = upIsBid ? DOWN : UP;

  return (
    <div className="grid grid-cols-[1.2fr_1fr] gap-5">
      <div className="rounded-lg border bg-card p-4 font-mono">
        <div className="flex items-baseline justify-between border-b pb-2 font-sans text-[11px] uppercase tracking-wide text-muted-foreground">
          <span>Price</span>
          <span className={cn("normal-case", feed !== "live" && "text-status-warn")}>{feed} · {px(increment)} steps</span>
          <span>Size</span>
        </div>
        <ul className="mt-1 text-[11px]">{[...asks].reverse().map((l) => row(l, "ask"))}</ul>
        <p className="my-1.5 border-y py-1.5 text-[11px] text-muted-foreground">spread {px(spread)}</p>
        <ul className="text-[11px]">{bids.map((l) => row(l, "bid"))}</ul>
      </div>

      <div className="rounded-lg border bg-card p-4">
        <p className="border-b pb-2 text-[11px] uppercase tracking-wide text-muted-foreground">Depth</p>
        <div className="overflow-x-auto">
          <svg viewBox={`0 0 ${W} ${H + 14}`} width={W} height={H + 14} className="mt-3 block" role="img" aria-label="Cumulative depth by price">
            <path d={area(bids, cumB, 1)} className={bidTone.fill} stroke="none" />
            <path d={area(asks, cumA, -1)} className={askTone.fill} stroke="none" />
            <path d={line(bids, cumB, 1)} fill="none" className={bidTone.stroke} strokeWidth="2" strokeLinejoin="round" />
            <path d={line(asks, cumA, -1)} fill="none" className={askTone.stroke} strokeWidth="2" strokeLinejoin="round" />
            <line x1={4} y1={Y0} x2={W - 4} y2={Y0} className="stroke-border" />
            <line x1={X(mid)} y1={6} x2={X(mid)} y2={H - 4} className="stroke-border" strokeDasharray="3 3" />
            <text x={X(mid)} y={H + 10} textAnchor="middle" className="fill-muted-foreground text-[9px] tabular-nums">{px(mid)}</text>
          </svg>
        </div>
      </div>
    </div>
  );
}

────────────────────────────────────────────────────────────────────────
// demo.tsx
────────────────────────────────────────────────────────────────────────

import { OrderBook } from "./OrderBook";

/**
 * Four levels a side at 0.02 increments, a 0.02 spread, and a wall at 104.00
 * holding eighteen thousand against neighbours in the hundreds. The wall is
 * the step in the depth curve.
 */
const ASKS = [
  { price: 104.06, size: 670 },
  { price: 104.08, size: 1_580 },
  { price: 104.1, size: 820 },
  { price: 104.12, size: 1_240 },
];
const BIDS = [
  { price: 104.04, size: 720 },
  { price: 104.02, size: 1_010 },
  { price: 104.0, size: 18_400 },
  { price: 103.98, size: 610 },
];

export default function Demo() {
  return <OrderBook asks={ASKS} bids={BIDS} increment={0.02} feed="live" />;
}