dekun/crypto_monitor
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: circular fund account cards with fullscreen detail view

Browse Source 
Show per-exchange balances as clickable circles with mini curves; open a fullscreen panel for equity history and drawdown.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-10 17:04:21 +08:00
parent ba629ea0ee
commit ec8607932b
3 changed files with 403 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
manual_trading_hub/static/funds.js
+192 -47
View File
@@ -15,10 +15,26 @@
const elAccounts = document.getElementById("funds-accounts");
const elBtnRefresh = document.getElementById("funds-btn-refresh");
const elFs = document.getElementById("funds-fullscreen");
const elFsBackdrop = document.getElementById("funds-fs-backdrop");
const elFsClose = document.getElementById("funds-fs-close");
const elFsTitle = document.getElementById("funds-fs-title");
const elFsSub = document.getElementById("funds-fs-sub");
const elFsTotal = document.getElementById("funds-fs-total");
const elFsFunding = document.getElementById("funds-fs-funding");
const elFsTrading = document.getElementById("funds-fs-trading");
const elFsDelta = document.getElementById("funds-fs-delta");
const elFsDd = document.getElementById("funds-fs-dd");
const elFsChartHost = document.getElementById("funds-fs-chart");
let chart = null;
let lineSeries = null;
let fsChart = null;
let fsLineSeries = null;
let inited = false;
let loading = false;
let lastOverview = null;
let fsAccountKey = "";
function fmt(n, d) {
if (n == null || n === "" || !Number.isFinite(Number(n))) return "—";
@@ -64,6 +80,15 @@
if (elChartHost) elChartHost.innerHTML = "";
}
function destroyFsChart() {
if (fsChart) {
fsChart.remove();
fsChart = null;
fsLineSeries = null;
}
if (elFsChartHost) elFsChartHost.innerHTML = "";
}
function chartPalette() {
const light = document.documentElement.getAttribute("data-theme") === "light";
return light
@@ -71,11 +96,9 @@
: { bg: "#0b0e18", text: "#9aa4b8", border: "#2a3348", line: "#3b82f6" };
}
function ensureChart() {
if (!elChartHost || !window.LightweightCharts) return;
if (chart) return;
function createAreaChart(host) {
const p = chartPalette();
chart = LightweightCharts.createChart(elChartHost, {
const c = LightweightCharts.createChart(host, {
layout: { background: { color: p.bg }, textColor: p.text },
grid: {
vertLines: { color: p.border, visible: true },
@@ -87,7 +110,7 @@
handleScroll: { mouseWheel: true, pressedMouseMove: true },
handleScale: { axisPressedMouseMove: true, mouseWheel: true, pinch: true },
});
lineSeries = chart.addAreaSeries({
const s = c.addAreaSeries({
lineColor: p.line,
topColor: p.line + "44",
bottomColor: p.line + "08",
@@ -95,11 +118,28 @@
priceFormat: { type: "price", precision: 2, minMove: 0.01 },
});
new ResizeObserver(function () {
if (chart && elChartHost) {
chart.applyOptions({ width: elChartHost.clientWidth, height: elChartHost.clientHeight });
if (c && host) {
c.applyOptions({ width: host.clientWidth, height: host.clientHeight });
}
}).observe(elChartHost);
chart.applyOptions({ width: elChartHost.clientWidth, height: elChartHost.clientHeight });
}).observe(host);
c.applyOptions({ width: host.clientWidth, height: host.clientHeight });
return { chart: c, series: s };
}
function ensureChart() {
if (!elChartHost || !window.LightweightCharts) return;
if (chart) return;
const built = createAreaChart(elChartHost);
chart = built.chart;
lineSeries = built.series;
}
function ensureFsChart() {
if (!elFsChartHost || !window.LightweightCharts) return;
if (fsChart) return;
const built = createAreaChart(elFsChartHost);
fsChart = built.chart;
fsLineSeries = built.series;
}
function renderMiniChart(host, series) {
@@ -120,7 +160,12 @@
handleScroll: false,
handleScale: false,
});
const s = mini.addLineSeries({ color: p.line, lineWidth: 1.5 });
const s = mini.addAreaSeries({
lineColor: p.line,
topColor: p.line + "55",
bottomColor: p.line + "05",
lineWidth: 1.5,
});
s.setData(data);
mini.timeScale().fitContent();
const w = host.clientWidth;
@@ -128,6 +173,21 @@
if (w > 0 && h > 0) mini.applyOptions({ width: w, height: h });
}
function accountStatus(ac) {
if (!ac || !ac.monitored) return { text: "未监控", cls: "" };
if (ac.data_ok) return { text: "已监控", cls: "is-ok" };
return { text: "余额未齐", cls: "" };
}
function monitoredLabel(ac) {
return ac && ac.monitored ? "暂无曲线" : "未参与";
}
function shortAmt(ac) {
if (!ac || !ac.monitored || !ac.data_ok) return "—";
return fmt(ac.total_usdt, 0) + " U";
}
function renderAccounts(accounts) {
if (!elAccounts) return;
if (!accounts || !accounts.length) {
@@ -137,66 +197,139 @@
elAccounts.innerHTML = accounts
.map(function (ac) {
const monitored = !!ac.monitored;
const cls = monitored ? "" : " is-off";
const total = monitored && ac.data_ok ? fmt(ac.total_usdt, 2) + " U" : "—";
const funding = monitored && ac.funding_usdt != null ? fmt(ac.funding_usdt, 2) : "—";
const trading = monitored && ac.trading_usdt != null ? fmt(ac.trading_usdt, 2) : "—";
const dd = ac.drawdown || {};
const ddU = dd.max_drawdown_u != null ? fmt(dd.max_drawdown_u, 2) + " U" : "—";
const ddPct = dd.max_drawdown_pct != null ? fmt(dd.max_drawdown_pct, 2) + "%" : "—";
const status = monitored ? (ac.data_ok ? "已监控" : "余额未齐") : "未监控";
const offCls = monitored ? "" : " is-off";
const st = accountStatus(ac);
const clickable = monitored ? "" : ' disabled aria-disabled="true"';
return (
'<article class="funds-ac-card' +
cls +
'<div class="funds-ac-item">' +
'<button type="button" class="funds-ac-circle' +
offCls +
'" data-key="' +
(ac.key || "") +
'"' +
clickable +
' title="' +
(monitored ? "点击查看资金曲线" : "未监控，不参与合计") +
'">' +
'<div class="funds-ac-head">' +
'<h3>' +
'<div class="funds-ac-circle-chart" aria-hidden="true"></div>' +
'<div class="funds-ac-circle-overlay">' +
'<span class="funds-ac-circle-name">' +
(ac.name || ac.key || "—") +
"</h3>" +
'<span class="funds-ac-badge">' +
status +
"</span>" +
'<span class="funds-ac-circle-amt">' +
shortAmt(ac) +
"</span>" +
"</div>" +
'<div class="funds-ac-stats">' +
'<div><span class="k">总资金</span><span class="v">' +
total +
"</span></div>" +
'<div><span class="k">资金户</span><span class="v">' +
funding +
"</span></div>" +
'<div><span class="k">交易户</span><span class="v">' +
trading +
"</span></div>" +
'<div><span class="k">最大回撤</span><span class="v">' +
ddU +
" / " +
ddPct +
"</span></div>" +
"</div>" +
'<div class="funds-ac-chart" aria-hidden="true"></div>' +
"</article>"
"</button>" +
'<span class="funds-ac-circle-badge ' +
st.cls +
'">' +
st.text +
"</span>" +
"</div>"
);
})
.join("");
elAccounts.querySelectorAll(".funds-ac-card").forEach(function (card, idx) {
elAccounts.querySelectorAll(".funds-ac-circle").forEach(function (btn, idx) {
const ac = accounts[idx];
const host = card.querySelector(".funds-ac-chart");
const host = btn.querySelector(".funds-ac-circle-chart");
if (ac && ac.monitored && host) {
renderMiniChart(host, ac.series || []);
} else if (host) {
host.textContent = monitoredLabel(ac);
}
if (ac && ac.monitored) {
btn.addEventListener("click", function () {
openAccountFullscreen(ac.key);
});
}
});
}
function monitoredLabel(ac) {
return ac && ac.monitored ? "暂无曲线" : "未参与合计";
function findAccount(key) {
const accounts = (lastOverview && lastOverview.accounts) || [];
return accounts.find(function (ac) {
return String(ac.key || "") === String(key || "");
});
}
function closeAccountFullscreen() {
fsAccountKey = "";
destroyFsChart();
if (elFs) {
elFs.classList.add("hidden");
elFs.setAttribute("aria-hidden", "true");
}
document.body.classList.remove("funds-fullscreen-open");
}
function openAccountFullscreen(key) {
const ac = findAccount(key);
if (!ac || !ac.monitored) return;
fsAccountKey = String(key || "");
const dd = ac.drawdown || {};
const meta = lastOverview || {};
if (elFsTitle) elFsTitle.textContent = ac.name || ac.key || "—";
if (elFsSub) {
const parts = [
"资金户 + 交易户（不含浮盈）",
"交易日 " + (meta.trading_day || "—"),
"自 " + (meta.history_start_day || "2026-06-09") + " 起",
];
elFsSub.textContent = parts.join(" · ");
}
if (elFsTotal) {
elFsTotal.textContent =
ac.data_ok && ac.total_usdt != null ? fmt(ac.total_usdt, 2) + " U" : "—";
}
if (elFsFunding) {
elFsFunding.textContent =
ac.funding_usdt != null ? fmt(ac.funding_usdt, 2) + " U" : "—";
}
if (elFsTrading) {
elFsTrading.textContent =
ac.trading_usdt != null ? fmt(ac.trading_usdt, 2) + " U" : "—";
}
if (elFsDelta) {
elFsDelta.textContent = fmtDelta(ac.day_delta_usdt);
elFsDelta.className = "v " + deltaClass(ac.day_delta_usdt);
}
if (elFsDd) {
const ddU = dd.max_drawdown_u != null ? fmt(dd.max_drawdown_u, 2) + " U" : "—";
const ddPct = dd.max_drawdown_pct != null ? fmt(dd.max_drawdown_pct, 2) + "%" : "—";
elFsDd.textContent = ddU + " / " + ddPct;
}
if (elFs) {
elFs.classList.remove("hidden");
elFs.setAttribute("aria-hidden", "false");
document.body.classList.add("funds-fullscreen-open");
}
destroyFsChart();
const pts = seriesToChartData(ac.series || []);
if (pts.length) {
ensureFsChart();
if (fsLineSeries) {
fsLineSeries.setData(pts);
fsChart.timeScale().fitContent();
}
requestAnimationFrame(function () {
if (fsChart && elFsChartHost) {
fsChart.applyOptions({
width: elFsChartHost.clientWidth,
height: elFsChartHost.clientHeight,
});
fsChart.timeScale().fitContent();
}
});
} else if (elFsChartHost) {
elFsChartHost.innerHTML =
'<p class="funds-empty">暂无历史曲线，请保持监控板运行以积累快照</p>';
}
}
function renderOverview(data) {
lastOverview = data;
const totals = data.totals || {};
const dd = totals.drawdown || {};
if (elTotal) {
@@ -235,6 +368,11 @@
}
}
renderAccounts(data.accounts || []);
if (fsAccountKey) {
const ac = findAccount(fsAccountKey);
if (ac && ac.monitored) openAccountFullscreen(fsAccountKey);
else closeAccountFullscreen();
}
}
async function load() {
@@ -259,8 +397,14 @@
function bind() {
if (elBtnRefresh) elBtnRefresh.addEventListener("click", load);
if (elFsBackdrop) elFsBackdrop.addEventListener("click", closeAccountFullscreen);
if (elFsClose) elFsClose.addEventListener("click", closeAccountFullscreen);
document.addEventListener("keydown", function (ev) {
if (ev.key === "Escape" && fsAccountKey) closeAccountFullscreen();
});
document.addEventListener("hub-theme-change", function () {
destroyChart();
destroyFsChart();
load();
});
}
@@ -275,6 +419,7 @@
}
function destroy() {
closeAccountFullscreen();
destroyChart();
}