Dashboard builder

The person who needs the dashboard has to be able to make it. Live preview beside the query is the mechanism, because the alternative is a save-and-look loop that punishes every experiment.

npx shadcn@latest add card button dropdown-menu textarea toggle-group collapsible input
npm i recharts lucide-react

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

────────────────────────────────────────────────────────────────────────
// PanelEditor.tsx
────────────────────────────────────────────────────────────────────────

import { useState } from "react";
import { Bar, BarChart, Line, LineChart, YAxis } from "recharts";
import { ChevronDown, ChevronRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

/** The picker is a closed set. A new visualisation is a code change, because
 *  each one needs a preview renderer and its own options. */
export type Viz = "timeseries" | "stat" | "bar";
const VIZ: Viz[] = ["timeseries", "stat", "bar"];

/** Options are grouped so the first screen is what most people need. Panel is
 *  open; the rest are one click away for the person choosing a bucketing
 *  strategy. Field names double as keys into the options bag. */
export type Section = "Panel" | "Axis" | "Thresholds" | "Value mappings";
const SECTIONS: Record<Section, string[]> = {
  Panel: ["Title", "Description"],
  Axis: ["Min", "Max", "Unit"],
  Thresholds: ["Warn above", "Critical above"],
  "Value mappings": ["Match", "Show as"],
};

export type Point = { t: string; value: number };

type Props = {
  sources: string[];
  source: string;
  onSourceChange: (source: string) => void;
  query: string;
  onQueryChange: (query: string) => void;
  /** What the query returns right now. The preview is live because the
   *  caller re-runs the query on change and passes the result back in. */
  result: Point[];
  viz: Viz;
  onVizChange: (viz: Viz) => void;
  options: Record<string, string>;
  onOptionChange: (field: string, value: string) => void;
};

const SERIES = "hsl(var(--chart-1))";

function Preview({ viz, result }: { viz: Viz; result: Point[] }) {
  const last = result[result.length - 1]?.value;
  if (viz === "stat") return <p className="mt-2 text-3xl font-semibold tabular-nums text-card-foreground">{last}</p>;
  const Chart = viz === "bar" ? BarChart : LineChart;
  return (
    <div className="mt-2 overflow-x-auto">
      <Chart width={340} height={74} data={result} margin={{ top: 4, right: 0, bottom: 0, left: 0 }}>
        <YAxis hide domain={[0, "dataMax + 8"]} />
        {viz === "bar"
          ? <Bar dataKey="value" fill={SERIES} isAnimationActive={false} />
          : <Line dataKey="value" stroke={SERIES} strokeWidth={2} dot={false} isAnimationActive={false} />}
      </Chart>
    </div>
  );
}

export function PanelEditor({
  sources, source, onSourceChange, query, onQueryChange, result, viz, onVizChange, options, onOptionChange,
}: Props) {
  const [open, setOpen] = useState<Section>("Panel");
  const heading = "text-[11px] uppercase tracking-wide text-muted-foreground";

  return (
    <div className="grid grid-cols-[1.5fr_1fr] gap-2.5">
      <div className="flex flex-col gap-2.5">
        <Card className="p-3">
          <p className="text-[10px] uppercase tracking-wide text-muted-foreground">preview</p>
          <Preview viz={viz} result={result} />
        </Card>
        <Card className="bg-muted p-3">
          <p className={heading}>Query</p>
          <DropdownMenu modal={false}>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" size="sm" className="mt-2 h-6 gap-1 px-2 text-[10px]">{source} <ChevronDown className="size-3" /></Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
              <DropdownMenuRadioGroup value={source} onValueChange={onSourceChange}>
                {sources.map((s) => <DropdownMenuRadioItem key={s} value={s}>{s}</DropdownMenuRadioItem>)}
              </DropdownMenuRadioGroup>
            </DropdownMenuContent>
          </DropdownMenu>
          <Textarea value={query} onChange={(e) => onQueryChange(e.target.value)} rows={2} spellCheck={false}
            className="mt-2 min-h-0 resize-none bg-card font-mono text-[10px]" aria-label="Query" />
        </Card>
      </div>

      <div className="flex flex-col gap-2.5">
        <Card className="bg-muted p-3">
          <p className={heading}>Visualisation</p>
          <ToggleGroup type="single" value={viz} onValueChange={(v) => v && onVizChange(v as Viz)} className="mt-2 grid grid-cols-3 gap-1.5">
            {VIZ.map((v) => (
              <ToggleGroupItem key={v} value={v} className="h-8 border bg-card text-[10px] data-[state=on]:border-2 data-[state=on]:border-chart-1 data-[state=on]:bg-card">{v}</ToggleGroupItem>
            ))}
          </ToggleGroup>
        </Card>
        <Card className="bg-muted p-3">
          <p className={heading}>Options</p>
          <div className="mt-1 divide-y text-xs">
            {(Object.keys(SECTIONS) as Section[]).map((name) => (
              <Collapsible key={name} open={open === name} onOpenChange={(o) => setOpen(o ? name : open)}>
                <CollapsibleTrigger className="flex w-full items-center gap-2 py-1.5 text-left text-card-foreground">
                  {open === name ? <ChevronDown className="size-3 text-muted-foreground" /> : <ChevronRight className="size-3 text-muted-foreground" />}
                  {name}
                </CollapsibleTrigger>
                <CollapsibleContent className="flex flex-col gap-1.5 pb-2 pl-5">
                  {SECTIONS[name].map((field) => (
                    <Input key={field} value={options[field] ?? ""} placeholder={field} aria-label={field}
                      onChange={(e) => onOptionChange(field, e.target.value)} className="h-6 bg-card text-[10px]" />
                  ))}
                </CollapsibleContent>
              </Collapsible>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}

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

import { useState } from "react";
import { PanelEditor, type Viz } from "./PanelEditor";

/**
 * One panel mid-edit: a Prometheus source, a rate query, the time series
 * picked, and the Panel section open. The result is fixed here; a real app
 * re-runs the query when it changes and the preview follows.
 */
const RESULT = [
  { t: "09:00", value: 18 }, { t: "09:10", value: 30 }, { t: "09:20", value: 24 }, { t: "09:30", value: 48 },
  { t: "09:40", value: 40 }, { t: "09:50", value: 60 }, { t: "10:00", value: 56 },
];

export default function Demo() {
  const [source, setSource] = useState("prom-prod");
  const [query, setQuery] = useState('sum(rate(http_requests_total{job="checkout"}[5m]))');
  const [viz, setViz] = useState<Viz>("timeseries");
  const [options, setOptions] = useState<Record<string, string>>({ Title: "Checkout requests", Description: "req/s, 5m rate" });

  return (
    <PanelEditor
      sources={["prom-prod", "prom-staging", "loki-prod"]}
      source={source}
      onSourceChange={setSource}
      query={query}
      onQueryChange={setQuery}
      result={RESULT}
      viz={viz}
      onVizChange={setViz}
      options={options}
      onOptionChange={(field, value) => setOptions({ ...options, [field]: value })}
    />
  );
}