278 lines
12 KiB
TypeScript
278 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import {
|
|
Bar,
|
|
BarChart,
|
|
CartesianGrid,
|
|
ResponsiveContainer,
|
|
Tooltip,
|
|
XAxis,
|
|
YAxis,
|
|
} from "recharts";
|
|
import { TrendingUp, Target, Thermometer, Hash } from "lucide-react";
|
|
|
|
type TrainingCity = {
|
|
city_id: string;
|
|
name: string;
|
|
deb?: { hit_rate: number; mae: number; total_days: number } | null;
|
|
};
|
|
|
|
const CHART_COLORS = {
|
|
high: "#059669",
|
|
mid: "#d97706",
|
|
low: "#dc2626",
|
|
blue: "#2563eb",
|
|
purple: "#7c3aed",
|
|
};
|
|
|
|
function barColor(hr: number) {
|
|
if (hr >= 65) return CHART_COLORS.high;
|
|
if (hr >= 45) return CHART_COLORS.mid;
|
|
return CHART_COLORS.low;
|
|
}
|
|
|
|
export function TrainingDashboard({ isEn }: { isEn: boolean }) {
|
|
const [data, setData] = useState<TrainingCity[] | null>(null);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
fetch("/api/ops/training/accuracy", {
|
|
cache: "no-store",
|
|
headers: { Accept: "application/json" },
|
|
})
|
|
.then(async (res) => {
|
|
if (!res.ok) return null;
|
|
return res.json() as Promise<{ accuracy: TrainingCity[] }>;
|
|
})
|
|
.then((payload) => {
|
|
if (cancelled || !payload?.accuracy) return;
|
|
setData(payload.accuracy.filter((c) => c.deb && c.deb.total_days >= 5));
|
|
})
|
|
.catch(() => {});
|
|
return () => { cancelled = true; };
|
|
}, []);
|
|
|
|
const debSorted = useMemo(
|
|
() => (data || []).sort((a, b) => (b.deb?.hit_rate ?? 0) - (a.deb?.hit_rate ?? 0)),
|
|
[data],
|
|
);
|
|
|
|
const stats = useMemo(() => {
|
|
if (!debSorted.length) return null;
|
|
const avgHit = debSorted.reduce((s, c) => s + (c.deb?.hit_rate ?? 0), 0) / debSorted.length;
|
|
const avgMae = debSorted.reduce((s, c) => s + (c.deb?.mae ?? 0), 0) / debSorted.length;
|
|
const totalDays = debSorted.reduce((s, c) => s + (c.deb?.total_days ?? 0), 0);
|
|
const high = debSorted.filter((c) => (c.deb?.hit_rate ?? 0) >= 65).length;
|
|
const mid = debSorted.filter((c) => {
|
|
const hr = c.deb?.hit_rate ?? 0;
|
|
return hr >= 45 && hr < 65;
|
|
}).length;
|
|
const low = debSorted.filter((c) => (c.deb?.hit_rate ?? 0) < 45).length;
|
|
return { avgHit, avgMae, totalDays, cities: debSorted.length, high, mid, low };
|
|
}, [debSorted]);
|
|
|
|
const chartData = useMemo(
|
|
() =>
|
|
debSorted.slice(0, 18).map((c) => ({
|
|
name: c.name,
|
|
hit: Number((c.deb?.hit_rate ?? 0).toFixed(1)),
|
|
mae: Number((c.deb?.mae ?? 0).toFixed(2)),
|
|
fill: barColor(c.deb?.hit_rate ?? 0),
|
|
})),
|
|
[debSorted],
|
|
);
|
|
|
|
const maeChartData = useMemo(
|
|
() =>
|
|
[...debSorted]
|
|
.sort((a, b) => (a.deb?.mae ?? 99) - (b.deb?.mae ?? 99))
|
|
.slice(0, 18)
|
|
.map((c) => ({
|
|
name: c.name,
|
|
mae: Number((c.deb?.mae ?? 0).toFixed(2)),
|
|
})),
|
|
[debSorted],
|
|
);
|
|
|
|
return (
|
|
<div className="h-full overflow-auto bg-[#f5f7fa]">
|
|
<div className="p-4">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div>
|
|
<h1 className="text-lg font-black text-slate-900 flex items-center gap-2">
|
|
<Target size={18} className="text-blue-600" />
|
|
{isEn ? "DEB Training Accuracy" : "DEB 训练数据准确率"}
|
|
</h1>
|
|
<p className="mt-0.5 text-xs text-slate-500">
|
|
{isEn
|
|
? "DEB hit rate = forecast within settlement acceptance window"
|
|
: "DEB 命中率 = 预报落入结算接受窗口的比例"}
|
|
</p>
|
|
</div>
|
|
{stats && (
|
|
<div className="flex items-center gap-4 text-xs text-slate-500">
|
|
<span>{isEn ? "Updated" : "更新时间"}: {new Date().toLocaleDateString()}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Stats cards */}
|
|
{stats && (
|
|
<div className="grid grid-cols-4 gap-2 mb-4">
|
|
{[
|
|
{ icon: Hash, label: isEn ? "Models" : "城市模型", value: stats.cities, color: "text-blue-600", bg: "bg-blue-50 border-blue-200" },
|
|
{ icon: Target, label: isEn ? "Avg Hit Rate" : "平均命中率", value: `${stats.avgHit.toFixed(1)}%`, color: "text-emerald-600", bg: "bg-emerald-50 border-emerald-200" },
|
|
{ icon: Thermometer, label: "Avg MAE", value: `${stats.avgMae.toFixed(1)}°`, color: "text-amber-600", bg: "bg-amber-50 border-amber-200" },
|
|
{ icon: TrendingUp, label: isEn ? "Total Days" : "总训练天数", value: stats.totalDays.toLocaleString(), color: "text-purple-600", bg: "bg-purple-50 border-purple-200" },
|
|
].map(({ icon: Icon, label, value, color, bg }) => (
|
|
<div key={label} className={`flex items-center gap-3 rounded-lg border ${bg} p-3`}>
|
|
<Icon size={20} className={color} />
|
|
<div>
|
|
<div className="text-[10px] font-bold uppercase text-slate-500">{label}</div>
|
|
<div className="font-mono text-lg font-black text-slate-900">{String(value)}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Distribution summary */}
|
|
{stats && (
|
|
<div className="grid grid-cols-3 gap-2 mb-4">
|
|
{[
|
|
{ label: isEn ? "High (≥65%)" : "高 (≥65%)", count: stats.high, color: "emerald" },
|
|
{ label: isEn ? "Mid (45-64%)" : "中 (45-64%)", count: stats.mid, color: "amber" },
|
|
{ label: isEn ? "Low (<45%)" : "低 (<45%)", count: stats.low, color: "red" },
|
|
].map(({ label, count, color }) => (
|
|
<div key={color} className={`rounded-lg border border-${color}-200 bg-${color}-50 p-3 text-center`}>
|
|
<div className={`font-mono text-2xl font-black text-${color}-600`}>{count}</div>
|
|
<div className="text-[10px] font-bold uppercase text-slate-500">{label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Charts */}
|
|
{chartData.length > 0 && (
|
|
<div className="grid grid-cols-2 gap-3 mb-4">
|
|
{/* Hit rate bar chart */}
|
|
<div className="rounded-lg border border-slate-200 bg-white p-3">
|
|
<h2 className="mb-2 text-[11px] font-black uppercase text-slate-500">
|
|
{isEn ? "Hit Rate by City" : "各城市命中率"}
|
|
</h2>
|
|
<div className="h-72">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart data={chartData} layout="vertical" margin={{ top: 0, right: 16, left: 48, bottom: 0 }}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" horizontal={false} />
|
|
<XAxis type="number" domain={[0, 100]} tick={{ fontSize: 10, fill: "#64748b" }} tickFormatter={(v) => `${v}%`} />
|
|
<YAxis dataKey="name" type="category" tick={{ fontSize: 10, fill: "#334155" }} width={50} />
|
|
<Tooltip
|
|
contentStyle={{ borderRadius: 6, border: "1px solid #e2e8f0", fontSize: 12 }}
|
|
formatter={(value) => [`${Number(value)}%`, isEn ? "Hit Rate" : "命中率"]}
|
|
/>
|
|
<Bar dataKey="hit" radius={[0, 3, 3, 0]} fill="#2563eb" barSize={14} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
|
|
{/* MAE bar chart (lower is better) */}
|
|
<div className="rounded-lg border border-slate-200 bg-white p-3">
|
|
<h2 className="mb-2 text-[11px] font-black uppercase text-slate-500">
|
|
{isEn ? "MAE by City (lower = better)" : "各城市 MAE (越低越好)"}
|
|
</h2>
|
|
<div className="h-72">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart data={maeChartData} layout="vertical" margin={{ top: 0, right: 16, left: 48, bottom: 0 }}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" horizontal={false} />
|
|
<XAxis type="number" tick={{ fontSize: 10, fill: "#64748b" }} tickFormatter={(v) => `${v}°`} />
|
|
<YAxis dataKey="name" type="category" tick={{ fontSize: 10, fill: "#334155" }} width={50} />
|
|
<Tooltip
|
|
contentStyle={{ borderRadius: 6, border: "1px solid #e2e8f0", fontSize: 12 }}
|
|
formatter={(value) => [`${Number(value)}°`, "MAE"]}
|
|
/>
|
|
<Bar dataKey="mae" radius={[0, 3, 3, 0]} fill="#7c3aed" barSize={14} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Table */}
|
|
<div className="rounded-lg border border-slate-200 bg-white overflow-hidden">
|
|
<table className="w-full text-[12px] border-collapse">
|
|
<thead>
|
|
<tr className="border-b border-slate-200 bg-[#f8f9fa] text-left">
|
|
<th className="w-10 px-3 py-2 text-center text-[10px] font-black text-slate-400">#</th>
|
|
<th className="px-3 py-2 text-[10px] font-black uppercase text-slate-500">
|
|
{isEn ? "City" : "城市"}
|
|
</th>
|
|
<th className="px-3 py-2 text-right text-[10px] font-black uppercase text-slate-500">
|
|
{isEn ? "Hit Rate" : "命中率"}
|
|
</th>
|
|
<th className="px-3 py-2 text-right text-[10px] font-black uppercase text-slate-500">MAE</th>
|
|
<th className="px-3 py-2 text-right text-[10px] font-black uppercase text-slate-500">
|
|
{isEn ? "Days" : "训练天数"}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{debSorted.length ? debSorted.map((c, i) => {
|
|
const hr = c.deb?.hit_rate ?? 0;
|
|
const mae = c.deb?.mae ?? 0;
|
|
const color = hr >= 65 ? "emerald" : hr >= 45 ? "amber" : "red";
|
|
return (
|
|
<tr key={c.city_id} className="hover:bg-slate-50 transition-colors">
|
|
<td className="px-3 py-2 text-center text-[10px] font-mono text-slate-400">{i + 1}</td>
|
|
<td className="px-3 py-2 font-semibold text-slate-800 capitalize">{c.name}</td>
|
|
<td className="px-3 py-2 text-right">
|
|
<div className="flex items-center justify-end gap-2">
|
|
<div className="relative h-2 w-28 overflow-hidden rounded-full bg-slate-100">
|
|
<div
|
|
className={`absolute inset-y-0 left-0 rounded-full bg-${color}-500 transition-all`}
|
|
style={{ width: `${Math.min(100, hr)}%` }}
|
|
/>
|
|
<div
|
|
className="absolute inset-y-0 left-0 rounded-full opacity-30"
|
|
style={{
|
|
width: `${Math.min(100, hr)}%`,
|
|
background: `repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(255,255,255,0.3) 3px, rgba(255,255,255,0.3) 6px)`,
|
|
}}
|
|
/>
|
|
</div>
|
|
<span className={`w-10 text-right font-mono text-[11px] font-bold text-${color}-600`}>
|
|
{hr.toFixed(0)}%
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-3 py-2 text-right font-mono text-slate-600">{mae.toFixed(1)}°</td>
|
|
<td className="px-3 py-2 text-right text-slate-400">{c.deb?.total_days ?? 0}</td>
|
|
</tr>
|
|
);
|
|
}) : (
|
|
<tr>
|
|
<td colSpan={5} className="px-4 py-12 text-center text-slate-400">
|
|
{data === null
|
|
? (isEn ? "Loading training data..." : "加载训练数据中...")
|
|
: (isEn ? "No training data available" : "暂无训练数据")}
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Footer note */}
|
|
<p className="mt-3 text-center text-[10px] text-slate-400">
|
|
{isEn
|
|
? "Training data updated daily. Hit rate = DEB prediction within settlement acceptance range."
|
|
: "训练数据每日更新。命中率 = DEB 预报落入结算接受窗口的比例。"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|