gavindiaz/PolyWeather
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve history peak scrolling and hide Ankara MGM observations

Browse Source
This commit is contained in:
2569718930@qq.com
2026-03-29 20:53:48 +08:00
parent 2b5d2cd801
commit 346836f561
3 changed files with 99 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/dashboard/Dashboard.module.css
+82
View File
@@ -2237,6 +2237,70 @@
height: 100% !important;
}
.root :global(.history-modal .history-peak-reference) {
margin-top: 18px;
padding: 14px 16px;
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 16px;
background: rgba(15, 23, 42, 0.42);
}
.root :global(.history-modal .history-peak-reference-title) {
color: var(--text-primary);
font-size: 14px;
font-weight: 700;
margin-bottom: 10px;
}
.root :global(.history-modal .history-peak-reference-scroll) {
display: grid;
gap: 8px;
max-height: 360px;
overflow-y: auto;
padding-right: 6px;
scrollbar-width: thin;
scrollbar-color: rgba(96, 165, 250, 0.5) rgba(15, 23, 42, 0.32);
}
.root :global(.history-modal .history-peak-reference-scroll::-webkit-scrollbar) {
width: 8px;
}
.root :global(.history-modal .history-peak-reference-scroll::-webkit-scrollbar-track) {
background: rgba(15, 23, 42, 0.32);
border-radius: 999px;
}
.root :global(.history-modal .history-peak-reference-scroll::-webkit-scrollbar-thumb) {
background: linear-gradient(
180deg,
rgba(56, 189, 248, 0.72) 0%,
rgba(96, 165, 250, 0.52) 100%
);
border-radius: 999px;
}
.root :global(.history-modal .history-peak-reference-row) {
display: grid;
grid-template-columns: minmax(72px, 88px) 1fr;
gap: 10px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
}
.root :global(.history-modal .history-peak-reference-date) {
color: var(--text-secondary);
font-size: 12px;
font-weight: 700;
}
.root :global(.history-modal .history-peak-reference-meta) {
color: var(--text-secondary);
font-size: 12px;
line-height: 1.7;
}
@media (max-width: 980px) {
.root :global(.history-modal .modal-body) {
padding: 18px;
@@ -2250,6 +2314,10 @@
.root :global(.history-modal .history-chart-wrapper) {
height: 360px;
}
.root :global(.history-modal .history-peak-reference-scroll) {
max-height: 320px;
}
}
@media (max-width: 640px) {
@@ -2291,6 +2359,20 @@
height: 300px;
padding: 8px 10px 6px;
}
.root :global(.history-modal .history-peak-reference) {
padding: 12px;
}
.root :global(.history-modal .history-peak-reference-scroll) {
max-height: 260px;
padding-right: 2px;
}
.root :global(.history-modal .history-peak-reference-row) {
grid-template-columns: 1fr;
gap: 6px;
}
}
/* ── Info Button ── */
frontend/components/dashboard/HistoryModal.tsx
+6 -49
View File
@@ -195,7 +195,6 @@ export function HistoryModal() {
row.actual_peak_time &&
row.deb_at_peak_minus_12h != null,
)
.slice(-8)
.reverse(),
[summary.recentData],
);
@@ -319,61 +318,19 @@ export function HistoryModal() {
</div>
{!isLoading && !error && <HistoryChart />}
{!isLoading && !error && settledPeakRows.length > 0 && (
<div
style={{
marginTop: "18px",
padding: "14px 16px",
border: "1px solid rgba(148, 163, 184, 0.14)",
borderRadius: "16px",
background: "rgba(15, 23, 42, 0.42)",
}}
>
<div
style={{
color: "var(--text-primary)",
fontSize: "14px",
fontWeight: 700,
marginBottom: "10px",
}}
>
<div className="history-peak-reference">
<div className="history-peak-reference-title">
{locale === "en-US"
? "Peak-12h DEB Reference (Approx.)"
: "峰值前 12 小时 DEB 参考（近似）"}
</div>
<div
style={{
display: "grid",
gap: "8px",
}}
>
<div className="history-peak-reference-scroll">
{settledPeakRows.map((row) => (
<div
key={row.date}
style={{
display: "grid",
gridTemplateColumns: "minmax(72px, 88px) 1fr",
gap: "10px",
padding: "10px 12px",
borderRadius: "12px",
background: "rgba(255,255,255,0.03)",
}}
>
<div
style={{
color: "var(--text-secondary)",
fontSize: "12px",
fontWeight: 700,
}}
>
<div key={row.date} className="history-peak-reference-row">
<div className="history-peak-reference-date">
{row.date}
</div>
<div
style={{
color: "var(--text-secondary)",
fontSize: "12px",
lineHeight: 1.7,
}}
>
<div className="history-peak-reference-meta">
<div>
{locale === "en-US" ? "Peak ref" : "峰值参考"}:{" "}
<span style={{ color: "var(--text-primary)" }}>
frontend/lib/dashboard-utils.ts
+11 -3
View File
@@ -182,6 +182,8 @@ export function getHeroMetaItems(detail: CityDetail, locale: Locale = "zh-CN") {
const current = detail.current || {};
const parts: string[] = [];
const sourceTag = getObservationSourceTag(detail);
const suppressAnkaraMgmObservation =
String(detail.name || "").trim().toLowerCase() === "ankara";
if (current.obs_time) {
const ageText =
@@ -211,7 +213,7 @@ export function getHeroMetaItems(detail: CityDetail, locale: Locale = "zh-CN") {
parts.push(`👁️ ${current.visibility_mi}mi`);
}
if (detail.mgm?.temp != null) {
if (!suppressAnkaraMgmObservation && detail.mgm?.temp != null) {
const timeMatch = detail.mgm.time?.match(/T?(\d{2}:\d{2})/);
const timeText = timeMatch ? ` @${timeMatch[1]}` : "";
parts.push(
@@ -251,6 +253,8 @@ export function getTemperatureChartData(
const hourly = detail.hourly || {};
const times = hourly.times || [];
const temps = hourly.temps || [];
const suppressAnkaraMgmObservation =
String(detail.name || "").trim().toLowerCase() === "ankara";
if (!times.length) return null;
@@ -354,7 +358,11 @@ export function getTemperatureChartData(
});
const mgmPoints = new Array(times.length).fill(null);
if (detail.mgm?.temp != null && detail.mgm?.time) {
if (
!suppressAnkaraMgmObservation &&
detail.mgm?.temp != null &&
detail.mgm?.time
) {
const match = detail.mgm.time.match(/T?(\d{2}):(\d{2})/);
if (match) {
let hour = Number.parseInt(match[1], 10);
@@ -543,7 +551,7 @@ export function getTemperatureChartData(
};
const legendParts: string[] = [];
if (detail.mgm?.temp != null) {
if (!suppressAnkaraMgmObservation && detail.mgm?.temp != null) {
legendParts.push(`MGM: ${detail.mgm.temp}${detail.temp_symbol}`);
}
if (!hasMgmHourly && debMax != null && omMax != null && Math.abs(offset) > 0.3) {