982 lines
39 KiB
TypeScript
982 lines
39 KiB
TypeScript
"use client";
|
|
|
|
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 {
|
|
HOURLY_CACHE_TTL_MS,
|
|
_hourlyCache,
|
|
buildChartDomain,
|
|
buildFullDayChartData,
|
|
buildIntDegreeTicks,
|
|
buildModelSummaryCards,
|
|
buildRunwayPlates,
|
|
fetchHourlyForecastForCity,
|
|
getActiveTemperatureSeries,
|
|
getDebPeakWindowRange,
|
|
getLiveObservationLabels,
|
|
getObservationDisplayMetrics,
|
|
getVisibleTemperatureSeries,
|
|
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({
|
|
isEn,
|
|
row,
|
|
allRows = [],
|
|
compact = false,
|
|
onSearchClick,
|
|
onMaximize,
|
|
onClose,
|
|
isMaximized = false,
|
|
disableClose = false,
|
|
isActive = !compact,
|
|
slotIndex = 0,
|
|
}: {
|
|
isEn: boolean;
|
|
row: ScanOpportunityRow | null;
|
|
allRows?: ScanOpportunityRow[];
|
|
compact?: boolean;
|
|
onSearchClick?: () => void;
|
|
onMaximize?: () => void;
|
|
onClose?: () => void;
|
|
isMaximized?: boolean;
|
|
disableClose?: boolean;
|
|
isActive?: boolean;
|
|
slotIndex?: number;
|
|
}) {
|
|
const [hourly, setHourly] = useState<HourlyForecast>(null);
|
|
const city = String(row?.city || "").toLowerCase().trim();
|
|
const latestPatch = useLatestPatch(city);
|
|
const resyncVersion = useSseResyncVersion();
|
|
const timeframe = "1D";
|
|
const [viewMode, setViewMode] = useState<"auto" | "full">("auto");
|
|
const [userToggledKeys, setUserToggledKeys] = useState<Record<string, boolean>>({});
|
|
const [liveTemp, setLiveTemp] = useState<number | null>(null);
|
|
const [isHourlyLoading, setIsHourlyLoading] = useState(false);
|
|
const lastPatchAtRef = useRef<number>(Date.now());
|
|
const lastAppliedPatchRevisionRef = useRef<number>(0);
|
|
|
|
const [showRunwayDetails, setShowRunwayDetails] = useState<boolean>(true);
|
|
const [refAreaLeft, setRefAreaLeft] = useState<number | null>(null);
|
|
const [refAreaRight, setRefAreaRight] = useState<number | null>(null);
|
|
const [zoomRange, setZoomRange] = useState<[number, number] | null>(null);
|
|
const [targetResolution, setTargetResolution] = useState<string>("10m");
|
|
|
|
useEffect(() => {
|
|
setUserToggledKeys({});
|
|
setZoomRange(null);
|
|
setViewMode("auto");
|
|
setShowRunwayDetails(true);
|
|
lastPatchAtRef.current = Date.now();
|
|
lastAppliedPatchRevisionRef.current = 0;
|
|
}, [city]);
|
|
|
|
useEffect(() => {
|
|
if (!city) {
|
|
setIsHourlyLoading(false);
|
|
return;
|
|
}
|
|
|
|
const cacheKey = `${city}:${targetResolution}`;
|
|
// Check in-memory cache first
|
|
let cached = _hourlyCache.get(cacheKey);
|
|
if (!cached) {
|
|
// Fallback to session cache
|
|
const sessionEntry = readSessionCache(cacheKey);
|
|
if (sessionEntry) {
|
|
cached = sessionEntry;
|
|
_hourlyCache.set(cacheKey, sessionEntry);
|
|
}
|
|
}
|
|
|
|
if (cached && Date.now() - cached.ts < HOURLY_CACHE_TTL_MS) {
|
|
setHourly(cached.data);
|
|
setIsHourlyLoading(false);
|
|
return;
|
|
}
|
|
|
|
setHourly(seedHourlyForecastFromRow(row));
|
|
setIsHourlyLoading(true);
|
|
let cancelled = false;
|
|
|
|
// Prioritize active slots, stagger/delay background slots to optimize load performance
|
|
const delay = isActive ? 0 : (slotIndex ? 300 + slotIndex * 250 : 350);
|
|
|
|
const timer = setTimeout(() => {
|
|
fetchHourlyForecastForCity(city, { resolution: targetResolution })
|
|
.then((data) => {
|
|
if (cancelled || !data) return;
|
|
setHourly(data);
|
|
})
|
|
.catch(() => {})
|
|
.finally(() => {
|
|
if (!cancelled) setIsHourlyLoading(false);
|
|
});
|
|
}, delay);
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
clearTimeout(timer);
|
|
};
|
|
}, [city, row, isActive, slotIndex, targetResolution]);
|
|
|
|
useEffect(() => {
|
|
if (!latestPatch || latestPatch.revision <= lastAppliedPatchRevisionRef.current) return;
|
|
lastAppliedPatchRevisionRef.current = latestPatch.revision;
|
|
lastPatchAtRef.current = Date.now();
|
|
const tempValue = validNumber(latestPatch.changes.temp);
|
|
if (tempValue !== null) setLiveTemp(tempValue);
|
|
setHourly((prev) => mergePatchIntoHourly(prev ?? seedHourlyForecastFromRow(row), latestPatch));
|
|
}, [latestPatch, row]);
|
|
|
|
useEffect(() => {
|
|
if (!resyncVersion || !city) return;
|
|
let cancelled = false;
|
|
setIsHourlyLoading(true);
|
|
fetchHourlyForecastForCity(city, { ignoreCache: true, resolution: targetResolution })
|
|
.then((data) => {
|
|
if (cancelled || !data) return;
|
|
setHourly(data);
|
|
})
|
|
.catch(() => {})
|
|
.finally(() => {
|
|
if (!cancelled) setIsHourlyLoading(false);
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [resyncVersion, city, targetResolution]);
|
|
|
|
// ── SSE fallback: only full-fetch if a visible chart has seen no patch for 2 minutes ──
|
|
useEffect(() => {
|
|
if (!shouldPollLiveChart({ city, compact, isActive, isMaximized })) return;
|
|
let cancelled = false;
|
|
|
|
const refreshFullDetail = () => {
|
|
lastPatchAtRef.current = Date.now();
|
|
setIsHourlyLoading(true);
|
|
|
|
fetchHourlyForecastForCity(city, { ignoreCache: true })
|
|
.then((data) => {
|
|
if (cancelled || !data) return;
|
|
setHourly(data);
|
|
})
|
|
.catch(() => {})
|
|
.finally(() => {
|
|
if (!cancelled) setIsHourlyLoading(false);
|
|
});
|
|
};
|
|
|
|
const checkFallback = () => {
|
|
if (typeof document !== "undefined" && document.visibilityState === "hidden") return;
|
|
if (Date.now() - lastPatchAtRef.current < 2 * 60_000) return;
|
|
|
|
fetch(`/api/city/${encodeURIComponent(city)}/summary`)
|
|
.then((res) => (res.ok ? res.json() : null))
|
|
.then((payload) => {
|
|
if (cancelled || !payload) return;
|
|
const temp = validNumber(payload?.current?.temp);
|
|
if (temp !== null) setLiveTemp(temp);
|
|
})
|
|
.catch(() => {});
|
|
|
|
refreshFullDetail();
|
|
};
|
|
|
|
const id = setInterval(checkFallback, 60_000);
|
|
return () => {
|
|
cancelled = true;
|
|
clearInterval(id);
|
|
};
|
|
}, [city, compact, isActive, isMaximized]);
|
|
|
|
const { data, series } = useMemo(() => buildFullDayChartData(row, hourly, isEn), [row, hourly, isEn]);
|
|
|
|
const autoWindowRange = useMemo(
|
|
() => (viewMode === "auto" ? getDebPeakWindowRange(data, series) : null),
|
|
[data, series, viewMode],
|
|
);
|
|
const visibleRange = zoomRange ?? autoWindowRange;
|
|
|
|
const zoomedData = useMemo(() => {
|
|
if (!visibleRange || data.length === 0) return data;
|
|
const [start, end] = visibleRange;
|
|
return data.slice(start, end + 1);
|
|
}, [data, visibleRange]);
|
|
|
|
useEffect(() => {
|
|
if (visibleRange && data.length > 0) {
|
|
const zoomedData = data.slice(visibleRange[0], visibleRange[1] + 1);
|
|
if (zoomedData.length > 0) {
|
|
const startTs = zoomedData[0].ts;
|
|
const endTs = zoomedData[zoomedData.length - 1].ts;
|
|
if (endTs - startTs <= 2 * 60 * 60 * 1000) {
|
|
setTargetResolution("1m");
|
|
} else {
|
|
setTargetResolution("10m");
|
|
}
|
|
} else {
|
|
setTargetResolution("10m");
|
|
}
|
|
} else {
|
|
setTargetResolution("10m");
|
|
}
|
|
}, [visibleRange, data]);
|
|
|
|
const tzOffset = row?.tz_offset_seconds ?? 0;
|
|
const settlementObs = useMemo(() => {
|
|
let obs = normObs(hourly?.settlementTodayObs || row?.settlement_today_obs || row?.metar_context?.settlement_today_obs, tzOffset);
|
|
if (!obs.length && !hourly?.runwayPlateHistory) {
|
|
const mObs = normObs(hourly?.metarTodayObs || row?.metar_today_obs || row?.metar_context?.today_obs, tzOffset);
|
|
if (mObs.length > 0) {
|
|
obs = mObs;
|
|
}
|
|
}
|
|
return obs;
|
|
}, [row, hourly, tzOffset]);
|
|
|
|
const runwayPlates = useMemo(() => buildRunwayPlates(hourly?.amos, row, settlementObs), [hourly?.amos, row, settlementObs]);
|
|
const hasRunwayData = runwayPlates.length > 0;
|
|
const settlementPlate = useMemo(() => runwayPlates.find((p) => p.isSettlement), [runwayPlates]);
|
|
|
|
const chartSeries = useMemo(() => {
|
|
return series;
|
|
}, [series]);
|
|
|
|
const isSeriesVisible = (sKey: string) => {
|
|
if (userToggledKeys[sKey] !== undefined) {
|
|
return userToggledKeys[sKey];
|
|
}
|
|
return isTemperatureSeriesVisibleByDefault(city, sKey);
|
|
};
|
|
|
|
const activeSeries = useMemo(() => {
|
|
return getActiveTemperatureSeries(
|
|
city,
|
|
chartSeries,
|
|
userToggledKeys,
|
|
showRunwayDetails,
|
|
);
|
|
}, [chartSeries, userToggledKeys, city, showRunwayDetails]);
|
|
|
|
const {
|
|
isHKO,
|
|
isParis,
|
|
isShenzhen,
|
|
metarHeaderLabel,
|
|
metarHighLabel,
|
|
runwayHeaderLabel,
|
|
runwayHighLabel,
|
|
} = useMemo(() => getLiveObservationLabels(row, hourly), [row, hourly]);
|
|
|
|
const { currentRunwayTemp, observedHighMetar, observedHighRunway } = useMemo(
|
|
() => getObservationDisplayMetrics(row, hourly, settlementPlate),
|
|
[row, hourly, settlementPlate],
|
|
);
|
|
const displayRunwayTemp = liveTemp ?? currentRunwayTemp;
|
|
const wundergroundDailyHigh = validNumber(hourly?.airportCurrent?.max_so_far ?? hourly?.airportPrimary?.max_so_far) ?? null;
|
|
|
|
const localDateStr = row?.local_date || new Date().toISOString().slice(0, 10);
|
|
const modelSources = (row?.model_cluster_sources && Object.keys(row.model_cluster_sources).length > 0)
|
|
? row.model_cluster_sources
|
|
: (hourly?.multiModelDaily?.[localDateStr]?.models || null);
|
|
|
|
const modelValues = Object.values(modelSources || {})
|
|
.map(validNumber)
|
|
.filter((v): v is number => v !== null);
|
|
const modelMin = modelValues.length ? Math.min(...modelValues) : (row?.cluster_core_low ?? null);
|
|
const modelMax = modelValues.length ? Math.max(...modelValues) : (row?.cluster_core_high ?? null);
|
|
const debVal = validNumber(hourly?.debPrediction) ?? validNumber(row?.deb_prediction) ?? null;
|
|
|
|
const spread = (modelMax !== null && modelMin !== null) ? modelMax - modelMin : null;
|
|
const spreadLabel = spread === null ? "" : (spread <= 2.0 ? "低分歧" : (spread <= 4.0 ? "中等分歧" : "高分歧"));
|
|
const spreadLabelEn = spread === null ? "" : (spread <= 2.0 ? "Low" : (spread <= 4.0 ? "Medium" : "High"));
|
|
|
|
const formattedUpdateTime = useMemo(() => {
|
|
const nowUtc = Date.now();
|
|
const cityOffsetMs = (row?.tz_offset_seconds ?? 0) * 1000;
|
|
const cityNow = new Date(nowUtc + cityOffsetMs + new Date().getTimezoneOffset() * 60_000);
|
|
const pad = (n: number) => String(n).padStart(2, "0");
|
|
const y = cityNow.getFullYear();
|
|
const mo = pad(cityNow.getMonth() + 1);
|
|
const d = pad(cityNow.getDate());
|
|
const hh = pad(cityNow.getHours());
|
|
const mm = pad(cityNow.getMinutes());
|
|
const ss = pad(cityNow.getSeconds());
|
|
return `${y}-${mo}-${d} ${hh}:${mm}:${ss}`;
|
|
}, [row]);
|
|
|
|
const cityThresholds = useMemo(() => {
|
|
if (!row || !allRows || !allRows.length) return [];
|
|
const cityKey = String(row.city || "").toLowerCase().trim();
|
|
const sameCityRows = allRows.filter(
|
|
(r) => String(r.city || "").toLowerCase().trim() === cityKey
|
|
);
|
|
|
|
const seen = new Set<number>();
|
|
const list: { threshold: number; label: string; isBreached: boolean; kind: "gte" | "lte" }[] = [];
|
|
sameCityRows.forEach((r) => {
|
|
const t = Number(r.target_threshold ?? r.target_value ?? r.target_lower ?? r.target_upper);
|
|
if (!Number.isFinite(t) || seen.has(t)) return;
|
|
seen.add(t);
|
|
|
|
const maxTemp = Number(r.current_max_so_far ?? r.current_temp ?? 0);
|
|
const q = String(r.market_question || r.target_label || "").toLowerCase();
|
|
const kind: "gte" | "lte" = q.includes("below") || q.includes("under") || q.includes("lte") ? "lte" : "gte";
|
|
const isBreached = kind === "lte" ? maxTemp > t : maxTemp >= t;
|
|
|
|
list.push({
|
|
threshold: t,
|
|
label: r.target_label || `${t}°C`,
|
|
isBreached,
|
|
kind,
|
|
});
|
|
});
|
|
|
|
return list.sort((a, b) => a.threshold - b.threshold);
|
|
}, [row, allRows]);
|
|
|
|
const intDegreeTicks = useMemo(() => buildIntDegreeTicks(activeSeries, zoomedData), [activeSeries, zoomedData]);
|
|
const chartDomain = useMemo(
|
|
() => buildChartDomain(activeSeries, zoomedData),
|
|
[activeSeries, zoomedData],
|
|
);
|
|
|
|
const subtitle = row ? (isEn ? "Live & Forecast" : "实测与预测") : "";
|
|
|
|
const panelTitle = row ? (
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
type="button"
|
|
onClick={onSearchClick}
|
|
className={clsx(
|
|
"flex items-center gap-1.5 px-1.5 py-0.5 rounded text-left transition-colors font-bold text-slate-800 outline-none select-none",
|
|
onSearchClick ? "hover:bg-slate-200/80 cursor-pointer" : ""
|
|
)}
|
|
>
|
|
<span>{rowName(row)}</span>
|
|
{onSearchClick && <span className="text-[8px] text-slate-400">▼</span>}
|
|
</button>
|
|
<span className="text-slate-400 font-normal">·</span>
|
|
<span className="text-slate-500 font-normal">{subtitle}</span>
|
|
</div>
|
|
) : isEn ? (
|
|
"Temperature Chart"
|
|
) : (
|
|
"气温图表"
|
|
);
|
|
|
|
const timeframeActions = (
|
|
<div className="flex items-center gap-1.5">
|
|
{zoomRange && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setZoomRange(null)}
|
|
className="px-2 py-0.5 text-[9px] font-bold rounded bg-slate-100 hover:bg-slate-200 text-slate-700 border border-slate-300 shadow-sm transition-all cursor-pointer"
|
|
>
|
|
{isEn ? "Reset Zoom" : "重置缩放"}
|
|
</button>
|
|
)}
|
|
<div className="flex items-center gap-1 rounded bg-[#eef2f6] p-0.5 border border-slate-200">
|
|
{(["auto", "full"] as const).map((mode) => (
|
|
<button
|
|
key={mode}
|
|
type="button"
|
|
onClick={() => {
|
|
setViewMode(mode);
|
|
setZoomRange(null);
|
|
}}
|
|
className={clsx(
|
|
"px-2 py-0.5 text-[9px] font-bold rounded transition-all cursor-pointer",
|
|
viewMode === mode
|
|
? "bg-white text-blue-600 shadow-sm border border-slate-200/50"
|
|
: "text-slate-500 hover:text-slate-800"
|
|
)}
|
|
>
|
|
{mode === "auto" ? (isEn ? "Auto" : "高温") : (isEn ? "Full" : "全天")}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{(onMaximize || onClose) && (
|
|
<div className="flex items-center gap-1">
|
|
{onMaximize && (
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onMaximize();
|
|
}}
|
|
className="grid h-6 w-6 place-items-center rounded bg-white hover:bg-slate-50 border border-slate-200 text-slate-500 hover:text-slate-800 transition-colors shadow-sm"
|
|
title={isMaximized ? (isEn ? "Restore Grid" : "还原网格") : (isEn ? "Maximize" : "最大化")}
|
|
>
|
|
{isMaximized ? "❐" : "⛶"}
|
|
</button>
|
|
)}
|
|
{onClose && (
|
|
<button
|
|
type="button"
|
|
disabled={disableClose}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onClose();
|
|
}}
|
|
className={clsx(
|
|
"grid h-6 w-6 place-items-center rounded border transition-colors shadow-sm",
|
|
disableClose
|
|
? "bg-slate-50 text-slate-300 border-slate-100 cursor-not-allowed"
|
|
: "bg-white hover:bg-slate-50 border-slate-200 text-slate-500 hover:text-red-600"
|
|
)}
|
|
title={isEn ? "Clear Slot" : "清除槽位"}
|
|
>
|
|
✕
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
); const handleMouseDown = (e: any) => {
|
|
if (compact || !e) return;
|
|
if (typeof e.activeTooltipIndex === "number") {
|
|
setRefAreaLeft(e.activeTooltipIndex);
|
|
setRefAreaRight(e.activeTooltipIndex);
|
|
}
|
|
};
|
|
|
|
const handleMouseMove = (e: any) => {
|
|
if (compact || !e || refAreaLeft === null) return;
|
|
if (typeof e.activeTooltipIndex === "number") {
|
|
setRefAreaRight(e.activeTooltipIndex);
|
|
}
|
|
};
|
|
|
|
const handleMouseUp = () => {
|
|
if (refAreaLeft === null || refAreaRight === null) {
|
|
setRefAreaLeft(null);
|
|
setRefAreaRight(null);
|
|
return;
|
|
}
|
|
|
|
let leftIdx = refAreaLeft;
|
|
let rightIdx = refAreaRight;
|
|
|
|
if (leftIdx > rightIdx) {
|
|
[leftIdx, rightIdx] = [rightIdx, leftIdx];
|
|
}
|
|
|
|
if (rightIdx - leftIdx >= 1) {
|
|
const originalStartIndex = visibleRange ? visibleRange[0] : 0;
|
|
const newStart = originalStartIndex + leftIdx;
|
|
const newEnd = originalStartIndex + rightIdx;
|
|
setZoomRange([newStart, newEnd]);
|
|
}
|
|
|
|
setRefAreaLeft(null);
|
|
setRefAreaRight(null);
|
|
};
|
|
|
|
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>
|
|
|
|
{/* 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>
|
|
)}
|
|
|
|
{/* 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>
|
|
)}
|
|
|
|
{/* 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-0 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%">
|
|
<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>
|
|
</div>
|
|
</Panel>
|
|
);
|
|
}
|
|
|
|
export function __buildTemperatureChartDataForTest(
|
|
row: ScanOpportunityRow | null,
|
|
hourly: HourlyForecast,
|
|
_timeframe = "1D",
|
|
isEn = false,
|
|
) {
|
|
return buildFullDayChartData(row, hourly, isEn);
|
|
}
|
|
|
|
export const __isTemperatureSeriesVisibleByDefaultForTest = isTemperatureSeriesVisibleByDefault;
|
|
export const __getVisibleTemperatureSeriesForTest = getVisibleTemperatureSeries;
|
|
export const __getActiveTemperatureSeriesForTest = getActiveTemperatureSeries;
|
|
export const __getDebPeakWindowRangeForTest = getDebPeakWindowRange;
|
|
export const __getLiveObservationLabelsForTest = getLiveObservationLabels;
|
|
export const __getObservationDisplayMetricsForTest = getObservationDisplayMetrics;
|
|
export const __shouldPollLiveChartForTest = shouldPollLiveChart;
|
|
export const __mergePatchIntoHourlyForTest = mergePatchIntoHourly;
|