Improve archive stats chart layout and fix invisible bar colors.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-10 11:58:27 +08:00
parent f3af6e2a53
commit daf023b403
3 changed files with 376 additions and 78 deletions
@@ -661,56 +661,163 @@
    if (!series.length) {
      return '<p class="archive-viz-empty muted">当前区间暂无平仓数据</p>';
    }
-    const w = 360;
-    const h = 88;
-    const padX = 12;
-    const padY = 10;
+    const w = 400;
+    const h = 110;
+    const padL = 36;
+    const padR = 8;
+    const padT = 8;
+    const padB = 22;
    const vals = series.map(function (s) { return s.cum; });
    const minV = Math.min(0, ...vals);
    const maxV = Math.max(0, ...vals);
    const range = maxV - minV || 1;
-    const innerW = w - padX * 2;
-    const innerH = h - padY * 2;
-    const zeroY = padY + innerH - ((0 - minV) / range) * innerH;
-    const pts = series
-      .map(function (s, i) {
-        const x = padX + (i / Math.max(series.length - 1, 1)) * innerW;
-        const y = padY + innerH - ((s.cum - minV) / range) * innerH;
-        return x.toFixed(1) + "," + y.toFixed(1);
-      })
-      .join(" ");
+    const innerW = w - padL - padR;
+    const innerH = h - padT - padB;
+    const yOf = function (v) {
+      return padT + innerH - ((v - minV) / range) * innerH;
+    };
+    const zeroY = yOf(0);
+    const pts = series.map(function (s, i) {
+      const x = padL + (i / Math.max(series.length - 1, 1)) * innerW;
+      const y = yOf(s.cum);
+      return { x: x, y: y };
+    });
+    const linePts = pts.map(function (p) { return p.x.toFixed(1) + "," + p.y.toFixed(1); }).join(" ");
+    const areaPts =
+      linePts +
+      " " +
+      pts[pts.length - 1].x.toFixed(1) +
+      "," +
+      zeroY.toFixed(1) +
+      " " +
+      pts[0].x.toFixed(1) +
+      "," +
+      zeroY.toFixed(1);
    const last = series[series.length - 1];
    const lastCls = last.cum >= 0 ? "pnl-pos" : "pnl-neg";
+    const lineCls = last.cum >= 0 ? "archive-cum-line--up" : "archive-cum-line--down";
    const sign = last.cum > 0 ? "+" : "";
