qlib/frontend/web/app/factors/page.tsx

"use client";

import { useEffect, useState } from "react";
import { apiGet, apiPost } from "@/lib/api";
import type { FactorMeta, FactorTestReport, ResearchSpec } from "@/lib/types";

export default function FactorsPage() {
  const [factors, setFactors] = useState<FactorMeta[]>([]);
  const [name, setName] = useState("momentum_60");
  const [start, setStart] = useState("2024-03-01");
  const [end, setEnd] = useState("2024-12-31");
  const [report, setReport] = useState<FactorTestReport | null>(null);
  const [running, setRunning] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    apiGet<FactorMeta[]>("/factors")
      .then(setFactors)
      .catch((e: Error) => setError(e.message));
  }, []);

  function run() {
    setRunning(true);
    setError("");
    const spec: ResearchSpec = {
      type: "factor_test",
      universe: { exclude_st: true, min_listing_days: 0 },
      factors: [{ name, weight: 1 }],
      selection: { top_n: 10 },
      rebalance: "monthly",
      period: [start, end],
    };
    apiPost<FactorTestReport>("/factor-tests", spec)
      .then(setReport)
      .catch((e: Error) => setError(e.message))
      .finally(() => setRunning(false));
  }

  return (
    <>
      <h1>因子研究</h1>
      <div className="card">
        <h2>因子目录（行情因子 · 无未来函数）</h2>
        <table>
          <thead>
            <tr>
              <th>名称</th>
              <th>描述</th>
              <th>公式</th>
              <th>回看</th>
              <th>方向</th>
            </tr>
          </thead>
          <tbody>
            {factors.map((f) => (
              <tr key={f.name}>
                <td>{f.name}</td>
                <td>{f.description}</td>
                <td className="muted">{f.formula}</td>
                <td>{f.lookback}</td>
                <td>{f.direction === "higher_is_better" ? "高为好" : "低为好"}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="card">
        <h2>运行单因子测试（IC / RankIC / 分层）</h2>
        <div className="row">
          <select value={name} onChange={(e) => setName(e.target.value)}>
            {factors.map((f) => (
              <option key={f.name} value={f.name}>
                {f.name}
              </option>
            ))}
          </select>
          <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>
          <button className="primary" onClick={run} disabled={running}>
            {running ? "运行中…" : "运行因子测试"}
          </button>
        </div>
        {error && <div className="error">{error}</div>}

        {report && (
          <div style={{ marginTop: 16 }}>
            <div className="stat-grid">
              <div className="stat">
                <div className="label">IC 均值</div>
                <div className="value">{report.ic_mean.toFixed(4)}</div>
              </div>
              <div className="stat">
                <div className="label">RankIC 均值</div>
                <div className="value">{report.rank_ic_mean.toFixed(4)}</div>
              </div>
              <div className="stat">
                <div className="label">ICIR</div>
                <div className="value">{report.icir.toFixed(3)}</div>
              </div>
              <div className="stat">
                <div className="label">正收益占比</div>
                <div className="value">{report.positive_ratio_pct.toFixed(1)}%</div>
              </div>
              <div className="stat">
                <div className="label">样本日数</div>
                <div className="value">{report.sample_days}</div>
              </div>
            </div>
            {report.quantile_returns.length > 0 && (
              <table style={{ marginTop: 12 }}>
                <thead>
                  <tr>
                    <th>分层（1 最低 → 5 最高）</th>
                    {report.quantile_returns.map((q) => (
                      <th key={q.quantile}>Q{q.quantile + 1}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>未来 21 日平均收益</td>
                    {report.quantile_returns.map((q) => (
                      <td key={q.quantile}>{q.return_pct.toFixed(2)}%</td>
                    ))}
                  </tr>
                </tbody>
              </table>
            )}
          </div>
        )}
      </div>
    </>
  );
}