Share and embed

The dashboard leaves the tool and has to keep meaning something. A shared link carrying a relative range means a different thing tomorrow, so the dialog has to make the absolute choice visible rather than defaulting quietly.

npx shadcn@latest add tabs input button switch label
npm i lucide-react

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

────────────────────────────────────────────────────────────────────────
// SharePanel.tsx
────────────────────────────────────────────────────────────────────────

import { useState, type ReactNode } from "react";
import { Copy } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

/** Four needs wearing one button, each described by what it is good for. */
export type Mechanism = "link" | "snapshot" | "embed" | "export";
const MECHANISMS: { id: Mechanism; label: string; blurb: string }[] = [
  { id: "link", label: "Link", blurb: "Live state, cheapest, best when they have access. Hinges on the URL carrying all of it." },
  { id: "snapshot", label: "Snapshot", blurb: "Frozen data, viewable without access. Solves the writeup that links to a healthy system." },
  { id: "embed", label: "Embed", blurb: "Rendered inside a wiki or a portal, updating live, read by people who never open the tool." },
  { id: "export", label: "Export", blurb: "A PDF arriving on a timetable, for people who will never open the tool at all." },
];

export type ShareState = {
  title: string;
  /** The window as it stands right now, absolute. */
  range: { from: Date; to: Date };
  /** The relative form the page is actually on, if any: "last 1h". */
  relative?: string;
  filters: string[];
  /** Set when the viewer has isolated part of the chart. It travels or it lies. */
  isolated?: { shown: number; of: number };
};

const hhmm = (d: Date) => d.toISOString().slice(11, 16);
/** What gets written onto everything that leaves. */
export const stamp = (s: ShareState) => [`${hhmm(s.range.from)}-${hhmm(s.range.to)}`, ...s.filters].join(" · ");

/**
 * One panel behind the share button, with the state it will carry shown
 * before anything is produced. The absolute range is the default and the
 * relative one is a switch, so a link that means something else tomorrow is
 * a choice rather than an accident. Public is a switch with its consequence
 * written beside it.
 */
export function SharePanel({ state, url, preview, onCopy, onSnapshot, onExport }: {
  state: ShareState;
  /** The live URL. It must carry the range, filters and selection already. */
  url: string;
  /** The panel as it will leave, rendered small. */
  preview?: ReactNode;
  onCopy: (text: string) => void;
  onSnapshot: (opts: { isPublic: boolean }) => void;
  onExport: (opts: { every: "day" | "week" }) => void;
}) {
  const [absolute, setAbsolute] = useState(true);
  const [isPublic, setPublic] = useState(false);
  const href = absolute || !state.relative ? url : url.replace(/from=[^&]*&to=[^&]*/, `range=${encodeURIComponent(state.relative)}`);
  const embed = `<iframe src="${href}&embed=1" width="600" height="300" title="${state.title}"></iframe>`;

  const copyRow = (text: string, label: string) => (
    <div className="flex gap-2">
      <Input readOnly value={text} aria-label={label} className="h-8 font-mono text-[11px]" />
      <Button variant="outline" size="sm" className="h-8 shrink-0" onClick={() => onCopy(text)}><Copy className="size-3" aria-hidden /> Copy</Button>
    </div>
  );

  return (
    <div className="flex flex-col gap-4">
      <div className="rounded-lg border bg-card p-3">
        <div className="flex items-baseline justify-between border-b pb-2">
          <p className="text-sm text-card-foreground">{state.title}</p>
          <p className="text-[11px] tabular-nums text-chart-1">{stamp(state)}</p>
        </div>
        {preview}
        {state.isolated && (
          <p className="mt-2 text-[11px] text-chart-1">{state.isolated.shown} of {state.isolated.of} series isolated</p>
        )}
      </div>

      <Tabs defaultValue="link">
        <TabsList className="grid h-auto grid-cols-4 gap-2 bg-transparent p-0">
          {MECHANISMS.map((m) => (
            <TabsTrigger key={m.id} value={m.id} className="h-full flex-col items-start gap-1 whitespace-normal rounded-lg border p-2.5 text-left data-[state=active]:border-chart-1">
              <span className="text-xs">{m.label}</span>
              <span className="text-[10px] font-normal leading-snug text-muted-foreground">{m.blurb}</span>
            </TabsTrigger>
          ))}
        </TabsList>

        <TabsContent value="link" className="mt-3 flex flex-col gap-3">
          {copyRow(href, "link")}
          <div className="flex items-center gap-2">
            <Switch id="abs" checked={absolute} onCheckedChange={setAbsolute} disabled={!state.relative} />
            <Label htmlFor="abs" className="text-xs font-normal text-muted-foreground">
              {absolute ? `Locked to ${hhmm(state.range.from)}-${hhmm(state.range.to)} today` : `Opens on "${state.relative}", so it shows a different hour tomorrow`}
            </Label>
          </div>
        </TabsContent>

        <TabsContent value="snapshot" className="mt-3 flex flex-col gap-3">
          <div className="flex items-center gap-2">
            <Switch id="pub" checked={isPublic} onCheckedChange={setPublic} />
            <Label htmlFor="pub" className="text-xs font-normal text-muted-foreground">
              {isPublic ? "Anyone with the link can read this data, no sign-in. Expires in 30 days." : "Only people who can open the dashboard."}
            </Label>
          </div>
          <Button size="sm" className="h-8 self-start" onClick={() => onSnapshot({ isPublic })}>Freeze as of {hhmm(state.range.to)}</Button>
        </TabsContent>

        <TabsContent value="embed" className="mt-3">{copyRow(embed, "embed code")}</TabsContent>

        <TabsContent value="export" className="mt-3 flex gap-2">
          <Button variant="outline" size="sm" className="h-8" onClick={() => onExport({ every: "day" })}>PDF every morning</Button>
          <Button variant="outline" size="sm" className="h-8" onClick={() => onExport({ every: "week" })}>PDF every Monday</Button>
        </TabsContent>
      </Tabs>
    </div>
  );
}

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

import { SharePanel } from "./SharePanel";

/** The checkout errors panel, an hour of eu-west, one series isolated. */
const STATE = {
  title: "Checkout errors",
  range: { from: new Date("2026-09-15T14:00:00Z"), to: new Date("2026-09-15T15:00:00Z") },
  relative: "last 1h",
  filters: ["eu-west"],
  isolated: { shown: 1, of: 6 },
};
const URL = "https://ops.internal/d/checkout?from=2026-09-15T14:00Z&to=2026-09-15T15:00Z&region=eu-west&series=5xx";

/** Six points of the isolated series, drawn small so the stamp has a picture. */
const Preview = () => (
  <svg viewBox="0 0 300 40" className="mt-2 h-10 w-full" aria-hidden>
    <polyline points="4,32 56,24 108,30 160,10 212,16 274,2" fill="none" className="stroke-chart-1" strokeWidth={2} />
  </svg>
);

export default function Demo() {
  return (
    <div className="w-[560px] rounded-lg border bg-background p-4">
      <SharePanel
        state={STATE}
        url={URL}
        preview={<Preview />}
        onCopy={(text) => navigator.clipboard.writeText(text)}
        onSnapshot={(o) => console.log("snapshot", o)}
        onExport={(o) => console.log("export", o)}
      />
    </div>
  );
}