+    const fmtAxis = function (v) {
+      const a = Math.abs(v);
+      if (a >= 100) return (v > 0 ? "+" : "") + v.toFixed(0);
+      if (a >= 10) return (v > 0 ? "+" : "") + v.toFixed(1);
+      return (v > 0 ? "+" : "") + v.toFixed(2);
+    };
+    const yTicks = [maxV, 0, minV].filter(function (v, i, arr) {
+      return arr.indexOf(v) === i;
+    });
+    const yLabels = yTicks
+      .map(function (v) {
+        return (
+          '<text x="' +
+          (padL - 4) +
+          '" y="' +
+          (yOf(v) + 3.5).toFixed(1) +
+          '" class="archive-cum-ylabel" text-anchor="end">' +
+          esc(fmtAxis(v)) +
+          "</text>"
+        );
+      })
+      .join("");
+    const xLabels =
+      '<text x="' +
+      padL +
+      '" y="' +
+      (h - 4) +
+      '" class="archive-cum-xlabel" text-anchor="start">' +
+      esc(series[0].day.slice(5)) +
+      "</text>" +
+      (series.length > 1
+        ? '<text x="' +
+          (padL + innerW) +
+          '" y="' +
+          (h - 4) +
+          '" class="archive-cum-xlabel" text-anchor="end">' +
+          esc(series[series.length - 1].day.slice(5)) +
+          "</text>"
+        : "");
    return (
      '<div class="archive-cum-head">' +
      '<span class="archive-viz-block-title">累计盈亏</span>' +
      '<span class="archive-cum-end ' + lastCls + '">' + sign + last.cum.toFixed(2) + "U</span>" +
      "</div>" +
      '<svg class="archive-cum-chart" viewBox="0 0 ' + w + " " + h + '" preserveAspectRatio="none" aria-hidden="true">' +
-      '<line x1="' + padX + '" y1="' + zeroY.toFixed(1) + '" x2="' + (w - padX) + '" y2="' + zeroY.toFixed(1) + '" class="archive-cum-zero" />' +
-      '<polyline points="' + pts + '" class="archive-cum-line" />' +
+      yLabels +
+      xLabels +
+      '<line x1="' + padL + '" y1="' + zeroY.toFixed(1) + '" x2="' + (w - padR) + '" y2="' + zeroY.toFixed(1) + '" class="archive-cum-zero" />' +
+      '<polygon points="' + areaPts + '" class="archive-cum-area ' + lineCls + '" />' +
+      '<polyline points="' + linePts + '" class="archive-cum-line ' + lineCls + '" />' +
+      '<circle cx="' + pts[pts.length - 1].x.toFixed(1) + '" cy="' + pts[pts.length - 1].y.toFixed(1) + '" r="3" class="archive-cum-dot ' + lineCls + '" />' +
      "</svg>"
    );
  }

  function barRow(label, valueLabel, pct, fillCls) {
+    const w = Math.max(0, Math.min(100, pct));
    return (
      '<div class="archive-viz-bar-row">' +
-      '<span class="k">' + esc(label) + "</span>" +
-      '<div class="archive-viz-bar-track"><div class="archive-viz-bar-fill ' + fillCls + '" style="width:' + Math.max(0, Math.min(100, pct)).toFixed(1) + '%"></div></div>' +
+      '<span class="k" title="' + esc(label) + '">' + esc(label) + "</span>" +
+      '<div class="archive-viz-bar-track"><div class="archive-viz-bar-fill ' + fillCls + '" style="width:' + w.toFixed(1) + '%"></div></div>' +
      '<span class="v">' + esc(valueLabel) + "</span>" +
      "</div>"
    );
  }

