+ {/* Header */}
+
+
+
+ {history?.name ?? selectedId}
+
+
+ {history?.category && (
+
+ {CATEGORY_LABELS[history.category]}
+
+ )}
+ {history?.freq} · FRED/{selectedId}
+
+
+
+
+ {/* Range selector */}
+
+ {RANGE_OPTIONS.map(r => (
+
+ ))}
+
+
+
+
+
+ {/* KPI cards */}
+ {history && values.length > 0 && (
+
+ {[
+ {
+ label: 'Latest',
+ value: fmtVal(latest, history.unit),
+ sub: history.timeseries[history.timeseries.length - 1]?.event_date,
+ accent: trend === 1 ? 'text-emerald-400' : trend === -1 ? 'text-red-400' : 'text-slate-200',
+ icon: trend === 1 ?
: trend === -1 ? : ,
+ },
+ { label: 'Previous', value: fmtVal(prev, history.unit), sub: history.timeseries[history.timeseries.length - 2]?.event_date, accent: 'text-slate-300', icon: null },
+ { label: 'Min (period)', value: fmtVal(minVal, history.unit), sub: null, accent: 'text-sky-400', icon: null },
+ { label: 'Max (period)', value: fmtVal(maxVal, history.unit), sub: null, accent: 'text-amber-400', icon: null },
+ ].map(card => (
+
+
{card.label}
+
+ {card.icon}{card.value}
+
+ {card.sub &&
{card.sub}
}
+
+ ))}
+
+ )}
+
+ {/* Chart */}
+
+
+
+ Time Series
+ {history && ({chartData.length} data points)}
+
+ {bigSurprises.length > 0 && (
+
+ {bigSurprises.length} big surprises (|z| ≥ 1.5)
+
+ )}
+
+
+ {loading && (
+
+ Loading…
+
+ )}
+
+ {!loading && chartData.length === 0 && (
+
+ No data — run FRED bootstrap first in the Calendar page.
+
+ )}
+
+ {!loading && chartData.length > 0 && (
+
+
+
+
+
+
+
+
+
+
+ `${v}${history?.unit === '%' || history?.unit === 'pp' ? '' : ''}`}
+ />
+ } />
+
+ {/* Zero line if series crosses zero */}
+ {minVal !== null && maxVal !== null && minVal < 0 && maxVal > 0 && (
+
+ )}
+
+ {/* Big surprise markers */}
+ {bigSurprises.map(s => (
+
+ ))}
+
+
+
+
+ )}
+
+ {/* Legend for reference lines */}
+ {bigSurprises.length > 0 && (
+
+
+
+ Bullish surprise (|z|≥1.5)
+
+
+
+ Bearish surprise
+
+
+ )}
+
+
+ {/* Events table */}
+
+
+ FF Calendar Events
+ {history && ({history.events.length} linked)}
+
+ {history &&
}
+
+
+ {/* Z-score context */}
+ {history && chartData.some(d => d.zscore !== null) && (
+
+
Recent Surprises (FRED z-score)
+
+ {chartData
+ .filter(d => d.zscore !== null && d.zscore !== 0)
+ .slice(-15)
+ .reverse()
+ .map((d, i) => (
+
+
{d.event_date}
+
+
+
+ {d.zscore!.toFixed(2)}σ
+
+
+ {d.value?.toFixed(2)} {history.unit}
+
+
+ ))}
+
+
+ )}
+