feat: implement SSE architecture for real-time temperature updates with componentized dashboard charts and validation tests
This commit is contained in:
2569718930@qq.com
@@ -2,22 +2,14 @@
|
||||
|
||||
import clsx from "clsx";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
CartesianGrid,
|
||||
Line,
|
||||
Area,
|
||||
ComposedChart as ReComposedChart,
|
||||
ReferenceLine,
|
||||
ReferenceArea,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import type { ScanOpportunityRow } from "@/lib/dashboard-types";
|
||||
import { useLatestPatch, useSseResyncVersion } from "@/hooks/use-sse-patches";
|
||||
import { Panel } from "@/components/dashboard/scan-terminal/Panel";
|
||||
import { rowName, temp } from "@/components/dashboard/scan-terminal/utils";
|
||||
import { ModelCurvesSummary } from "@/components/dashboard/scan-terminal/ModelCurvesSummary";
|
||||
import { TemperatureChartCanvas } from "@/components/dashboard/scan-terminal/TemperatureChartCanvas";
|
||||
import { TemperatureRunwayDetails } from "@/components/dashboard/scan-terminal/TemperatureRunwayDetails";
|
||||
import { TemperatureStatsBars } from "@/components/dashboard/scan-terminal/TemperatureStatsBars";
|
||||
import { rowName } from "@/components/dashboard/scan-terminal/utils";
|
||||
|
||||
import {
|
||||
HOURLY_CACHE_TTL_MS,
|
||||
@@ -25,7 +17,6 @@ import {
|
||||
buildChartDomain,
|
||||
buildFullDayChartData,
|
||||
buildIntDegreeTicks,
|
||||
buildModelSummaryCards,
|
||||
buildRunwayPlates,
|
||||
fetchHourlyForecastForCity,
|
||||
getActiveTemperatureSeries,
|
||||
@@ -36,85 +27,14 @@ import {
|
||||
isTemperatureSeriesVisibleByDefault,
|
||||
mergePatchIntoHourly,
|
||||
normObs,
|
||||
normalizeCityKey,
|
||||
readSessionCache,
|
||||
seedHourlyForecastFromRow,
|
||||
seriesStats,
|
||||
shouldPollLiveChart,
|
||||
validNumber,
|
||||
type HourlyForecast,
|
||||
} from "@/components/dashboard/scan-terminal/temperature-chart-logic";
|
||||
export { clearCityDetailCache } from "@/components/dashboard/scan-terminal/temperature-chart-logic";
|
||||
|
||||
type TooltipSeries = {
|
||||
key: string;
|
||||
label: string;
|
||||
color: string;
|
||||
};
|
||||
|
||||
function nearestSeriesValue(
|
||||
data: Array<Record<string, any>>,
|
||||
seriesKey: string,
|
||||
activeIndex: number,
|
||||
) {
|
||||
if (!data.length || activeIndex < 0) return null;
|
||||
for (let offset = 0; offset < data.length; offset += 1) {
|
||||
const left = activeIndex - offset;
|
||||
if (left >= 0) {
|
||||
const value = validNumber(data[left]?.[seriesKey]);
|
||||
if (value !== null) return value;
|
||||
}
|
||||
const right = activeIndex + offset;
|
||||
if (right < data.length) {
|
||||
const value = validNumber(data[right]?.[seriesKey]);
|
||||
if (value !== null) return value;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function TemperatureTooltipContent({
|
||||
active,
|
||||
label,
|
||||
payload,
|
||||
data,
|
||||
series,
|
||||
}: {
|
||||
active?: boolean;
|
||||
label?: string | number;
|
||||
payload?: ReadonlyArray<{ payload?: Record<string, any> }>;
|
||||
data: Array<Record<string, any>>;
|
||||
series: TooltipSeries[];
|
||||
}) {
|
||||
if (!active || !payload?.length || !series.length) return null;
|
||||
const activePoint = payload[0]?.payload || {};
|
||||
const activeIndex = data.findIndex((point) => point.ts === activePoint.ts);
|
||||
const rows = series
|
||||
.map((item) => {
|
||||
const directValue = validNumber(activePoint[item.key]);
|
||||
const value = directValue ?? nearestSeriesValue(data, item.key, activeIndex);
|
||||
return value === null ? null : { ...item, value };
|
||||
})
|
||||
.filter((item): item is TooltipSeries & { value: number } => item !== null);
|
||||
if (!rows.length) return null;
|
||||
|
||||
return (
|
||||
<div className="rounded border border-slate-200 bg-white px-2.5 py-2 text-[11px] shadow-lg">
|
||||
<div className="mb-1 font-mono text-slate-500">{label}</div>
|
||||
<div className="grid gap-1">
|
||||
{rows.slice(0, 8).map((item) => (
|
||||
<div key={item.key} className="flex min-w-[140px] items-center justify-between gap-4">
|
||||
<span className="inline-flex items-center gap-1.5 text-slate-700">
|
||||
<span className="h-2 w-2 rounded-full" style={{ backgroundColor: item.color }} />
|
||||
<span className="font-semibold">{item.label}</span>
|
||||
</span>
|
||||
<strong className="font-mono text-slate-900">{item.value.toFixed(2)}°</strong>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// ── Main component ─────────────────────────────────────────────────────
|
||||
|
||||
export function LiveTemperatureThresholdChart({
|
||||
@@ -368,8 +288,6 @@ export function LiveTemperatureThresholdChart({
|
||||
}, [chartSeries, userToggledKeys, city, showRunwayDetails]);
|
||||
|
||||
const {
|
||||
isHKO,
|
||||
isParis,
|
||||
isShenzhen,
|
||||
metarHeaderLabel,
|
||||
metarHighLabel,
|
||||
@@ -586,393 +504,65 @@ export function LiveTemperatureThresholdChart({
|
||||
return (
|
||||
<Panel title={panelTitle} actions={timeframeActions}>
|
||||
<div className="flex h-full min-h-[300px] flex-col">
|
||||
{/* Compact stats bar */}
|
||||
{compact ? (
|
||||
<div className="shrink-0 border-b border-slate-200 bg-white px-3 py-1.5 flex items-center justify-between">
|
||||
{timeframe === "1D" ? (
|
||||
<div className="flex items-center gap-4 text-[11px]">
|
||||
<span className="font-semibold text-slate-500">
|
||||
{isEn ? "Runway" : runwayHeaderLabel}:{" "}
|
||||
<strong className="text-[#009688] font-mono">{temp(displayRunwayTemp)}</strong>
|
||||
</span>
|
||||
<span className="text-slate-300">|</span>
|
||||
<span className="font-semibold text-slate-500">
|
||||
{isEn ? "METAR" : (isShenzhen ? "当日最高" : metarHeaderLabel)}:{" "}
|
||||
<strong className="text-blue-600 font-mono">{temp(observedHighMetar)}</strong>
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-4 text-[11px]">
|
||||
<span className="font-semibold text-slate-500">
|
||||
DEB: <strong className="text-orange-600 font-mono">{temp(debVal)}</strong>
|
||||
</span>
|
||||
{modelMin !== null && modelMax !== null && (
|
||||
<>
|
||||
<span className="text-slate-300">|</span>
|
||||
<span className="font-semibold text-slate-500">
|
||||
{isEn ? "Models" : "多模型"}:{" "}
|
||||
<strong className="text-slate-700 font-mono">
|
||||
{temp(modelMin)} - {temp(modelMax)}
|
||||
</strong>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-[10px] text-slate-400 font-mono">
|
||||
{timeframe === "1D" && formattedUpdateTime.includes(" ") ? formattedUpdateTime.split(" ")[1].slice(0, 5) : ""}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* Normal detailed stats bar */
|
||||
<div className="shrink-0 border-b border-slate-200 bg-white px-4 py-3">
|
||||
{/* Top Row: Large temperatures */}
|
||||
<div className="flex justify-between items-center gap-6 mb-3">
|
||||
{timeframe === "1D" ? (
|
||||
<div className="flex items-center gap-12">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider">
|
||||
{isEn ? "Runway Live (1m)" : `${runwayHeaderLabel}`}
|
||||
</span>
|
||||
<span className="text-2xl font-bold font-mono text-[#009688] mt-1">
|
||||
{temp(displayRunwayTemp)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider">
|
||||
{isEn ? "METAR Settlement · Daily High" : `${metarHeaderLabel} · 当日最高`}
|
||||
</span>
|
||||
<span className="text-2xl font-bold font-mono text-blue-600 mt-1">
|
||||
{temp(observedHighMetar)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-12">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider">
|
||||
DEB Max
|
||||
</span>
|
||||
<span className="text-2xl font-bold font-mono text-orange-600 mt-1">
|
||||
{temp(debVal)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider">
|
||||
{isEn ? "Model Range" : "多模型区间"}
|
||||
</span>
|
||||
<span className="text-2xl font-bold font-mono text-slate-700 mt-1">
|
||||
{modelMin !== null && modelMax !== null ? `${temp(modelMin)} - ${temp(modelMax)}` : "--"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="hidden sm:flex flex-col items-end text-right">
|
||||
<span className="text-[10px] text-slate-400 uppercase font-semibold">
|
||||
{isEn ? "Daily Peak" : "当日最高气温"}
|
||||
</span>
|
||||
<div className="mt-1 flex items-center gap-2 text-xs font-mono text-slate-600">
|
||||
<span>{isEn ? "Runway" : runwayHighLabel}: <strong className="text-[#009688]">{temp(observedHighRunway)}</strong></span>
|
||||
<span>|</span>
|
||||
<span>{isEn ? "METAR" : metarHighLabel}: <strong className="text-blue-600">{temp(observedHighMetar)}</strong></span>
|
||||
{wundergroundDailyHigh !== null && (
|
||||
<>
|
||||
<span>|</span>
|
||||
<span>WU: <strong className="text-purple-600">{temp(wundergroundDailyHigh)}</strong></span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<TemperatureStatsBars
|
||||
isEn={isEn}
|
||||
compact={compact}
|
||||
timeframe={timeframe}
|
||||
runwayHeaderLabel={runwayHeaderLabel}
|
||||
metarHeaderLabel={metarHeaderLabel}
|
||||
runwayHighLabel={runwayHighLabel}
|
||||
metarHighLabel={metarHighLabel}
|
||||
isShenzhen={isShenzhen}
|
||||
displayRunwayTemp={displayRunwayTemp}
|
||||
observedHighMetar={observedHighMetar}
|
||||
observedHighRunway={observedHighRunway}
|
||||
wundergroundDailyHigh={wundergroundDailyHigh}
|
||||
debVal={debVal}
|
||||
modelMin={modelMin}
|
||||
modelMax={modelMax}
|
||||
spread={spread}
|
||||
spreadLabel={spreadLabel}
|
||||
spreadLabelEn={spreadLabelEn}
|
||||
formattedUpdateTime={formattedUpdateTime}
|
||||
/>
|
||||
|
||||
{/* Bottom Row: Model Range Panel (Only for 1D mode) */}
|
||||
{timeframe === "1D" && (
|
||||
<div className="grid grid-cols-4 gap-4 border-t border-slate-100 pt-3 text-xs font-mono text-slate-700 bg-slate-50/50 -mx-4 px-4 rounded-b-md">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-[10px] text-slate-400 uppercase font-semibold">
|
||||
{isEn ? "Model Range" : "模型区间"}
|
||||
</span>
|
||||
<strong className="text-slate-800 font-bold">
|
||||
{modelMin !== null && modelMax !== null ? `${temp(modelMin)} - ${temp(modelMax)}` : "--"}
|
||||
</strong>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-[10px] text-slate-400 uppercase font-semibold">
|
||||
DEB
|
||||
</span>
|
||||
<strong className="text-blue-600 font-bold">
|
||||
{temp(debVal)}
|
||||
</strong>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-[10px] text-slate-400 uppercase font-semibold">
|
||||
{isEn ? "Spread" : "分歧"}
|
||||
</span>
|
||||
<strong className={clsx("font-bold", spreadLabel === "高分歧" ? "text-amber-600" : "text-slate-600")}>
|
||||
{spread !== null ? `${spread.toFixed(1)}°C` : "--"}
|
||||
{spreadLabel && ` · ${isEn ? spreadLabelEn : spreadLabel}`}
|
||||
</strong>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-[10px] text-slate-400 uppercase font-semibold">
|
||||
{isEn ? "Updated" : "更新时间"}
|
||||
</span>
|
||||
<strong className="text-slate-800 font-bold">
|
||||
{formattedUpdateTime}
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{timeframe === "1D" && !compact && (
|
||||
<TemperatureRunwayDetails isEn={isEn} plates={runwayPlates} />
|
||||
)}
|
||||
|
||||
{/* Runway observations (Only for 1D mode and when not compact) */}
|
||||
{timeframe === "1D" && !compact && runwayPlates.length > 0 && (
|
||||
<div className="shrink-0 border-b border-slate-200 bg-[#f8fafc] px-3 py-2">
|
||||
<div className="flex items-center justify-between text-[11px] font-black text-slate-700 mb-1.5 uppercase">
|
||||
<span>{isEn ? "Runway Observations" : "跑道观测"}</span>
|
||||
{runwayPlates.some((p) => p.trend_15m !== null && p.trend_15m > 0 && !p.isSettlement) && (
|
||||
<span className="text-[10px] bg-amber-50 text-amber-700 border border-amber-200 px-1.5 py-0.5 rounded font-sans">
|
||||
{isEn ? "Non-settlement Runway Warming Alert" : "非结算跑道升温提醒"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid gap-1">
|
||||
{runwayPlates.map((plate) => (
|
||||
<div
|
||||
key={plate.rwy}
|
||||
className={clsx(
|
||||
"grid grid-cols-7 gap-2 items-center border rounded px-2.5 py-1 text-[11px] font-mono",
|
||||
plate.isSettlement
|
||||
? "border-emerald-200 bg-emerald-50/50 text-emerald-950 font-bold"
|
||||
: "border-slate-200 bg-white text-slate-600"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-1.5 font-sans font-bold text-slate-800">
|
||||
{plate.isSettlement && <span className="h-1.5 w-1.5 rounded-full bg-emerald-600 animate-pulse" />}
|
||||
<span>{plate.rwy}</span>
|
||||
{plate.isSettlement && (
|
||||
<span className="text-[9px] bg-teal-200 text-teal-800 px-1 rounded font-normal">
|
||||
{isEn ? "Settlement" : "结算"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div>TDZ: <strong>{plate.tdzTemp !== null ? `${plate.tdzTemp.toFixed(1)}°C` : "--"}</strong></div>
|
||||
<div>MID: <strong>{plate.midTemp !== null ? `${plate.midTemp.toFixed(1)}°C` : "--"}</strong></div>
|
||||
<div>END: <strong>{plate.endTemp !== null ? `${plate.endTemp.toFixed(1)}°C` : "--"}</strong></div>
|
||||
<div>max: <strong>{plate.maxTemp !== null ? `${plate.maxTemp.toFixed(1)}°C` : "--"}</strong></div>
|
||||
<div>high: <strong>{plate.dailyHigh !== null ? `${plate.dailyHigh.toFixed(1)}°C` : "--"}</strong></div>
|
||||
<div className={clsx(plate.trend_15m !== null && plate.trend_15m > 0 ? "text-orange-600 font-bold" : "text-slate-500")}>
|
||||
15m: <strong>{plate.trend_15m !== null ? `${plate.trend_15m >= 0 ? "+" : ""}${plate.trend_15m.toFixed(1)}°C` : "--"}</strong>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{timeframe === "1D" && !compact && (
|
||||
<ModelCurvesSummary isEn={isEn} activeSeries={activeSeries} />
|
||||
)}
|
||||
|
||||
{/* Multi-model list (Only in 1D mode and when not compact) */}
|
||||
{timeframe === "1D" && !compact && activeSeries.some((s) => s.key.startsWith("model_curve_")) && (
|
||||
<div className="shrink-0 border-b border-slate-200 bg-white px-4 py-2">
|
||||
<div className="flex flex-wrap gap-x-6 gap-y-1 text-[11px]">
|
||||
<span className="font-black text-slate-500 uppercase mr-2">
|
||||
{isEn ? "Models:" : "多模型:"}
|
||||
</span>
|
||||
{activeSeries
|
||||
.filter((s) => s.key.startsWith("model_curve_"))
|
||||
.map((s) => {
|
||||
const stats = seriesStats(s.values);
|
||||
return (
|
||||
<span key={s.key} className="inline-flex items-center gap-1.5 font-mono">
|
||||
<span className="h-2 w-2 rounded-full shrink-0" style={{ backgroundColor: s.color }} />
|
||||
<span className="text-slate-700 font-bold">{s.label}</span>
|
||||
<span className="text-slate-500">{temp(stats.latest)}</span>
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Chart */}
|
||||
<div className="relative min-h-[240px] flex-1 p-2">
|
||||
{/* Interactive legend */}
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-1.5 px-3 py-1.5 text-[11px] border-b border-[#e2e8f0] bg-white">
|
||||
{chartSeries.length > 1 &&
|
||||
chartSeries
|
||||
.filter((s) => {
|
||||
const isIndividualRunway = s.key.startsWith("runway_") && s.key !== "runway_max";
|
||||
if (showRunwayDetails) {
|
||||
return s.key !== "runway_max";
|
||||
} else {
|
||||
return !isIndividualRunway;
|
||||
}
|
||||
})
|
||||
.map((s) => (
|
||||
<button
|
||||
key={s.key}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setUserToggledKeys((prev) => ({
|
||||
...prev,
|
||||
[s.key]: !isSeriesVisible(s.key),
|
||||
}));
|
||||
}}
|
||||
className={clsx(
|
||||
"inline-flex items-center gap-1.5 font-mono cursor-pointer transition-opacity hover:opacity-80",
|
||||
!isSeriesVisible(s.key) && "opacity-40 line-through"
|
||||
)}
|
||||
>
|
||||
<span className="h-2 w-2 rounded-full shrink-0" style={{ backgroundColor: s.color }} />
|
||||
<span className="text-slate-700 font-bold">{s.label}</span>
|
||||
</button>
|
||||
))}
|
||||
|
||||
{/* "Show Runway Details" toggle switch */}
|
||||
{hasRunwayData && (
|
||||
<label className="inline-flex items-center gap-1.5 ml-auto cursor-pointer text-slate-600 hover:text-slate-800 font-semibold select-none">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={showRunwayDetails}
|
||||
onChange={(e) => setShowRunwayDetails(e.target.checked)}
|
||||
className="rounded border-slate-300 text-teal-600 focus:ring-teal-500 h-3.5 w-3.5 cursor-pointer"
|
||||
/>
|
||||
<span>{isEn ? "Show Runway Details" : "显示跑道明细"}</span>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
<ResponsiveContainer
|
||||
width="100%"
|
||||
height="100%"
|
||||
minWidth={1}
|
||||
minHeight={220}
|
||||
initialDimension={{ width: 1, height: 220 }}
|
||||
>
|
||||
<ReComposedChart
|
||||
data={zoomedData}
|
||||
margin={{ top: 16, right: compact ? 20 : 44, left: 4, bottom: 8 }}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
onDoubleClick={() => setZoomRange(null)}
|
||||
>
|
||||
<CartesianGrid stroke="#dbe6ef" strokeDasharray="2 2" />
|
||||
<XAxis
|
||||
dataKey="label"
|
||||
tick={{ fontSize: 9, fill: "#64748b" }}
|
||||
tickLine={false}
|
||||
axisLine={{ stroke: "#cbd5e1" }}
|
||||
interval={Math.max(0, Math.floor(zoomedData.length / (compact ? 6 : 10)))}
|
||||
minTickGap={compact ? 24 : 32}
|
||||
/>
|
||||
<YAxis
|
||||
orientation="right"
|
||||
tick={{ fontSize: 9, fill: "#64748b" }}
|
||||
tickFormatter={(v) => `${Number(v).toFixed(0)}°`}
|
||||
axisLine={{ stroke: "#cbd5e1" }}
|
||||
tickLine={false}
|
||||
domain={chartDomain}
|
||||
ticks={intDegreeTicks ?? undefined}
|
||||
/>
|
||||
{timeframe === "1D" && cityThresholds.map((t, idx) => {
|
||||
const isSelected = row && (Number(row.target_threshold ?? row.target_value) === t.threshold);
|
||||
const labelText = isEn
|
||||
? `${t.kind === "gte" ? "≥" : "≤"} ${t.threshold.toFixed(1)}° [${t.isBreached ? "Excluded" : "Active"}]`
|
||||
: `${t.kind === "gte" ? "≥" : "≤"} ${t.threshold.toFixed(1)}° [${t.isBreached ? "已排除" : "活跃"}]`;
|
||||
|
||||
return (
|
||||
<ReferenceLine
|
||||
key={idx}
|
||||
y={t.threshold}
|
||||
stroke={isSelected ? "#3b82f6" : t.isBreached ? "#ef4444" : "#f97316"}
|
||||
strokeDasharray={isSelected ? undefined : "4 4"}
|
||||
strokeWidth={isSelected ? 2 : 1}
|
||||
label={{
|
||||
value: compact ? undefined : labelText,
|
||||
fill: isSelected ? "#3b82f6" : t.isBreached ? "#ef4444" : "#f97316",
|
||||
fontSize: 9,
|
||||
position: isSelected ? "left" : "insideBottomRight",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<Tooltip
|
||||
filterNull={false}
|
||||
cursor={{ stroke: "#94a3b8", strokeWidth: 1 }}
|
||||
contentStyle={{
|
||||
border: "1px solid #cbd5e1",
|
||||
borderRadius: 4,
|
||||
fontSize: 11,
|
||||
boxShadow: "0 8px 24px rgba(15,23,42,.12)",
|
||||
}}
|
||||
content={(props) => (
|
||||
<TemperatureTooltipContent
|
||||
active={props.active}
|
||||
label={props.label}
|
||||
payload={props.payload as ReadonlyArray<{ payload?: Record<string, any> }> | undefined}
|
||||
data={zoomedData}
|
||||
series={activeSeries}
|
||||
/>
|
||||
)}
|
||||
formatter={(value: unknown) => {
|
||||
if (Array.isArray(value)) {
|
||||
const [low, high] = value;
|
||||
if (typeof low === "number" && typeof high === "number") {
|
||||
return `${low.toFixed(1)}° - ${high.toFixed(1)}°`;
|
||||
}
|
||||
}
|
||||
const num = Number(value);
|
||||
return Number.isFinite(num) ? `${num.toFixed(2)}°` : String(value);
|
||||
}}
|
||||
/>
|
||||
{/* Runway Temperature Band (low-high range area) */}
|
||||
{hasRunwayData && (
|
||||
<Area
|
||||
dataKey="runway_band"
|
||||
name={isEn ? "Runway Range" : "跑道区间"}
|
||||
stroke="none"
|
||||
fill="#009688"
|
||||
fillOpacity={showRunwayDetails ? 0.08 : 0.18}
|
||||
connectNulls={true}
|
||||
isAnimationActive={false}
|
||||
/>
|
||||
)}
|
||||
{refAreaLeft !== null && refAreaRight !== null && zoomedData[refAreaLeft] && zoomedData[refAreaRight] && (
|
||||
<ReferenceArea
|
||||
x1={zoomedData[refAreaLeft].label}
|
||||
x2={zoomedData[refAreaRight].label}
|
||||
strokeOpacity={0.3}
|
||||
fill="#3b82f6"
|
||||
fillOpacity={0.15}
|
||||
/>
|
||||
)}
|
||||
{activeSeries.map((item) => (
|
||||
<Line
|
||||
key={item.key}
|
||||
type={item.curve ?? (item.smooth ? "monotone" : "linear")}
|
||||
dataKey={item.key}
|
||||
name={item.label}
|
||||
stroke={item.color}
|
||||
strokeWidth={item.featured ? 2.8 : 1.2}
|
||||
strokeDasharray={item.dashed ? "4 3" : undefined}
|
||||
dot={item.showDot ? { r: item.featured ? 3 : 2, fill: item.color, strokeWidth: 0 } : false}
|
||||
activeDot={{ r: item.featured ? 6 : 4 }}
|
||||
connectNulls={true}
|
||||
isAnimationActive={false}
|
||||
/>
|
||||
))}
|
||||
</ReComposedChart>
|
||||
</ResponsiveContainer>
|
||||
{isHourlyLoading && (
|
||||
<div className="pointer-events-none absolute inset-2 z-10 grid place-items-center bg-white/65 backdrop-blur-[1px]">
|
||||
<div className="flex items-center gap-2 rounded border border-slate-200 bg-white px-3 py-2 text-[11px] font-semibold text-slate-600 shadow-sm">
|
||||
<span className="h-3 w-3 animate-spin rounded-full border-2 border-slate-300 border-t-blue-500" />
|
||||
<span>{isEn ? "Loading chart" : "加载图表"}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<TemperatureChartCanvas
|
||||
isEn={isEn}
|
||||
compact={compact}
|
||||
timeframe={timeframe}
|
||||
row={row}
|
||||
cityThresholds={cityThresholds}
|
||||
chartSeries={chartSeries}
|
||||
activeSeries={activeSeries}
|
||||
zoomedData={zoomedData}
|
||||
chartDomain={chartDomain}
|
||||
intDegreeTicks={intDegreeTicks}
|
||||
hasRunwayData={hasRunwayData}
|
||||
showRunwayDetails={showRunwayDetails}
|
||||
isHourlyLoading={isHourlyLoading}
|
||||
refAreaLeft={refAreaLeft}
|
||||
refAreaRight={refAreaRight}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
onZoomReset={() => setZoomRange(null)}
|
||||
isSeriesVisible={isSeriesVisible}
|
||||
onSeriesToggle={(seriesKey) => {
|
||||
setUserToggledKeys((prev) => ({
|
||||
...prev,
|
||||
[seriesKey]: !isSeriesVisible(seriesKey),
|
||||
}));
|
||||
}}
|
||||
onShowRunwayDetailsChange={setShowRunwayDetails}
|
||||
/>
|
||||
</div>
|
||||
</Panel>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
"use client";
|
||||
|
||||
import { seriesStats, type EvidenceSeries } from "@/components/dashboard/scan-terminal/temperature-chart-logic";
|
||||
import { temp } from "@/components/dashboard/scan-terminal/utils";
|
||||
|
||||
export function ModelCurvesSummary({
|
||||
isEn,
|
||||
activeSeries,
|
||||
}: {
|
||||
isEn: boolean;
|
||||
activeSeries: EvidenceSeries[];
|
||||
}) {
|
||||
const modelSeries = activeSeries.filter((s) => s.key.startsWith("model_curve_"));
|
||||
if (!modelSeries.length) return null;
|
||||
|
||||
return (
|
||||
<div className="shrink-0 border-b border-slate-200 bg-white px-4 py-2">
|
||||
<div className="flex flex-wrap gap-x-6 gap-y-1 text-[11px]">
|
||||
<span className="font-black text-slate-500 uppercase mr-2">
|
||||
{isEn ? "Models:" : "多模型:"}
|
||||
</span>
|
||||
{modelSeries.map((s) => {
|
||||
const stats = seriesStats(s.values);
|
||||
return (
|
||||
<span key={s.key} className="inline-flex items-center gap-1.5 font-mono">
|
||||
<span className="h-2 w-2 rounded-full shrink-0" style={{ backgroundColor: s.color }} />
|
||||
<span className="text-slate-700 font-bold">{s.label}</span>
|
||||
<span className="text-slate-500">{temp(stats.latest)}</span>
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,285 @@
|
||||
"use client";
|
||||
|
||||
import clsx from "clsx";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
Area,
|
||||
CartesianGrid,
|
||||
ComposedChart as ReComposedChart,
|
||||
Line,
|
||||
ReferenceArea,
|
||||
ReferenceLine,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import type { ScanOpportunityRow } from "@/lib/dashboard-types";
|
||||
import { TemperatureTooltipContent } from "@/components/dashboard/scan-terminal/TemperatureTooltipContent";
|
||||
import type { EvidenceSeries } from "@/components/dashboard/scan-terminal/temperature-chart-logic";
|
||||
|
||||
type CityThreshold = {
|
||||
threshold: number;
|
||||
label: string;
|
||||
isBreached: boolean;
|
||||
kind: "gte" | "lte";
|
||||
};
|
||||
|
||||
export function TemperatureChartCanvas({
|
||||
isEn,
|
||||
compact,
|
||||
timeframe,
|
||||
row,
|
||||
cityThresholds,
|
||||
chartSeries,
|
||||
activeSeries,
|
||||
zoomedData,
|
||||
chartDomain,
|
||||
intDegreeTicks,
|
||||
hasRunwayData,
|
||||
showRunwayDetails,
|
||||
isHourlyLoading,
|
||||
refAreaLeft,
|
||||
refAreaRight,
|
||||
onMouseDown,
|
||||
onMouseMove,
|
||||
onMouseUp,
|
||||
onZoomReset,
|
||||
isSeriesVisible,
|
||||
onSeriesToggle,
|
||||
onShowRunwayDetailsChange,
|
||||
}: {
|
||||
isEn: boolean;
|
||||
compact: boolean;
|
||||
timeframe: string;
|
||||
row: ScanOpportunityRow | null;
|
||||
cityThresholds: CityThreshold[];
|
||||
chartSeries: EvidenceSeries[];
|
||||
activeSeries: EvidenceSeries[];
|
||||
zoomedData: Array<Record<string, any>>;
|
||||
chartDomain: [number, number] | ["auto", "auto"];
|
||||
intDegreeTicks: number[] | null;
|
||||
hasRunwayData: boolean;
|
||||
showRunwayDetails: boolean;
|
||||
isHourlyLoading: boolean;
|
||||
refAreaLeft: number | null;
|
||||
refAreaRight: number | null;
|
||||
onMouseDown: (event: any) => void;
|
||||
onMouseMove: (event: any) => void;
|
||||
onMouseUp: () => void;
|
||||
onZoomReset: () => void;
|
||||
isSeriesVisible: (seriesKey: string) => boolean;
|
||||
onSeriesToggle: (seriesKey: string) => void;
|
||||
onShowRunwayDetailsChange: (value: boolean) => void;
|
||||
}) {
|
||||
const chartHostRef = useRef<HTMLDivElement | null>(null);
|
||||
const [chartSize, setChartSize] = useState({ width: 0, height: 0 });
|
||||
|
||||
useEffect(() => {
|
||||
const host = chartHostRef.current;
|
||||
if (!host) return;
|
||||
|
||||
let frame = 0;
|
||||
const measure = () => {
|
||||
cancelAnimationFrame(frame);
|
||||
frame = requestAnimationFrame(() => {
|
||||
const rect = host.getBoundingClientRect();
|
||||
const width = Math.floor(rect.width);
|
||||
const height = Math.floor(rect.height);
|
||||
setChartSize((prev) => {
|
||||
if (prev.width === width && prev.height === height) return prev;
|
||||
return { width, height };
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
measure();
|
||||
|
||||
if (typeof ResizeObserver !== "undefined") {
|
||||
const observer = new ResizeObserver(measure);
|
||||
observer.observe(host);
|
||||
return () => {
|
||||
cancelAnimationFrame(frame);
|
||||
observer.disconnect();
|
||||
};
|
||||
}
|
||||
|
||||
window.addEventListener("resize", measure);
|
||||
return () => {
|
||||
cancelAnimationFrame(frame);
|
||||
window.removeEventListener("resize", measure);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const canRenderChart = chartSize.width > 0 && chartSize.height > 0;
|
||||
const chartWidth = Math.max(1, chartSize.width);
|
||||
const chartHeight = Math.max(220, chartSize.height);
|
||||
|
||||
return (
|
||||
<div className="relative flex min-h-[240px] flex-1 flex-col p-2">
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-1.5 px-3 py-1.5 text-[11px] border-b border-[#e2e8f0] bg-white">
|
||||
{chartSeries.length > 1 &&
|
||||
chartSeries
|
||||
.filter((s) => {
|
||||
const isIndividualRunway = s.key.startsWith("runway_") && s.key !== "runway_max";
|
||||
if (showRunwayDetails) {
|
||||
return s.key !== "runway_max";
|
||||
}
|
||||
return !isIndividualRunway;
|
||||
})
|
||||
.map((s) => (
|
||||
<button
|
||||
key={s.key}
|
||||
type="button"
|
||||
onClick={() => onSeriesToggle(s.key)}
|
||||
className={clsx(
|
||||
"inline-flex items-center gap-1.5 font-mono cursor-pointer transition-opacity hover:opacity-80",
|
||||
!isSeriesVisible(s.key) && "opacity-40 line-through"
|
||||
)}
|
||||
>
|
||||
<span className="h-2 w-2 rounded-full shrink-0" style={{ backgroundColor: s.color }} />
|
||||
<span className="text-slate-700 font-bold">{s.label}</span>
|
||||
</button>
|
||||
))}
|
||||
|
||||
{hasRunwayData && (
|
||||
<label className="inline-flex items-center gap-1.5 ml-auto cursor-pointer text-slate-600 hover:text-slate-800 font-semibold select-none">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={showRunwayDetails}
|
||||
onChange={(e) => onShowRunwayDetailsChange(e.target.checked)}
|
||||
className="rounded border-slate-300 text-teal-600 focus:ring-teal-500 h-3.5 w-3.5 cursor-pointer"
|
||||
/>
|
||||
<span>{isEn ? "Show Runway Details" : "显示跑道明细"}</span>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
<div ref={chartHostRef} className="relative min-h-[220px] flex-1">
|
||||
{canRenderChart && (
|
||||
<ReComposedChart
|
||||
width={chartWidth}
|
||||
height={chartHeight}
|
||||
data={zoomedData}
|
||||
margin={{ top: 16, right: compact ? 20 : 44, left: 4, bottom: 8 }}
|
||||
onMouseDown={onMouseDown}
|
||||
onMouseMove={onMouseMove}
|
||||
onMouseUp={onMouseUp}
|
||||
onDoubleClick={onZoomReset}
|
||||
>
|
||||
<CartesianGrid stroke="#dbe6ef" strokeDasharray="2 2" />
|
||||
<XAxis
|
||||
dataKey="label"
|
||||
tick={{ fontSize: 9, fill: "#64748b" }}
|
||||
tickLine={false}
|
||||
axisLine={{ stroke: "#cbd5e1" }}
|
||||
interval={Math.max(0, Math.floor(zoomedData.length / (compact ? 6 : 10)))}
|
||||
minTickGap={compact ? 24 : 32}
|
||||
/>
|
||||
<YAxis
|
||||
orientation="right"
|
||||
tick={{ fontSize: 9, fill: "#64748b" }}
|
||||
tickFormatter={(v) => `${Number(v).toFixed(0)}°`}
|
||||
axisLine={{ stroke: "#cbd5e1" }}
|
||||
tickLine={false}
|
||||
domain={chartDomain}
|
||||
ticks={intDegreeTicks ?? undefined}
|
||||
/>
|
||||
{timeframe === "1D" && cityThresholds.map((t, idx) => {
|
||||
const isSelected = row && (Number(row.target_threshold ?? row.target_value) === t.threshold);
|
||||
const labelText = isEn
|
||||
? `${t.kind === "gte" ? "≥" : "≤"} ${t.threshold.toFixed(1)}° [${t.isBreached ? "Excluded" : "Active"}]`
|
||||
: `${t.kind === "gte" ? "≥" : "≤"} ${t.threshold.toFixed(1)}° [${t.isBreached ? "已排除" : "活跃"}]`;
|
||||
|
||||
return (
|
||||
<ReferenceLine
|
||||
key={idx}
|
||||
y={t.threshold}
|
||||
stroke={isSelected ? "#3b82f6" : t.isBreached ? "#ef4444" : "#f97316"}
|
||||
strokeDasharray={isSelected ? undefined : "4 4"}
|
||||
strokeWidth={isSelected ? 2 : 1}
|
||||
label={{
|
||||
value: compact ? undefined : labelText,
|
||||
fill: isSelected ? "#3b82f6" : t.isBreached ? "#ef4444" : "#f97316",
|
||||
fontSize: 9,
|
||||
position: isSelected ? "left" : "insideBottomRight",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<Tooltip
|
||||
filterNull={false}
|
||||
cursor={{ stroke: "#94a3b8", strokeWidth: 1 }}
|
||||
contentStyle={{
|
||||
border: "1px solid #cbd5e1",
|
||||
borderRadius: 4,
|
||||
fontSize: 11,
|
||||
boxShadow: "0 8px 24px rgba(15,23,42,.12)",
|
||||
}}
|
||||
content={(props) => (
|
||||
<TemperatureTooltipContent
|
||||
active={props.active}
|
||||
label={props.label}
|
||||
payload={props.payload as ReadonlyArray<{ payload?: Record<string, any> }> | undefined}
|
||||
data={zoomedData}
|
||||
series={activeSeries}
|
||||
/>
|
||||
)}
|
||||
formatter={(value: unknown) => {
|
||||
if (Array.isArray(value)) {
|
||||
const [low, high] = value;
|
||||
if (typeof low === "number" && typeof high === "number") {
|
||||
return `${low.toFixed(1)}° - ${high.toFixed(1)}°`;
|
||||
}
|
||||
}
|
||||
const num = Number(value);
|
||||
return Number.isFinite(num) ? `${num.toFixed(2)}°` : String(value);
|
||||
}}
|
||||
/>
|
||||
{hasRunwayData && (
|
||||
<Area
|
||||
dataKey="runway_band"
|
||||
name={isEn ? "Runway Range" : "跑道区间"}
|
||||
stroke="none"
|
||||
fill="#009688"
|
||||
fillOpacity={showRunwayDetails ? 0.08 : 0.18}
|
||||
connectNulls={true}
|
||||
isAnimationActive={false}
|
||||
/>
|
||||
)}
|
||||
{refAreaLeft !== null && refAreaRight !== null && zoomedData[refAreaLeft] && zoomedData[refAreaRight] && (
|
||||
<ReferenceArea
|
||||
x1={zoomedData[refAreaLeft].label}
|
||||
x2={zoomedData[refAreaRight].label}
|
||||
strokeOpacity={0.3}
|
||||
fill="#3b82f6"
|
||||
fillOpacity={0.15}
|
||||
/>
|
||||
)}
|
||||
{activeSeries.map((item) => (
|
||||
<Line
|
||||
key={item.key}
|
||||
type={item.curve ?? (item.smooth ? "monotone" : "linear")}
|
||||
dataKey={item.key}
|
||||
name={item.label}
|
||||
stroke={item.color}
|
||||
strokeWidth={item.featured ? 2.8 : 1.2}
|
||||
strokeDasharray={item.dashed ? "4 3" : undefined}
|
||||
dot={item.showDot ? { r: item.featured ? 3 : 2, fill: item.color, strokeWidth: 0 } : false}
|
||||
activeDot={{ r: item.featured ? 6 : 4 }}
|
||||
connectNulls={true}
|
||||
isAnimationActive={false}
|
||||
/>
|
||||
))}
|
||||
</ReComposedChart>
|
||||
)}
|
||||
</div>
|
||||
{isHourlyLoading && (
|
||||
<div className="pointer-events-none absolute inset-2 z-10 grid place-items-center bg-white/65 backdrop-blur-[1px]">
|
||||
<div className="flex items-center gap-2 rounded border border-slate-200 bg-white px-3 py-2 text-[11px] font-semibold text-slate-600 shadow-sm">
|
||||
<span className="h-3 w-3 animate-spin rounded-full border-2 border-slate-300 border-t-blue-500" />
|
||||
<span>{isEn ? "Loading chart" : "加载图表"}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
"use client";
|
||||
|
||||
import clsx from "clsx";
|
||||
|
||||
type RunwayPlate = {
|
||||
rwy: string;
|
||||
isSettlement: boolean;
|
||||
tdzTemp: number | null;
|
||||
midTemp: number | null;
|
||||
endTemp: number | null;
|
||||
maxTemp: number | null;
|
||||
dailyHigh: number | null;
|
||||
trend_15m: number | null;
|
||||
};
|
||||
|
||||
export function TemperatureRunwayDetails({
|
||||
isEn,
|
||||
plates,
|
||||
}: {
|
||||
isEn: boolean;
|
||||
plates: RunwayPlate[];
|
||||
}) {
|
||||
if (!plates.length) return null;
|
||||
|
||||
return (
|
||||
<div className="shrink-0 border-b border-slate-200 bg-[#f8fafc] px-3 py-2">
|
||||
<div className="flex items-center justify-between text-[11px] font-black text-slate-700 mb-1.5 uppercase">
|
||||
<span>{isEn ? "Runway Observations" : "跑道观测"}</span>
|
||||
{plates.some((p) => p.trend_15m !== null && p.trend_15m > 0 && !p.isSettlement) && (
|
||||
<span className="text-[10px] bg-amber-50 text-amber-700 border border-amber-200 px-1.5 py-0.5 rounded font-sans">
|
||||
{isEn ? "Non-settlement Runway Warming Alert" : "非结算跑道升温提醒"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid gap-1">
|
||||
{plates.map((plate) => (
|
||||
<div
|
||||
key={plate.rwy}
|
||||
className={clsx(
|
||||
"grid grid-cols-7 gap-2 items-center border rounded px-2.5 py-1 text-[11px] font-mono",
|
||||
plate.isSettlement
|
||||
? "border-emerald-200 bg-emerald-50/50 text-emerald-950 font-bold"
|
||||
: "border-slate-200 bg-white text-slate-600"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-1.5 font-sans font-bold text-slate-800">
|
||||
{plate.isSettlement && <span className="h-1.5 w-1.5 rounded-full bg-emerald-600 animate-pulse" />}
|
||||
<span>{plate.rwy}</span>
|
||||
{plate.isSettlement && (
|
||||
<span className="text-[9px] bg-teal-200 text-teal-800 px-1 rounded font-normal">
|
||||
{isEn ? "Settlement" : "结算"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div>TDZ: <strong>{plate.tdzTemp !== null ? `${plate.tdzTemp.toFixed(1)}°C` : "--"}</strong></div>
|
||||
<div>MID: <strong>{plate.midTemp !== null ? `${plate.midTemp.toFixed(1)}°C` : "--"}</strong></div>
|
||||
<div>END: <strong>{plate.endTemp !== null ? `${plate.endTemp.toFixed(1)}°C` : "--"}</strong></div>
|
||||
<div>max: <strong>{plate.maxTemp !== null ? `${plate.maxTemp.toFixed(1)}°C` : "--"}</strong></div>
|
||||
<div>high: <strong>{plate.dailyHigh !== null ? `${plate.dailyHigh.toFixed(1)}°C` : "--"}</strong></div>
|
||||
<div className={clsx(plate.trend_15m !== null && plate.trend_15m > 0 ? "text-orange-600 font-bold" : "text-slate-500")}>
|
||||
15m: <strong>{plate.trend_15m !== null ? `${plate.trend_15m >= 0 ? "+" : ""}${plate.trend_15m.toFixed(1)}°C` : "--"}</strong>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,187 @@
|
||||
"use client";
|
||||
|
||||
import clsx from "clsx";
|
||||
import { temp } from "@/components/dashboard/scan-terminal/utils";
|
||||
|
||||
export function TemperatureStatsBars({
|
||||
isEn,
|
||||
compact,
|
||||
timeframe,
|
||||
runwayHeaderLabel,
|
||||
metarHeaderLabel,
|
||||
runwayHighLabel,
|
||||
metarHighLabel,
|
||||
isShenzhen,
|
||||
displayRunwayTemp,
|
||||
observedHighMetar,
|
||||
observedHighRunway,
|
||||
wundergroundDailyHigh,
|
||||
debVal,
|
||||
modelMin,
|
||||
modelMax,
|
||||
spread,
|
||||
spreadLabel,
|
||||
spreadLabelEn,
|
||||
formattedUpdateTime,
|
||||
}: {
|
||||
isEn: boolean;
|
||||
compact: boolean;
|
||||
timeframe: string;
|
||||
runwayHeaderLabel: string;
|
||||
metarHeaderLabel: string;
|
||||
runwayHighLabel: string;
|
||||
metarHighLabel: string;
|
||||
isShenzhen: boolean;
|
||||
displayRunwayTemp: number | null;
|
||||
observedHighMetar: number | null;
|
||||
observedHighRunway: number | null;
|
||||
wundergroundDailyHigh: number | null;
|
||||
debVal: number | null;
|
||||
modelMin: number | null;
|
||||
modelMax: number | null;
|
||||
spread: number | null;
|
||||
spreadLabel: string;
|
||||
spreadLabelEn: string;
|
||||
formattedUpdateTime: string;
|
||||
}) {
|
||||
if (compact) {
|
||||
return (
|
||||
<div className="shrink-0 border-b border-slate-200 bg-white px-3 py-1.5 flex items-center justify-between">
|
||||
{timeframe === "1D" ? (
|
||||
<div className="flex items-center gap-4 text-[11px]">
|
||||
<span className="font-semibold text-slate-500">
|
||||
{isEn ? "Runway" : runwayHeaderLabel}:{" "}
|
||||
<strong className="text-[#009688] font-mono">{temp(displayRunwayTemp)}</strong>
|
||||
</span>
|
||||
<span className="text-slate-300">|</span>
|
||||
<span className="font-semibold text-slate-500">
|
||||
{isEn ? "METAR" : (isShenzhen ? "当日最高" : metarHeaderLabel)}:{" "}
|
||||
<strong className="text-blue-600 font-mono">{temp(observedHighMetar)}</strong>
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-4 text-[11px]">
|
||||
<span className="font-semibold text-slate-500">
|
||||
DEB: <strong className="text-orange-600 font-mono">{temp(debVal)}</strong>
|
||||
</span>
|
||||
{modelMin !== null && modelMax !== null && (
|
||||
<>
|
||||
<span className="text-slate-300">|</span>
|
||||
<span className="font-semibold text-slate-500">
|
||||
{isEn ? "Models" : "多模型"}:{" "}
|
||||
<strong className="text-slate-700 font-mono">
|
||||
{temp(modelMin)} - {temp(modelMax)}
|
||||
</strong>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-[10px] text-slate-400 font-mono">
|
||||
{timeframe === "1D" && formattedUpdateTime.includes(" ") ? formattedUpdateTime.split(" ")[1].slice(0, 5) : ""}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="shrink-0 border-b border-slate-200 bg-white px-4 py-3">
|
||||
<div className="flex justify-between items-center gap-6 mb-3">
|
||||
{timeframe === "1D" ? (
|
||||
<div className="flex items-center gap-12">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider">
|
||||
{isEn ? "Runway Live (1m)" : `${runwayHeaderLabel}`}
|
||||
</span>
|
||||
<span className="text-2xl font-bold font-mono text-[#009688] mt-1">
|
||||
{temp(displayRunwayTemp)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider">
|
||||
{isEn ? "METAR Settlement · Daily High" : `${metarHeaderLabel} · 当日最高`}
|
||||
</span>
|
||||
<span className="text-2xl font-bold font-mono text-blue-600 mt-1">
|
||||
{temp(observedHighMetar)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-12">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider">
|
||||
DEB Max
|
||||
</span>
|
||||
<span className="text-2xl font-bold font-mono text-orange-600 mt-1">
|
||||
{temp(debVal)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider">
|
||||
{isEn ? "Model Range" : "多模型区间"}
|
||||
</span>
|
||||
<span className="text-2xl font-bold font-mono text-slate-700 mt-1">
|
||||
{modelMin !== null && modelMax !== null ? `${temp(modelMin)} - ${temp(modelMax)}` : "--"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="hidden sm:flex flex-col items-end text-right">
|
||||
<span className="text-[10px] text-slate-400 uppercase font-semibold">
|
||||
{isEn ? "Daily Peak" : "当日最高气温"}
|
||||
</span>
|
||||
<div className="mt-1 flex items-center gap-2 text-xs font-mono text-slate-600">
|
||||
<span>{isEn ? "Runway" : runwayHighLabel}: <strong className="text-[#009688]">{temp(observedHighRunway)}</strong></span>
|
||||
<span>|</span>
|
||||
<span>{isEn ? "METAR" : metarHighLabel}: <strong className="text-blue-600">{temp(observedHighMetar)}</strong></span>
|
||||
{wundergroundDailyHigh !== null && (
|
||||
<>
|
||||
<span>|</span>
|
||||
<span>WU: <strong className="text-purple-600">{temp(wundergroundDailyHigh)}</strong></span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{timeframe === "1D" && (
|
||||
<div className="grid grid-cols-4 gap-4 border-t border-slate-100 pt-3 text-xs font-mono text-slate-700 bg-slate-50/50 -mx-4 px-4 rounded-b-md">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-[10px] text-slate-400 uppercase font-semibold">
|
||||
{isEn ? "Model Range" : "模型区间"}
|
||||
</span>
|
||||
<strong className="text-slate-800 font-bold">
|
||||
{modelMin !== null && modelMax !== null ? `${temp(modelMin)} - ${temp(modelMax)}` : "--"}
|
||||
</strong>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-[10px] text-slate-400 uppercase font-semibold">
|
||||
DEB
|
||||
</span>
|
||||
<strong className="text-blue-600 font-bold">
|
||||
{temp(debVal)}
|
||||
</strong>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-[10px] text-slate-400 uppercase font-semibold">
|
||||
{isEn ? "Spread" : "分歧"}
|
||||
</span>
|
||||
<strong className={clsx("font-bold", spreadLabel === "高分歧" ? "text-amber-600" : "text-slate-600")}>
|
||||
{spread !== null ? `${spread.toFixed(1)}°C` : "--"}
|
||||
{spreadLabel && ` · ${isEn ? spreadLabelEn : spreadLabel}`}
|
||||
</strong>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-[10px] text-slate-400 uppercase font-semibold">
|
||||
{isEn ? "Updated" : "更新时间"}
|
||||
</span>
|
||||
<strong className="text-slate-800 font-bold">
|
||||
{formattedUpdateTime}
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
"use client";
|
||||
|
||||
import { validNumber, type EvidenceSeries } from "@/components/dashboard/scan-terminal/temperature-chart-logic";
|
||||
|
||||
type TooltipSeries = Pick<EvidenceSeries, "key" | "label" | "color">;
|
||||
|
||||
function nearestSeriesValue(
|
||||
data: Array<Record<string, any>>,
|
||||
seriesKey: string,
|
||||
activeIndex: number,
|
||||
) {
|
||||
if (!data.length || activeIndex < 0) return null;
|
||||
for (let offset = 0; offset < data.length; offset += 1) {
|
||||
const left = activeIndex - offset;
|
||||
if (left >= 0) {
|
||||
const value = validNumber(data[left]?.[seriesKey]);
|
||||
if (value !== null) return value;
|
||||
}
|
||||
const right = activeIndex + offset;
|
||||
if (right < data.length) {
|
||||
const value = validNumber(data[right]?.[seriesKey]);
|
||||
if (value !== null) return value;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function TemperatureTooltipContent({
|
||||
active,
|
||||
label,
|
||||
payload,
|
||||
data,
|
||||
series,
|
||||
}: {
|
||||
active?: boolean;
|
||||
label?: string | number;
|
||||
payload?: ReadonlyArray<{ payload?: Record<string, any> }>;
|
||||
data: Array<Record<string, any>>;
|
||||
series: TooltipSeries[];
|
||||
}) {
|
||||
if (!active || !payload?.length || !series.length) return null;
|
||||
const activePoint = payload[0]?.payload || {};
|
||||
const activeIndex = data.findIndex((point) => point.ts === activePoint.ts);
|
||||
const rows = series
|
||||
.map((item) => {
|
||||
const directValue = validNumber(activePoint[item.key]);
|
||||
const value = directValue ?? nearestSeriesValue(data, item.key, activeIndex);
|
||||
return value === null ? null : { ...item, value };
|
||||
})
|
||||
.filter((item): item is TooltipSeries & { value: number } => item !== null);
|
||||
if (!rows.length) return null;
|
||||
|
||||
return (
|
||||
<div className="rounded border border-slate-200 bg-white px-2.5 py-2 text-[11px] shadow-lg">
|
||||
<div className="mb-1 font-mono text-slate-500">{label}</div>
|
||||
<div className="grid gap-1">
|
||||
{rows.slice(0, 8).map((item) => (
|
||||
<div key={item.key} className="flex min-w-[140px] items-center justify-between gap-4">
|
||||
<span className="inline-flex items-center gap-1.5 text-slate-700">
|
||||
<span className="h-2 w-2 rounded-full" style={{ backgroundColor: item.color }} />
|
||||
<span className="font-semibold">{item.label}</span>
|
||||
</span>
|
||||
<strong className="font-mono text-slate-900">{item.value.toFixed(2)}°</strong>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -87,6 +87,16 @@ export function runTests() {
|
||||
assert(bffEventsRoute.includes("searchParams"), "Next.js SSE proxy must forward query parameters to FastAPI");
|
||||
|
||||
const chart = readFrontendFile("components", "dashboard", "scan-terminal", "LiveTemperatureThresholdChart.tsx");
|
||||
const chartCanvasPath = path.join(process.cwd(), "components", "dashboard", "scan-terminal", "TemperatureChartCanvas.tsx");
|
||||
const chartStatsPath = path.join(process.cwd(), "components", "dashboard", "scan-terminal", "TemperatureStatsBars.tsx");
|
||||
const chartRunwayPath = path.join(process.cwd(), "components", "dashboard", "scan-terminal", "TemperatureRunwayDetails.tsx");
|
||||
const chartTooltipPath = path.join(process.cwd(), "components", "dashboard", "scan-terminal", "TemperatureTooltipContent.tsx");
|
||||
assert(fs.existsSync(chartCanvasPath), "temperature chart Recharts canvas must live in TemperatureChartCanvas.tsx");
|
||||
assert(fs.existsSync(chartStatsPath), "temperature chart stat bars must live in TemperatureStatsBars.tsx");
|
||||
assert(fs.existsSync(chartRunwayPath), "temperature chart runway detail panel must live in TemperatureRunwayDetails.tsx");
|
||||
assert(fs.existsSync(chartTooltipPath), "temperature chart tooltip must live in TemperatureTooltipContent.tsx");
|
||||
const chartCanvas = fs.readFileSync(chartCanvasPath, "utf8");
|
||||
const chartTooltip = fs.readFileSync(chartTooltipPath, "utf8");
|
||||
const chartLogicPath = path.join(process.cwd(), "components", "dashboard", "scan-terminal", "temperature-chart-logic.ts");
|
||||
assert(fs.existsSync(chartLogicPath), "temperature chart pure data logic must live in temperature-chart-logic.ts");
|
||||
const chartLogic = fs.readFileSync(chartLogicPath, "utf8");
|
||||
@@ -99,11 +109,16 @@ export function runTests() {
|
||||
assert(chart.includes("useSseResyncVersion"), "temperature chart must resync full detail when SSE replay is incomplete");
|
||||
assert(chartLogic.includes("runway_points"), "temperature chart must merge v1 runway_points into runway history");
|
||||
assert(chart.includes("2 * 60_000"), "temperature chart must wait two minutes without patches before full-fetch fallback");
|
||||
assert(chart.includes("TemperatureTooltipContent"), "temperature chart must use a custom tooltip content component");
|
||||
assert(chart.includes("filterNull={false}"), "temperature chart tooltip must keep null-slot payload so hover works between sparse points");
|
||||
assert(chart.includes("nearestSeriesValue"), "temperature chart tooltip must fall back to nearest non-null value for connected sparse lines");
|
||||
assert(chart.includes("TemperatureChartCanvas"), "temperature chart shell must compose the extracted chart canvas");
|
||||
assert(chart.includes("TemperatureStatsBars"), "temperature chart shell must compose the extracted stat bars");
|
||||
assert(chart.includes("TemperatureRunwayDetails"), "temperature chart shell must compose the extracted runway panel");
|
||||
assert(!chart.includes("from \"recharts\""), "LiveTemperatureThresholdChart.tsx must not import Recharts directly");
|
||||
assert(!chart.includes("function TemperatureTooltipContent"), "LiveTemperatureThresholdChart.tsx must not define tooltip content inline");
|
||||
assert(chartCanvas.includes("TemperatureTooltipContent"), "temperature chart canvas must use a custom tooltip content component");
|
||||
assert(chartCanvas.includes("filterNull={false}"), "temperature chart tooltip must keep null-slot payload so hover works between sparse points");
|
||||
assert(chartTooltip.includes("nearestSeriesValue"), "temperature chart tooltip must fall back to nearest non-null value for connected sparse lines");
|
||||
assert(chart.includes("isHourlyLoading"), "temperature chart must keep a per-panel hourly loading state");
|
||||
assert(chart.includes("加载图表") && chart.includes("absolute inset-2"), "temperature chart must render an in-chart loading overlay");
|
||||
assert(chartCanvas.includes("加载图表") && chartCanvas.includes("absolute inset-2"), "temperature chart must render an in-chart loading overlay");
|
||||
assert(chart.includes("hasLoadedHourlyDetailRef"), "temperature chart must distinguish first load from background refreshes");
|
||||
const fallbackRefreshBlock = chart.match(/const refreshFullDetail = \(\) => \{[\s\S]*?\n \};/)?.[0] || "";
|
||||
assert(
|
||||
@@ -122,9 +137,15 @@ export function runTests() {
|
||||
chart.includes("targetResolution !== nextTargetResolution"),
|
||||
"temperature chart must guard target-resolution state updates to prevent render/update loops",
|
||||
);
|
||||
assert(!chartCanvas.includes("ResponsiveContainer"), "temperature chart canvas must not mount Recharts through ResponsiveContainer at 0x0");
|
||||
assert(chartCanvas.includes("ResizeObserver"), "temperature chart canvas must measure its host with ResizeObserver");
|
||||
assert(
|
||||
chart.includes("initialDimension") && chart.includes("minHeight={"),
|
||||
"temperature chart ResponsiveContainer must have stable initial/min dimensions to avoid zero-size resize loops",
|
||||
chartCanvas.includes("chartSize.width > 0") && chartCanvas.includes("chartSize.height > 0"),
|
||||
"temperature chart canvas must render Recharts only after positive host dimensions are measured",
|
||||
);
|
||||
assert(
|
||||
chartCanvas.includes("width={chartWidth}") && chartCanvas.includes("height={chartHeight}"),
|
||||
"temperature chart canvas must pass explicit positive width/height to Recharts",
|
||||
);
|
||||
assert(!chart.includes("3D"), "temperature chart UI must not expose a 3D/future-forecast mode");
|
||||
assert(!chart.includes("build3DayChartData"), "temperature chart component must not render future prediction curves");
|
||||
|
||||
Reference in New Issue
Block a user