Delta with its window

A delta without a window is not a fact. "+12%" against what—yesterday, last week, the same week last year? The comparison basis travels with the number or the number means nothing.


Tokens this needs: --foreground, --muted, --muted-foreground, --border, --chart-1, --direction-up
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.

────────────────────────────────────────────────────────────────────────
// Delta.tsx
────────────────────────────────────────────────────────────────────────

import { directionColor, directionGlyph, type Polarity } from "../red-green-direction/direction";

/**
 * `window` is required, and that is the whole design.
 *
 * A delta is a comparison, so the thing it is compared against is part of the
 * value rather than a caption someone might add later. Making it optional is
 * how dashboards end up covered in percentages nobody can act on, and the
 * compiler is a cheaper reviewer than a person.
 */
export function Delta({
  value,
  window,
  polarity = "higher-is-better",
}: {
  value: number;
  window: string;
  polarity?: Polarity;
}) {
  const pct = `${value > 0 ? "+" : ""}${value.toFixed(1)}%`;
  return (
    <p className="text-xs font-medium tabular-nums" style={{ color: directionColor(value, polarity) }}>
      <span aria-hidden="true">{directionGlyph(value)} </span>
      {pct}
      <span className="ml-1 font-normal text-muted-foreground">{window}</span>
    </p>
  );
}

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

import { Delta } from "./Delta";

/** A delta beside the number it qualifies, naming what it is measured against. */
export default function Demo() {
  return (
    <div className="w-[272px] rounded-lg border bg-card p-5">
      <p className="text-xs text-muted-foreground">Orders today</p>
      <p className="mt-2 text-4xl font-bold tabular-nums tracking-tight text-foreground">4,182</p>
      <div className="mt-3">
        <Delta value={12.4} window="vs. same day last week" />
      </div>
    </div>
  );
}