// ============================================================================
// App — main dashboard composition (V3 Ops)
// ============================================================================
const { useState, useEffect } = React;
// /coin 스코프(코인 전용 페이지)에서는 심볼 가격포지션 차트를 숨긴다(코인엔 불필요 + 로딩 무거움).
const DASH_IS_COIN = (typeof location !== "undefined")
&& location.pathname.replace(/\/+$/, "").endsWith("/coin");
const GRID_POSITIONS_EMBED_VERSION_PARAM = "v=20260601-grid-viewopts";
const gridPositionsSrc = (accountKey = "") => {
let apiKey = "";
try {
apiKey = (typeof localStorage !== "undefined" && localStorage.getItem("v3ops_api_key")) || "";
} catch (_) {}
return `/grid_positions.html?account=${encodeURIComponent(accountKey || "")}&apiKey=${encodeURIComponent(apiKey)}&${GRID_POSITIONS_EMBED_VERSION_PARAM}`;
};
const GridPositionsFrame = ({ accountKey = "", compact = false }) => (
);
const uniqueSymbols = (items = []) => Array.from(new Set(items.map((x) => x.symbol).filter(Boolean)));
const priceDecimalsFor = (symbol) => symbol === "USDJPY" ? 3 : ["XAUUSD", "NAS100"].includes(symbol) ? 2 : 5;
const POSITION_CHART_TIMEFRAMES = ["5m", "15m", "1h"];
const POSITION_CHART_TIMEFRAME_KEY = "v3ops_chart_timeframe";
const POSITION_CHART_VIEW_STORAGE_KEY = "v3ops_position_chart_viewopts";
const POSITION_CHART_VIEW_DEFAULTS = {
entry: true,
sl: true,
tp: true,
pending: true,
filled: true,
closed: true,
};
const POSITION_CHART_VIEW_OPTIONS = [
{ key: "entry", label: "entry", title: "오픈 진입 마커와 진입가 라인" },
{ key: "sl", label: "SL", title: "오픈 포지션 손절가 라인" },
{ key: "tp", label: "TP", title: "오픈 포지션 익절가 라인" },
{ key: "pending", label: "대기주문", title: "대기 주문 가격 라인" },
{ key: "filled", label: "완료진입", title: "청산된 포지션의 진입 마커" },
{ key: "closed", label: "청산", title: "청산 마커" },
];
const normalizePositionTimeframe = (value) => POSITION_CHART_TIMEFRAMES.includes(value) ? value : "5m";
const readPositionTimeframe = () => {
try { return normalizePositionTimeframe(localStorage.getItem(POSITION_CHART_TIMEFRAME_KEY) || "5m"); } catch (_) { return "5m"; }
};
const readPositionChartViewOptions = () => {
try {
const saved = JSON.parse(localStorage.getItem(POSITION_CHART_VIEW_STORAGE_KEY) || "{}") || {};
return Object.fromEntries(
POSITION_CHART_VIEW_OPTIONS.map(({ key }) => [key, saved[key] !== false])
);
} catch (_) {
return { ...POSITION_CHART_VIEW_DEFAULTS };
}
};
const mergeChartBars = (existing = [], incoming = []) => {
const byTs = new Map();
[...existing, ...incoming].forEach((bar) => {
if (!bar?.ts) return;
byTs.set(bar.ts, { ...(byTs.get(bar.ts) || {}), ...bar });
});
return Array.from(byTs.values()).sort((a, b) => new Date(a.ts).getTime() - new Date(b.ts).getTime());
};
const pendingOrderTypeLabel = (type) => {
const key = String(type ?? "").toLowerCase().replace(/\s+/g, "_");
return {
buy_limit: "BUY LIMIT",
sell_limit: "SELL LIMIT",
buy_stop: "BUY STOP",
sell_stop: "SELL STOP",
buy_stop_limit: "BUY STOP LIMIT",
sell_stop_limit: "SELL STOP LIMIT",
2: "BUY LIMIT",
3: "SELL LIMIT",
4: "BUY STOP",
5: "SELL STOP",
6: "BUY STOP LIMIT",
7: "SELL STOP LIMIT",
}[key] || String(type || "대기").toUpperCase();
};
const fmtOptionalPrice = (value, symbol) => {
const n = Number(value);
return Number.isFinite(n) && n > 0 ? fmt.price(n, priceDecimalsFor(symbol)) : "—";
};
const PositionsPage = ({ data, apiStatus }) => {
const charts = data.symbolCharts || {};
const [chartTimeframe, setChartTimeframe] = useState(readPositionTimeframe);
const dataTimeframe = normalizePositionTimeframe(chartTimeframe);
const accountKey = data.bridge?.accountKey || "MT5";
const availableTimeframes = charts.timeframes?.length
? POSITION_CHART_TIMEFRAMES.filter((tf) => charts.timeframes.includes(tf))
: POSITION_CHART_TIMEFRAMES;
const [barCache, setBarCache] = useState({});
// barCacheRef: fetchFirstPage 가 barCache 의존성 없이 현재 캐시 보유 여부만 읽도록(로딩 표시
// 판정용). barCache 를 callback deps 에 넣으면 5s 마다 콜백 재생성→mount effect 재발화됨.
const barCacheRef = React.useRef(barCache);
barCacheRef.current = barCache;
const [loadingFirstKey, setLoadingFirstKey] = useState("");
const [loadingOlderKey, setLoadingOlderKey] = useState("");
const [exhaustedKeys, setExhaustedKeys] = useState({});
const [olderError, setOlderError] = useState("");
// first-page fetch 의 non-Abort 실패. "차트 데이터 없음"(빈 심볼)과 구분해 노출하고, 다음 틱
// 성공 시 클리어한다(기존 /api/all 배너 노출 대비 회귀 방지). 키 단위로 묶어 심볼 전환 시 stale 미표시.
const [firstErrorKey, setFirstErrorKey] = useState("");
const pendingOrders = data.pendingOrders || [];
const symbols = Array.from(new Set([
...(charts.symbols || []),
...uniqueSymbols(data.positions || []),
...uniqueSymbols(pendingOrders),
])).filter(Boolean);
const preferredSymbol = data.positions?.[0]?.symbol || pendingOrders?.[0]?.symbol;
const preferred = preferredSymbol && symbols.includes(preferredSymbol)
? preferredSymbol
: symbols.includes("NAS100") ? "NAS100" : symbols[0];
const [symbol, setSymbol] = useState(preferred || "NAS100");
const [hoverTicket, setHoverTicket] = useState(null);
const [selectedTicket, setSelectedTicket] = useState(null);
const [chartViewOptions, setChartViewOptions] = useState(readPositionChartViewOptions);
const symbolKey = symbols.join("|");
const cacheKeyFor = (sym, tf = dataTimeframe) => `${accountKey}|${sym || ""}|${tf || "5m"}`;
useEffect(() => {
if (symbols.length && !symbols.includes(symbol)) {
setSymbol(preferred || symbols[0]);
}
}, [symbolKey]);
useEffect(() => {
setHoverTicket(null);
setSelectedTicket(null);
setOlderError("");
try { localStorage.setItem("v3ops_selected_symbol", symbol); } catch (_) {}
}, [symbol, dataTimeframe, accountKey]);
// ★ lazy-load: 차트 막대는 /api/all 에 더 이상 없다. 현재 (account|symbol|timeframe) 의
// first-page 를 /api/chart 로 직접 fetch 한다. 트리거 = mount + 선택 변경 + 5s 라이브 틱.
// latest-wins: 요청 시작 시 selection 스냅샷 + AbortController 로 이전 요청 abort + 응답
// 적용 전 현재 selection 일치 확인(symbol 포함) → 심볼 바꿔도 옛 데이터 덮어쓰기 방지.
// MERGE(replace 아님): fresh first-page 를 기존 barCache 에 병합해 페이징한 옛 히스토리 보존.
const selectionRef = React.useRef({ accountKey, symbol, timeframe: dataTimeframe });
selectionRef.current = { accountKey, symbol, timeframe: dataTimeframe };
const firstPageAbortRef = React.useRef(null);
// in-flight 요청의 key. 5s 틱(fromTick) 경로는 같은-key 요청이 진행 중이면 skip(콜드빌드>5s
// 일 때 첫 페인트가 매 틱 abort+재시작으로 지연되지 않게). selection 변경은 그대로 abort+재시작.
const firstPageInFlightKeyRef = React.useRef("");
const fetchFirstPage = React.useCallback((fromTick = false) => {
if (DASH_IS_COIN) return; // 코인은 가격 차트 hidden → fetch 안 함
if (!symbol || !window.V3OPS_LIVE_DATA?.request) return;
const snap = { accountKey, symbol, timeframe: dataTimeframe };
const key = `${accountKey}|${symbol}|${dataTimeframe}`;
// 틱 dedupe: 같은-key first-page 가 이미 in-flight 면 틱 경로는 skip(live-data.js inFlightTick 패턴).
if (fromTick && firstPageInFlightKeyRef.current === key) return;
if (firstPageAbortRef.current) {
try { firstPageAbortRef.current.abort(); } catch (_) {}
}
const controller = typeof AbortController !== "undefined" ? new AbortController() : null;
firstPageAbortRef.current = controller;
firstPageInFlightKeyRef.current = key;
const params = new URLSearchParams();
params.set("symbol", symbol);
params.set("timeframe", dataTimeframe);
params.set("limit", "360");
params.set("includeCurrent", "1");
if (accountKey) params.set("account", accountKey);
setLoadingFirstKey((prev) => (barCacheRef.current[key]?.length ? prev : key));
window.V3OPS_LIVE_DATA.request(`/api/chart?${params.toString()}`, controller ? { signal: controller.signal } : undefined)
.then((payload) => {
const cur = selectionRef.current;
// latest-wins: 응답이 도착했을 때도 현재 selection 과 동일한 경우에만 적용.
if (cur.accountKey !== snap.accountKey || cur.symbol !== snap.symbol || cur.timeframe !== snap.timeframe) return;
// 성공 시 이 key 의 first-page 에러 클리어(다음 틱 복구).
setFirstErrorKey((prev) => (prev === key ? "" : prev));
const incoming = Array.isArray(payload?.bars) ? payload.bars : [];
if (!incoming.length) return;
setBarCache((prev) => ({
...prev,
[key]: mergeChartBars(prev[key] || [], incoming),
}));
})
.catch((err) => {
if (err?.name === "AbortError") return; // 더 새 요청이 취소함 — 무시
// non-Abort 실패는 노출(빈 심볼과 구분). 응답 시점 selection 이 그대로일 때만.
const cur = selectionRef.current;
if (cur.accountKey === snap.accountKey && cur.symbol === snap.symbol && cur.timeframe === snap.timeframe) {
setFirstErrorKey(key);
}
})
.finally(() => {
// 자기 자신이 현재 owner 인 요청만 로딩/in-flight 플래그를 정리(A→B→A 빠른 복귀 시 abort 된
// 이전 요청의 .finally 가 새 요청 로딩을 조기 클리어해 깜빡이는 것 방지).
if (firstPageAbortRef.current === controller) {
firstPageAbortRef.current = null;
firstPageInFlightKeyRef.current = "";
setLoadingFirstKey((cur) => (cur === key ? "" : cur));
}
});
}, [accountKey, symbol, dataTimeframe]);
// mount + (account|symbol|timeframe) 변경 시 즉시 first-page fetch.
useEffect(() => {
fetchFirstPage();
return () => {
if (firstPageAbortRef.current) {
try { firstPageAbortRef.current.abort(); } catch (_) {}
firstPageAbortRef.current = null;
}
};
}, [fetchFirstPage]);
// 5s 라이브 틱('v3ops:data') 구독 → 현재 심볼 first-page 재fetch(forming bar 갱신).
useEffect(() => {
if (DASH_IS_COIN) return;
const onTick = () => fetchFirstPage(true);
window.addEventListener("v3ops:data", onTick);
return () => window.removeEventListener("v3ops:data", onTick);
}, [fetchFirstPage]);
const selectTimeframe = (tf) => {
const next = normalizePositionTimeframe(tf);
setChartTimeframe(next);
setOlderError("");
try { localStorage.setItem(POSITION_CHART_TIMEFRAME_KEY, next); } catch (_) {}
window.dispatchEvent(new CustomEvent("v3ops:chart-timeframe-change", { detail: { timeframe: next } }));
};
const setChartViewOption = (key, checked) => {
setChartViewOptions((prev) => {
const next = { ...prev, [key]: checked };
try { localStorage.setItem(POSITION_CHART_VIEW_STORAGE_KEY, JSON.stringify(next)); } catch (_) {}
return next;
});
};
const cacheKey = cacheKeyFor(symbol);
// bars 는 이제 전적으로 barCache(=/api/chart lazy fetch)에서 온다. /api/all 에 더 이상 bars 없음.
const bars = barCache[cacheKey] || [];
const isLoadingFirst = loadingFirstKey === cacheKey && !bars.length;
const hasFirstError = firstErrorKey === cacheKey;
const loadOlderBars = React.useCallback(() => {
if (!symbol || !bars.length || !window.V3OPS_LIVE_DATA?.request) return;
if (loadingOlderKey === cacheKey || exhaustedKeys[cacheKey]) return;
const oldest = bars[0]?.ts;
if (!oldest) return;
const params = new URLSearchParams();
params.set("symbol", symbol);
params.set("timeframe", dataTimeframe);
params.set("to", oldest);
params.set("limit", "360");
params.set("includeCurrent", "0");
if (accountKey) params.set("account", accountKey);
const currentBars = bars;
setLoadingOlderKey(cacheKey);
setOlderError("");
window.V3OPS_LIVE_DATA.request(`/api/chart?${params.toString()}`)
.then((payload) => {
const olderBars = Array.isArray(payload?.bars) ? payload.bars : [];
setBarCache((prev) => ({
...prev,
[cacheKey]: mergeChartBars(olderBars, prev[cacheKey] || currentBars),
}));
if (!payload?.hasMore || olderBars.length === 0) {
setExhaustedKeys((prev) => ({ ...prev, [cacheKey]: true }));
}
})
.catch((err) => {
setOlderError(String(err?.message || err));
})
.finally(() => {
setLoadingOlderKey((key) => key === cacheKey ? "" : key);
});
}, [accountKey, bars, cacheKey, dataTimeframe, exhaustedKeys, loadingOlderKey, symbol]);
const openRows = (charts.openPositions || data.positions || []).filter((p) => p.symbol === symbol);
const pendingRows = pendingOrders.filter((p) => p.symbol === symbol);
const closedRows = (charts.closedTrades || []).filter((p) => p.symbol === symbol).slice(-80).reverse();
const latest = bars[bars.length - 1];
const latestState = latest?.partial ? "진행중" : "완성";
const isLoadingOlder = loadingOlderKey === cacheKey;
const activeTicket = hoverTicket ?? selectedTicket;
const toggleTicket = (ticket) => {
setSelectedTicket((prev) => String(prev) === String(ticket) ? null : ticket);
};
return (
<>
포지션 차트
심볼별 차트 · 오픈/대기/청산
DB market_bars_{dataTimeframe} + MT5 진행봉 기준 · 오픈/청산 마커와 대기 주문 가격선 표시
타임프레임 {dataTimeframe}
오픈 {openRows.length}건
대기 {pendingRows.length}건
청산 {closedRows.length}건
{apiStatus?.ok === false && (
실제 차트/포지션 데이터를 못 받아서 fallback 화면입니다. 처음 접속 URL에 ?apiKey=... 를 붙여 다시 열어주세요.
)}
{symbols.map((sym) => (
setSymbol(sym)}
>
{sym}
))}
{availableTimeframes.map((tf) => (
selectTimeframe(tf)}
>
{tf}
))}
히스토리 {isLoadingOlder ? "조회 중" : exhaustedKeys[cacheKey] ? "끝" : "대기"}
{!DASH_IS_COIN && (
{symbol} 가격 차트 · 최근 {bars.length}개 {dataTimeframe}
최신 {fmt.time(latest?.ts)} · {latestState} · 종가 {latest ? fmt.price(latest.close, symbol === "USDJPY" ? 3 : ["XAUUSD", "NAS100"].includes(symbol) ? 2 : 5) : "—"}
{hasFirstError ? " · 로딩 실패(재시도 중)" : ""}
{olderError ? ` · 과거 조회 실패 ${olderError}` : ""}
)}
{openRows.length}건
{openRows.length > 0 && (() => {
const openPnlSum = openRows.reduce((s, r) => s + (Number(r.pnl) || 0), 0);
return (
= 0 ? "success" : "danger"}>
합계 {fmt.pnl(openPnlSum)}
);
})()}
}
/>
setHoverTicket(null)}
onToggleTicket={toggleTicket}
/>
{pendingRows.length}건}
/>
{closedRows.length}건
{closedRows.length > 0 && (() => {
const closedPnlSum = closedRows.reduce((s, r) => s + (Number(r.pnl) || 0), 0);
return (
= 0 ? "success" : "danger"}>
합계 {fmt.pnl(closedPnlSum)}
);
})()}
}
/>
);
};
const ClosedTradesTable = ({ rows }) => (
티켓
방향
진입
청산
손익
청산시각
소스
{rows.length ? rows.map((p) => (
#{p.ticket}
{p.direction === "short" ? "숏" : "롱"} {fmt.price(p.entry, 5)}
{fmt.price(p.exit, 5)}
{fmt.pnl(p.pnl, 2)}
{fmt.date(p.closedAt)}
{p.source}
)) : (
최근 청산 포지션이 없습니다.
);
const PendingOrdersTable = ({ rows = [] }) => (
티켓
종목
종류
Lot
주문가
현재가
SL
TP
생성
만료
소스
코멘트
{rows.length ? rows.map((o) => {
const tone = o.direction === "short" ? "danger" : o.direction === "long" ? "success" : "neutral";
const gridParent = o.gridParent || {};
const virtualParentMeta = gridParent.isVirtual
? [
gridParent.virtualLabel || "가상부모",
gridParent.registeredAt ? `등록 ${fmt.time(gridParent.registeredAt)}` : "",
gridParent.lifespanEndAt ? `만료 ${fmt.time(gridParent.lifespanEndAt)}` : "",
].filter(Boolean).join(" · ")
: "";
return (
#{o.ticket}
{o.symbol}
{pendingOrderTypeLabel(o.type)} {fmt.num(o.lots, 2)}
{fmtOptionalPrice(o.price, o.symbol)}
{fmtOptionalPrice(o.current, o.symbol)}
{fmtOptionalPrice(o.sl, o.symbol)}
{fmtOptionalPrice(o.tp, o.symbol)}
{fmt.time(o.setupAt)}
{o.expirationAt ? fmt.time(o.expirationAt) : "—"}
{o.gridLabel || o.source}
{virtualParentMeta ? {virtualParentMeta}
: null}
{o.comment || "—"}
);
}) : (
대기 주문이 없습니다.
);
const isUsableAccountKey = (value) => {
const text = String(value || "").trim();
return Boolean(text && text !== "—" && text !== "-" && text.toLowerCase() !== "default");
};
const storedDashboardAccount = () => {
try {
const stored = localStorage.getItem("v3ops_account") || "";
return isUsableAccountKey(stored) ? stored : "";
} catch (_) {
return "";
}
};
const preferredLiveDailyAccount = (data, initial) => {
const candidates = [
data?.bridge?.accountKey,
initial?.accountKey,
storedDashboardAccount(),
];
return candidates.find(isUsableAccountKey) || "";
};
const LiveDailyPage = ({ data, apiStatus }) => {
const initial = data.liveDailyPerformance || {};
const formatLocalDay = (date) => {
const y = date.getFullYear();
const m = String(date.getMonth() + 1).padStart(2, "0");
const d = String(date.getDate()).padStart(2, "0");
return `${y}-${m}-${d}`;
};
const defaultLiveDailyRange = () => {
const end = new Date();
const start = new Date(end);
start.setMonth(start.getMonth() - 1);
return {
start: formatLocalDay(start),
end: formatLocalDay(end),
};
};
const initialRange = defaultLiveDailyRange();
const [accountKey, setAccountKey] = useState(() => preferredLiveDailyAccount(data, initial));
const [tzMode, setTzMode] = useState("utc");
const [startDate, setStartDate] = useState(initialRange.start);
const [endDate, setEndDate] = useState(initialRange.end);
const [selectedDay, setSelectedDay] = useState("");
const [remote, setRemote] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
const [refreshKey, setRefreshKey] = useState(0);
const view = remote || initial || {};
const rows = Array.isArray(view.rows) ? view.rows : [];
const selected = view.selected || rows.find((row) => row.day === view.selectedDay) || rows[0] || null;
const curve = Array.isArray(view.curve) && view.curve.length ? view.curve : [];
const latest = view.latest || rows[0] || null;
const localOffsetMin = -new Date().getTimezoneOffset();
const chronologicalRows = rows.slice().reverse();
const rangeFirst = chronologicalRows[0] || null;
const rangeLast = chronologicalRows[chronologicalRows.length - 1] || null;
const rangeStartEquity = Number(rangeFirst?.startEquity);
const rangeEndEquity = Number(rangeLast?.endEquity);
const hasRangeEquity = Number.isFinite(rangeStartEquity) && Number.isFinite(rangeEndEquity) && rangeStartEquity > 0;
const rangePnl = chronologicalRows.reduce((sum, row) => sum + (Number(row.pnl) || 0), 0);
const rangePnlPct = hasRangeEquity ? rangePnl / rangeStartEquity * 100 : 0;
const rangeDeposit = chronologicalRows.reduce((sum, row) => sum + (Number(row.deposit) || 0), 0);
const rangeWithdrawal = chronologicalRows.reduce((sum, row) => sum + (Number(row.withdrawal) || 0), 0);
const rangeEquityDelta = hasRangeEquity ? rangeEndEquity - rangeStartEquity : 0;
const rangeLabel = rangeFirst && rangeLast ? `${rangeFirst.day} → ${rangeLast.day}` : "선택 구간 없음";
useEffect(() => {
const next = preferredLiveDailyAccount(data, initial);
if (next && next !== accountKey) {
setAccountKey(next);
setRemote(null);
setSelectedDay("");
}
}, [initial.accountKey, data.bridge?.accountKey, accountKey]);
useEffect(() => {
const onHeaderAccountChange = (event) => {
const next = event?.detail?.resolvedAccountKey || event?.detail?.accountKey || "";
if (!next) return;
setAccountKey(next);
setRemote(null);
setSelectedDay("");
setRefreshKey((v) => v + 1);
};
window.addEventListener("v3ops:account-change", onHeaderAccountChange);
return () => window.removeEventListener("v3ops:account-change", onHeaderAccountChange);
}, []);
useEffect(() => {
if (!window.V3OPS_LIVE_DATA?.request) return;
const params = new URLSearchParams();
if (isUsableAccountKey(accountKey)) params.set("accountKey", accountKey);
params.set("tz", tzMode);
if (tzMode === "local") params.set("tzOffsetMin", String(localOffsetMin));
if (startDate) params.set("start", startDate);
if (endDate) params.set("end", endDate);
if (!startDate && !endDate) params.set("days", "90");
if (selectedDay) params.set("day", selectedDay);
let alive = true;
setLoading(true);
setError("");
window.V3OPS_LIVE_DATA.request(`/api/live-daily?${params.toString()}`)
.then((payload) => {
if (!alive) return;
setRemote(payload);
const resolvedAccount = payload?.accountKey;
if (isUsableAccountKey(resolvedAccount) && !isUsableAccountKey(accountKey)) {
setAccountKey(resolvedAccount);
}
if ((payload?.selectedDay || "") !== selectedDay) setSelectedDay(payload?.selectedDay || "");
})
.catch((err) => {
if (!alive) return;
setError(String(err?.message || err));
})
.finally(() => {
if (alive) setLoading(false);
});
return () => { alive = false; };
}, [accountKey, tzMode, startDate, endDate, selectedDay, refreshKey]);
const clearRange = () => {
setStartDate("");
setEndDate("");
setSelectedDay("");
};
return (
<>
일별 라이브 성과
계정별 실측 equity 일간 성과
equity 샘플을 DB에 저장하고 날짜 기준을 UTC / 로컬로 전환
{view.tzLabel || (tzMode === "local" ? "LOCAL" : "UTC")}
{accountKey}
{apiStatus?.ok === false && (
{apiStatus.error}
)}
조회 구간 순손익
{fmt.pnl(rangePnl)}
{rangeLabel} · {fmt.pct(rangePnlPct)} · 입금 {fmt.abbr(rangeDeposit, 2)} / 출금 {fmt.abbr(rangeWithdrawal, 2)}
조회 구간 Equity
{fmt.abbr(hasRangeEquity ? rangeEndEquity : 0, 2)}
시작 {fmt.abbr(hasRangeEquity ? rangeStartEquity : 0, 2)} · 변동 {fmt.pnl(rangeEquityDelta)} · {rows.length}일
선택 날짜
{fmt.pnl(selected?.pnl || 0)}
{selected?.day || latest?.day || "—"} · 입금 {fmt.abbr(selected?.deposit || 0, 2)} / 출금 {fmt.abbr(selected?.withdrawal || 0, 2)}
조회 구간 equity 곡선
{rangeLabel} · {view.tzLabel || "UTC"}
샘플 {curve.length}
날짜
순손익
입금
출금
%
Equity
{rows.map((row) => (
setSelectedDay(row.day)}
>
{row.day}
{fmt.pnl(row.pnl)}
{fmt.abbr(row.deposit || 0, 2)}
{fmt.abbr(row.withdrawal || 0, 2)}
{fmt.pct(row.pnlPct)}
{fmt.abbr(row.endEquity, 2)}
))}
{!rows.length && (
저장된 equity 샘플이 없습니다.
);
};
const ENTRY_BLOCK_STAGE_LABELS = {
detect: "탐지",
account: "계좌",
pre_order: "주문전",
preOrder: "주문전",
sizing: "사이징",
};
const ENTRY_BLOCK_REASON_LABELS = {
risk_config_pre_dedup: "risk_config 선차단",
risk_config: "risk_config",
alignment_gate: "상위TF 정렬",
alignment_data_unavailable: "정렬 데이터 없음",
xau_short_structural_gate: "XAU 구조 차단",
stale_signal: "신호 지연",
pattern_not_live: "Live 미허용 패턴",
pattern_disabled: "비활성 패턴",
symbol_disabled: "비활성 심볼",
signal_id_duplicate: "동일 신호 중복",
market_closed: "장 닫힘",
wr_gate: "WR 게이트",
cooldown: "쿨다운",
chop_gate: "chop",
signal_filter_pattern_block: "패턴 차단",
reverse_blocklist: "역방향 차단",
wet_step_ma20: "step MA20",
wet_step_alignment0: "step 정렬 0",
wet_gap_ma60_120_zone: "gap MA60-120",
wet_inflection_4h_opposite: "inflection 4H 반대",
long_stable_full_bull: "BTC long 과열(stable+full_bull)",
long_down_full_bull: "BTC long 피크(down+full_bull)",
short_down_full_bear: "BTC short 저점(down+full_bear)",
short_stable_mixed: "BTC short 혼조(stable+mixed)",
min_sltp_distance: "SL/TP 최소거리",
v4_block: "V4 overlay",
below_min_lot: "min_lot 미만",
below_min_lot_after_step: "step 후 min_lot 미만",
invalid_lot: "lot invalid",
invalid_lot_size: "lot invalid",
lot_zero_skipped: "0 lot",
final_lot_rejected: "최종 lot 차단",
equity_unavailable: "equity 없음",
balance_fetch_failed: "잔고 조회 실패",
max_positions_reached: "최대 포지션",
no_raw_signals: "원시 신호 없음",
insufficient_data: "데이터 부족",
all_candidates_filtered: "후보 전부 필터",
alignment_gate_all: "정렬 전부 차단",
risk_config_all: "risk_config 전부 차단",
no_final_signal_after_gates: "최종 신호 없음",
all_final_signals_stale: "최종 신호 지연",
final_signals: "신호 생성",
};
const entryBlockStageLabel = (stage) => ENTRY_BLOCK_STAGE_LABELS[stage] || stage || "—";
const entryBlockReasonLabel = (reason) => (
ENTRY_BLOCK_REASON_LABELS[reason] || String(reason || "unknown").replaceAll("_", " ")
);
const EntryBlocksPage = ({ data }) => {
const blocks = data.entryBlocks || {};
const totals = blocks.totals || {};
const bySymbol = blocks.bySymbol || [];
const byReason = blocks.byReason || [];
const byStage = blocks.byStage || [];
const [symbol, setSymbol] = useState("ALL");
const symbols = ["ALL", ...Array.from(new Set(bySymbol.map((r) => r.symbol).filter(Boolean)))];
const recent = (blocks.recent || []).filter((row) => symbol === "ALL" || row.symbol === symbol);
const scanDiagnostics = blocks.scanDiagnostics || {};
const scanTotals = scanDiagnostics.totals || {};
const scanRecent = (scanDiagnostics.recent || []).filter((row) => symbol === "ALL" || row.symbol === symbol);
const dbName = blocks.dbPath ? blocks.dbPath.split("/").slice(-1)[0] : "trade_history.db";
return (
<>
진입 차단
진입 전 차단 로그
{data.bridge?.accountDisplay || data.bridge?.accountKey || "계정"} · 최근 {blocks.windowHours || 48}시간 · {dbName}
{fmt.num(totals.total || 0, 0)}건
{symbols.map((sym) => (
setSymbol(sym)}
>
{sym === "ALL" ? "전체" : sym}
))}
심볼
전체
탐지
계좌
주문전
사이징
{bySymbol.map((row) => (
{row.label || row.symbol}
{fmt.num(row.total || 0, 0)}
{fmt.num(row.detect || 0, 0)}
{fmt.num(row.account || 0, 0)}
{fmt.num(row.preOrder || 0, 0)}
{fmt.num(row.sizing || 0, 0)}
))}
{byStage.map((row) => (
{entryBlockStageLabel(row.stage)}
{fmt.num(row.count, 0)}
))}
{!byStage.length && 기록 없음
{byReason.slice(0, 8).map((row) => (
{entryBlockReasonLabel(row.reason)}
{fmt.num(row.count, 0)}
))}
{!byReason.length && 기록 없음
시간
심볼
TF
봉
Raw
Gate
Final
사유
상세
{scanRecent.map((row, i) => (
{fmt.date(row.ts)}
{row.symbol}
{row.timeframe || "—"}
{fmt.date(row.scanTs)}
{fmt.num(row.rawCount || 0, 0)}
{fmt.num(row.afterGatesCount || 0, 0)}
{fmt.num(row.finalCount || 0, 0)}
{entryBlockReasonLabel(row.reason)}
{row.detailText || "—"}
))}
{!scanRecent.length && (
선택한 조건의 탐지 요약이 없습니다. 다음 새 봉 스캔부터 기록됩니다.
전체 {fmt.num(scanTotals.total || 0, 0)} · 신호 {fmt.num(scanTotals.final || 0, 0)} · 미발생 {fmt.num(scanTotals.empty || 0, 0)} · 필터/차단 {fmt.num(scanTotals.blocked || 0, 0)}
시간
심볼
패턴
방향
TF
단계
사유
Entry
Lot
상세
{recent.map((row, i) => (
{fmt.date(row.ts)}
{row.symbol}
{row.pattern || "—"}
{row.direction || "—"}
{row.timeframe || "—"}
{entryBlockStageLabel(row.stage)}
{entryBlockReasonLabel(row.reason)}
{fmt.price(row.entryPrice, priceDecimalsFor(row.symbol))}
{row.lots == null ? "—" : fmt.num(row.lots, 4)}
{row.detailText || "—"}
))}
{!recent.length && (
선택한 조건의 차단 기록이 없습니다.
);
};
const ComparePage = ({ data }) => (
<>
비교
백테스트 vs 라이브 비교
hourly_compare와 브로커 연결 상태
DB 상태
봉 데이터 신선도
TimescaleDB 최신 timestamp 기준
{data.kpi.dbStatus === "ok" ? "정상" : data.kpi.dbStatus === "warn" ? "경고" : "실패"}
Live 로그
최근 라이브 이벤트
trade_ledger.jsonl 최근 이벤트와 warning timeline
최근 {data.ledgerEvents.length}건
);
function App() {
const [active, setActive] = useState("overview");
const [, setTick] = useState(0);
const [data, setData] = useState(window.MOCK);
const [apiStatus, setApiStatus] = useState(window.V3OPS_API_STATUS || { ok: null, error: null, hasApiKey: false });
const [accountSwitching, setAccountSwitching] = useState(null);
// 실데이터를 마지막으로 받은 시각(ms). 갱신 실패 시 'mock'인지 'stale real'인지 구분.
const [lastDataAt, setLastDataAt] = useState(null);
useEffect(() => {
const id = setInterval(() => setTick((t) => t + 1), 5000);
return () => clearInterval(id);
}, []);
useEffect(() => {
const onData = (event) => {
const nextData = event.detail || window.MOCK;
setData(nextData);
setLastDataAt(Date.now());
setAccountSwitching((current) => {
if (!current) return null;
const resolved = nextData?.bridge?.accountKey || "";
return !current.accountKey || resolved === current.accountKey ? null : current;
});
};
window.addEventListener("v3ops:data", onData);
return () => window.removeEventListener("v3ops:data", onData);
}, []);
useEffect(() => {
const onApiStatus = (event) => {
const nextStatus = event.detail || { ok: null, error: null };
setApiStatus(nextStatus);
if (nextStatus.ok === false) setAccountSwitching(null);
};
window.addEventListener("v3ops:api-status", onApiStatus);
if (window.V3OPS_API_STATUS) setApiStatus(window.V3OPS_API_STATUS);
return () => window.removeEventListener("v3ops:api-status", onApiStatus);
}, []);
useEffect(() => {
const onAccountChange = (event) => {
const accountKey = event?.detail?.resolvedAccountKey || event?.detail?.accountKey || "";
setAccountSwitching({ accountKey, startedAt: Date.now() });
};
window.addEventListener("v3ops:account-change", onAccountChange);
return () => window.removeEventListener("v3ops:account-change", onAccountChange);
}, []);
return (
{apiStatus.ok === false && (
{lastDataAt ? (
<>
화면은 마지막 정상 데이터({Math.round((Date.now() - lastDataAt) / 1000)}초 전) 기준입니다 — 실시간 아님. 자동 재시도 중.
) : (
<>
아직 실데이터를 못 받았습니다(빈/mock 화면). API 키 인증 실패면 처음 접속을 ?apiKey=... 포함 URL로 열어주세요.
)}
{apiStatus.error}
)}
{active === "overview" && (
<>
{/* Overall hero — answers "is everything ok?" in 10 seconds */}
현재 MT5 자본곡선 · 60일
MT5 /balance equity 기준 · 실시간 포지션 손익 포함
{data.dataQuality?.equityCurve?.source === "live_history" ? (
실측
) : (
{data.dataQuality?.equityCurve?.label || "미리보기"}
)}
실시간
{/* Live PnL bar charts row */}
{(() => {
const livePnlQuality = data.dataQuality?.livePnl || {};
const actualDays = livePnlQuality.actualDays;
const windowDays = livePnlQuality.windowDays || 60;
const periodLabel = (actualDays != null && actualDays < windowDays)
? `최근 ${actualDays < 1 ? actualDays.toFixed(1) : Math.round(actualDays)}일 (세션 시작 이후)`
: `최근 ${windowDays}일`;
return (
Live 심볼별 PnL · {periodLabel}
{(data.liveBySymbol || []).length}개 심볼 · {(data.liveBySymbol || []).reduce((s,d)=>s+d.rows,0).toLocaleString()}건
Live 소스별 PnL · {periodLabel}
{(data.liveBySource || []).length}개 소스 · {(data.liveBySource || []).reduce((s,d)=>s+d.rows,0).toLocaleString()}건
);
})()}
{/* Live positions */}
PnL s+p.pnl,0))}`}>{fmt.pnl(data.positions.reduce((s,p)=>s+p.pnl,0))}
전체 보기
}
/>
{(data.pendingOrders || []).length}건}
/>
{/* Monthly + Exposure */}
{/* Data freshness grid + warning timeline */}
{/* Cron / scheduler */}
{data.kpi.dbStatus === "ok" ? "정상" : data.kpi.dbStatus === "warn" ? "경고" : "실패"}}
/>
최근 {data.ledgerEvents.length}건
필터
)}
{active === "positions" &&
{accountSwitching && (
계정 전환 중
{accountSwitching.accountKey || "선택 계정"}
)}
);
}
// Bar chart valueKey override — needs to handle scientific notation values
ReactDOM.createRoot(document.getElementById("root")).render(