feat(web): 因子研究升级 + 因子组合页
- 因子元数据增加 brief 使用简介（后端 FactorDef + /api/factors 返回，9 个内置因子补齐文案） - 因子研究页： · 时间默认「今日 ~ 近 6 个月」 · 因子多选，逐个跑 IC/RankIC Job 并分卡展示报告 · 目录显示使用简介，行点击展开公式/方向/用法详解 · 新增计分规则说明与「去因子组合」入口 - 因子组合页 /factors/compose：多因子勾选+权重、组合得分规则说明（z-score×权重求和→TopN）， 可配 topN/调仓/区间/ST，一键回测 Job → 净值/回撤/月度/未建模标注 - 回测页时间默认同样近 6 月 - 验证：tsc + next build 通过；组合回测（momentum_60×1.5 + volatility_60×1.0）Job 成功归档 EXP-330CAAAE（-13.51%，交易 20）；后端 factors/research/api 相关测试通过 / ruff clean
This commit is contained in:
Simon
@@ -0,0 +1,260 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { apiGet } from "@/lib/api";
|
||||
import { LineChart } from "@/components/LineChart";
|
||||
import { submitJob, waitJob } from "@/lib/jobs";
|
||||
import type { BacktestResult, FactorMeta, ResearchSpec } from "@/lib/types";
|
||||
import { recentRange } from "@/lib/dates";
|
||||
|
||||
interface Pick {
|
||||
name: string;
|
||||
weight: number;
|
||||
}
|
||||
|
||||
export default function ComposePage() {
|
||||
const [factors, setFactors] = useState<FactorMeta[]>([]);
|
||||
const [picks, setPicks] = useState<Pick[]>([]);
|
||||
const [topN, setTopN] = useState(10);
|
||||
const [rebalance, setRebalance] = useState<"monthly" | "weekly">("monthly");
|
||||
const [excludeSt, setExcludeSt] = useState(true);
|
||||
const [start, setStart] = useState("");
|
||||
const [end, setEnd] = useState("");
|
||||
const [result, setResult] = useState<BacktestResult | null>(null);
|
||||
const [running, setRunning] = useState(false);
|
||||
const [jobId, setJobId] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
apiGet<FactorMeta[]>("/factors")
|
||||
.then((list) => {
|
||||
setFactors(list);
|
||||
// 默认示例组合：中期动量（重）+ 低波动（防）
|
||||
setPicks([
|
||||
{ name: "momentum_60", weight: 1.5 },
|
||||
{ name: "volatility_60", weight: 1.0 },
|
||||
]);
|
||||
})
|
||||
.catch((e: Error) => setError(e.message));
|
||||
const { start: s, end: e } = recentRange();
|
||||
setStart(s);
|
||||
setEnd(e);
|
||||
}, []);
|
||||
|
||||
function togglePick(name: string) {
|
||||
setPicks((prev) =>
|
||||
prev.some((p) => p.name === name)
|
||||
? prev.filter((p) => p.name !== name)
|
||||
: [...prev, { name, weight: 1 }],
|
||||
);
|
||||
}
|
||||
|
||||
function setWeight(name: string, weight: number) {
|
||||
setPicks((prev) => prev.map((p) => (p.name === name ? { ...p, weight } : p)));
|
||||
}
|
||||
|
||||
async function run() {
|
||||
const valid = picks.filter((p) => Number.isFinite(p.weight) && p.weight > 0);
|
||||
if (valid.length === 0) {
|
||||
setError("请选择至少一个因子并设置大于 0 的权重");
|
||||
return;
|
||||
}
|
||||
setRunning(true);
|
||||
setError("");
|
||||
setJobId("");
|
||||
setResult(null);
|
||||
try {
|
||||
const spec: ResearchSpec = {
|
||||
type: "backtest",
|
||||
universe: { exclude_st: excludeSt, min_listing_days: 0 },
|
||||
factors: valid.map((p) => ({ name: p.name, weight: p.weight })),
|
||||
selection: { top_n: topN },
|
||||
rebalance,
|
||||
period: [start, end],
|
||||
};
|
||||
const { job_id } = await submitJob(spec);
|
||||
setJobId(job_id);
|
||||
const out = await waitJob<BacktestResult>(job_id);
|
||||
if (out.status === "success" && out.result) {
|
||||
setResult(out.result);
|
||||
} else {
|
||||
setError(`任务${out.status}${out.error ? `：${out.error}` : ""}`);
|
||||
}
|
||||
} catch (e) {
|
||||
setError((e as Error).message);
|
||||
} finally {
|
||||
setRunning(false);
|
||||
setJobId("");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>因子组合</h1>
|
||||
<div className="card">
|
||||
<h2>组合方式（如何合成一个分数）</h2>
|
||||
<ol className="muted" style={{ margin: 0, paddingLeft: 18, lineHeight: 1.8 }}>
|
||||
<li>选择若干因子并设置权重（默认 1；低为好方向由引擎自动反向）。</li>
|
||||
<li>
|
||||
每个交易日：每个因子在全体股票横截面上做 <b>z-score 标准化</b>
|
||||
（该日缺失因子值的股票不参与该因子得分）。
|
||||
</li>
|
||||
<li>综合得分 = Σ（权重 × 标准化后因子得分），得分越高越优先。</li>
|
||||
<li>每期按综合得分取 Top N 等权持有，到下一调仓日再平衡（含成本 / 涨跌停 / 停牌近似）。</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h2>选因子 + 设权重</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>因子</th>
|
||||
<th>方向</th>
|
||||
<th>权重</th>
|
||||
<th>简介</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{factors.map((f) => {
|
||||
const pick = picks.find((p) => p.name === f.name);
|
||||
return (
|
||||
<tr key={f.name}>
|
||||
<td>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={!!pick}
|
||||
onChange={() => togglePick(f.name)}
|
||||
/>
|
||||
</td>
|
||||
<td>{f.name}</td>
|
||||
<td>{f.direction === "higher_is_better" ? "高为好" : "低为好"}</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
step="0.1"
|
||||
min="0.1"
|
||||
style={{ width: 80 }}
|
||||
value={pick?.weight ?? 1}
|
||||
disabled={!pick}
|
||||
onChange={(e) => setWeight(f.name, Number(e.target.value))}
|
||||
/>
|
||||
</td>
|
||||
<td className="muted">{f.brief ?? f.description}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h2>回测条件</h2>
|
||||
<div className="row">
|
||||
<label className="muted">
|
||||
Top N{" "}
|
||||
<input type="number" min={1} max={200} value={topN} onChange={(e) => setTopN(Number(e.target.value))} />
|
||||
</label>
|
||||
<label className="muted">
|
||||
调仓{" "}
|
||||
<select value={rebalance} onChange={(e) => setRebalance(e.target.value as "monthly" | "weekly")}>
|
||||
<option value="monthly">月度</option>
|
||||
<option value="weekly">周度</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="muted">
|
||||
开始 <input type="date" value={start} onChange={(e) => setStart(e.target.value)} />
|
||||
</label>
|
||||
<label className="muted">
|
||||
结束 <input type="date" value={end} onChange={(e) => setEnd(e.target.value)} />
|
||||
</label>
|
||||
<label className="muted">
|
||||
<input type="checkbox" checked={excludeSt} onChange={(e) => setExcludeSt(e.target.checked)} />
|
||||
{" "}剔除 ST
|
||||
</label>
|
||||
<button className="primary" onClick={run} disabled={running}>
|
||||
{running ? "后台运行中…" : `回测组合（${picks.length} 个因子）`}
|
||||
</button>
|
||||
</div>
|
||||
{running && jobId && <div className="muted">任务 {jobId} 后台执行中，请稍候…</div>}
|
||||
{error && <div className="error">{error}</div>}
|
||||
</div>
|
||||
|
||||
{result && <ResultView result={result} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ResultView({ result }: { result: BacktestResult }) {
|
||||
const s = result.summary;
|
||||
return (
|
||||
<>
|
||||
<div className="card">
|
||||
<h2>
|
||||
结果 · {s.total_return_pct.toFixed(2)}%{" "}
|
||||
<span className={s.total_return_pct >= 0 ? "good" : "bad"}>
|
||||
{s.total_return_pct >= 0 ? "▲" : "▼"}
|
||||
</span>
|
||||
</h2>
|
||||
<div className="stat-grid">
|
||||
<div className="stat">
|
||||
<div className="label">期末净值</div>
|
||||
<div className="value">{s.final_equity.toLocaleString()}</div>
|
||||
</div>
|
||||
<div className="stat">
|
||||
<div className="label">年化收益</div>
|
||||
<div className="value">{s.annual_return_pct.toFixed(2)}%</div>
|
||||
</div>
|
||||
<div className="stat">
|
||||
<div className="label">Sharpe</div>
|
||||
<div className="value">{s.sharpe.toFixed(2)}</div>
|
||||
</div>
|
||||
<div className="stat">
|
||||
<div className="label">最大回撤</div>
|
||||
<div className="value bad">{s.max_drawdown_pct.toFixed(2)}%</div>
|
||||
</div>
|
||||
<div className="stat">
|
||||
<div className="label">胜率</div>
|
||||
<div className="value">{s.win_rate_pct.toFixed(1)}%</div>
|
||||
</div>
|
||||
<div className="stat">
|
||||
<div className="label">交易 / 换手</div>
|
||||
<div className="value">{s.total_trades} / {s.avg_turnover_pct.toFixed(0)}%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: 10 }}>
|
||||
<LineChart title="净值曲线" data={result.equity_curve} color="#34d399" />
|
||||
</div>
|
||||
<LineChart title="回撤（%）" data={result.drawdown} color="#f87171" />
|
||||
</div>
|
||||
|
||||
{result.monthly_returns.length > 0 && (
|
||||
<div className="card">
|
||||
<h2>月度收益（%）</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>月份</th>
|
||||
<th>收益</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{result.monthly_returns.map((m) => (
|
||||
<tr key={`${m.year}-${m.month}`}>
|
||||
<td>{m.year}-{String(m.month).padStart(2, "0")}</td>
|
||||
<td className={m.return_pct >= 0 ? "good" : "bad"}>{m.return_pct.toFixed(2)}%</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="card">
|
||||
<h2>未建模约束（如实标注）</h2>
|
||||
<ul className="muted">{result.unimplemented.map((u, i) => <li key={i}>{u}</li>)}</ul>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user