Ranked list

RankedList.tsxTakes the top rows, the total and the cardinality, and computes each share and the other row from them. The window is a required prop.Copy

export type Ranked = { name: string; value: number };

/**
 * Sort descending, cut at N, and account for the cut. The list takes the
 * top rows plus two numbers the query already knows, the total and the
 * cardinality, so it can draw the "other" row every leaderboard omits. Without
 * that row a heavy tail and a flat one look the same.
 */
export function RankedList({ measure, window, top, total, cardinality, noun, onSelect }: {
  /** What the rows are ranked by, in the viewer's units. "Errors". */
  measure: string;
  /** The window the ranking covers. Top five over an hour is not the top
   *  five at any moment in it, so the window is required, not a caption. */
  window: string;
  /** The rows above the cut. Sorted here, ties broken by name so the order
   *  never jitters between refreshes. */
  top: Ranked[];
  /** Sum of the measure across every item, above and below the cut. */
  total: number;
  /** How many items the dimension has. The other row carries the count. */
  cardinality: number;
  /** What an item is called: "endpoints", "tenants", "queries". */
  noun: string;
  onSelect?: (name: string) => void;
}) {
  const rows = [...top].sort((a, b) => b.value - a.value || a.name.localeCompare(b.name));
  const above = rows.reduce((n, r) => n + r.value, 0);
  const other = { value: total - above, count: cardinality - rows.length };
  const pct = (v: number) => `${Math.round((v / total) * 100)}%`;
  // Bars are scaled to the top row, so the lead's size is the first thing read.
  const bar = (v: number) => ({ width: `${(v / rows[0].value) * 70}px` });

  return (
    <div className="w-[340px] rounded-lg border bg-card p-4">
      <div className="flex items-baseline justify-between border-b pb-2 text-[11px] uppercase tracking-wide text-muted-foreground">
        <span>{measure} · {window}</span>
        <span>Share</span>
      </div>
      <ol className="mt-1">
        {rows.map((r, i) => (
          <li key={r.name} className="flex items-center gap-2 py-1.5 text-xs">
            <span className="w-3 tabular-nums text-muted-foreground">{i + 1}</span>
            <button type="button" onClick={() => onSelect?.(r.name)} disabled={!onSelect}
              className="w-24 truncate text-left text-card-foreground enabled:hover:underline" title={`${r.value.toLocaleString("en-GB")} ${measure.toLowerCase()}`}>
              {r.name}
            </button>
            <span className="h-2 rounded-[1px] bg-chart-1" style={bar(r.value)} />
            <span className="ml-auto tabular-nums text-card-foreground">{pct(r.value)}</span>
          </li>
        ))}
      </ol>
      {other.count > 0 && (
        <div className="mt-1 flex items-center gap-2 border-t border-dashed pt-2.5 text-xs text-status-warn">
          <span>other · {other.count.toLocaleString("en-GB")} {noun}</span>
          <span className="h-2 rounded-[1px] bg-status-warn" style={bar(other.value)} />
          <span className="ml-auto tabular-nums">{pct(other.value)}</span>
        </div>
      )}
    </div>
  );
}

demo.tsxHow it is called: five endpoints out of 2,145, ten thousand errors in the hour.Copy

import { RankedList } from "./RankedList";

/**
 * Ten thousand errors in the last hour across 2,145 endpoints. Five of them
 * account for 79%; the other row says what the remaining 2,140 add up to.
 */
export default function Demo() {
  return (
    <RankedList
      measure="Errors"
      window="last 1 hour"
      top={[
        { name: "/api/checkout", value: 4100 },
        { name: "/api/search", value: 1900 },
        { name: "/api/cart", value: 900 },
        { name: "/api/user", value: 600 },
        { name: "/api/feed", value: 400 },
      ]}
      total={10_000}
      cardinality={2145}
      noun="endpoints"
      onSelect={(name) => console.log("open", name)}
    />
  );
}