Single-column narrative

One obvious reading order and nothing to configure. Each section states its finding in a sentence above the chart, so a reader who does not read charts still leaves with the answer.

npm i recharts

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

────────────────────────────────────────────────────────────────────────
// NarrativeReport.tsx
────────────────────────────────────────────────────────────────────────

import { useState } from "react";
import { Line, LineChart, YAxis } from "recharts";
import { cn } from "@/lib/utils";

export type Metric = {
  key: string;
  label: string;
  /** The headline figure, already formatted: "42.1k", "38%", "2m 4s". */
  value: string;
  /** One point per day in the window. The chart plots whichever is selected. */
  series: number[];
};
export type Breakdown = { title: string; rows: { label: string; value: number }[] };
export type Detail = { columns: [string, string]; rows: [string, string][] };

type Props = {
  metrics: Metric[];
  breakdowns: Breakdown[];
  detail: Detail;
  /** Which metric the chart opens on. Defaults to the first. */
  defaultMetric?: string;
  onSelect?: (key: string) => void;
};

/**
 * One column in the order the argument runs: headline, shape, decomposition,
 * detail. The metric row is the only control on the page, and selecting a
 * metric is the same gesture as reading it.
 */
export function NarrativeReport({ metrics, breakdowns, detail, defaultMetric, onSelect }: Props) {
  const [selected, setSelected] = useState(defaultMetric ?? metrics[0]?.key);
  const metric = metrics.find((m) => m.key === selected) ?? metrics[0];
  const pick = (key: string) => { setSelected(key); onSelect?.(key); };

  return (
    <div className="mx-auto flex w-full max-w-[380px] flex-col gap-3">
      <div className="grid grid-cols-4 divide-x rounded-lg border bg-card" role="tablist" aria-label="Metric">
        {metrics.map((m) => (
          <button
            key={m.key}
            role="tab"
            aria-selected={m.key === metric.key}
            onClick={() => pick(m.key)}
            className={cn("px-3 py-2.5 text-left", m.key === metric.key && "shadow-[inset_0_-2px_0_hsl(var(--chart-1))]")}
          >
            <span className="block text-[10px] text-muted-foreground">{m.label}</span>
            <span className={cn("mt-0.5 block text-base tabular-nums", m.key === metric.key ? "text-card-foreground" : "text-muted-foreground")}>{m.value}</span>
          </button>
        ))}
      </div>

      <div className="overflow-x-auto rounded-lg border bg-muted p-3">
        <LineChart width={320} height={80} data={metric.series.map((value) => ({ value }))} margin={{ top: 4, right: 0, bottom: 0, left: 0 }}>
          <YAxis hide domain={["dataMin - 5", "dataMax + 5"]} />
          <Line dataKey="value" stroke="hsl(var(--chart-1))" strokeWidth={2} dot={false} isAnimationActive={false} />
        </LineChart>
      </div>

      <div className="grid grid-cols-2 gap-3">
        {breakdowns.map((b) => {
          const max = Math.max(...b.rows.map((r) => r.value), 1);
          return (
            <div key={b.title} className="rounded-lg border bg-muted p-3">
              <p className="text-[10px] uppercase tracking-wide text-muted-foreground">{b.title}</p>
              <ul className="mt-2 flex flex-col gap-1.5">
                {b.rows.map((r) => (
                  <li key={r.label} className="flex items-center gap-2 text-[10px]">
                    <span className="h-2 bg-chart-1" style={{ width: `${(r.value / max) * 60}%` }} aria-hidden="true" />
                    <span className="truncate text-card-foreground">{r.label}</span>
                    <span className="ml-auto tabular-nums text-muted-foreground">{r.value.toLocaleString("en-GB")}</span>
                  </li>
                ))}
              </ul>
            </div>
          );
        })}
      </div>

      <table className="w-full rounded-lg border bg-muted text-[10px]">
        <thead>
          <tr className="border-b text-left uppercase tracking-wide text-muted-foreground">
            <th className="px-3 py-1.5 font-normal">{detail.columns[0]}</th>
            <th className="px-3 py-1.5 text-right font-normal">{detail.columns[1]}</th>
          </tr>
        </thead>
        <tbody>
          {detail.rows.map(([a, b]) => (
            <tr key={a}>
              <td className="px-3 py-1 text-card-foreground">{a}</td>
              <td className="px-3 py-1 text-right tabular-nums text-muted-foreground">{b}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

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

import { NarrativeReport } from "./NarrativeReport";

/**
 * Seven days of a site. Visitors is selected, so the chart shows the week
 * that adds up to 42.1k; picking Bounce or Time redraws it.
 */
export default function Demo() {
  return (
    <NarrativeReport
      metrics={[
        { key: "visitors", label: "Visitors", value: "42.1k", series: [2070, 3450, 2760, 6900, 5870, 10000, 11040] },
        { key: "views", label: "Views", value: "96.4k", series: [4740, 7900, 6320, 15800, 13440, 22900, 25300] },
        { key: "bounce", label: "Bounce", value: "38%", series: [44, 41, 42, 37, 38, 36, 35] },
        { key: "time", label: "Time", value: "2m 4s", series: [110, 118, 115, 128, 124, 131, 134] },
      ]}
      breakdowns={[
        { title: "Sources", rows: [{ label: "Google", value: 18400 }, { label: "Direct", value: 12900 }, { label: "Newsletter", value: 7800 }] },
        { title: "Devices", rows: [{ label: "Mobile", value: 22700 }, { label: "Desktop", value: 15100 }, { label: "Tablet", value: 4300 }] },
      ]}
      detail={{
        columns: ["Page", "Visitors"],
        rows: [["/pricing", "9,340"], ["/blog/launch-week", "7,120"], ["/docs/getting-started", "5,860"]],
      }}
    />
  );
}