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

feat: implement dashboard opportunity table and supporting UI components for weather market analysis

Browse Source
This commit is contained in:
2569718930@qq.com
2026-04-23 23:03:26 +08:00
parent b54c86cdb3
commit 9a2ef217eb
4 changed files with 189 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/dashboard/Dashboard.module.css
+71 -14
View File
@@ -5089,6 +5089,28 @@
transition: all 0.2s;
margin-left: 8px;
}
.root :global(.scan-select) {
border: none;
border-radius: 8px;
background: linear-gradient(135deg, #00e0a4, #00b383);
color: #000;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 4px 12px rgba(0, 224, 164, 0.2);
}
.root :global(.scan-cta-button:hover:not(:disabled)) {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(0, 224, 164, 0.4);
filter: brightness(1.1);
}
.root :global(.scan-cta-button:active:not(:disabled)) {
transform: translateY(1px);
}
.root :global(.history-btn:hover) {
background: rgba(34, 211, 238, 0.2);
border-color: var(--accent-cyan);
@@ -8231,6 +8253,7 @@
color: var(--text-primary);
outline: none;
cursor: pointer;
width: 100%;
}
.root :global(.scan-select:focus) {
@@ -8310,18 +8333,44 @@
}
.root :global(.scan-kpi-card) {
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: 10px;
padding: 14px 16px;
background: rgba(13, 17, 23, 0.6);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 6px;
transition: border-color 0.2s;
justify-content: center;
position: relative;
overflow: hidden;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.root :global(.scan-kpi-card:hover) {
border-color: var(--border-glass);
background: rgba(255, 255, 255, 0.04);
border-color: rgba(0, 224, 164, 0.3);
transform: translateY(-2px);
box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.5);
}
.root :global(.scan-kpi-card::after) {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(
90deg,
transparent,
rgba(0, 224, 164, 0.5),
transparent
);
transform: translateX(-100%);
transition: transform 0.5s;
}
.root :global(.scan-kpi-card:hover::after) {
transform: translateX(100%);
}
.root :global(.scan-kpi-green) {
@@ -8403,7 +8452,9 @@
right: 0;
height: 2px;
background: #00e0a4;
border-radius: 2px 2px 0 0;
border-radius: 4px;
opacity: 0.8;
transition: all 0.3s ease;
}
/* ── Opportunity Table ── */
@@ -8435,19 +8486,25 @@
display: grid;
grid-template-columns: 48px 200px 160px 1fr 150px 90px 64px 40px;
align-items: center;
padding: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
background: rgba(13, 17, 23, 0.4);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 8px;
cursor: pointer;
transition: background 0.15s;
transition: all 0.15s ease;
user-select: none;
padding: 12px;
}
.root :global(.scan-table-row:hover) {
background: rgba(255, 255, 255, 0.02);
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.15);
transform: scale(1.002);
}
.root :global(.scan-table-row.selected) {
background: rgba(0, 224, 164, 0.04);
border-left: 2px solid #00e0a4;
background: rgba(0, 224, 164, 0.08);
border-color: rgba(0, 224, 164, 0.3);
box-shadow: inset 0 0 12px rgba(0, 224, 164, 0.05);
}
.root :global(.scan-table-row.tradable) {
frontend/components/dashboard/OpportunityTable.tsx
+13 -3
View File
@@ -145,11 +145,21 @@ function MiniProbabilityChart({
);
}
function getDisplayScore(rawScore: number): number {
if (rawScore <= 0) return Math.max(0, 70 + rawScore / 1000);
if (rawScore > 1000) {
return Math.min(100, 80 + (rawScore - 1000) / 30);
}
return Math.min(80, Math.max(0, (rawScore / 1000) * 80));
}
function ScoreRing({ score }: { score: number }) {
const displayScore = getDisplayScore(score);
const radius = 20;
const circumference = 2 * Math.PI * radius;
const progress = (score / 100) * circumference;
const color = score >= 80 ? "#00E0A4" : score >= 60 ? "#FFB020" : "#FF4D6A";
const progress = (displayScore / 100) * circumference;
const color =
displayScore >= 85 ? "#00E0A4" : displayScore >= 70 ? "#FFB020" : "#FF4D6A";
return (
<div className="scan-score-ring">
@@ -175,7 +185,7 @@ function ScoreRing({ score }: { score: number }) {
/>
</svg>
<span className="scan-score-value" style={{ color }}>
{score}
{displayScore.toFixed(0)}
</span>
</div>
);
frontend/components/dashboard/PolyWeatherDashboard.tsx
+33 -18
View File
@@ -11,6 +11,7 @@ import {
type FormEvent,
type PointerEvent as ReactPointerEvent,
} from "react";
import { Search } from "lucide-react";
import styles from "./Dashboard.module.css";
import detailChromeStyles from "./DetailPanelChrome.module.css";
import modalChromeStyles from "./ModalChrome.module.css";
@@ -218,8 +219,18 @@ function getBucketMatchKey(bucket?: {
function normalizeProbabilityValue(value: number | null | undefined) {
if (!Number.isFinite(Number(value))) return null;
const numeric = Number(value);
return Math.abs(numeric) <= 1 ? numeric : numeric / 100;
return Number(value);
}
function getDisplayScore(rawScore: number): number {
if (rawScore <= 0) return Math.max(0, 70 + rawScore / 1000); // Penalty cases
// Scale the positive scores to 80-100
// rawScore for tradable is roughly 1000 + edge*10 + risk*100 + hitRate*100
// typical high score is 1000 + 50 + 400 + 90 = 1540
if (rawScore > 1000) {
return Math.min(100, 80 + (rawScore - 1000) / 30);
}
return Math.min(80, Math.max(0, (rawScore / 1000) * 80));
}
function buildMarketAlignedProbabilities(
@@ -2979,7 +2990,7 @@ function DashboardScreen() {
);
return acc + (edge ?? 0);
}, 0);
return (sum / tradable.length) * 100;
return sum / tradable.length;
})(),
totalWinRate: (() => {
const tradable = homepageSnapshots.filter(
@@ -3011,13 +3022,13 @@ function DashboardScreen() {
<div className="scan-view-tabs">
<button className="scan-view-tab active">
{t("dashboard.opportunityList") || "机会列表"}
{t("dashboard.opportunityList")}
</button>
<button className="scan-view-tab">
{t("dashboard.distributionView") || "分布视图"}
{t("dashboard.distributionView")}
</button>
<button className="scan-view-tab">
{t("dashboard.calendarView") || "日历视图"}
{t("dashboard.calendarView")}
</button>
</div>
@@ -3220,18 +3231,21 @@ function DashboardScreen() {
const snap = homepageSnapshots.find(
(s) => s.city.name === store.selectedCity,
);
const score = snap?.score ?? 0;
return score >= 80
const displayScore = getDisplayScore(snap?.score ?? 0);
return displayScore >= 85
? "#00E0A4"
: score >= 60
: displayScore >= 70
? "#FFB020"
: "#FF4D6A";
})(),
}}
>
{homepageSnapshots.find(
(s) => s.city.name === store.selectedCity,
)?.score ?? "--"}
{(() => {
const snap = homepageSnapshots.find(
(s) => s.city.name === store.selectedCity,
);
return snap ? getDisplayScore(snap.score).toFixed(1) : "--";
})()}
</span>
<span className="scan-detail-score-suffix"> /100</span>
</div>
@@ -3244,12 +3258,12 @@ function DashboardScreen() {
const snap = homepageSnapshots.find(
(s) => s.city.name === store.selectedCity,
);
const score = snap?.score ?? 0;
const filled = score >= i * 20;
const displayScore = getDisplayScore(snap?.score ?? 0);
const filled = displayScore >= i * 20;
return (
<span
key={i}
className={`scan-confidence-dot ${filled ? "filled" : ""} ${score < 60 ? "red" : score < 80 ? "amber" : ""}`}
className={`scan-confidence-dot ${filled ? "filled" : ""} ${displayScore < 70 ? "red" : displayScore < 85 ? "amber" : ""}`}
/>
);
})}
@@ -3258,9 +3272,10 @@ function DashboardScreen() {
</div>
</aside>
) : (
<aside className="scan-detail-panel">
<div className="scan-detail-empty">
{t("detail.selectCity") || "← 点击左侧行查看详情"}
<aside className="scan-detail-panel scan-detail-empty">
<div className="scan-empty-state">
<Search size={48} />
<p>{t("detail.selectCity") || "← 点击左侧行查看详情"}</p>
</div>
</aside>
)}