Add intraday pace card to today's analysis

This commit is contained in:
2569718930@qq.com
2026-04-08 10:33:58 +08:00
parent cdccd4a21a
commit b16bfae991
3 changed files with 415 additions and 0 deletions
@@ -27,6 +27,7 @@ import {
import {
getFutureModalView,
getAirportNarrative,
getTodayPaceView,
parseAiAnalysis,
getTemperatureChartData,
getWeatherSummary,
@@ -703,6 +704,10 @@ export function FutureForecastModal() {
"--score-position": scorePosition,
} as CSSProperties & { "--score-position": string };
const weatherSummary = getWeatherSummary(detail, locale);
const paceView = useMemo(
() => (isToday ? getTodayPaceView(detail, locale) : null),
[detail, isToday, locale],
);
const isNoaaSettlement =
detail.current?.settlement_source === "noaa" ||
detail.current?.settlement_source_label === "NOAA";
@@ -1281,6 +1286,94 @@ export function FutureForecastModal() {
</div>
</section>
{paceView ? (
<section className="future-v2-card future-v2-pace-card">
<h4 className="future-v2-card-title">
{locale === "en-US" ? "Current Pace" : "当前节奏 Pace"}
</h4>
<div className="future-v2-pace-head">
<span className="future-v2-pace-kicker">
{paceView.kicker}
</span>
<em
className={clsx(
"future-v2-signal-tag",
paceView.biasTone === "cold" && "cyan",
paceView.biasTone === "neutral" && "blue",
paceView.biasTone === "warm" && "amber",
)}
>
{paceView.badge}
</em>
</div>
<div
className={clsx(
"future-v2-pace-delta",
paceView.biasTone === "cold" && "cold",
paceView.biasTone === "neutral" && "neutral",
paceView.biasTone === "warm" && "warm",
)}
>
{paceView.deltaText}
</div>
<div className="future-v2-pace-summary">
{paceView.summary}
</div>
<div className="future-v2-pace-meter">
<span className="future-v2-pace-meter-midline" />
<span
className={clsx(
"future-v2-pace-meter-fill",
paceView.biasTone === "cold" && "cold",
paceView.biasTone === "neutral" && "neutral",
paceView.biasTone === "warm" && "warm",
)}
style={
{
"--pace-left": `${paceView.meterLeft}%`,
"--pace-width": `${paceView.meterWidth}%`,
} as CSSProperties & {
"--pace-left": string;
"--pace-width": string;
}
}
/>
</div>
<div className="future-v2-mini-grid future-v2-mini-grid-tight">
<div className="future-v2-mini-item">
<span>
{locale === "en-US" ? "Expected now" : "预期此刻"}
</span>
<strong>
{paceView.expectedNow.toFixed(1)}
{detail.temp_symbol}
</strong>
</div>
<div className="future-v2-mini-item">
<span>{paceView.observedLabel}</span>
<strong>
{paceView.observedNow.toFixed(1)}
{detail.temp_symbol}
</strong>
</div>
<div className="future-v2-mini-item">
<span>{paceView.paceAdjustedLabel}</span>
<strong>
{paceView.paceAdjustedHigh != null
? `${paceView.paceAdjustedHigh.toFixed(1)}${detail.temp_symbol}`
: "--"}
</strong>
</div>
<div className="future-v2-mini-item">
<span>
{locale === "en-US" ? "Peak window" : "峰值窗口"}
</span>
<strong>{paceView.peakWindowText}</strong>
</div>
</div>
</section>
) : null}
<section className="future-v2-card">
<h4 className="future-v2-card-title">
{locale === "en-US" ? "Current Metrics" : "当前指标"}