Dashboard Prompt

Copy this prompt and paste it into Claude or ChatGPT along with a topic (e.g. “AI compute costs”, “autonomous vehicles”) to build a new dashboard in the same style as /dashboards/macro.
Prompt
You are building a trend dashboard for blakecutler.com. The site uses Next.js (App Router), TypeScript, Recharts (ComposedChart, AreaChart, Area, Line, XAxis, YAxis, ReferenceLine, ResponsiveContainer, Tooltip), and Tailwind CSS. Follow these instructions exactly.

Reference implementation: /examples/timeseries (app/examples/timeseries/TimeSeriesCard.tsx)

---

GOAL
Build a new dashboard at /dashboards/{topic}. Each card shows THREE charts:
1. Level chart (plain monochrome area)
2. YoY chart (green/red split at zero, with a linear trend forecast line)
3. Deviation from trend chart (residual line, colored green above +2σ and red below −2σ)

Plus: a summary header with current value, YoY growth, trend acceleration, and deviation stats.

---

DATA SHAPE

  interface Observation { date: string; value: number; }  // "YYYY-MM-DD" or "YYYY"
  interface SplitObs { date: string; value: number; above: number | null; below: number | null; trend?: number | null; }
  interface ResidualPoint { date: string; residual: number; }

  interface GridSeries {
    id: string;
    name: string;
    explanation: string;
    unit: string;           // e.g. "%", "USD", "Index", "USD/bbl"
    logScale: boolean;
    yoyUnit: string;        // "%" | "bps" | "pp"
    level: Observation[];
    yoy: Observation[];
  }

  interface GridColumn { label: string; series: GridSeries[]; }

---

CARD LAYOUT

