237 lines
8.6 KiB
TypeScript
237 lines
8.6 KiB
TypeScript
"use client";
|
|
|
|
import clsx from "clsx";
|
|
import { Search, Table2 } from "lucide-react";
|
|
import { useMemo, useState } from "react";
|
|
import type { ScanOpportunityRow } from "@/lib/dashboard-types";
|
|
import {
|
|
MODEL_SUMMARY_MODEL_COLUMNS,
|
|
buildModelSummaryRows,
|
|
filterModelSummaryRows,
|
|
formatModelSummaryTemp,
|
|
type ModelSummaryRow,
|
|
} from "@/lib/model-summary";
|
|
|
|
type ModelSummaryDashboardProps = {
|
|
rows: ScanOpportunityRow[];
|
|
isEn: boolean;
|
|
generatedText?: string;
|
|
};
|
|
|
|
const SUMMARY_TEXT = {
|
|
title: { en: "Model Summary", zh: "模型汇总" },
|
|
subtitle: {
|
|
en: "Today high-temperature view across DEB and model cluster sources.",
|
|
zh: "按今日最高温口径汇总 DEB 与多模型预测。",
|
|
},
|
|
search: { en: "Search city or model", zh: "搜索城市或模型" },
|
|
city: { en: "City", zh: "城市" },
|
|
region: { en: "Region", zh: "区域" },
|
|
currentHigh: { en: "Current High", zh: "当前最高" },
|
|
median: { en: "Median", zh: "模型中位数" },
|
|
spread: { en: "Spread", zh: "分歧范围" },
|
|
updated: { en: "Updated", zh: "更新时间" },
|
|
empty: { en: "No model summary rows match the current filters.", zh: "当前筛选下没有模型汇总数据。" },
|
|
generated: { en: "Generated", zh: "生成" },
|
|
total: { en: "rows", zh: "行" },
|
|
} as const;
|
|
|
|
function copy(key: keyof typeof SUMMARY_TEXT, isEn: boolean) {
|
|
return SUMMARY_TEXT[key][isEn ? "en" : "zh"];
|
|
}
|
|
|
|
function TemperatureCell({
|
|
value,
|
|
symbol,
|
|
emphasis,
|
|
}: {
|
|
value: number | null;
|
|
symbol: string;
|
|
emphasis?: "deb" | "median";
|
|
}) {
|
|
const missing = value == null;
|
|
return (
|
|
<span
|
|
className={clsx(
|
|
"font-mono tabular-nums",
|
|
missing ? "font-semibold text-slate-300" : "font-bold text-slate-800",
|
|
emphasis === "deb" && !missing && "text-orange-600",
|
|
emphasis === "median" && !missing && "text-blue-700",
|
|
)}
|
|
>
|
|
{formatModelSummaryTemp(value, symbol)}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function FilterToggle({
|
|
checked,
|
|
label,
|
|
onChange,
|
|
}: {
|
|
checked: boolean;
|
|
label: string;
|
|
onChange: (checked: boolean) => void;
|
|
}) {
|
|
return (
|
|
<label
|
|
className={clsx(
|
|
"inline-flex h-8 cursor-pointer select-none items-center gap-2 rounded border px-2.5 text-[11px] font-bold transition-colors",
|
|
checked
|
|
? "border-blue-300 bg-blue-50 text-blue-700"
|
|
: "border-slate-300 bg-white text-slate-600 hover:bg-slate-50 hover:text-slate-900",
|
|
)}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
className="h-3.5 w-3.5 accent-blue-600"
|
|
checked={checked}
|
|
onChange={(event) => onChange(event.target.checked)}
|
|
/>
|
|
<span>{label}</span>
|
|
</label>
|
|
);
|
|
}
|
|
|
|
function ModelSummaryRowView({
|
|
row,
|
|
}: {
|
|
row: ModelSummaryRow;
|
|
}) {
|
|
return (
|
|
<tr className="group border-b border-slate-100 hover:bg-blue-50/40">
|
|
<th
|
|
scope="row"
|
|
className="sticky left-0 z-10 w-[160px] min-w-[160px] max-w-[160px] border-r border-slate-200 bg-white px-3 py-2 text-left align-middle text-xs font-black text-slate-900 group-hover:bg-blue-50"
|
|
>
|
|
<span className="block truncate">{row.cityName}</span>
|
|
</th>
|
|
<td className="min-w-[150px] px-3 py-2 text-xs font-semibold text-slate-600">
|
|
<span className="block truncate">{row.regionLabel}</span>
|
|
</td>
|
|
<td className="min-w-[96px] px-3 py-2 text-right">
|
|
<TemperatureCell value={row.currentHigh} symbol={row.tempSymbol} />
|
|
</td>
|
|
<td className="min-w-[90px] px-3 py-2 text-right">
|
|
<TemperatureCell value={row.debPrediction} symbol={row.tempSymbol} emphasis="deb" />
|
|
</td>
|
|
{MODEL_SUMMARY_MODEL_COLUMNS.map((column) => (
|
|
<td key={column.key} className="min-w-[92px] px-3 py-2 text-right">
|
|
<TemperatureCell value={row.models[column.key]} symbol={row.tempSymbol} />
|
|
</td>
|
|
))}
|
|
<td className="min-w-[110px] px-3 py-2 text-right">
|
|
<TemperatureCell value={row.modelMedian} symbol={row.tempSymbol} emphasis="median" />
|
|
</td>
|
|
<td className="min-w-[100px] px-3 py-2 text-right">
|
|
<TemperatureCell value={row.modelSpread} symbol={row.tempSymbol} />
|
|
</td>
|
|
<td className="min-w-[130px] px-3 py-2 text-right font-mono text-[11px] font-semibold text-slate-500">
|
|
{row.updatedAt || "—"}
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|
|
|
|
export function ModelSummaryDashboard({
|
|
rows,
|
|
isEn,
|
|
generatedText,
|
|
}: ModelSummaryDashboardProps) {
|
|
const [query, setQuery] = useState("");
|
|
const [debOnly, setDebOnly] = useState(false);
|
|
const [wideSpreadOnly, setWideSpreadOnly] = useState(false);
|
|
|
|
const summaryRows = useMemo(() => buildModelSummaryRows(rows, isEn), [rows, isEn]);
|
|
const visibleRows = useMemo(
|
|
() =>
|
|
filterModelSummaryRows(summaryRows, {
|
|
query,
|
|
debOnly,
|
|
wideSpreadOnly,
|
|
}),
|
|
[summaryRows, query, debOnly, wideSpreadOnly],
|
|
);
|
|
|
|
return (
|
|
<section className="flex min-h-0 flex-1 flex-col overflow-hidden rounded border border-[#d2d9e2] bg-white shadow-sm">
|
|
<header className="flex shrink-0 flex-col gap-3 border-b border-slate-200 bg-white px-3 py-3 md:flex-row md:items-center md:justify-between">
|
|
<div className="min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<Table2 size={16} className="text-blue-600" />
|
|
<h2 className="truncate text-sm font-black text-slate-900">{copy("title", isEn)}</h2>
|
|
<span className="rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[10px] font-bold text-slate-500">
|
|
{visibleRows.length}/{summaryRows.length} {copy("total", isEn)}
|
|
</span>
|
|
</div>
|
|
<p className="mt-1 text-xs font-medium text-slate-500">
|
|
{copy("subtitle", isEn)}
|
|
{generatedText ? (
|
|
<span className="ml-2 font-mono text-[11px] text-slate-400">
|
|
{copy("generated", isEn)} {generatedText}
|
|
</span>
|
|
) : null}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<div className="relative w-full sm:w-[240px]">
|
|
<Search size={14} className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400" />
|
|
<input
|
|
value={query}
|
|
onChange={(event) => setQuery(event.target.value)}
|
|
placeholder={copy("search", isEn)}
|
|
className="h-8 w-full rounded border border-slate-300 bg-white pl-8 pr-2 text-xs font-semibold text-slate-700 outline-none transition focus:border-blue-400 focus:ring-2 focus:ring-blue-100"
|
|
/>
|
|
</div>
|
|
<FilterToggle
|
|
checked={debOnly}
|
|
label={isEn ? "Only DEB" : "仅 DEB"}
|
|
onChange={setDebOnly}
|
|
/>
|
|
<FilterToggle
|
|
checked={wideSpreadOnly}
|
|
label={isEn ? "Large spread" : "分歧较大"}
|
|
onChange={setWideSpreadOnly}
|
|
/>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="min-h-0 flex-1 overflow-auto">
|
|
<table className="w-full min-w-[1580px] border-collapse text-xs">
|
|
<thead className="sticky top-0 z-20 bg-slate-50 text-[10px] font-black uppercase tracking-wide text-slate-500 shadow-[0_1px_0_0_#e2e8f0]">
|
|
<tr>
|
|
<th className="sticky left-0 z-30 w-[160px] min-w-[160px] border-r border-slate-200 bg-slate-50 px-3 py-2 text-left">
|
|
{copy("city", isEn)}
|
|
</th>
|
|
<th className="min-w-[150px] px-3 py-2 text-left">{copy("region", isEn)}</th>
|
|
<th className="min-w-[96px] px-3 py-2 text-right">{copy("currentHigh", isEn)}</th>
|
|
<th className="min-w-[90px] px-3 py-2 text-right text-orange-600">DEB</th>
|
|
{MODEL_SUMMARY_MODEL_COLUMNS.map((column) => (
|
|
<th key={column.key} className="min-w-[92px] px-3 py-2 text-right">
|
|
{column.label}
|
|
</th>
|
|
))}
|
|
<th className="min-w-[110px] px-3 py-2 text-right text-blue-700">
|
|
{copy("median", isEn)}
|
|
</th>
|
|
<th className="min-w-[100px] px-3 py-2 text-right">{copy("spread", isEn)}</th>
|
|
<th className="min-w-[130px] px-3 py-2 text-right">{copy("updated", isEn)}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100 bg-white">
|
|
{visibleRows.map((row) => (
|
|
<ModelSummaryRowView key={row.cityKey} row={row} />
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
{!visibleRows.length && (
|
|
<div className="flex h-40 items-center justify-center border-t border-slate-100 text-xs font-bold text-slate-400">
|
|
{copy("empty", isEn)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|