feat(ui): split client into Live and Strategy pages and wire new routes
Rebuilds the client into Live (watchlist with charts, fundamentals, news, quant analysis) and Strategy (backtest runner / precomputed results) pages, adds the corresponding /api/stocks/:symbol/chart|fundamentals|related|quant and /api/strategies endpoints, and updates project tooling. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
606
web/src/client/LivePage.tsx
Normal file
606
web/src/client/LivePage.tsx
Normal file
@@ -0,0 +1,606 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
ColorType,
|
||||
CrosshairMode,
|
||||
LineSeries,
|
||||
createChart,
|
||||
type IChartApi,
|
||||
type LineData,
|
||||
type Time,
|
||||
} from "lightweight-charts";
|
||||
import { ArrowDownRight, ArrowUpRight, RefreshCw, Wallet } from "lucide-react";
|
||||
import type {
|
||||
LiveStrategyState,
|
||||
StrategyMarket,
|
||||
TradeLogEntry,
|
||||
} from "../shared/strategyTypes";
|
||||
|
||||
async function api<T>(path: string, init?: RequestInit): Promise<T> {
|
||||
const response = await fetch(path, {
|
||||
...init,
|
||||
headers: { "Content-Type": "application/json", ...(init?.headers ?? {}) },
|
||||
});
|
||||
if (!response.ok) {
|
||||
const body = (await response.json().catch(() => undefined)) as { error?: string } | undefined;
|
||||
throw new Error(body?.error ?? `Request failed: ${response.status}`);
|
||||
}
|
||||
return (await response.json()) as T;
|
||||
}
|
||||
|
||||
type SortKey = "currentValue" | "unrealizedPnlPct" | "name" | "lastUpdated";
|
||||
|
||||
export function LivePage() {
|
||||
const [market, setMarket] = useState<StrategyMarket>("us");
|
||||
const [strategies, setStrategies] = useState<LiveStrategyState[]>([]);
|
||||
const [selectedName, setSelectedName] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [sortKey, setSortKey] = useState<SortKey>("unrealizedPnlPct");
|
||||
const [filterText, setFilterText] = useState("");
|
||||
|
||||
const refresh = (mk: StrategyMarket = market) => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
api<LiveStrategyState[]>(`/api/strategies/live?market=${mk}`)
|
||||
.then((res) => {
|
||||
setStrategies(res);
|
||||
if (res.length > 0) {
|
||||
setSelectedName((prev) =>
|
||||
prev && res.some((s) => s.name === prev) ? prev : res[0].name,
|
||||
);
|
||||
} else {
|
||||
setSelectedName(null);
|
||||
}
|
||||
})
|
||||
.catch((err) => setError(err instanceof Error ? err.message : "加载失败"))
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
refresh(market);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [market]);
|
||||
|
||||
const sorted = useMemo(() => {
|
||||
const list = [...strategies];
|
||||
const ft = filterText.trim().toLowerCase();
|
||||
const filtered = ft
|
||||
? list.filter(
|
||||
(s) =>
|
||||
s.name.toLowerCase().includes(ft) ||
|
||||
s.label.toLowerCase().includes(ft),
|
||||
)
|
||||
: list;
|
||||
filtered.sort((a, b) => {
|
||||
switch (sortKey) {
|
||||
case "currentValue":
|
||||
return (b.currentValue ?? 0) - (a.currentValue ?? 0);
|
||||
case "unrealizedPnlPct":
|
||||
return (b.unrealizedPnlPct ?? 0) - (a.unrealizedPnlPct ?? 0);
|
||||
case "name":
|
||||
return a.label.localeCompare(b.label);
|
||||
case "lastUpdated":
|
||||
return (b.lastUpdated ?? "").localeCompare(a.lastUpdated ?? "");
|
||||
}
|
||||
});
|
||||
return filtered;
|
||||
}, [strategies, sortKey, filterText]);
|
||||
|
||||
const focused = useMemo(
|
||||
() => sorted.find((s) => s.name === selectedName) ?? sorted[0],
|
||||
[sorted, selectedName],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="livePage">
|
||||
{error && <div className="alert">{error}</div>}
|
||||
|
||||
<div className="liveTopbar">
|
||||
<div className="segmented small">
|
||||
<button className={market === "us" ? "active" : ""} onClick={() => setMarket("us")}>美股</button>
|
||||
<button className={market === "cn" ? "active" : ""} onClick={() => setMarket("cn")}>A股</button>
|
||||
</div>
|
||||
<input
|
||||
className="ghostInput"
|
||||
placeholder="筛选策略..."
|
||||
value={filterText}
|
||||
onChange={(e) => setFilterText(e.target.value)}
|
||||
/>
|
||||
<label className="ghostSelectLabel">
|
||||
<span>排序</span>
|
||||
<select
|
||||
className="ghostSelect"
|
||||
value={sortKey}
|
||||
onChange={(e) => setSortKey(e.target.value as SortKey)}
|
||||
>
|
||||
<option value="unrealizedPnlPct">盈亏%</option>
|
||||
<option value="currentValue">总资产</option>
|
||||
<option value="name">名称</option>
|
||||
<option value="lastUpdated">更新时间</option>
|
||||
</select>
|
||||
</label>
|
||||
<button
|
||||
className={`ghostButton ${loading ? "loading" : ""}`}
|
||||
onClick={() => refresh()}
|
||||
disabled={loading}
|
||||
title="重新拉取最新行情和持仓"
|
||||
type="button"
|
||||
>
|
||||
<RefreshCw size={14} />
|
||||
{loading ? "加载中" : "刷新"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="liveLayout">
|
||||
<aside className="panel liveSidebar">
|
||||
<div className="panelHeader">
|
||||
<h2>策略列表</h2>
|
||||
<span>{sorted.length} / {strategies.length}</span>
|
||||
</div>
|
||||
{loading && sorted.length === 0 ? (
|
||||
<p className="hint">加载中...</p>
|
||||
) : sorted.length === 0 ? (
|
||||
<p className="hint">暂无在线策略。运行 quant 的 trader.py auto 后再刷新。</p>
|
||||
) : (
|
||||
<div className="liveList">
|
||||
{sorted.map((s) => (
|
||||
<button
|
||||
key={s.name}
|
||||
className={`liveListItem ${focused?.name === s.name ? "selected" : ""}`}
|
||||
onClick={() => setSelectedName(s.name)}
|
||||
title={`${s.label} (${s.name})`}
|
||||
type="button"
|
||||
>
|
||||
<div className="liveListTitle">
|
||||
<strong>{s.label}</strong>
|
||||
<span className="liveListName">{s.name}</span>
|
||||
</div>
|
||||
<div className="liveListBody">
|
||||
<span className="liveListValue">{money(s.currentValue)}</span>
|
||||
<span
|
||||
className={`liveListPnl ${s.unrealizedPnl >= 0 ? "positive" : "negative"}`}
|
||||
>
|
||||
{s.unrealizedPnl >= 0 ? <ArrowUpRight size={11} /> : <ArrowDownRight size={11} />}
|
||||
{pct(s.unrealizedPnlPct)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="liveListMeta">
|
||||
<span>持仓 {Object.keys(s.holdings).length}</span>
|
||||
<span>{s.lastUpdated ?? "-"}</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</aside>
|
||||
|
||||
<section className="liveDetail">
|
||||
{focused ? (
|
||||
<LiveStrategyDetail strategy={focused} />
|
||||
) : (
|
||||
<div className="panel emptyState">
|
||||
<Wallet size={40} />
|
||||
<p>未选择策略</p>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LiveStrategyDetail({ strategy }: { strategy: LiveStrategyState }) {
|
||||
const m = strategy;
|
||||
return (
|
||||
<>
|
||||
<div className="panel liveSummary">
|
||||
<div className="liveSummaryHead">
|
||||
<div>
|
||||
<p className="eyebrow">{m.name}</p>
|
||||
<h2>{m.label}</h2>
|
||||
<p className="hint">
|
||||
{m.market.toUpperCase()} · 初始 {money(m.initialCapital)} · 更新于 {m.lastUpdated ?? "-"}
|
||||
{m.priceAsOf && m.priceAsOf !== m.lastUpdated ? ` · 价格 ${m.priceAsOf}` : ""}
|
||||
</p>
|
||||
</div>
|
||||
<div className={`liveTotalPnl ${m.unrealizedPnl >= 0 ? "positive" : "negative"}`}>
|
||||
<strong>{money(m.currentValue)}</strong>
|
||||
<span>
|
||||
{m.unrealizedPnl >= 0 ? "+" : ""}
|
||||
{money(m.unrealizedPnl)} ({pct(m.unrealizedPnlPct)})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="liveSummaryGrid">
|
||||
<SummaryCell label="现金" value={money(m.cash)} />
|
||||
<SummaryCell label="持仓市值" value={money(m.marketValue)} />
|
||||
<SummaryCell label="总资产" value={money(m.currentValue)} />
|
||||
<SummaryCell label="持仓数" value={`${Object.keys(m.holdings).length}`} />
|
||||
<SummaryCell label="累计交易" value={`${m.tradeLog.length}`} />
|
||||
{m.metrics && <SummaryCell label="Sharpe" value={m.metrics.sharpeRatio.toFixed(2)} />}
|
||||
{m.metrics && <SummaryCell label="最大回撤" value={pct(m.metrics.maxDrawdown)} negative />}
|
||||
{m.metrics && <SummaryCell label="日胜率" value={pct(m.metrics.winRate)} />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<LiveEquityChart equityCurve={m.equityCurve} initialCapital={m.initialCapital} />
|
||||
|
||||
<HoldingsPanel
|
||||
holdings={m.holdingsDetail}
|
||||
cash={m.cash}
|
||||
currentValue={m.currentValue}
|
||||
/>
|
||||
|
||||
<TradeLogPanel log={m.tradeLog} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function SummaryCell({
|
||||
label,
|
||||
value,
|
||||
positive,
|
||||
negative,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
positive?: boolean;
|
||||
negative?: boolean;
|
||||
}) {
|
||||
const cls = positive ? "positive" : negative ? "negative" : "";
|
||||
return (
|
||||
<div className={`summaryCell ${cls}`}>
|
||||
<span className="summaryValue">{value}</span>
|
||||
<span className="summaryLabel">{label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LiveEquityChart({
|
||||
equityCurve,
|
||||
initialCapital,
|
||||
}: {
|
||||
equityCurve: { date: string; value: number }[];
|
||||
initialCapital: number;
|
||||
}) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const chartRef = useRef<IChartApi | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
const chart = createChart(containerRef.current, {
|
||||
width: containerRef.current.clientWidth,
|
||||
height: 280,
|
||||
layout: {
|
||||
background: { type: ColorType.Solid, color: "#0d1219" },
|
||||
textColor: "#b0b0b0",
|
||||
attributionLogo: false,
|
||||
},
|
||||
grid: {
|
||||
vertLines: { color: "#1a2030" },
|
||||
horzLines: { color: "#1a2030" },
|
||||
},
|
||||
crosshair: { mode: CrosshairMode.Normal },
|
||||
timeScale: { borderColor: "#1d2530", timeVisible: false },
|
||||
rightPriceScale: { borderColor: "#1d2530" },
|
||||
});
|
||||
chartRef.current = chart;
|
||||
|
||||
const eqSeries = chart.addSeries(LineSeries, {
|
||||
color: "#4db6ff",
|
||||
lineWidth: 2,
|
||||
priceLineVisible: false,
|
||||
});
|
||||
const data: LineData<Time>[] = equityCurve.map((p) => ({
|
||||
time: p.date as Time,
|
||||
value: p.value,
|
||||
}));
|
||||
eqSeries.setData(data);
|
||||
|
||||
if (initialCapital && equityCurve.length > 0) {
|
||||
eqSeries.createPriceLine({
|
||||
price: initialCapital,
|
||||
color: "#5e6a78",
|
||||
lineWidth: 1,
|
||||
lineStyle: 2,
|
||||
axisLabelVisible: true,
|
||||
title: "初始",
|
||||
});
|
||||
}
|
||||
|
||||
chart.timeScale().fitContent();
|
||||
|
||||
const ro = new ResizeObserver((entries) => {
|
||||
const w = entries[0]?.contentRect.width;
|
||||
if (w) chart.applyOptions({ width: w });
|
||||
});
|
||||
ro.observe(containerRef.current);
|
||||
|
||||
return () => {
|
||||
ro.disconnect();
|
||||
chart.remove();
|
||||
chartRef.current = null;
|
||||
};
|
||||
}, [equityCurve, initialCapital]);
|
||||
|
||||
return (
|
||||
<div className="panel chartPanel">
|
||||
<div className="panelHeader">
|
||||
<div>
|
||||
<p className="eyebrow">Live Equity</p>
|
||||
<h2>资产曲线</h2>
|
||||
<p className="hint">
|
||||
{equityCurve.length} 天数据
|
||||
{equityCurve.length > 0
|
||||
? ` · ${equityCurve[0].date} → ${equityCurve[equityCurve.length - 1].date}`
|
||||
: ""}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div ref={containerRef} className="liveEquityChart" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const DEFAULT_PAGE_SIZE = 30;
|
||||
const PAGE_SIZE_OPTIONS = [30, 50, 100];
|
||||
|
||||
type PaginationState = { page: number; pageSize: number };
|
||||
|
||||
function usePagination(total: number, deps: unknown[] = []): [
|
||||
PaginationState,
|
||||
React.Dispatch<React.SetStateAction<PaginationState>>,
|
||||
{ totalPages: number; sliceStart: number; sliceEnd: number },
|
||||
] {
|
||||
const [state, setState] = useState<PaginationState>({
|
||||
page: 1,
|
||||
pageSize: DEFAULT_PAGE_SIZE,
|
||||
});
|
||||
|
||||
// Reset to page 1 whenever the underlying data identity changes.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
useEffect(() => setState((s) => ({ ...s, page: 1 })), deps);
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(total / state.pageSize));
|
||||
const safePage = Math.min(state.page, totalPages);
|
||||
const sliceStart = (safePage - 1) * state.pageSize;
|
||||
const sliceEnd = Math.min(total, sliceStart + state.pageSize);
|
||||
return [
|
||||
{ ...state, page: safePage },
|
||||
setState,
|
||||
{ totalPages, sliceStart, sliceEnd },
|
||||
];
|
||||
}
|
||||
|
||||
function PaginationBar({
|
||||
page,
|
||||
pageSize,
|
||||
totalPages,
|
||||
total,
|
||||
sliceStart,
|
||||
sliceEnd,
|
||||
onPageChange,
|
||||
onPageSizeChange,
|
||||
}: {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
totalPages: number;
|
||||
total: number;
|
||||
sliceStart: number;
|
||||
sliceEnd: number;
|
||||
onPageChange: (page: number) => void;
|
||||
onPageSizeChange: (size: number) => void;
|
||||
}) {
|
||||
if (total === 0) return null;
|
||||
return (
|
||||
<div className="paginationBar">
|
||||
<span className="paginationRange">
|
||||
{sliceStart + 1}–{sliceEnd} / {total}
|
||||
</span>
|
||||
<div className="paginationControls">
|
||||
<button
|
||||
className="paginationButton"
|
||||
onClick={() => onPageChange(1)}
|
||||
disabled={page <= 1}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
<button
|
||||
className="paginationButton"
|
||||
onClick={() => onPageChange(page - 1)}
|
||||
disabled={page <= 1}
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
<span className="paginationPage">
|
||||
{page} / {totalPages}
|
||||
</span>
|
||||
<button
|
||||
className="paginationButton"
|
||||
onClick={() => onPageChange(page + 1)}
|
||||
disabled={page >= totalPages}
|
||||
>
|
||||
›
|
||||
</button>
|
||||
<button
|
||||
className="paginationButton"
|
||||
onClick={() => onPageChange(totalPages)}
|
||||
disabled={page >= totalPages}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
<select
|
||||
className="ghostSelect ghostSelectCompact"
|
||||
value={pageSize}
|
||||
onChange={(e) => onPageSizeChange(Number(e.target.value))}
|
||||
>
|
||||
{PAGE_SIZE_OPTIONS.map((sz) => (
|
||||
<option key={sz} value={sz}>
|
||||
{sz} / 页
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function HoldingsPanel({
|
||||
holdings,
|
||||
cash,
|
||||
currentValue,
|
||||
}: {
|
||||
holdings: LiveStrategyState["holdingsDetail"];
|
||||
cash: number;
|
||||
currentValue: number;
|
||||
}) {
|
||||
const [{ page, pageSize }, setPage, { totalPages, sliceStart, sliceEnd }] =
|
||||
usePagination(holdings.length, [holdings]);
|
||||
const visible = holdings.slice(sliceStart, sliceEnd);
|
||||
const cashWeight = currentValue ? cash / currentValue : 0;
|
||||
|
||||
return (
|
||||
<div className="panel holdingsPanel">
|
||||
<div className="panelHeader">
|
||||
<h2>当前持仓</h2>
|
||||
<span>{holdings.length} 只</span>
|
||||
</div>
|
||||
{holdings.length === 0 ? (
|
||||
<p className="hint">当前空仓，全部为现金。</p>
|
||||
) : (
|
||||
<>
|
||||
<table className="holdingsTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>标的</th>
|
||||
<th>持股</th>
|
||||
<th>最新价</th>
|
||||
<th>市值</th>
|
||||
<th>占组合</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{visible.map((h) => {
|
||||
const weight = currentValue ? (h.marketValue ?? 0) / currentValue : 0;
|
||||
return (
|
||||
<tr key={h.ticker}>
|
||||
<td>
|
||||
<strong>{h.ticker}</strong>
|
||||
</td>
|
||||
<td>{h.shares.toLocaleString(undefined, { maximumFractionDigits: 2 })}</td>
|
||||
<td>{h.lastPrice !== null ? `$${h.lastPrice.toFixed(2)}` : "-"}</td>
|
||||
<td>{h.marketValue !== null ? money(h.marketValue) : "-"}</td>
|
||||
<td>{pct(weight)}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr className="holdingsCashRow">
|
||||
<td>
|
||||
<strong>现金</strong>
|
||||
</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>{money(cash)}</td>
|
||||
<td>{pct(cashWeight)}</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<PaginationBar
|
||||
page={page}
|
||||
pageSize={pageSize}
|
||||
totalPages={totalPages}
|
||||
total={holdings.length}
|
||||
sliceStart={sliceStart}
|
||||
sliceEnd={sliceEnd}
|
||||
onPageChange={(p) => setPage((s) => ({ ...s, page: p }))}
|
||||
onPageSizeChange={(sz) => setPage(() => ({ page: 1, pageSize: sz }))}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TradeLogPanel({ log }: { log: TradeLogEntry[] }) {
|
||||
// Render newest-first; the trader logs trades chronologically.
|
||||
const reversed = useMemo(() => [...log].reverse(), [log]);
|
||||
const [{ page, pageSize }, setPage, { totalPages, sliceStart, sliceEnd }] =
|
||||
usePagination(reversed.length, [log]);
|
||||
const visible = reversed.slice(sliceStart, sliceEnd);
|
||||
|
||||
return (
|
||||
<div className="panel tradeLogPanel">
|
||||
<div className="panelHeader">
|
||||
<h2>交易历史</h2>
|
||||
<span>{log.length} 笔</span>
|
||||
</div>
|
||||
{log.length === 0 ? (
|
||||
<p className="hint">尚无交易记录。</p>
|
||||
) : (
|
||||
<>
|
||||
<table className="tradeLogTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>日期</th>
|
||||
<th>方向</th>
|
||||
<th>标的</th>
|
||||
<th>股数</th>
|
||||
<th>成交价</th>
|
||||
<th>金额</th>
|
||||
<th>手续费</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{visible.map((t, i) => (
|
||||
<tr
|
||||
key={`${t.date}-${t.ticker}-${sliceStart + i}`}
|
||||
className={t.action === "BUY" ? "buy" : "sell"}
|
||||
>
|
||||
<td>{t.date}</td>
|
||||
<td>
|
||||
<span className={`tradeAction ${t.action.toLowerCase()}`}>
|
||||
{t.action === "BUY" ? "买入" : "卖出"}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<strong>{t.ticker}</strong>
|
||||
</td>
|
||||
<td>{t.shares.toLocaleString(undefined, { maximumFractionDigits: 2 })}</td>
|
||||
<td>${t.price.toFixed(2)}</td>
|
||||
<td>{money(t.value)}</td>
|
||||
<td>{money(t.commission)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<PaginationBar
|
||||
page={page}
|
||||
pageSize={pageSize}
|
||||
totalPages={totalPages}
|
||||
total={log.length}
|
||||
sliceStart={sliceStart}
|
||||
sliceEnd={sliceEnd}
|
||||
onPageChange={(p) => setPage((s) => ({ ...s, page: p }))}
|
||||
onPageSizeChange={(sz) => setPage(() => ({ page: 1, pageSize: sz }))}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function money(v: number): string {
|
||||
if (typeof v !== "number" || !Number.isFinite(v)) return "-";
|
||||
return v.toLocaleString(undefined, {
|
||||
maximumFractionDigits: 0,
|
||||
style: "currency",
|
||||
currency: "USD",
|
||||
});
|
||||
}
|
||||
|
||||
function pct(v: number): string {
|
||||
if (typeof v !== "number" || !Number.isFinite(v)) return "-";
|
||||
return `${(v * 100).toFixed(1)}%`;
|
||||
}
|
||||
850
web/src/client/StrategyPage.tsx
Normal file
850
web/src/client/StrategyPage.tsx
Normal file
@@ -0,0 +1,850 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
ColorType,
|
||||
CrosshairMode,
|
||||
LineSeries,
|
||||
createChart,
|
||||
type IChartApi,
|
||||
type ISeriesApi,
|
||||
type LineData,
|
||||
type Time,
|
||||
} from "lightweight-charts";
|
||||
import { ArrowDown, ArrowUp, BarChart3, Trophy, TrendingDown, TrendingUp } from "lucide-react";
|
||||
import type {
|
||||
BacktestResult,
|
||||
PrecomputedIndex,
|
||||
PrecomputedScenarioInfo,
|
||||
StrategyInfo,
|
||||
StrategyMarket,
|
||||
StrategyMetrics,
|
||||
StrategyResult,
|
||||
} from "../shared/strategyTypes";
|
||||
|
||||
const STRATEGY_COLORS = [
|
||||
"#4db6ff", "#f3c969", "#c084fc", "#26a69a", "#ef5350",
|
||||
"#ff9800", "#8bc34a", "#e91e63", "#00bcd4", "#cddc39",
|
||||
];
|
||||
|
||||
const MAX_CHART_SELECTION = 10;
|
||||
|
||||
type RankMetric =
|
||||
| "annualizedReturn"
|
||||
| "sharpeRatio"
|
||||
| "sortinoRatio"
|
||||
| "calmarRatio"
|
||||
| "maxDrawdown"
|
||||
| "winRate"
|
||||
| "rebalanceWinRate"
|
||||
| "totalReturn";
|
||||
|
||||
const RANK_METRICS: Array<{ key: RankMetric; label: string; better: "high" | "low" }> = [
|
||||
{ key: "sharpeRatio", label: "Sharpe", better: "high" },
|
||||
{ key: "annualizedReturn", label: "年化", better: "high" },
|
||||
{ key: "totalReturn", label: "总收益", better: "high" },
|
||||
{ key: "calmarRatio", label: "Calmar", better: "high" },
|
||||
{ key: "sortinoRatio", label: "Sortino", better: "high" },
|
||||
{ key: "maxDrawdown", label: "MaxDD", better: "low" },
|
||||
{ key: "winRate", label: "日胜率", better: "high" },
|
||||
{ key: "rebalanceWinRate", label: "再平衡胜率", better: "high" },
|
||||
];
|
||||
|
||||
async function api<T>(path: string, init?: RequestInit): Promise<T> {
|
||||
const response = await fetch(path, {
|
||||
...init,
|
||||
headers: { "Content-Type": "application/json", ...(init?.headers ?? {}) },
|
||||
});
|
||||
if (!response.ok) {
|
||||
const body = (await response.json().catch(() => undefined)) as { error?: string } | undefined;
|
||||
throw new Error(body?.error ?? `Request failed: ${response.status}`);
|
||||
}
|
||||
return (await response.json()) as T;
|
||||
}
|
||||
|
||||
export function StrategyPage() {
|
||||
const [strategies, setStrategies] = useState<StrategyInfo[]>([]);
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||
const [market, setMarket] = useState<StrategyMarket>("us");
|
||||
const [scenarioList, setScenarioList] = useState<PrecomputedScenarioInfo[]>([]);
|
||||
const [scenarioId, setScenarioId] = useState<string | null>(null);
|
||||
const [precomputed, setPrecomputed] = useState<BacktestResult | undefined>();
|
||||
const [precomputedError, setPrecomputedError] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [focusStrategy, setFocusStrategy] = useState<string | null>(null);
|
||||
const [categoryFilter, setCategoryFilter] = useState<string>("all");
|
||||
const [rankMetric, setRankMetric] = useState<RankMetric>("sharpeRatio");
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
api<StrategyInfo[]>("/api/strategies")
|
||||
.then(setStrategies)
|
||||
.catch((err) => setError(err.message));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
api<PrecomputedIndex>("/api/strategies/precomputed/index")
|
||||
.then((idx) => {
|
||||
setScenarioList(idx.scenarios);
|
||||
if (idx.scenarios.length > 0 && !scenarioId) {
|
||||
setScenarioId(idx.scenarios[0].id);
|
||||
}
|
||||
})
|
||||
.catch((err) => setPrecomputedError(err instanceof Error ? err.message : "无法加载场景列表"));
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const currentScenario = useMemo(
|
||||
() => scenarioList.find((s) => s.id === scenarioId) ?? null,
|
||||
[scenarioList, scenarioId],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!scenarioId) return;
|
||||
setLoading(true);
|
||||
setPrecomputedError("");
|
||||
setPrecomputed(undefined);
|
||||
api<BacktestResult>(`/api/strategies/precomputed?market=${market}&scenario=${encodeURIComponent(scenarioId)}`)
|
||||
.then((res) => {
|
||||
setPrecomputed(res);
|
||||
const ranked = rankBy(res.strategies, rankMetric);
|
||||
const top = new Set(ranked.slice(0, 5).map((s) => s.name));
|
||||
setSelected(top);
|
||||
if (ranked.length > 0) setFocusStrategy(ranked[0].name);
|
||||
})
|
||||
.catch((err) => {
|
||||
setPrecomputedError(err instanceof Error ? err.message : "无法加载预计算结果");
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [market, scenarioId]);
|
||||
|
||||
const categoryByName = useMemo(() => {
|
||||
const map = new Map<string, string>();
|
||||
for (const s of strategies) map.set(s.name, s.category);
|
||||
return map;
|
||||
}, [strategies]);
|
||||
|
||||
const categories = useMemo(() => {
|
||||
if (!precomputed) return ["all"];
|
||||
const seen = new Set<string>();
|
||||
for (const s of precomputed.strategies) {
|
||||
seen.add(categoryByName.get(s.name) ?? "other");
|
||||
}
|
||||
return ["all", ...Array.from(seen).sort()];
|
||||
}, [precomputed, categoryByName]);
|
||||
|
||||
const filteredStrategies = useMemo(() => {
|
||||
if (!precomputed) return [];
|
||||
if (categoryFilter === "all") return precomputed.strategies;
|
||||
return precomputed.strategies.filter(
|
||||
(s) => (categoryByName.get(s.name) ?? "other") === categoryFilter,
|
||||
);
|
||||
}, [precomputed, categoryFilter, categoryByName]);
|
||||
|
||||
const rankedStrategies = useMemo(
|
||||
() => rankBy(filteredStrategies, rankMetric),
|
||||
[filteredStrategies, rankMetric],
|
||||
);
|
||||
|
||||
const rankIndex = useMemo(() => {
|
||||
const map = new Map<string, number>();
|
||||
rankedStrategies.forEach((s, i) => map.set(s.name, i + 1));
|
||||
return map;
|
||||
}, [rankedStrategies]);
|
||||
|
||||
const chartResult: BacktestResult | undefined = useMemo(() => {
|
||||
if (!precomputed) return undefined;
|
||||
return {
|
||||
...precomputed,
|
||||
strategies: rankedStrategies.filter((s) => selected.has(s.name)),
|
||||
};
|
||||
}, [precomputed, rankedStrategies, selected]);
|
||||
|
||||
function toggleStrategy(name: string) {
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(name)) {
|
||||
next.delete(name);
|
||||
} else {
|
||||
if (next.size >= MAX_CHART_SELECTION) return prev;
|
||||
next.add(name);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
setFocusStrategy(name);
|
||||
}
|
||||
|
||||
function selectTopN(metric: RankMetric, n: number) {
|
||||
if (!precomputed) return;
|
||||
const ranked = rankBy(filteredStrategies, metric);
|
||||
const top = new Set(ranked.slice(0, n).map((s) => s.name));
|
||||
setSelected(top);
|
||||
if (ranked.length > 0) setFocusStrategy(ranked[0].name);
|
||||
setRankMetric(metric);
|
||||
}
|
||||
|
||||
function clearSelection() {
|
||||
setSelected(new Set());
|
||||
}
|
||||
|
||||
const meta = precomputed?.meta;
|
||||
const computedAt = precomputed?.computedAt ? new Date(precomputed.computedAt) : null;
|
||||
|
||||
return (
|
||||
<div className="strategyPage">
|
||||
{error && <div className="alert">{error}</div>}
|
||||
{precomputedError && <div className="alert">{precomputedError}</div>}
|
||||
|
||||
<div className="strategyLayout">
|
||||
{/* Left: Strategy selector */}
|
||||
<aside className="panel strategySelector">
|
||||
<div className="panelHeader">
|
||||
<h2>策略选择</h2>
|
||||
<span>{selected.size} / {filteredStrategies.length}</span>
|
||||
</div>
|
||||
|
||||
<div className="precomputedHeader">
|
||||
<div className="precomputedHeaderRow">
|
||||
<label>市场</label>
|
||||
<div className="segmented small">
|
||||
<button className={market === "us" ? "active" : ""} onClick={() => setMarket("us")}>美股</button>
|
||||
<button className={market === "cn" ? "active" : ""} onClick={() => setMarket("cn")}>A股</button>
|
||||
</div>
|
||||
</div>
|
||||
{scenarioList.length > 0 && (
|
||||
<div className="scenarioPicker">
|
||||
<span className="scenarioPickerLabel">投入方式</span>
|
||||
<div className="scenarioOptions">
|
||||
{scenarioList.map((sc) => (
|
||||
<button
|
||||
key={sc.id}
|
||||
className={`scenarioOption ${scenarioId === sc.id ? "active" : ""}`}
|
||||
onClick={() => setScenarioId(sc.id)}
|
||||
type="button"
|
||||
title={sc.description ?? sc.label}
|
||||
>
|
||||
<strong>{sc.label}</strong>
|
||||
<span>{summarizeScenario(sc)}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{meta && (
|
||||
<p className="precomputedHint">
|
||||
{meta.years} 年 · 离线预计算
|
||||
{computedAt ? ` · ${computedAt.toLocaleDateString()}` : ""}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="quickPicks">
|
||||
<span className="quickPicksLabel">快速选取</span>
|
||||
<div className="quickPicksRow">
|
||||
<button className="quickPickButton" onClick={() => selectTopN("sharpeRatio", 5)}>
|
||||
<Trophy size={12} /> Top 5 Sharpe
|
||||
</button>
|
||||
<button className="quickPickButton" onClick={() => selectTopN("annualizedReturn", 5)}>
|
||||
<Trophy size={12} /> Top 5 年化
|
||||
</button>
|
||||
<button className="quickPickButton ghost" onClick={clearSelection}>清空</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{categories.length > 1 && (
|
||||
<div className="tagFilter">
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
className={categoryFilter === cat ? "tagChip active" : "tagChip"}
|
||||
key={cat}
|
||||
onClick={() => setCategoryFilter(cat)}
|
||||
>
|
||||
{categoryLabel(cat)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="strategyList">
|
||||
{loading && <p className="strategyEmpty">加载预计算结果中...</p>}
|
||||
{!loading && rankedStrategies.length === 0 && (
|
||||
<p className="strategyEmpty">当前筛选下暂无策略</p>
|
||||
)}
|
||||
{rankedStrategies.map((s, i) => {
|
||||
const isSelected = selected.has(s.name);
|
||||
const colorIdx = chartResult?.strategies.findIndex((x) => x.name === s.name) ?? -1;
|
||||
const color = colorIdx >= 0 ? STRATEGY_COLORS[colorIdx % STRATEGY_COLORS.length] : undefined;
|
||||
return (
|
||||
<label
|
||||
className={`strategyItem ${isSelected ? "selected" : ""}`}
|
||||
key={s.name}
|
||||
title={s.name}
|
||||
>
|
||||
<span className="strategyRank" data-top={i < 3 ? "1" : "0"}>#{i + 1}</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={() => toggleStrategy(s.name)}
|
||||
/>
|
||||
<span
|
||||
className="strategyDot"
|
||||
style={{ background: color ?? "transparent", borderColor: color ?? "#2a3344" }}
|
||||
/>
|
||||
<span className="strategyLabel">{displayStrategyName(s)}</span>
|
||||
<span className={`strategyMetric ${s.metrics.annualizedReturn >= 0 ? "positive" : "negative"}`}>
|
||||
{pct(s.metrics.annualizedReturn)}
|
||||
</span>
|
||||
<span className="strategyMetricMuted">
|
||||
{s.metrics.sharpeRatio.toFixed(2)}
|
||||
</span>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Right: Results */}
|
||||
<section className="strategyResults">
|
||||
{chartResult && precomputed ? (
|
||||
<>
|
||||
<EquityCurveChart
|
||||
result={chartResult}
|
||||
focusStrategy={focusStrategy}
|
||||
onFocus={setFocusStrategy}
|
||||
scenario={currentScenario}
|
||||
/>
|
||||
<RankingLeaderboard
|
||||
strategies={rankedStrategies}
|
||||
selected={selected}
|
||||
onToggle={toggleStrategy}
|
||||
onFocus={setFocusStrategy}
|
||||
rankMetric={rankMetric}
|
||||
onChangeMetric={setRankMetric}
|
||||
categoryByName={categoryByName}
|
||||
rankIndex={rankIndex}
|
||||
/>
|
||||
<div className="insightGrid">
|
||||
<MetricsPanel result={chartResult} focusStrategy={focusStrategy} onFocus={setFocusStrategy} />
|
||||
<DrawdownInfo result={chartResult} focusStrategy={focusStrategy} />
|
||||
</div>
|
||||
<ReturnHeatmap result={chartResult} focusStrategy={focusStrategy} />
|
||||
</>
|
||||
) : (
|
||||
<div className="panel emptyState">
|
||||
<TrendingUp size={48} />
|
||||
<p>{loading ? "正在加载预计算回测结果..." : "暂无预计算回测结果"}</p>
|
||||
<p className="hint">在 quant 项目运行 <code>precompute_backtest.py</code> 后即可查看</p>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Ranking Leaderboard
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function RankingLeaderboard({
|
||||
strategies,
|
||||
selected,
|
||||
onToggle,
|
||||
onFocus,
|
||||
rankMetric,
|
||||
onChangeMetric,
|
||||
categoryByName,
|
||||
rankIndex,
|
||||
}: {
|
||||
strategies: StrategyResult[];
|
||||
selected: Set<string>;
|
||||
onToggle: (name: string) => void;
|
||||
onFocus: (name: string) => void;
|
||||
rankMetric: RankMetric;
|
||||
onChangeMetric: (metric: RankMetric) => void;
|
||||
categoryByName: Map<string, string>;
|
||||
rankIndex: Map<string, number>;
|
||||
}) {
|
||||
return (
|
||||
<div className="panel rankingPanel">
|
||||
<div className="panelHeader">
|
||||
<div>
|
||||
<p className="eyebrow">Leaderboard</p>
|
||||
<h2>策略排名</h2>
|
||||
<p>点击行加入/移除对比；列头切换排序指标</p>
|
||||
</div>
|
||||
<span>{strategies.length} 个策略</span>
|
||||
</div>
|
||||
<div className="rankingWrap">
|
||||
<table className="rankingTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="rankCol">#</th>
|
||||
<th>策略</th>
|
||||
<th>类别</th>
|
||||
{RANK_METRICS.map((m) => {
|
||||
const active = rankMetric === m.key;
|
||||
return (
|
||||
<th
|
||||
key={m.key}
|
||||
className={`sortable ${active ? "active" : ""}`}
|
||||
onClick={() => onChangeMetric(m.key)}
|
||||
title={`按 ${m.label} 排序`}
|
||||
>
|
||||
{m.label}
|
||||
{active && (m.better === "high" ? <ArrowDown size={11} /> : <ArrowUp size={11} />)}
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{strategies.map((s) => {
|
||||
const isSelected = selected.has(s.name);
|
||||
const rank = rankIndex.get(s.name) ?? 0;
|
||||
return (
|
||||
<tr
|
||||
key={s.name}
|
||||
className={`${isSelected ? "selected" : ""}`}
|
||||
onClick={() => {
|
||||
onToggle(s.name);
|
||||
onFocus(s.name);
|
||||
}}
|
||||
>
|
||||
<td className="rankCol">
|
||||
<span className={`rankBadge ${rank <= 3 ? "top" : ""}`}>{rank}</span>
|
||||
</td>
|
||||
<td>
|
||||
<strong>{displayStrategyName(s)}</strong>
|
||||
<span className="rankSub">{s.name}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span className="categoryChip">
|
||||
{categoryLabel(categoryByName.get(s.name) ?? "other")}
|
||||
</span>
|
||||
</td>
|
||||
<td>{s.metrics.sharpeRatio.toFixed(2)}</td>
|
||||
<td className={s.metrics.annualizedReturn >= 0 ? "positive" : "negative"}>
|
||||
{pct(s.metrics.annualizedReturn)}
|
||||
</td>
|
||||
<td className={s.metrics.totalReturn >= 0 ? "positive" : "negative"}>
|
||||
{pct(s.metrics.totalReturn)}
|
||||
</td>
|
||||
<td>{s.metrics.calmarRatio.toFixed(2)}</td>
|
||||
<td>{s.metrics.sortinoRatio.toFixed(2)}</td>
|
||||
<td className="negative">{pct(s.metrics.maxDrawdown)}</td>
|
||||
<td>{pct(s.metrics.winRate)}</td>
|
||||
<td>{pctOrDash(s.metrics.rebalanceWinRate)}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Equity Curve Chart
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function EquityCurveChart({
|
||||
result,
|
||||
focusStrategy,
|
||||
onFocus,
|
||||
scenario,
|
||||
}: {
|
||||
result: BacktestResult;
|
||||
focusStrategy: string | null;
|
||||
onFocus: (name: string) => void;
|
||||
scenario: PrecomputedScenarioInfo | null;
|
||||
}) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const chartRef = useRef<IChartApi | null>(null);
|
||||
const seriesMapRef = useRef<Map<string, ISeriesApi<"Line">>>(new Map());
|
||||
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
const chart = createChart(containerRef.current, {
|
||||
width: containerRef.current.clientWidth,
|
||||
height: 480,
|
||||
layout: {
|
||||
background: { type: ColorType.Solid, color: "#0d1219" },
|
||||
textColor: "#b0b0b0",
|
||||
attributionLogo: false,
|
||||
},
|
||||
grid: {
|
||||
vertLines: { color: "#1a2030" },
|
||||
horzLines: { color: "#1a2030" },
|
||||
},
|
||||
crosshair: { mode: CrosshairMode.Normal },
|
||||
timeScale: { borderColor: "#1d2530", timeVisible: false },
|
||||
rightPriceScale: { borderColor: "#1d2530" },
|
||||
});
|
||||
chartRef.current = chart;
|
||||
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
const width = entries[0]?.contentRect.width;
|
||||
if (width) chart.applyOptions({ width });
|
||||
});
|
||||
observer.observe(containerRef.current);
|
||||
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
chart.remove();
|
||||
chartRef.current = null;
|
||||
seriesMapRef.current.clear();
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const chart = chartRef.current;
|
||||
if (!chart) return;
|
||||
|
||||
for (const series of seriesMapRef.current.values()) {
|
||||
chart.removeSeries(series);
|
||||
}
|
||||
seriesMapRef.current.clear();
|
||||
|
||||
result.strategies.forEach((strat, i) => {
|
||||
const color = STRATEGY_COLORS[i % STRATEGY_COLORS.length];
|
||||
const lineWidth = focusStrategy === strat.name ? 3 : 1.6;
|
||||
const series = chart.addSeries(LineSeries, {
|
||||
color,
|
||||
lineWidth: lineWidth as 1 | 2 | 3 | 4,
|
||||
crosshairMarkerVisible: true,
|
||||
priceLineVisible: false,
|
||||
});
|
||||
const data: LineData<Time>[] = strat.equityCurve.map((p) => ({
|
||||
time: p.date as Time,
|
||||
value: p.value,
|
||||
}));
|
||||
series.setData(data);
|
||||
seriesMapRef.current.set(strat.name, series);
|
||||
});
|
||||
|
||||
if (result.benchmark.equityCurve.length > 0) {
|
||||
const benchSeries = chart.addSeries(LineSeries, {
|
||||
color: "#7c8694",
|
||||
lineWidth: 1,
|
||||
lineStyle: 2,
|
||||
title: result.benchmark.name,
|
||||
crosshairMarkerVisible: false,
|
||||
priceLineVisible: false,
|
||||
});
|
||||
benchSeries.setData(
|
||||
result.benchmark.equityCurve.map((p) => ({ time: p.date as Time, value: p.value })),
|
||||
);
|
||||
seriesMapRef.current.set("__benchmark__", benchSeries);
|
||||
}
|
||||
|
||||
chart.timeScale().fitContent();
|
||||
}, [result, focusStrategy]);
|
||||
|
||||
return (
|
||||
<div className="panel chartPanel">
|
||||
<div className="equityHeader">
|
||||
<div className="equityTitle">
|
||||
<p className="eyebrow">Equity Curves</p>
|
||||
<h2>资产曲线对比</h2>
|
||||
</div>
|
||||
<div className="equityMeta">
|
||||
<span className="equityMetaItem">{result.meta.market.toUpperCase()}</span>
|
||||
<span className="equityMetaSep">·</span>
|
||||
<span className="equityMetaItem">{result.meta.years} 年</span>
|
||||
<span className="equityMetaSep">·</span>
|
||||
<span className="equityMetaItem">{money(result.meta.initialCapital)} 初始</span>
|
||||
{scenario?.injectionSchedule && (
|
||||
<>
|
||||
<span className="equityMetaSep">·</span>
|
||||
<span className="equityMetaItem">{summarizeScenario(scenario)}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="legendRow">
|
||||
{result.strategies.length === 0 && (
|
||||
<span className="legendEmpty">从左侧选取策略加入对比</span>
|
||||
)}
|
||||
{result.strategies.map((strat, i) => (
|
||||
<button
|
||||
className={`legendItem ${focusStrategy === strat.name ? "focused" : ""}`}
|
||||
key={strat.name}
|
||||
onClick={() => onFocus(strat.name)}
|
||||
type="button"
|
||||
>
|
||||
<span className="legendDot" style={{ background: STRATEGY_COLORS[i % STRATEGY_COLORS.length] }} />
|
||||
{displayStrategyName(strat)}
|
||||
</button>
|
||||
))}
|
||||
{result.benchmark.equityCurve.length ? (
|
||||
<span className="legendItem benchmarkLegend">
|
||||
<span className="legendDot" />
|
||||
{result.benchmark.name}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div ref={containerRef} className="equityChartContainer" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Metrics Panel
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function MetricsPanel({
|
||||
result,
|
||||
focusStrategy,
|
||||
onFocus,
|
||||
}: {
|
||||
result: BacktestResult;
|
||||
focusStrategy: string | null;
|
||||
onFocus: (name: string) => void;
|
||||
}) {
|
||||
const focused = result.strategies.find((s) => s.name === focusStrategy) ?? result.strategies[0];
|
||||
return (
|
||||
<div className="panel metricsPanel">
|
||||
<div className="panelHeader">
|
||||
<h2>核心指标</h2>
|
||||
{focused && <span>{displayStrategyName(focused)}</span>}
|
||||
</div>
|
||||
{focused ? (
|
||||
<>
|
||||
<div className="metricsGrid">
|
||||
<MetricCell label="总收益" value={pct(focused.metrics.totalReturn)} positive={focused.metrics.totalReturn > 0} />
|
||||
<MetricCell label="年化收益" value={pct(focused.metrics.annualizedReturn)} positive={focused.metrics.annualizedReturn > 0} />
|
||||
<MetricCell label="年化波动" value={pct(focused.metrics.annualizedVolatility)} />
|
||||
<MetricCell label="Sharpe" value={focused.metrics.sharpeRatio.toFixed(2)} positive={focused.metrics.sharpeRatio > 1} />
|
||||
<MetricCell label="Sortino" value={focused.metrics.sortinoRatio.toFixed(2)} positive={focused.metrics.sortinoRatio > 1} />
|
||||
<MetricCell label="最大回撤" value={pct(focused.metrics.maxDrawdown)} negative />
|
||||
<MetricCell label="Calmar" value={focused.metrics.calmarRatio.toFixed(2)} positive={focused.metrics.calmarRatio > 0.5} />
|
||||
<MetricCell label="日胜率" value={pct(focused.metrics.winRate)} positive={focused.metrics.winRate > 0.5} />
|
||||
<MetricCell
|
||||
label="再平衡胜率"
|
||||
value={pctOrDash(focused.metrics.rebalanceWinRate)}
|
||||
positive={
|
||||
typeof focused.metrics.rebalanceWinRate === "number" &&
|
||||
focused.metrics.rebalanceWinRate > 0.5
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="focusSummary">
|
||||
<span><BarChart3 size={15} /> 终值 {money(focused.equityCurve.at(-1)?.value)}</span>
|
||||
<span><TrendingDown size={15} /> 最大回撤 {pct(focused.metrics.maxDrawdown)}</span>
|
||||
<span><TrendingUp size={15} /> 年化 {pct(focused.metrics.annualizedReturn)}</span>
|
||||
<span>交易 {focused.trades.length.toLocaleString()} 天</span>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p className="hint">从排名表选取至少一个策略查看核心指标</p>
|
||||
)}
|
||||
|
||||
{result.strategies.length > 1 && (
|
||||
<div className="comparisonWrap">
|
||||
<table className="comparisonTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>策略</th>
|
||||
<th>年化</th>
|
||||
<th>Sharpe</th>
|
||||
<th>MaxDD</th>
|
||||
<th>日胜率</th>
|
||||
<th>再平衡胜率</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{result.strategies.map((s) => (
|
||||
<tr key={s.name} className={s.name === focusStrategy ? "focused" : ""} onClick={() => onFocus(s.name)}>
|
||||
<td>
|
||||
<strong>{displayStrategyName(s)}</strong>
|
||||
<span>{s.name}</span>
|
||||
</td>
|
||||
<td className={s.metrics.annualizedReturn > 0 ? "positive" : "negative"}>{pct(s.metrics.annualizedReturn)}</td>
|
||||
<td>{s.metrics.sharpeRatio.toFixed(2)}</td>
|
||||
<td className="negative">{pct(s.metrics.maxDrawdown)}</td>
|
||||
<td>{pct(s.metrics.winRate)}</td>
|
||||
<td>{pctOrDash(s.metrics.rebalanceWinRate)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MetricCell({ label, value, positive, negative }: { label: string; value: string; positive?: boolean; negative?: boolean }) {
|
||||
const cls = positive ? "positive" : negative ? "negative" : "";
|
||||
return (
|
||||
<div className={`metricCell ${cls}`}>
|
||||
<span className="metricValue">{value}</span>
|
||||
<span className="metricLabel">{label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Drawdown Info
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function DrawdownInfo({ result, focusStrategy }: { result: BacktestResult; focusStrategy: string | null }) {
|
||||
const focused = result.strategies.find((s) => s.name === focusStrategy) ?? result.strategies[0];
|
||||
if (!focused) {
|
||||
return (
|
||||
<div className="panel drawdownPanel">
|
||||
<div className="panelHeader"><h2>重大回撤</h2></div>
|
||||
<p className="hint">无聚焦策略</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const topDrawdowns = [...focused.drawdowns].sort((a, b) => a.depth - b.depth).slice(0, 5);
|
||||
return (
|
||||
<div className="panel drawdownPanel">
|
||||
<div className="panelHeader">
|
||||
<h2>重大回撤</h2>
|
||||
<span>{displayStrategyName(focused)}</span>
|
||||
</div>
|
||||
{topDrawdowns.length === 0 ? (
|
||||
<p className="hint">无显著回撤期间 (阈值 -5%)</p>
|
||||
) : (
|
||||
<table className="drawdownTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>开始</th>
|
||||
<th>结束</th>
|
||||
<th>深度</th>
|
||||
<th>恢复</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{topDrawdowns.map((dd, i) => (
|
||||
<tr key={i}>
|
||||
<td>{dd.start}</td>
|
||||
<td>{dd.end}</td>
|
||||
<td className="negative">{pct(dd.depth)}</td>
|
||||
<td>{dd.recoveryDate ?? "未恢复"}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Return Heatmap
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function ReturnHeatmap({ result, focusStrategy }: { result: BacktestResult; focusStrategy: string | null }) {
|
||||
const focused = result.strategies.find((s) => s.name === focusStrategy) ?? result.strategies[0];
|
||||
if (!focused) return null;
|
||||
const { monthlyReturns, yearlyReturns } = focused;
|
||||
const years = Object.keys(yearlyReturns).sort();
|
||||
const months = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
|
||||
const monthLabels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
||||
|
||||
return (
|
||||
<div className="panel heatmapPanel">
|
||||
<div className="panelHeader">
|
||||
<h2>收益热力图</h2>
|
||||
<span>{displayStrategyName(focused)}</span>
|
||||
</div>
|
||||
<div className="heatmapContainer">
|
||||
<table className="heatmapTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Year</th>
|
||||
{monthLabels.map((m) => <th key={m}>{m}</th>)}
|
||||
<th>YTD</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{years.map((year) => (
|
||||
<tr key={year}>
|
||||
<td className="yearLabel">{year}</td>
|
||||
{months.map((month) => {
|
||||
const key = `${year}-${month}`;
|
||||
const val = monthlyReturns[key];
|
||||
return (
|
||||
<td key={month} className="heatCell" style={{ background: heatColor(val) }}>
|
||||
{val !== undefined ? `${(val * 100).toFixed(1)}` : ""}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
<td className={`yearReturn ${(yearlyReturns[year] ?? 0) >= 0 ? "positive" : "negative"}`}>
|
||||
{yearlyReturns[year] !== undefined ? pct(yearlyReturns[year]) : "-"}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function rankBy(strategies: StrategyResult[], metric: RankMetric): StrategyResult[] {
|
||||
const better = RANK_METRICS.find((m) => m.key === metric)?.better ?? "high";
|
||||
const dir = better === "high" ? -1 : 1;
|
||||
const get = (s: StrategyResult) => {
|
||||
const v = s.metrics[metric as keyof StrategyMetrics];
|
||||
return typeof v === "number" && Number.isFinite(v) ? v : (better === "high" ? -Infinity : Infinity);
|
||||
};
|
||||
return [...strategies].sort((a, b) => dir * (get(a) - get(b)));
|
||||
}
|
||||
|
||||
function summarizeScenario(sc: PrecomputedScenarioInfo): string {
|
||||
if (!sc.injectionSchedule) return `${money(sc.capital)} 一次性`;
|
||||
const inj = sc.injectionSchedule;
|
||||
if (inj.frequency === "yearly_months" && inj.months?.length) {
|
||||
const monthLabel = inj.months.join("/");
|
||||
return `${money(sc.capital)} 起 · 每年 ${monthLabel} 月注入 ${money(inj.amount)}`;
|
||||
}
|
||||
const freqLabel = inj.frequency === "monthly" ? "每月" : inj.frequency === "quarterly" ? "每季" : "每年";
|
||||
return `${money(sc.capital)} 起 · ${freqLabel}注入 ${money(inj.amount)}`;
|
||||
}
|
||||
|
||||
function categoryLabel(cat: string): string {
|
||||
if (cat === "all") return "全部";
|
||||
if (cat === "stock_picker") return "选股";
|
||||
if (cat === "factor_combo") return "因子";
|
||||
if (cat === "tactical_allocation") return "配置";
|
||||
if (cat === "other") return "其他";
|
||||
return cat;
|
||||
}
|
||||
|
||||
function pct(val: number): string {
|
||||
return `${(val * 100).toFixed(1)}%`;
|
||||
}
|
||||
|
||||
function pctOrDash(val: number | null | undefined): string {
|
||||
return typeof val === "number" && Number.isFinite(val) ? pct(val) : "-";
|
||||
}
|
||||
|
||||
function money(value: number | undefined): string {
|
||||
return typeof value === "number" && Number.isFinite(value)
|
||||
? value.toLocaleString(undefined, { maximumFractionDigits: 0, style: "currency", currency: "USD" })
|
||||
: "-";
|
||||
}
|
||||
|
||||
function displayStrategyName(strategy: Pick<StrategyInfo | StrategyResult, "name" | "label">): string {
|
||||
const label = typeof strategy.label === "string" ? strategy.label.trim() : "";
|
||||
return label || strategy.name;
|
||||
}
|
||||
|
||||
function heatColor(val: number | undefined): string {
|
||||
if (val === undefined) return "transparent";
|
||||
if (val > 0) {
|
||||
const intensity = Math.min(val / 0.15, 1);
|
||||
return `rgba(38, 166, 154, ${0.15 + intensity * 0.6})`;
|
||||
}
|
||||
const intensity = Math.min(Math.abs(val) / 0.15, 1);
|
||||
return `rgba(239, 83, 80, ${0.15 + intensity * 0.6})`;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user