Sparkline stat

import * as React from "react";
import { cn } from "@/lib/utils";

type SparklineStatProps = Omit<React.ComponentProps<"div">, "children"> & {
  /** What the number measures. */
  label: string;
  /** The number, already formatted. */
  value: React.ReactNode;
  /** The series, oldest first. Needs at least two points. */
  data: number[];
  /** Label for the first point, for example "Oct 6". */
  from: string;
  /** Label for the last point, for example "Nov 5". */
  to: string;
  /** Unit word used in the text alternative, for example "visits". */
  unit?: string;
};

const W = 100;
const H = 40;
const PAD = 3;

/**
 * A stat with a plain SVG sparkline. The series is scaled to its own min and max, so the line shows shape, not size.
 * The last point is the one brand mark.
 */
export function SparklineStat({ label, value, data, from, to, unit = "", className, ...props }: SparklineStatProps) {
  const min = Math.min(...data);
  const max = Math.max(...data);
  const span = max - min || 1;
  const last = data.length - 1;
  const x = (i: number) => (i / last) * W;
  const y = (v: number) => H - PAD - ((v - min) / span) * (H - PAD * 2);
  const points = data.map((v, i) => `${x(i).toFixed(2)},${y(v).toFixed(2)}`);
  const line = `M${points.join("L")}`;
  const area = `${line}L${W},${H}L0,${H}Z`;
  const text = `${label}: from ${data[0]} to ${data[last]}${unit ? ` ${unit}` : ""} between ${from} and ${to}, low ${min}, high ${max}.`;

  return (
    <div
      data-slot="sparkline-stat"
      className={cn("flex w-full flex-col gap-3 rounded-lg border bg-background p-4", className)}
      {...props}
    >
      <div className="flex flex-col gap-1">
        <p className="m-0 text-sm text-muted-foreground">{label}</p>
        <p className="m-0 text-2xl font-medium tracking-tight tabular-nums">{value}</p>
      </div>
      <div className="relative h-10 w-full">
        <svg
          role="img"
          aria-label={text}
          viewBox={`0 0 ${W} ${H}`}
          preserveAspectRatio="none"
          className="absolute inset-0 size-full overflow-visible text-foreground"
        >
          <line
            x1="0"
            x2={W}
            y1={H - 0.5}
            y2={H - 0.5}
            stroke="currentColor"
            strokeOpacity="0.14"
            vectorEffect="non-scaling-stroke"
          />
          <path d={area} fill="currentColor" fillOpacity="0.07" />
          <path
            d={line}
            fill="none"
            stroke="currentColor"
            strokeOpacity="0.8"
            strokeWidth="1.5"
            strokeLinejoin="round"
            strokeLinecap="round"
            vectorEffect="non-scaling-stroke"
          />
        </svg>
        <span
          aria-hidden="true"
          className="absolute size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-brand ring-2 ring-background"
          style={{ left: "100%", top: `${(y(data[last]) / H) * 100}%` }}
        />
      </div>
      <div aria-hidden="true" className="flex justify-between font-mono text-xs text-muted-foreground">
        <span>{from}</span>
        <span>{to}</span>
      </div>
    </div>
  );
}