+  function stackedPnlBar(profit, loss) {
+    const total = profit + loss;
+    if (total <= 0) {
+      return '<p class="archive-viz-empty muted">暂无盈亏数据</p>';
+    }
+    const profitPct = (profit / total) * 100;
+    const lossPct = 100 - profitPct;
+    const net = profit - loss;
+    const netCls = net >= 0 ? "pnl-pos" : "pnl-neg";
+    const netSign = net > 0 ? "+" : "";
+    return (
+      '<div class="archive-viz-stacked">' +
+      '<div class="archive-viz-stacked-seg archive-viz-stacked-seg--profit" style="width:' + profitPct.toFixed(1) + '%" title="总盈利 ' + profit.toFixed(2) + 'U">' +
+      (profitPct >= 18 ? profit.toFixed(2) + "U" : "") +
+      "</div>" +
+      '<div class="archive-viz-stacked-seg archive-viz-stacked-seg--loss" style="width:' + lossPct.toFixed(1) + '%" title="总亏损 ' + loss.toFixed(2) + 'U">' +
+      (lossPct >= 18 ? loss.toFixed(2) + "U" : "") +
+      "</div>" +
+      "</div>" +
+      '<div class="archive-viz-stacked-meta">' +
+      '<span class="archive-viz-legend archive-viz-legend--profit">盈利 ' + profit.toFixed(2) + "U</span>" +
+      '<span class="archive-viz-legend archive-viz-legend--loss">亏损 ' + loss.toFixed(2) + "U</span>" +
+      '<span class="archive-viz-legend archive-viz-legend--net ' + netCls + '">净 ' + netSign + net.toFixed(2) + "U</span>" +
+      "</div>"
+    );
+  }
+
+  function divergingBarRow(label, pnl, maxAbs) {
+    const absPct = (Math.abs(pnl) / maxAbs) * 50;
+    const cls = pnl >= 0 ? "archive-viz-div-fill--profit" : "archive-viz-div-fill--loss";
+    const vCls = pnl >= 0 ? "pnl-pos" : "pnl-neg";
+    const sign = pnl > 0 ? "+" : "";
+    const style =
+      pnl >= 0
+        ? "left:50%;width:" + absPct.toFixed(1) + "%"
+        : "right:50%;width:" + absPct.toFixed(1) + "%";
+    return (
+      '<div class="archive-viz-div-row">' +
+      '<span class="k" title="' + esc(label) + '">' + esc(label) + "</span>" +
+      '<div class="archive-viz-div-track"><div class="archive-viz-div-mid"></div><div class="archive-viz-div-fill ' + cls + '" style="' + style + '"></div></div>' +
+      '<span class="v ' + vCls + '">' + sign + pnl.toFixed(2) + "U</span>" +
+      "</div>"
+    );
+  }
+
  function renderStatsCharts() {
    if (!elStatsCharts) return;
    const st = dailyStats || { open_count: 0, by_exchange: {} };
    const openN = st.open_count || 0;
+    const winN = st.win_count || 0;
+    const lossN = st.loss_count || 0;
    const winRate = openN ? Number(st.win_rate) || 0 : 0;
    const sides = sumTradePnlSides(dailyTrades);
    const pnlTotal = sides.profit + sides.loss;
+    const netPnl = Number(st.pnl_total) || 0;
    const sickN = st.sick_count || 0;
    const sickPct = openN ? (sickN / openN) * 100 : 0;
    const winHold = avgHoldMinutes(dailyTrades, "win");
@@ -720,13 +827,20 @@
    const exKeys = Object.keys(byEx).sort();

    if (elStatsVizSub) {
-      const pnl = Number(st.pnl_total) || 0;
-      const sign = pnl > 0 ? "+" : "";
+      const sign = netPnl > 0 ? "+" : "";
      elStatsVizSub.textContent = openN
-        ? "胜率 " + winRate.toFixed(0) + "% · " + sign + pnl.toFixed(2) + "U"
+        ? "胜率 " + winRate.toFixed(0) + "% · " + sign + netPnl.toFixed(2) + "U"
        : "暂无平仓";
    }

+    if (!openN) {
+      elStatsCharts.innerHTML = '<p class="archive-viz-empty muted">当前区间暂无平仓数据</p>';
+      return;
+    }
+
+    const netCls = netPnl >= 0 ? "pnl-pos" : "pnl-neg";
+    const netSign = netPnl > 0 ? "+" : "";
+
    let exBars = "";
    if (exKeys.length) {
      const maxAbs = Math.max.apply(
@@ -738,44 +852,54 @@
      exBars = exKeys
        .map(function (ex) {
          const pnl = Number(byEx[ex].pnl_total) || 0;
-          const pct = (Math.abs(pnl) / maxAbs) * 100;
-          const cls = pnl >= 0 ? "archive-viz-bar-fill--profit" : "archive-viz-bar-fill--loss";
-          const sign = pnl > 0 ? "+" : "";
-          return barRow(exchangeLabel(ex), sign + pnl.toFixed(2) + "U", pct, cls);
+          return divergingBarRow(exchangeLabel(ex), pnl, maxAbs);
        })
        .join("");
    } else {
-      exBars = '<p class="archive-viz-empty muted">暂无分交易所数据</p>';
+      exBars = '<p class="archive-viz-empty muted">暂无分策略数据</p>';
    }

    const cumSeries = buildCumulativeSeries(dailyTrades);
    elStatsCharts.innerHTML =
-      '<div class="archive-viz-grid">' +
-      '<div class="archive-viz-ring-wrap">' +
+      '<div class="archive-viz-kpis">' +
+      '<div class="archive-viz-kpi archive-viz-kpi--pnl">' +
+      '<span class="archive-viz-kpi-val ' + netCls + '">' + netSign + netPnl.toFixed(2) + "U</span>" +
+      '<span class="archive-viz-kpi-lbl">净盈亏</span>' +
+      "</div>" +
+      '<div class="archive-viz-kpi archive-viz-kpi--win">' +
      '<div class="archive-viz-ring" style="--win-pct:' + winRate.toFixed(1) + '">' +
-      '<span class="archive-viz-ring-label">' + (openN ? winRate.toFixed(0) + "%" : "—") + "</span>" +
+      '<span class="archive-viz-ring-label">' + winRate.toFixed(0) + "%</span>" +
      "</div>" +
-      '<span class="archive-viz-caption">胜率</span>' +
+      '<span class="archive-viz-kpi-lbl">' + winN + "胜 " + lossN + "负</span>" +
      "</div>" +
-      '<div class="archive-viz-bars">' +
-      (pnlTotal > 0
-        ? barRow("盈利", sides.profit.toFixed(2) + "U", (sides.profit / pnlTotal) * 100, "archive-viz-bar-fill--profit") +
-          barRow("亏损", sides.loss.toFixed(2) + "U", (sides.loss / pnlTotal) * 100, "archive-viz-bar-fill--loss")
-        : barRow("盈利", "—", 0, "archive-viz-bar-fill--profit") +
-          barRow("亏损", "—", 0, "archive-viz-bar-fill--loss")) +
-      barRow("犯病", sickN + " 笔 · " + sickPct.toFixed(1) + "%", sickPct, "archive-viz-bar-fill--sick") +
+      '<div class="archive-viz-kpi archive-viz-kpi--sick">' +
+      '<span class="archive-viz-kpi-val">' + sickN + " 笔</span>" +
+      '<span class="archive-viz-kpi-lbl">犯病 " + sickPct.toFixed(0) + "%</span>" +
      "</div>" +
      "</div>" +
+      '<div class="archive-viz-block">' +
+      '<div class="archive-viz-block-title">盈亏构成</div>' +
+      (pnlTotal > 0 ? stackedPnlBar(sides.profit, sides.loss) : '<p class="archive-viz-empty muted">暂无盈亏数据</p>') +
+      "</div>" +
      '<div class="archive-viz-block archive-viz-block--exchange">' +
-      '<div class="archive-viz-block-title">分交易所盈亏</div>' +
+      '<div class="archive-viz-block-title">分策略盈亏</div>' +
      exBars +
      "</div>" +
      (holdMax > 0
        ? '<div class="archive-viz-block archive-viz-block--hold">' +
          '<div class="archive-viz-block-title">持仓时长对比</div>' +
-          barRow("盈单", fmtDurationMinutes(winHold), ((winHold || 0) / holdMax) * 100, "archive-viz-bar-fill--profit") +
-          barRow("亏单", fmtDurationMinutes(lossHold), ((lossHold || 0) / holdMax) * 100, "archive-viz-bar-fill--loss") +
-          "</div>"
+          '<div class="archive-viz-hold-grid">' +
+          '<div class="archive-viz-hold-card archive-viz-hold-card--win">' +
+          '<span class="archive-viz-hold-val">' + esc(fmtDurationMinutes(winHold)) + "</span>" +
+          '<span class="archive-viz-hold-lbl">盈单均持仓</span>' +
+          '<div class="archive-viz-bar-track"><div class="archive-viz-bar-fill archive-viz-bar-fill--profit" style="width:' + (((winHold || 0) / holdMax) * 100).toFixed(1) + '%"></div></div>' +
+          "</div>" +
+          '<div class="archive-viz-hold-card archive-viz-hold-card--loss">' +
+          '<span class="archive-viz-hold-val">' + esc(fmtDurationMinutes(lossHold)) + "</span>" +
+          '<span class="archive-viz-hold-lbl">亏单均持仓</span>' +
+          '<div class="archive-viz-bar-track"><div class="archive-viz-bar-fill archive-viz-bar-fill--loss" style="width:' + (((lossHold || 0) / holdMax) * 100).toFixed(1) + '%"></div></div>' +
+          "</div>" +
+          "</div></div>"
        : "") +
      '<div class="archive-viz-block archive-viz-block--cum">' +
      renderCumulativeChart(cumSeries) +