Status history

StatusHistory.tsxSamples arrive already thresholded to the closed status set. Merge joins equal runs into regions; every region carries its exact start, end and sample count.Copy

import { cn } from "@/lib/utils";
import { STATUS_META, type Status } from "../semantic-status-color/status";

/**
 * Thirty days in a strip. One row per thing, time left to right, colour for
 * state. The thresholding happened upstream: a sample arrives as one of the
 * closed status set, and this draws the conclusion rather than a value.
 *
 * `merge` joins equal consecutive samples into one region, so a month of
 * nominal is one bar and the outage is a notch. Off, every sample is its
 * own cell, which is what you want when the checks run on a schedule and
 * the gaps between them are real. Either way every cell is the same width;
 * no incident gets a bigger box than another.
 */
export type Row = { key: string; samples: Status[] };

export type Region = { row: string; status: Status; from: Date; to: Date; samples: number };

type Props = {
  rows: Row[];
  /** When the first sample was taken, and how far apart they are. */
  start: Date;
  intervalMs: number;
  merge: boolean;
  onSelect?: (region: Region) => void;
};

const FILL: Record<Status, string> = {
  nominal: "bg-status-nominal",
  warn: "bg-status-warn",
  critical: "bg-status-critical",
  unknown: "bg-status-unknown",
};

const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const day = (d: Date) => `${d.getUTCDate()} ${MONTHS[d.getUTCMonth()]}`;

/** Runs of equal status, or one run per sample when not merging. */
function regions(row: Row, start: Date, intervalMs: number, merge: boolean): Region[] {
  const out: Region[] = [];
  row.samples.forEach((status, i) => {
    const last = out[out.length - 1];
    if (merge && last && last.status === status) {
      last.samples++;
      last.to = new Date(start.getTime() + (i + 1) * intervalMs);
    } else {
      out.push({ row: row.key, status, samples: 1, from: new Date(start.getTime() + i * intervalMs), to: new Date(start.getTime() + (i + 1) * intervalMs) });
    }
  });
  return out;
}

export function StatusHistory({ rows, start, intervalMs, merge, onSelect }: Props) {
  const n = rows[0]?.samples.length ?? 0;
  const end = new Date(start.getTime() + n * intervalMs);

  return (
    <div className="flex flex-col gap-1.5">
      {rows.map((row) => (
        <div key={row.key} className="flex items-center gap-2">
          <span className="w-14 shrink-0 text-right text-[10px] text-muted-foreground">{row.key}</span>
          <div
            role="group"
            aria-label={`${row.key}, ${day(start)} to ${day(end)}`}
            className="grid h-3.5 flex-1 gap-px overflow-hidden rounded-[2px]"
            style={{ gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` }}
          >
            {regions(row, start, intervalMs, merge).map((r) => {
              const label = `${STATUS_META[r.status].label}, ${day(r.from)} to ${day(r.to)} (${r.samples} ${r.samples === 1 ? "sample" : "samples"})`;
              return (
                <button
                  key={r.from.getTime()}
                  type="button"
                  title={label}
                  aria-label={label}
                  onClick={() => onSelect?.(r)}
                  className={cn("block h-full w-full", FILL[r.status])}
                  style={{ gridColumn: `span ${r.samples}` }}
                />
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );
}

demo.tsxHow it is called: eight services, thirty daily checks, merged first, with a switch to show every sample.Copy

import { useState } from "react";
import { Switch } from "@/components/ui/switch";
import { StatusHistory, type Row } from "./StatusHistory";
import type { Status } from "../semantic-status-color/status";

/**
 * Eight services, one daily check each, the thirty days ending 15 September.
 * auth had a six-day incident with two days at critical in the middle;
 * search and billing each degraded for a day. Merged first, because that is
 * how the notch reads from across the room; the switch shows every sample.
 */
const code: Record<string, Status> = { n: "nominal", w: "warn", c: "critical", u: "unknown" };
const row = (key: string, s: string): Row => ({ key, samples: [...s].map((ch) => code[ch]) });

const ROWS: Row[] = [
  row("checkout", "nnnnnnnnnnnnnnnnnnnnnnnnnnnnnn"),
  row("search", "nnnnnnnnwnnnnnnnnnnnnnnnnnnnnn"),
  row("cart", "nnnnnnnnnnnnnnnnnnnnnnnnnnnnnn"),
  row("user", "nnnnnnnnnnnnnnnnnnnnnnnnnnnnnn"),
  row("auth", "nnnnnnnnnnnnnnnwwccwwnnnnnnnnn"),
  row("media", "nnnnnnnnnnnnnnnnnnnnnnnnnnnnnn"),
  row("billing", "nnnnnnnnnnnnnnnnnnnnnnnnwnnnnn"),
  row("jobs", "nnnnnnnnnnnnnnnnnnnnnnnnnnnnnn"),
];

const START = new Date("2026-08-16T00:00:00Z");
const DAY = 24 * 60 * 60 * 1000;

export default function Demo() {
  const [merge, setMerge] = useState(true);

  return (
    <div className="w-[360px] rounded-lg border bg-card p-4">
      <StatusHistory
        rows={ROWS}
        start={START}
        intervalMs={DAY}
        merge={merge}
        onSelect={(r) => { location.hash = `#incidents/${r.row}/${r.from.toISOString().slice(0, 10)}`; }}
      />
      <label className="mt-4 flex items-center gap-2 text-[11px] text-muted-foreground">
        <Switch checked={merge} onCheckedChange={setMerge} className="scale-75" />
        Merge equal consecutive values
      </label>
    </div>
  );
}