Ratio with its denominator

99.9% of ten requests is one failure. The denominator is what makes a rate readable, and it is the first thing dropped when a tile gets tight.


Tokens this needs: --foreground, --muted, --muted-foreground, --border, --chart-1

────────────────────────────────────────────────────────────────────────
// Rate.tsx
────────────────────────────────────────────────────────────────────────

/**
 * A rate without its denominator is not a measurement.
 *
 * 99.9% over ten requests and 99.9% over four million are different claims, and
 * only one of them survives a single bad minute. `of` is required, and below a
 * threshold the component says the number is thin rather than letting a viewer
 * read it as precision.
 */
export function Rate({
  numerator,
  of,
  label,
  unit,
  minReliable = 100,
}: {
  numerator: number;
  of: number;
  label: string;
  /** What is being counted: "requests", "sessions". */
  unit?: string;
  minReliable?: number;
}) {
  const pct = of === 0 ? null : (numerator / of) * 100;
  const thin = of < minReliable;

  return (
    <div>
      <p className="text-xs text-muted-foreground">{label}</p>
      <p className="mt-1 text-2xl font-semibold tabular-nums text-foreground">
        {/* Two decimals at both ends. 99.95% and 0.04% are the rates people
            act on, and one decimal rounds both to a lie. */}
        {pct === null ? "—" : `${pct.toFixed(pct > 99 || pct < 1 ? 2 : 1)}%`}
      </p>
      <p className="text-xs tabular-nums text-muted-foreground">
        {numerator.toLocaleString()} of {of.toLocaleString()}{unit ? ` ${unit}` : ""}
        {thin && <span className="ml-1 text-status-warn">· small sample</span>}
      </p>
    </div>
  );
}

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

import { Rate } from "./Rate";

/** A rate with its denominator in view. Drop `of` below 100 and it says so. */
export default function Demo() {
  return (
    <div className="w-[272px] rounded-lg border bg-card p-5">
      <Rate label="Error rate" numerator={842} of={2_104_338} unit="requests" />
      <p className="mt-4 text-xs text-muted-foreground">Last 5 minutes</p>
    </div>
  );
}