Each card contains, in order:
1. Header row: series name + category label on the left, change badge (▲/▼ + pctChange) on the right
2. Explanation text (text-[11px] text-neutral-400)
3. Current value (text-xl font-medium tabular-nums)
4. Summary line (text-[11px]):
   - YoY value in green/red: "+50.19% YoY"
   - Trend description in grey: ", accelerating by "
   - Slope value in indigo (#6366f1): "+309bps per month"
   - Period in grey: " over the last 6 months."
   - Deviation in grey: " The most recent value is 4.23% above trend, a 1.2σ deviation."
   - σ value turns red (#dc2626) if >= 2σ
5. "LEVEL" label, then Level chart
6. Divider, "YOY %" label, then YoY chart with trend line
7. Divider, "DEVIATION FROM TREND" label, then residuals line chart

Section labels: text-[9px] text-neutral-500 dark:text-neutral-400 uppercase tracking-widest
Card shell: border border-neutral-100 dark:border-neutral-800 rounded-lg pt-4 px-4 pb-1

---

CHARTS — SHARED BEHAVIOR

Each chart uses its own data directly — do not align datasets onto a shared date axis, as this introduces null gaps with sparse or annual data.

Use ComposedChart for YoY and deviation charts, AreaChart for level. All charts: height={96} (deviation: 120), animations disabled, <XAxis dataKey="date" hide /> on top two charts. Bottom chart shows visible x-axis with tick labels.

Margins: {{ top: 10, right: 42, left: 42, bottom: 0 }} for top two charts. This gives room for start/end value labels.

Use negative marginTop (-12px) on chart wrappers so chart areas overlap with section labels above.

Safari fix: set overflow="visible" on SVG elements via ref callback:
  ref={(el) => { if (el) el.querySelectorAll("svg").forEach((s) => s.setAttribute("overflow", "visible")); }}

For plain chart stroke/fill, use currentColor with a wrapper div:
  <div style={{ color: "var(--chart-line)" }}>
This avoids CSS variable issues in SVG attributes.

---

LEVEL CHART (plain)

- Single <Area> with stroke="currentColor", strokeWidth={1.5}
- Fill: linear gradient from currentColor opacity 0.06 → 0
- Endpoint annotations: start value (left of line, textAnchor="end") and end value (right of line, textAnchor="start")
- Max annotation: green dot (#16a34a) with value and date label ("Jan 19" format)
- Dates with no data use value: null (so the line doesn't draw to zero)

---

YOY CHART (split + trend line)

- splitAtRef() splits data at ref=0 into above/below with interpolated crossing points
- Two <Area> components with baseValue={0}. Above: green. Below: red.
- Dashed reference line at y=0

TREND LINE:
- Linear regression over the most recent data. Period depends on data frequency:
  - Daily data: 182 days (6 months)
  - Monthly data: 12 entries (1 year)
  - Quarterly data: 12 entries (3 years)
  - Annual data: 5 entries (5 years)
- Rendered as <Line dataKey="trend" stroke="#6366f1" strokeWidth={1.5} strokeDasharray="4 3" connectNulls />
- buildTrend() returns: { fn, slopePerMonth, startDate }

Endpoint annotations: start/end values with "%" suffix for YoY charts.
Max annotation: green dot above. Min annotation: red dot BELOW the dot (valY = cy + 12, dateY = cy + 22).
Date format for annotations: "Jan 19" (month + day), not "Jan '24".

TOOLTIP on YoY chart shows three lines:
  - Actual: "{value}% YoY"
  - Trend: "{value}% 6 month trend" in indigo
  - Delta: "+{diff}% delta" (only when both actual and trend exist)

---

DEVIATION FROM TREND CHART

Compute residuals: actual − trend for each date where both exist.
Split into three zone-based line series: normal, high (above +2σ), low (below −2σ).
At zone boundaries, include the point's value in both adjacent zones so lines connect without gaps.

Three <Line> components, all type="linear", strokeWidth={1.5}, connectNulls={false}:
- normal: stroke="#d4d4d4" (light grey, within ±2σ)
- high: stroke="#16a34a" (green, above +2σ)
- low: stroke="#dc2626" (red, below −2σ)

Label the last data point with its deviation in standard deviations (e.g. "+1.2σ" or "−2.2σ").
Color the label to match its zone: green if above +2σ, red if below −2σ, otherwise var(--chart-annot-text).
Use the same endpoint label styling as the other charts (fontSize 9, fontWeight 500, textAnchor="start", offset x+6 y+3).

Reference lines:
- Zero line: dashed grey, label "0" on right
- ±2σ lines: dashed grey (#a3a3a3), labels "+2σ" and "−2σ" on right

Height: 120px. Margins: {{ top: 10, right: 42, left: 42, bottom: 4 }}.
Visible x-axis: tick fontSize 9, fill #a3a3a3, tickFormatter using "Jan '24" format, axisLine={false}, tickLine={false}, interval={Math.max(1, Math.floor(data.length / 6))}.
Container: color: var(--chart-line), marginTop: -12px, marginBottom: -8px.

---

FORMATTING

  function fmtValue(v, unit): formats numbers with appropriate precision and prefixes ($, k, M, B, T)
  function fmtAnnotDate(d): "Jan '24" format for axis ticks
  function fmtAnnotDateDay(d): "Jan 19" format for dot annotations

YoY units: "%" for price/index series, "bps" for rate series (level unit is "%"), "pp" for shares/ratios.

---

PAGE & GRID LAYOUT

Time range selector: pill buttons, default "2Y".
  Active: "bg-neutral-900 text-white dark:bg-neutral-100 dark:text-neutral-900"
  Inactive: "text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-100"

Grid: grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3
Column header: text-[10px] font-medium uppercase tracking-widest text-neutral-400 dark:text-neutral-500 border-b border-neutral-100 dark:border-neutral-800

Page component = Server Component. Dashboard component = "use client".

---

DATA FETCHING

Use FRED API, Yahoo Finance, or store as local JSON in lib/data/{topic}-*.json.

YoY computation lookback:
- Daily: 364 days with ±5 day tolerance
- Monthly: 12 entries
- Quarterly: 4 entries

---

CHECKLIST

1. Define types and data fetching in lib/{topic}.ts
2. Store historical data as lib/data/{topic}-*.json or fetch from FRED/Yahoo
3. Build dashboard component with all three charts per card (Level, YoY + trend, Deviation)
4. Compute trend via linear regression over appropriate window for data frequency
5. Include max/min dot annotations, endpoint value labels, and trend projection
6. Summary text: YoY %, trend acceleration in bps/month, σ deviation from trend
7. Each chart uses its own data directly (no shared date axis alignment)
8. Use bps for YoY when level unit is "%", otherwise use "%" or "pp"
9. Create page component at app/dashboards/{topic}/page.tsx
10. Default time range to "2Y"
11. Add route to /dashboards index