+
-
+
+
+${kind}
${escapeHtml(b.display_name)}
-${escapeHtml(b.basket)}${snap ? ` · ${escapeHtml(fmtLong(snap.date))} 기준` : " · 첫 기록 대기"}
+-
-
- 총자산
- ${total == null ? "—" : won(total)}
- 투자원금
- ${won(principal)}${Number(b.deposits_total) > 0 ? ` 적립 ${compactWon(b.deposits_total)} 포함` : ""}
- 평가손익
- ${profit == null ? "—" : signedWon(profit)}${profit == null || principal <= 0 ? "" : ` ${pct((profit / principal) * 100)}`}
- 시간가중수익률
- ${cr == null ? "—" : pct(cr)}
- 최대낙폭
- ${snap ? pct(-maxDD) : "—"}${snap ? ` 지금 ${pct(-Math.abs(Number(snap.mdd || 0)))}` : ""}
- 현금 비중
- ${cashRatio == null ? "—" : pct(cashRatio, { sign: false, digits: 1 })}${snap ? ` ${compactWon(snap.cash)}` : ""}
투자 비중${deployment == null ? "—" : `${Math.round(deployment)}%`}목표 ${target == null ? "—" : `${Math.round(target)}%`}
-
+
${escapeHtml(note)}
${overlayLine}최근 적립 ${escapeHtml(fmtMD(latestFlow.occurred_at))} · ${escapeHtml(signedWon(latestFlow.amount))}${latestFlow.note ? ` · ${escapeHtml(latestFlow.note)}` : ""}
` : ""} - ${flowState === "error" ? '적립 기록을 읽지 못했습니다. 다시 확인하기 전까지 새 기록을 추가하지 마세요.
' : ""} + ${flowState === "error" ? '적립금 기록을 읽지 못했습니다. 다시 확인하기 전까지 새 기록을 추가하지 마세요.
' : ""}${escapeHtml(m.label)}${pct(m.value, { digits: 1 })}
`).join("");
+ `,
+ )
+ .join("");
+ }
+
+ function renderMonthStrip(series, history) {
+ const visibleMonths = new Set(
+ series.dates.map((d) => `${d.getFullYear()}-${pad2(d.getMonth() + 1)}`),
+ );
+ // 조회 기간이 월 중간에서 시작해도 전월 말 기준 수익률을 사용한다.
+ const months = monthlyReturns(history).filter((month) =>
+ visibleMonths.has(month.key),
+ );
+ el.monthStrip.innerHTML = months
+ .map(
+ (m) =>
+ `${escapeHtml(m.label)}${pct(m.value, { digits: 1 })}
`,
+ )
+ .join("");
}
function equityGeometry(series, width, height) {
- const padding = { top: 20, right: 12, bottom: 28, left: width < 480 ? 52 : 64 };
+ const padding = {
+ top: 20,
+ right: 12,
+ bottom: 28,
+ left: width < 480 ? 52 : 64,
+ };
const n = series.rows.length;
- const x = (i) => padding.left + ((width - padding.left - padding.right) * i) / Math.max(1, n - 1);
- const scale = makeScale([...series.value, ...series.principal], padding.top, height - padding.bottom, 0.08);
+ const x = (i) =>
+ padding.left +
+ ((width - padding.left - padding.right) * i) / Math.max(1, n - 1);
+ const scale = makeScale(
+ [...series.value, ...series.principal],
+ padding.top,
+ height - padding.bottom,
+ 0.08,
+ );
return { padding, x, scale, width, height, n };
}
function drawChart(rows) {
if (!chart.series || el.chartWrap.hidden) return;
const series = chart.series;
- const width = Math.max(280, el.chartBox.clientWidth);
+ const width = Math.max(1, el.chartBox.clientWidth);
const height = Math.max(200, el.chartBox.clientHeight);
const context = setupCanvas(el.chartEquity, width, height);
const g = equityGeometry(series, width, height);
@@ -1071,18 +1074,26 @@
context.moveTo(padding.left, y);
context.lineTo(width - padding.right, y);
context.stroke();
- context.fillStyle = inkAlpha(0.42);
+ context.fillStyle = inkAlpha(0.7);
context.fillText(compactWon(v), padding.left - 8, y);
});
const step = Math.max(1, Math.ceil((n - 1) / (width < 480 ? 3 : 6)));
- context.fillStyle = inkAlpha(0.42);
+ context.fillStyle = inkAlpha(0.7);
for (let i = 0; i < n - 1; i += step) {
if (n > 1 && i > n - 1 - step * 0.5) break;
context.textAlign = i === 0 ? "left" : "center";
- context.fillText(fmtMD(series.rows[i].date), x(i), height - padding.bottom + 14);
+ context.fillText(
+ fmtMD(series.rows[i].date),
+ x(i),
+ height - padding.bottom + 14,
+ );
}
context.textAlign = n > 1 ? "right" : "left";
- context.fillText(fmtMD(series.rows[n - 1].date), x(n - 1), height - padding.bottom + 14);
+ context.fillText(
+ fmtMD(series.rows[n - 1].date),
+ x(n - 1),
+ height - padding.bottom + 14,
+ );
const visible = Math.max(1, Math.ceil((n - 1) * chart.progress) + 1);
const clipRight = n > 1 ? x(0) + (x(n - 1) - x(0)) * chart.progress : width;
@@ -1101,7 +1112,10 @@
const px = x(i);
const py = scale.y(v);
if (i === 0) context.moveTo(px, py);
- else { context.lineTo(px, scale.y(series.principal[i - 1])); context.lineTo(px, py); }
+ else {
+ context.lineTo(px, scale.y(series.principal[i - 1]));
+ context.lineTo(px, py);
+ }
});
context.stroke();
context.restore();
@@ -1117,7 +1131,11 @@
context.fillStyle = inkAlpha(0.7);
context.font = `500 11.5px ${FONT}`;
context.textAlign = mx > width * 0.8 ? "right" : "left";
- context.fillText(`${signedWon(m.amount)} 적립`, mx + (mx > width * 0.8 ? -5 : 5), padding.top - 8);
+ context.fillText(
+ `${signedWon(m.amount)} 적립`,
+ mx + (mx > width * 0.8 ? -5 : 5),
+ padding.top - 8,
+ );
context.font = `400 11.5px ${FONT}`;
});
@@ -1129,7 +1147,8 @@
if (i >= visible) return;
const px = x(i);
const py = scale.y(v);
- if (i === 0) context.moveTo(px, py); else context.lineTo(px, py);
+ if (i === 0) context.moveTo(px, py);
+ else context.lineTo(px, py);
});
context.stroke();
if (n <= 14) {
@@ -1159,7 +1178,7 @@
context.arc(px, py, 4.5, 0, Math.PI * 2);
context.fillStyle = COLORS.ink;
context.fill();
- context.strokeStyle = "#f2f0ec";
+ context.strokeStyle = "#ffffff";
context.lineWidth = 2;
context.stroke();
}
@@ -1168,14 +1187,23 @@
function drawDrawdown(series) {
const box = $("drawdownBox");
- const width = Math.max(280, box.clientWidth);
+ const width = Math.max(1, box.clientWidth);
const height = Math.max(80, box.clientHeight);
const context = setupCanvas(el.chartDrawdown, width, height);
- const padding = { top: 10, right: 12, bottom: 8, left: width < 480 ? 52 : 64 };
+ const padding = {
+ top: 10,
+ right: 12,
+ bottom: 8,
+ left: width < 480 ? 52 : 64,
+ };
const n = series.rows.length;
- const x = (i) => padding.left + ((width - padding.left - padding.right) * i) / Math.max(1, n - 1);
+ const x = (i) =>
+ padding.left +
+ ((width - padding.left - padding.right) * i) / Math.max(1, n - 1);
const minDD = Math.min(-0.005, ...series.dd);
- const y = (v) => padding.top + ((0 - v) / (0 - minDD)) * (height - padding.top - padding.bottom);
+ const y = (v) =>
+ padding.top +
+ ((0 - v) / (0 - minDD)) * (height - padding.top - padding.bottom);
context.font = `400 11.5px ${FONT}`;
context.textBaseline = "middle";
context.textAlign = "right";
@@ -1184,13 +1212,19 @@
context.moveTo(padding.left, y(0));
context.lineTo(width - padding.right, y(0));
context.stroke();
- context.fillStyle = inkAlpha(0.42);
+ context.fillStyle = inkAlpha(0.7);
context.fillText("0%", padding.left - 8, y(0));
- context.fillText(pct(minDD * 100, { digits: 1 }), padding.left - 8, y(minDD));
+ context.fillText(
+ pct(minDD * 100, { digits: 1 }),
+ padding.left - 8,
+ y(minDD),
+ );
const visible = Math.max(1, Math.ceil((n - 1) * chart.progress) + 1);
context.beginPath();
context.moveTo(x(0), y(0));
- series.dd.forEach((v, i) => { if (i < visible) context.lineTo(x(i), y(v)); });
+ series.dd.forEach((v, i) => {
+ if (i < visible) context.lineTo(x(i), y(v));
+ });
context.lineTo(x(Math.min(n - 1, visible - 1)), y(0));
context.closePath();
context.fillStyle = "rgba(37, 87, 201, 0.16)";
@@ -1198,7 +1232,12 @@
context.strokeStyle = COLORS.down;
context.lineWidth = 1.2;
context.beginPath();
- series.dd.forEach((v, i) => { if (i < visible) { if (i === 0) context.moveTo(x(i), y(v)); else context.lineTo(x(i), y(v)); } });
+ series.dd.forEach((v, i) => {
+ if (i < visible) {
+ if (i === 0) context.moveTo(x(i), y(v));
+ else context.lineTo(x(i), y(v));
+ }
+ });
context.stroke();
if (chart.hover != null && chart.progress >= 1) {
const i = chart.hover;
@@ -1209,25 +1248,6 @@
}
}
- function animateChartIn() {
- if (chart.frame) cancelAnimationFrame(chart.frame);
- if (noMotion() || !chart.series || chart.series.rows.length < 2) {
- chart.progress = 1;
- drawChart();
- return;
- }
- chart.progress = 0;
- const started = performance.now();
- const duration = 600;
- const step = (now) => {
- const t = Math.min(1, (now - started) / duration);
- chart.progress = 1 - (1 - t) ** 3;
- drawChart();
- chart.frame = chart.progress < 1 ? requestAnimationFrame(step) : null;
- };
- chart.frame = requestAnimationFrame(step);
- }
-
function hideChartTip() {
if (chart.hover == null) return;
chart.hover = null;
@@ -1241,7 +1261,11 @@
const bounds = event.currentTarget.getBoundingClientRect();
const px = event.clientX - bounds.left;
const plotWidth = g.width - g.padding.left - g.padding.right;
- const index = clamp(Math.round(((px - g.padding.left) / Math.max(1, plotWidth)) * (g.n - 1)), 0, g.n - 1);
+ const index = clamp(
+ Math.round(((px - g.padding.left) / Math.max(1, plotWidth)) * (g.n - 1)),
+ 0,
+ g.n - 1,
+ );
if (index === chart.hover) return;
chart.hover = index;
const row = series.rows[index];
@@ -1260,12 +1284,21 @@
function updateChart(snapshots) {
const rows = Array.isArray(snapshots) ? snapshots : [];
const basket = chartBasket();
- const initial = basket ? Number(basket.initial_capital || 0) : Number(state.legacy?.initial_capital || 0);
- const flows = basket ? (state.flows.get(basket.basket) || []) : [];
+ const initial = basket
+ ? Number(basket.initial_capital || 0)
+ : Number(state.legacy?.initial_capital || 0);
+ const flows = basket ? state.flows.get(basket.basket) || [] : [];
const series = buildSeries(rows, flows, initial);
- const key = JSON.stringify([state.chartAccount, series.rows.map((r) => [r.date, r.total_value])]);
- const changed = key !== chart.rowsKey;
- chart.rowsKey = key;
+ const historyRows = state.series.get(state.chartAccount);
+ const history = historyRows?.length
+ ? buildSeries(historyRows, flows, initial)
+ : series;
+ const historicalDD = new Map(
+ history.rows.map((row, i) => [row.date, history.dd[i]]),
+ );
+ series.dd = series.rows.map(
+ (row, i) => historicalDD.get(row.date) ?? series.dd[i],
+ );
chart.series = series;
state.chartRows = series.rows;
chart.hover = null;
@@ -1282,28 +1315,35 @@
}
const first = series.rows[0];
const last = series.rows[series.rows.length - 1];
- const change = Number(last.total_value || 0) - Number(first.total_value || 0);
- const deposits = series.markers.reduce((s, m) => s + m.amount, 0);
- el.chartSummary.textContent = `${fmtMD(first.date)} → ${fmtMD(last.date)} · 평가금액 ${signedWon(change)}${deposits ? ` (적립 ${won(deposits)} 포함)` : ""} · 시간가중 ${pct(last.cumulative_return)}`;
+ const change =
+ Number(last.total_value || 0) - Number(first.total_value || 0);
+ const deposits = series.principal.at(-1) - series.principal[0];
+ el.chartSummary.textContent = `${fmtMD(first.date)} ~ ${fmtMD(last.date)} · 평가금액 ${signedWon(change)}${deposits ? ` (적립 ${won(deposits)} 포함)` : ""} · 누적 수익률 ${pct(last.cumulative_return)}`;
el.chartWrap.hidden = false;
el.chartEmpty.hidden = true;
renderChartTable(series);
- renderMonthStrip(series);
- if (changed) animateChartIn(); else drawChart();
+ renderMonthStrip(series, history);
+ drawChart();
}
async function refreshChart() {
ensureChartAccountOptions();
state.chartAccount = el.chartAccount.value;
+ updateOverview();
syncChartQuery();
try {
- const data = await fetchJson(`/api/snapshots?days=${state.chartDays}&account_key=${encodeURIComponent(state.chartAccount || "")}`, { timeout: 15_000, key: "chart" });
+ const data = await fetchJson(
+ `/api/snapshots?days=${state.chartDays}&account_key=${encodeURIComponent(state.chartAccount || "")}`,
+ { timeout: 15_000, key: "chart" },
+ );
updateChart((data && data.snapshots) || []);
} catch {
- el.chartSummary.textContent = "성과 기록을 불러오지 못했습니다. 연결을 확인한 뒤 다시 시도하세요.";
+ el.chartSummary.textContent =
+ "성과 기록을 불러오지 못했습니다. 연결을 확인한 뒤 다시 시도하세요.";
el.chartWrap.hidden = true;
el.chartEmpty.hidden = false;
- el.chartEmpty.innerHTML = "성과 기록을 읽지 못했습니다.장부는 바뀌지 않았습니다. 잠시 후 다시 확인하세요.";
+ el.chartEmpty.innerHTML =
+ "성과 기록을 읽지 못했습니다.계좌 기록은 바뀌지 않았습니다. 잠시 후 다시 확인하세요.";
}
}
@@ -1319,31 +1359,41 @@
state.evaluations = items;
el.basketEval.setAttribute("aria-busy", "false");
if (!items.length) {
- el.basketEval.innerHTML = '검증 중인 계좌가 없습니다.
'; + el.basketEval.innerHTML = + '검증 중인 계좌가 없습니다.
'; renderDecision(); return; } const byName = new Map((state.baskets || []).map((b) => [b.basket, b])); - const ordered = [...items].sort((a, b) => Number(Boolean(byName.get(b.basket)?.is_primary)) - Number(Boolean(byName.get(a.basket)?.is_primary))); - el.basketEval.innerHTML = ordered.map((item) => { - const basket = byName.get(item.basket); - const name = basket?.display_name || item.basket; - const days = Number(item.progress_days || 0); - const minimum = Math.max(1, Number(item.min_trading_days || 60)); - const progress = Math.min(100, Math.round((days / minimum) * 100)); - const coverage = item.snapshot_coverage == null ? null : Math.round(Number(item.snapshot_coverage) * 100); - const [copy, cls] = verdictCopy[item.verdict] || ["관찰 중", "warn"]; - const issues = (item.issues || []).slice(0, 3); - return `
-
+ empty.textContent = isToday
+ ? "오늘 생성된 신호가 없습니다. "
+ : `오늘 생성된 신호가 없습니다. 마지막 신호는 ${fmtLong(signalsDate)}입니다.`;
+ $("signalRows").innerHTML = rows
+ .map(
+ (s) => `
${escapeHtml(s.symbol || "—")}
${escapeHtml(signalCopy(s.signal))}
${Number.isFinite(Number(s.score)) ? Number(s.score).toFixed(2) : "—"}
${escapeHtml(signalSourceCopy(s.source))}
- `).join("");
+ `,
+ )
+ .join("");
}
function renderWsGap(runtime) {
@@ -1467,62 +1603,109 @@
const empty = $("wsGapEmpty");
const na = $("wsGapNA");
if (!gap || !gap.available) {
- summary.innerHTML = statusRowItem("웹소켓", "정보 없음", "스케줄러 기록 대기", "warning");
- table.hidden = true; empty.hidden = true; na.hidden = false;
+ summary.innerHTML = statusRowItem(
+ "웹소켓",
+ "정보 없음",
+ "스케줄러 기록 대기",
+ "warning",
+ );
+ table.hidden = true;
+ empty.hidden = true;
+ na.hidden = false;
return;
}
const gaps = gap.recent_gaps || [];
na.hidden = true;
- summary.innerHTML = statusRowItem("웹소켓", gap.is_connected ? "연결됨" : "연결 끊김", "", gap.is_connected ? "ok" : "warning")
- + statusRowItem("최근 끊김", `${nf0.format(Number(gap.total_gap_count || 0))}건`, "", gap.total_gap_count > 0 ? "warning" : "ok");
+ summary.innerHTML =
+ statusRowItem(
+ "웹소켓",
+ gap.is_connected ? "연결됨" : "연결 끊김",
+ "",
+ gap.is_connected ? "ok" : "warning",
+ ) +
+ statusRowItem(
+ "최근 끊김",
+ `${nf0.format(Number(gap.total_gap_count || 0))}건`,
+ "",
+ gap.total_gap_count > 0 ? "warning" : "ok",
+ );
table.hidden = !gaps.length;
empty.hidden = Boolean(gaps.length);
- $("wsGapRows").innerHTML = [...gaps].reverse().map((g) => `
+ $("wsGapRows").innerHTML = [...gaps]
+ .reverse()
+ .map(
+ (g) => `
${escapeHtml(fmtDT(g.disconnect_at))}
${escapeHtml(fmtDT(g.reconnect_at))}
${escapeHtml(`${Number(g.gap_seconds || 0).toFixed(1)}초`)}
${escapeHtml((g.affected_symbols || []).join(", ") || "—")}
${g.rest_backfill_performed ? `${nf0.format(Number(g.rest_backfill_count || 0))}건` : "안 함"}
${g.blackswan_cooldown_triggered ? '안전 정지' : g.blackswan_checked ? "정상" : "—"}
- `).join("");
+ `,
+ )
+ .join("");
}
function renderLegacy(portfolio) {
state.legacy = portfolio || null;
if (!portfolio) {
- $("summary").innerHTML = statusRowItem("레거시 계정", "확인 불가", "", "warning");
+ $("summary").innerHTML = statusRowItem(
+ "이전 계좌",
+ "확인 불가",
+ "",
+ "warning",
+ );
$("positionsWrap").hidden = true;
$("noPositions").hidden = false;
return;
}
$("summary").innerHTML =
- statusRowItem("총자산", won(portfolio.total_value), "", "info")
- + statusRowItem("수익률", pct(portfolio.total_return), "", "info")
- + statusRowItem("현금", won(portfolio.cash), "", "info")
- + statusRowItem("실현손익", signedWon(portfolio.realized_pnl), "", "info")
- + statusRowItem("최대낙폭", pct(-Math.abs(Number(portfolio.mdd || 0))), "", "info")
- + statusRowItem("보유 종목", `${nf0.format(Number(portfolio.position_count || 0))}개`, "", "info");
+ statusRowItem("총자산", won(portfolio.total_value), "", "info") +
+ statusRowItem("수익률", pct(portfolio.total_return), "", "info") +
+ statusRowItem("현금", won(portfolio.cash), "", "info") +
+ statusRowItem("실현손익", signedWon(portfolio.realized_pnl), "", "info") +
+ statusRowItem(
+ "최대낙폭",
+ pct(-Math.abs(Number(portfolio.mdd || 0))),
+ "",
+ "info",
+ ) +
+ statusRowItem(
+ "보유 종목",
+ `${nf0.format(Number(portfolio.position_count || 0))}개`,
+ "",
+ "info",
+ );
const positions = portfolio.positions || [];
$("positionsWrap").hidden = !positions.length;
$("noPositions").hidden = Boolean(positions.length);
- $("positions").innerHTML = positions.map((p) => `
+ $("positions").innerHTML = positions
+ .map(
+ (p) => `
${escapeHtml(p.symbol || "—")}
${nf0.format(Number(p.quantity || 0))}
${won(p.avg_price)}
${won(p.current_price)}
${won(p.current_value)}
${pct(p.pnl_rate)}
- `).join("");
+ `,
+ )
+ .join("");
}
- /* ---------- 적립 기록 ---------- */
+ /* ---------- 적립금 기록 ---------- */
function updateDepositCopy() {
const d = $("depositDescription");
if (!d) return;
- d.textContent = state.mode === "live"
- ? "실제 계좌에 입금이 끝난 뒤 같은 금액을 기록하세요. 주문은 나가지 않고 실전 성과 계산에만 반영됩니다."
- : "입금은 수익이 아니므로 수익률 계산에서 분리됩니다. 실제 입금이 끝난 뒤 같은 금액을 기록하세요.";
+ d.textContent =
+ state.mode === "live"
+ ? "실제 계좌에 입금이 끝난 뒤 같은 금액을 기록하세요. 주문은 나가지 않고 실전 성과 계산에만 반영됩니다."
+ : "모의투자 계좌에 추가할 적립금을 입력하세요. 실제 은행 계좌에서 돈이 이동하지 않습니다.";
+ $("amountHelp").textContent =
+ state.mode === "live"
+ ? "실제 입금액과 같은 금액을 입력하세요."
+ : "입력한 금액은 모의투자 원금에 더해집니다.";
}
function resetDepositForm() {
state.depositConfirming = false;
@@ -1535,34 +1718,55 @@
el.depositSubmit.disabled = false;
el.depositError.hidden = true;
el.depositError.textContent = "";
- document.querySelectorAll("[data-amount]").forEach((b) => b.setAttribute("aria-pressed", "false"));
+ document
+ .querySelectorAll("[data-amount]")
+ .forEach((b) => b.setAttribute("aria-pressed", "false"));
}
function openDeposit() {
- if (!canRecordDeposit()) { showToast("장부와 거래 상태를 먼저 다시 확인하세요.", "error"); return; }
+ if (!canRecordDeposit()) {
+ showToast("계좌 기록과 거래 상태를 먼저 다시 확인하세요.", "error");
+ return;
+ }
resetDepositForm();
const select = $("depBasket");
- select.innerHTML = sortedBaskets().map((b) => ``).join("");
- const primary = primaryBasket();
+ select.innerHTML = sortedBaskets()
+ .map(
+ (b) =>
+ ``,
+ )
+ .join("");
+ const primary = selectedBasket();
if (primary) select.value = primary.basket;
updateDepositCopy();
if (!el.depositDialog.open) el.depositDialog.showModal();
window.setTimeout(() => select.focus(), 0);
}
- function closeDeposit() { if (el.depositDialog.open) el.depositDialog.close(); }
+ function closeDeposit() {
+ if (el.depositDialog.open) el.depositDialog.close();
+ }
function showDepositError(message, field = null) {
el.depositError.textContent = message;
el.depositError.hidden = false;
if (field) field.focus();
}
function depositValues() {
- return { basket: $("depBasket").value, amount: Number($("depAmount").value), note: $("depNote").value.trim() };
+ return {
+ basket: $("depBasket").value,
+ amount: Number($("depAmount").value),
+ note: $("depNote").value.trim(),
+ };
}
function showDepositConfirmation(values) {
- state.depositRequestId = window.crypto?.randomUUID ? window.crypto.randomUUID() : `deposit-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+ state.depositRequestId = window.crypto?.randomUUID
+ ? window.crypto.randomUUID()
+ : `deposit-${Date.now()}-${Math.random().toString(16).slice(2)}`;
const selected = $("depBasket").selectedOptions[0];
- $("confirmBasket").textContent = selected ? selected.textContent : values.basket;
+ $("confirmBasket").textContent = selected
+ ? selected.textContent
+ : values.basket;
$("confirmAmount").textContent = won(values.amount);
- $("confirmMode").textContent = state.mode === "live" ? "실전 장부" : "모의투자 장부";
+ $("confirmMode").textContent =
+ state.mode === "live" ? "실전 투자" : "모의투자";
el.depositFields.hidden = true;
el.depositConfirm.hidden = false;
el.depositBack.hidden = false;
@@ -1586,15 +1790,29 @@
el.depositError.hidden = true;
try {
const data = await fetchJson("/api/deposit", {
- timeout: 15_000, key: "deposit",
- options: { method: "POST", headers: { "Content-Type": "application/json", "X-Requested-With": "quant-dashboard", "Idempotency-Key": state.depositRequestId }, body: JSON.stringify(values) },
+ timeout: 15_000,
+ key: "deposit",
+ options: {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ "X-Requested-With": "quant-dashboard",
+ "Idempotency-Key": state.depositRequestId,
+ },
+ body: JSON.stringify(values),
+ },
});
- if (!data || !data.ok) throw new Error((data && data.error) || "기록에 실패했습니다.");
+ if (!data || !data.ok)
+ throw new Error((data && data.error) || "기록에 실패했습니다.");
closeDeposit();
- showToast(`${state.mode === "live" ? "실전 입금" : "모의투자 적립"} ${won(data.amount)}을 기록했습니다.`);
+ showToast(
+ `${state.mode === "live" ? "실전 입금" : "모의투자 적립"} ${won(data.amount)}을 기록했습니다.`,
+ );
await refreshCore();
} catch (error) {
- showDepositError(`기록하지 못했습니다. ${error.message || "연결을 확인한 뒤 다시 시도하세요."}`);
+ showDepositError(
+ `기록하지 못했습니다. ${error.message || "연결을 확인한 뒤 다시 시도하세요."}`,
+ );
el.depositSubmit.disabled = false;
el.depositSubmit.textContent = "기록하기";
}
@@ -1618,26 +1836,36 @@
if (!force && document.visibilityState === "hidden") return;
state.coreStatus = "loading";
updateSyncIndicator();
- const basketTask = fetchJson("/api/baskets", { timeout: 12_000, key: "baskets" })
- .then(async (data) => {
- renderBasketTracks(data);
- if (!boot.finished) bootStep();
- await Promise.allSettled([refreshFlows(), refreshSeries()]);
- if (!boot.finished) { bootStep(); bootStep(); }
- renderBasketTracks({ baskets: state.baskets, mode: state.mode, timestamp: state.lastCoreSuccess });
- await refreshChart();
- renderDecision();
- return data;
+ const basketTask = fetchJson("/api/baskets", {
+ timeout: 12_000,
+ key: "baskets",
+ }).then(async (data) => {
+ renderBasketTracks(data);
+ await Promise.allSettled([refreshFlows(), refreshSeries()]);
+ renderBasketTracks({
+ baskets: state.baskets,
+ mode: state.mode,
+ timestamp: state.lastCoreSuccess,
});
- const legacyTask = fetchJson("/api/portfolio", { timeout: 15_000, key: "legacy" }).then(renderLegacy);
+ await refreshChart();
+ renderDecision();
+ return data;
+ });
+ const legacyTask = fetchJson("/api/portfolio", {
+ timeout: 15_000,
+ key: "legacy",
+ }).then(renderLegacy);
const results = await Promise.allSettled([basketTask, legacyTask]);
if (results[0].status === "rejected") {
state.coreError = results[0].reason || new Error("바스켓 조회 실패");
state.coreStatus = "error";
el.basketTracks.setAttribute("aria-busy", "false");
- el.basketTracks.innerHTML = '눈금 — 오래 투자하기 위한 기준과 기록
-
-
-
-
-
-
-
-
- 본문으로 건너뛰기
+
+
+
+
+
+ 눈금 | 투자 현황
+
+
+
+
+
+ 본문으로 건너뛰기
-
-
- 
- 눈금
-
-
-
-
-
-
-
${escapeHtml(name)}${basket?.is_primary ? " · 주력" : ""}${escapeHtml(item.basket)}
+ const ordered = [...items].sort( + (a, b) => + Number(Boolean(byName.get(b.basket)?.is_primary)) - + Number(Boolean(byName.get(a.basket)?.is_primary)), + ); + el.basketEval.innerHTML = ordered + .map((item) => { + const basket = byName.get(item.basket); + const name = basket?.display_name || item.basket; + const days = Number(item.progress_days || 0); + const minimum = Math.max(1, Number(item.min_trading_days || 60)); + const progress = Math.min(100, Math.round((days / minimum) * 100)); + const coverage = + item.snapshot_coverage == null + ? null + : Math.round(Number(item.snapshot_coverage) * 100); + const [copy, cls] = verdictCopy[item.verdict] || ["관찰 중", "warn"]; + const issues = (item.issues || []).slice(0, 3); + return `
+
`;
- }).join("");
+ })
+ .join("");
renderChartMaturity();
renderDecision();
}
@@ -1355,14 +1405,30 @@
}
function marketCopy(regime) {
const v = String(regime || "").toLowerCase();
- if (v === "bullish") return ["안정", "신규 매수 가능", "ok"];
- if (v === "bearish") return ["방어", "신규 매수 제한", "warning"];
+ if (v === "bullish") return ["상승 추세", "시장 추세 기준 매수 허용", "ok"];
+ if (v === "bearish")
+ return ["하락 추세", "시장 추세 기준 매수 제한", "warning"];
if (v === "caution") return ["주의", "포지션 축소 구간", "warning"];
return ["확인 불가", "시장 상태 데이터 없음", "warning"];
}
- const strategyCopy = (s) => ({ scoring: "종합 점수형", basket_rebalance: "바스켓 리밸런싱" })[String(s || "").toLowerCase()] || s || "—";
- const signalCopy = (s) => ({ BUY: "매수", SELL: "매도", HOLD: "보유" })[String(s || "").toUpperCase()] || s || "—";
- const signalSourceCopy = (s) => ({ pre_market: "장 시작 전", intraday: "장중", post_market: "장 마감 후" })[String(s || "").toLowerCase()] || s || "—";
+ const strategyCopy = (s) =>
+ ({ scoring: "종합 점수형", basket_rebalance: "바스켓 리밸런싱" })[
+ String(s || "").toLowerCase()
+ ] ||
+ s ||
+ "—";
+ const signalCopy = (s) =>
+ ({ BUY: "매수", SELL: "매도", HOLD: "보유" })[
+ String(s || "").toUpperCase()
+ ] ||
+ s ||
+ "—";
+ const signalSourceCopy = (s) =>
+ ({ pre_market: "장 시작 전", intraday: "장중", post_market: "장 마감 후" })[
+ String(s || "").toLowerCase()
+ ] ||
+ s ||
+ "—";
function renderRuntime(runtime) {
state.runtime = runtime || null;
@@ -1372,14 +1438,29 @@
if (!runtime) {
el.haltGuidance.hidden = true;
el.runtimeOps.innerHTML = [
- statusRowItem("거래 안전", "확인 불가", "거래 중지 상태를 읽지 못했습니다", "warning"),
+ statusRowItem(
+ "거래 안전",
+ "확인 불가",
+ "거래 중지 상태를 읽지 못했습니다",
+ "warning",
+ ),
statusRowItem("장 상태", "확인 불가", "최근 데이터 없음", "warning"),
statusRowItem("자동매매", "확인 불가", "스케줄러 기록 없음", "warning"),
statusRowItem("증권사 연결", "확인 불가", "요청 통계 없음", "warning"),
- statusRowItem("데이터 갱신", "확인 불가", "잠시 후 다시 확인", "warning"),
+ statusRowItem(
+ "데이터 갱신",
+ "확인 불가",
+ "잠시 후 다시 확인",
+ "warning",
+ ),
].join("");
- el.runtimeMeta.textContent = "운영 정보를 불러오지 못했습니다. 자산 장부는 바뀌지 않았습니다.";
- el.statusRow.innerHTML = statusItem("거래", "확인 불가", "warning") + statusItem("장 상태", "확인 불가", "warning") + statusItem("자동매매", "확인 불가", "warning") + statusItem("데이터", "확인 불가", "warning");
+ el.runtimeMeta.textContent =
+ "운영 정보를 불러오지 못했습니다. 자산 계좌 기록은 바뀌지 않았습니다.";
+ el.statusRow.innerHTML =
+ statusItem("거래", "확인 불가", "warning") +
+ statusItem("장 상태", "확인 불가", "warning") +
+ statusItem("자동매매", "확인 불가", "warning") +
+ statusItem("데이터", "확인 불가", "warning");
renderSignals(null, null);
renderWsGap(null);
renderDecision();
@@ -1388,48 +1469,94 @@
const halt = runtime.trading_halt;
const haltKnown = Boolean(halt && typeof halt.halted === "boolean");
const halted = Boolean(halt && halt.halted);
- const [market, marketSupport, marketState] = marketCopy(runtime.market_regime && runtime.market_regime.regime);
+ const [market, marketSupport, marketState] = marketCopy(
+ runtime.market_regime && runtime.market_regime.regime,
+ );
const loop = runtime.loop_metrics;
const kis = runtime.kis_stats;
const updatedAt = runtime.runtime_file_updated_at;
const age = runtimeAgeMinutes();
const fresh = age != null && age <= 720;
- const loopElapsed = loop && loop.recent_avg_elapsed_s != null ? `${Number(loop.recent_avg_elapsed_s).toFixed(1)}초` : null;
- const haltValue = !haltKnown ? "확인 불가" : halted ? "거래 중지" : "운용 가능";
- const haltDetail = !haltKnown ? "거래 중지 상태를 읽지 못했습니다" : halted ? (halt.reason || "운영자 확인 필요") : "거래 중지 없음";
+ const loopElapsed =
+ loop && loop.recent_avg_elapsed_s != null
+ ? `${Number(loop.recent_avg_elapsed_s).toFixed(1)}초`
+ : null;
+ const haltValue = !haltKnown
+ ? "확인 불가"
+ : halted
+ ? "거래 중지"
+ : "운용 가능";
+ const haltDetail = !haltKnown
+ ? "거래 중지 상태를 읽지 못했습니다"
+ : halted
+ ? halt.reason || "운영자 확인 필요"
+ : "거래 중지 없음";
const haltState = !haltKnown ? "warning" : halted ? "error" : "ok";
// 자동매매 신선도는 런타임 파일이 아니라 스케줄러 루프의 마지막 성공 시각으로 본다.
// 수동 리밸런싱 점검만으로도 런타임 파일은 갱신되므로, 그걸 기준으로 삼으면 멈춘 루프가 정상으로 보인다.
- const loopLast = parseDate(loop && loop.last_success) || (loop ? parseDate(updatedAt) : null);
- const loopAge = loopLast ? Math.max(0, Math.round((Date.now() - loopLast.getTime()) / 60_000)) : null;
+ const loopLast =
+ parseDate(loop && loop.last_success) ||
+ (loop ? parseDate(updatedAt) : null);
+ const loopAge = loopLast
+ ? Math.max(0, Math.round((Date.now() - loopLast.getTime()) / 60_000))
+ : null;
const loopFresh = loopAge != null && loopAge <= 720;
- const autoValue = loopElapsed ? (loopFresh ? "정상" : `${formatAge(loopAge)} 실행`) : "기록 없음";
- const autoDetail = loopElapsed ? `마지막 실행 ${fmtDT(loopLast)} · 루프 ${loopElapsed}` : "스케줄러 기록 없음";
+ const autoValue = loopElapsed
+ ? loopFresh
+ ? "정상"
+ : `${formatAge(loopAge)} 실행`
+ : "기록 없음";
+ const autoDetail = loopElapsed
+ ? `마지막 실행 ${fmtDT(loopLast)} · 루프 ${loopElapsed}`
+ : "스케줄러 기록 없음";
const autoState = loop && loopFresh ? "ok" : "warning";
- const kisValue = kis && kis.minute_utilization_pct != null ? `${Number(kis.minute_utilization_pct).toFixed(1)}% 사용` : null;
- const kisRow = state.mode === "paper"
- ? statusRowItem("증권사 연결", "모의투자", "실계좌 연결 대상 아님", "info")
- : statusRowItem("증권사 연결", kisValue ? (fresh ? kisValue : "기록 오래됨") : "기록 없음", kisValue ? `분당 요청 한도 기준${fresh ? "" : ` · ${formatAge(age)}`}` : "요청 통계 없음", kis && fresh ? "ok" : "warning");
+ const kisValue =
+ kis && kis.minute_utilization_pct != null
+ ? `${Number(kis.minute_utilization_pct).toFixed(1)}% 사용`
+ : null;
+ const kisRow =
+ state.mode === "paper"
+ ? statusRowItem(
+ "증권사 연결",
+ "모의투자",
+ "실계좌 연결 대상 아님",
+ "info",
+ )
+ : statusRowItem(
+ "증권사 연결",
+ kisValue ? (fresh ? kisValue : "기록 오래됨") : "기록 없음",
+ kisValue
+ ? `분당 요청 한도 기준${fresh ? "" : ` · ${formatAge(age)}`}`
+ : "요청 통계 없음",
+ kis && fresh ? "ok" : "warning",
+ );
const dataState = age == null ? "warning" : age > 30 ? "warning" : "ok";
el.runtimeOps.innerHTML =
- statusRowItem("거래 안전", haltValue, haltDetail, haltState)
- + statusRowItem("장 상태", market, marketSupport, marketState)
- + statusRowItem("자동매매", autoValue, autoDetail, autoState)
- + kisRow
- + statusRowItem("데이터 갱신", formatAge(age), updatedAt ? fmtDT(updatedAt) : "스케줄러 데이터 없음", dataState);
+ statusRowItem("거래 안전", haltValue, haltDetail, haltState) +
+ statusRowItem("장 상태", market, marketSupport, marketState) +
+ statusRowItem("자동매매", autoValue, autoDetail, autoState) +
+ kisRow +
+ statusRowItem(
+ "데이터 갱신",
+ formatAge(age),
+ updatedAt ? fmtDT(updatedAt) : "스케줄러 데이터 없음",
+ dataState,
+ );
el.statusRow.innerHTML =
- statusItem("거래", haltValue, haltState)
- + statusItem("장 상태", market, marketState)
- + statusItem("자동매매", autoValue, autoState)
- + statusItem("데이터", formatAge(age), dataState);
+ statusItem("거래", haltValue, haltState) +
+ statusItem("장 상태", market, marketState) +
+ statusItem("자동매매", autoValue, autoState) +
+ statusItem("데이터", formatAge(age), dataState);
const meta = [];
if (runtime.strategy) meta.push(`전략 ${strategyCopy(runtime.strategy)}`);
if (updatedAt) meta.push(`스케줄러 기록 ${fmtDT(updatedAt)}`);
el.runtimeMeta.textContent = meta.join(" · ");
el.haltGuidance.hidden = !halted;
- if (halted) $("haltGuidanceReason").textContent = halt.reason || "신규 매수는 직접 해제하기 전까지 막혀 있습니다.";
+ if (halted)
+ $("haltGuidanceReason").textContent =
+ halt.reason || "신규 매수는 직접 해제하기 전까지 막혀 있습니다.";
renderSignals(runtime.signals_today, runtime.signals_date);
renderWsGap(runtime);
renderDecision();
@@ -1441,7 +1568,10 @@
const error = $("signalError");
const count = $("signalCount");
if (signals == null) {
- table.hidden = true; empty.hidden = true; error.hidden = false; count.textContent = "확인 불가";
+ table.hidden = true;
+ empty.hidden = true;
+ error.hidden = false;
+ count.textContent = "확인 불가";
return;
}
const isToday = !signalsDate || signalsDate === localIsoDate();
@@ -1450,14 +1580,20 @@
table.hidden = !rows.length;
empty.hidden = Boolean(rows.length);
error.hidden = true;
- empty.textContent = isToday ? "오늘 생성된 신호가 없습니다. 이상 상태는 아닙니다." : `오늘 생성된 신호가 없습니다. 마지막 신호는 ${fmtLong(signalsDate)}입니다.`;
- $("signalRows").innerHTML = rows.map((s) => `${escapeHtml(name)}${basket?.is_primary ? " · 주력" : ""}
-
${days} / ${minimum} 거래일${coverage == null ? "기록 누락 확인 중" : coverage >= 100 ? "기록 누락 없음" : `기록 누락 ${Math.max(0, 100 - coverage)}%`}
+${item.paper_only ? `전체 운영 ${days}거래일` : `${days} / ${minimum} 거래일`}${coverage == null ? "기록 누락 확인 중" : coverage >= 100 ? "기록 누락 없음" : `기록 누락 ${Math.max(0, 100 - coverage)}%`}
${copy}
${issues.length ? `- ${issues.map((i) => `
- ${escapeHtml(i)} `).join("")}
포트폴리오를 불러오지 못했습니다.이전 화면의 숫자는 최신이 아닐 수 있습니다.
';
- finishBoot();
- } else if (results.some((r) => r.status === "rejected") || state.flowError) {
+ el.basketTracks.innerHTML =
+ '포트폴리오를 불러오지 못했습니다.이전 화면의 숫자는 최신이 아닐 수 있습니다.
';
+ } else if (
+ results.some((r) => r.status === "rejected") ||
+ state.flowError
+ ) {
state.coreStatus = "partial";
} else {
state.coreStatus = "ready";
@@ -1648,14 +1876,26 @@
async function refreshSlow(force = false) {
if (!force && document.visibilityState === "hidden") return;
- if (!state.runtime) { state.runtimeStatus = "loading"; updateSyncIndicator(); }
- const evalTask = fetchJson("/api/basket_evaluation", { timeout: 30_000, key: "evaluation" })
+ if (!state.runtime) {
+ state.runtimeStatus = "loading";
+ updateSyncIndicator();
+ }
+ const evalTask = fetchJson("/api/basket_evaluation", {
+ timeout: 30_000,
+ key: "evaluation",
+ })
.then((data) => renderEvaluations((data && data.evaluations) || []))
.catch(() => {
el.basketEval.setAttribute("aria-busy", "false");
- el.basketEval.innerHTML = '검증 상태를 불러오지 못했습니다. 잠시 후 다시 확인하세요.
'; + el.basketEval.innerHTML = + '검증 상태를 불러오지 못했습니다. 잠시 후 다시 확인하세요.
'; }); - const runtimeTask = fetchJson("/api/runtime", { timeout: 30_000, key: "runtime" }).then(renderRuntime).catch(() => renderRuntime(null)); + const runtimeTask = fetchJson("/api/runtime", { + timeout: 30_000, + key: "runtime", + }) + .then(renderRuntime) + .catch(() => renderRuntime(null)); await Promise.allSettled([evalTask, runtimeTask]); } @@ -1666,22 +1906,63 @@ /* ---------- 이벤트 ---------- */ function initScrollSpy() { - if (!("IntersectionObserver" in window)) return; const links = [...document.querySelectorAll(".nav > a")]; - const targets = links.map((a) => document.querySelector(a.getAttribute("href"))).filter(Boolean); - const active = new Set(); - const spy = new IntersectionObserver((entries) => { - entries.forEach((entry) => { if (entry.isIntersecting) active.add(entry.target.id); else active.delete(entry.target.id); }); - const current = targets.map((t) => t.id).filter((id) => active.has(id)).at(-1) || null; + const targets = links + .map((a) => document.querySelector(a.getAttribute("href"))) + .filter(Boolean); + let scheduled = false; + const update = () => { + scheduled = false; + const anchor = window.innerWidth <= 600 ? 140 : 120; + const passed = targets.filter( + (target) => target.getBoundingClientRect().top <= anchor, + ); + const current = + Math.ceil(window.scrollY + window.innerHeight) >= + document.documentElement.scrollHeight - 2 + ? "operations" + : passed + .sort( + (a, b) => + a.getBoundingClientRect().top - b.getBoundingClientRect().top, + ) + .at(-1)?.id || "top"; links.forEach((a) => { - if (current && a.getAttribute("href") === `#${current}`) a.setAttribute("aria-current", "true"); + if (a.getAttribute("href") === `#${current}`) + a.setAttribute("aria-current", "location"); else a.removeAttribute("aria-current"); }); - }, { rootMargin: "-30% 0px -55% 0px", threshold: 0 }); - targets.forEach((t) => spy.observe(t)); + }; + // 사용자가 스크롤할 때 한 프레임에 한 번만 현재 위치를 갱신한다. + window.addEventListener( + "scroll", + () => { + if (!scheduled) { + scheduled = true; + requestAnimationFrame(update); + } + }, + { passive: true }, + ); + window.addEventListener("resize", update); + update(); } function wireEvents() { + $("accountTabs").addEventListener("click", (event) => { + const button = event.target.closest("button[data-account]"); + if (!button) return; + state.chartAccount = button.dataset.account; + ensureChartAccountOptions(); + el.chartAccount.value = state.chartAccount; + renderBasketTracks({ + baskets: state.baskets, + mode: state.mode, + timestamp: state.lastCoreSuccess, + }); + renderDecision(); + refreshChart(); + }); el.openDeposit.addEventListener("click", openDeposit); $("closeDepositButton").addEventListener("click", closeDeposit); $("depositCancelButton").addEventListener("click", closeDeposit); @@ -1692,15 +1973,24 @@ const action = el.decisionAction.dataset.action; if (action === "deposit") openDeposit(); else if (action === "retry") refreshAll(); - else if (action) document.getElementById(action)?.scrollIntoView({ behavior: reducedMotion.matches ? "auto" : "smooth", block: "start" }); + else if (action) + document.getElementById(action)?.scrollIntoView({ + behavior: reducedMotion.matches ? "auto" : "smooth", + block: "start", + }); }); - el.chartAccount.addEventListener("change", () => { state.chartAccount = el.chartAccount.value; refreshChart(); }); + el.chartAccount.addEventListener("change", () => { + state.chartAccount = el.chartAccount.value; + refreshChart(); + }); $("chartRange").addEventListener("click", (event) => { const button = event.target.closest("button[data-days]"); if (!button) return; state.chartDays = Number(button.dataset.days); - document.querySelectorAll("#chartRange button").forEach((b) => b.setAttribute("aria-pressed", String(b === button))); + document + .querySelectorAll("#chartRange button") + .forEach((b) => b.setAttribute("aria-pressed", String(b === button))); refreshChart(); }); el.chartEquity.addEventListener("pointermove", handleChartPointer); @@ -1710,18 +2000,32 @@ document.querySelectorAll("[data-amount]").forEach((button) => { button.addEventListener("click", () => { $("depAmount").value = button.dataset.amount; - document.querySelectorAll("[data-amount]").forEach((b) => b.setAttribute("aria-pressed", String(b === button))); + document + .querySelectorAll("[data-amount]") + .forEach((b) => b.setAttribute("aria-pressed", String(b === button))); $("depAmount").focus(); }); }); el.depositForm.addEventListener("submit", async (event) => { event.preventDefault(); - if (!canRecordDeposit()) { showDepositError("장부와 거래 상태를 최신으로 확인한 뒤 다시 시도하세요."); updateDepositAvailability(); return; } + if (!canRecordDeposit()) { + showDepositError( + "계좌 기록과 거래 상태를 최신으로 확인한 뒤 다시 시도하세요.", + ); + updateDepositAvailability(); + return; + } const values = depositValues(); if (!state.depositConfirming) { - if (!values.basket) { showDepositError("계좌를 선택하세요.", $("depBasket")); return; } - if (!Number.isFinite(values.amount) || values.amount <= 0) { showDepositError("0원보다 큰 금액을 입력하세요.", $("depAmount")); return; } + if (!values.basket) { + showDepositError("계좌를 선택하세요.", $("depBasket")); + return; + } + if (!Number.isFinite(values.amount) || values.amount <= 0) { + showDepositError("0원보다 큰 금액을 입력하세요.", $("depAmount")); + return; + } showDepositConfirmation(values); return; } @@ -1731,7 +2035,11 @@ el.depositDialog.addEventListener("click", (event) => { if (event.target !== el.depositDialog) return; const b = el.depositDialog.getBoundingClientRect(); - const inside = event.clientX >= b.left && event.clientX <= b.right && event.clientY >= b.top && event.clientY <= b.bottom; + const inside = + event.clientX >= b.left && + event.clientX <= b.right && + event.clientY >= b.top && + event.clientY <= b.bottom; if (!inside) closeDeposit(); }); @@ -1742,20 +2050,26 @@ updateSyncIndicator(); renderDecision(); }); - document.addEventListener("visibilitychange", () => { if (document.visibilityState === "visible") refreshAll(); }); + document.addEventListener("visibilitychange", () => { + if (document.visibilityState === "visible") refreshAll(); + }); } async function main() { wireEvents(); - initStory(); initScrollSpy(); if ("ResizeObserver" in window) { new ResizeObserver(() => drawChart()).observe(el.chartBox); } - document.querySelectorAll("#chartRange button").forEach((b) => b.setAttribute("aria-pressed", String(Number(b.dataset.days) === state.chartDays))); - window.setTimeout(finishBoot, 8000); + document + .querySelectorAll("#chartRange button") + .forEach((b) => + b.setAttribute( + "aria-pressed", + String(Number(b.dataset.days) === state.chartDays), + ), + ); await refreshAll(true); - finishBoot(); window.setInterval(() => refreshCore(), 30_000); window.setInterval(() => refreshSlow(), 60_000); } diff --git a/monitoring/static/fonts/OFL.txt b/monitoring/static/fonts/OFL.txt new file mode 100644 index 0000000..ae8d98d --- /dev/null +++ b/monitoring/static/fonts/OFL.txt @@ -0,0 +1,94 @@ +Copyright (c) 2021, Kil Hyung-jin (https://github.com/orioncactus/pretendard), +with Reserved Font Name Pretendard. + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/monitoring/static/fonts/README.md b/monitoring/static/fonts/README.md new file mode 100644 index 0000000..e2103a7 --- /dev/null +++ b/monitoring/static/fonts/README.md @@ -0,0 +1,7 @@ +# 대시보드 글꼴 + +`nungum-ui.woff2`는 [Pretendard 1.3.9](https://github.com/orioncactus/pretendard/releases/tag/v1.3.9)에서 대시보드용으로 글자를 줄인 파일입니다. 한글 KS X 1001의 2,350자, 기본 라틴 문자·숫자·문장부호·한글 자모를 포함합니다. 나머지 글자는 운영체제의 한글 글꼴로 표시합니다. + +원본: `packages/pretendard/dist/web/variable/woff2/PretendardVariable.woff2` (v1.3.9). FontTools로 서브셋을 만들고 내부 이름을 **Nungum UI**로 변경했습니다. 원본의 Reserved Font Name을 수정본의 글꼴 이름으로 사용하지 않습니다. 화면에는 400~700 굵기를 사용하며 외부 글꼴 서버에 요청하지 않습니다. + +원저작자: Kil Hyung-jin. 배포 조건은 함께 있는 [SIL Open Font License 1.1](OFL.txt)을 따릅니다. 실행 시 글꼴을 다시 만드는 과정이나 FontTools 설치는 필요하지 않습니다. diff --git a/monitoring/static/fonts/nungum-ui.woff2 b/monitoring/static/fonts/nungum-ui.woff2 new file mode 100644 index 0000000..6accef8 Binary files /dev/null and b/monitoring/static/fonts/nungum-ui.woff2 differ diff --git a/monitoring/templates/dashboard.html b/monitoring/templates/dashboard.html index 2c63558..5d4714e 100644 --- a/monitoring/templates/dashboard.html +++ b/monitoring/templates/dashboard.html @@ -1,284 +1,629 @@ - - - - - -
-
-
-
-
-
- 장부 여는 중 0%
-
- 눈금
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
- 장부를 여는 중입니다
-—
- - -적립을 뺀 운용 성과
-—
- - -고점 대비 최대 낙폭
-—
- - -
-
-
+
+ 내 투자 / 계좌 현황
+
-
-
-
- 오늘
- -
-
- 현재 상태를 확인하고 있습니다
-장부와 운영 기록을 불러오는 중입니다.
- -
+ 연결 확인 중
+ 확인 중
+
+ 계좌와 거래 상태를 확인한 뒤 기록할 수 있습니다.
+
+
-
+
포트폴리오
- +
+
+
+
+
- 계좌 현황
+투자한 금액과 수익, 보유 종목을 확인하세요.
-
+ 포트폴리오를 불러오는 중입니다.
+ +
+ 계좌를 불러오는 중입니다.
+
+
+
+ 총자산
+ —계좌를 불러오는 중입니다. +현금 —
-
+
- 투자원금 +
- — + 초기 자금 + 적립금 +
- + 누적 수익률 + TWR + +
- — + 적립금은 수익에서 제외 +
- 최대 낙폭 +
- — + 운용 중 고점 대비 최대 하락률 +
+
+
+
+
+
+
+
+
+
-
-
+
-
+
- 자산 추이
+ +
-
-
- 성과
- -
-
-
-
+
-
-
-
-
-
-
-
+
+
-
+
+
+
+
+
+
+
-
-
- 평가금액 점선은 투자원금, 세로 눈금은 적립 시점
-
-
-
+
+
+
+
+
+ 평가금액투자원금
+
+
+
+
+ 고점 대비 하락률 입출금을 제외한 수익률 기준
+
+
+
-
-
+
+
+
+
+
+
+
+
+
- 고점 대비 낙폭 시간가중 기준
-
-
+
+
-
-
+
-
+
+
+
+
-
+
-
+ 아직 표시할 기록이 없습니다.
+ 모의투자를 한 번 실행하면 첫 자산 기록이 생깁니다.
-
-
-
- 아직 표시할 기록이 없습니다.
- 모의투자를 한 번 실행하면 첫 자산 기록이 생깁니다.
-
- 평가금액에는 적립금이 포함됩니다. 운용 성과는 입금 시점의 영향을 제거한 시간가중수익률(TWR)로 읽으세요. 차트 위에 커서를 올리면 날짜별 값이 보입니다.
++ 점선은 투자원금입니다. 차트에 마우스를 올리거나 터치하면 해당 + 날짜의 금액을 볼 수 있습니다. +
-
-
-
+ 표로 보기
-
-
-
-
- | 날짜 | 평가금액 | 투자원금 | 시간가중수익률 |
|---|
+
+
- 표로 보기
+
+
+
+
+ | 날짜 | +평가금액 | +투자원금 | +시간가중수익률 | +
|---|
-
- 모의투자 검증
- -
-
- 검증 상태를 불러오는 중입니다.
-기록이 충분해도 실전 전환은 자동으로 되지 않습니다. 검토를 마친 뒤 직접 전환합니다.
-
+
+ 보유 종목
+ +
+
+ 포트폴리오를 불러오는 중입니다.
+
-
- 운영 상태
- -
+
+ 모의투자 검증
+ +
+
+ 검증 상태를 불러오는 중입니다.
++ 기록이 충분해도 실전 전환은 자동으로 되지 않습니다. 검토를 마친 뒤 + 직접 전환합니다. +
+
+
+ 자동매매 상태
+ +
-
+
- 오늘 생성된 신호 0건
-
-
-
-
- | 시각 | 종목 | 신호 | 점수 | 시점 |
|---|
오늘 생성된 신호가 없습니다. 이상 상태는 아닙니다.
-신호 기록을 불러오지 못했습니다. 잠시 후 다시 확인하세요.
-
-
- 연결 상태와 레거시 계정
-
-
-
-
- | 끊김 | 재연결 | 공백 | 영향 종목 | REST 보충 | 안전장치 |
|---|
최근 연결 끊김이 없습니다.
-웹소켓 상태를 아직 받지 못했습니다.
+
+
- + 오늘 생성된 신호 0건 +
+
+
+
+
+ | 시각 | +종목 | +신호 | +점수 | +시점 | +
|---|
+ 오늘 생성된 신호가 없습니다. +
++ 신호 기록을 불러오지 못했습니다. 잠시 후 다시 확인하세요. +
+레거시 기본 계정
-
-
-
-
- | 종목 | 수량 | 평단가 | 현재가 | 평가금액 | 수익률 |
|---|
레거시 계정에 보유 종목이 없습니다.
-
+
+ 연결 기록 및 이전 계좌
+
+
+
+
+ | 끊김 | +재연결 | +공백 | +영향 종목 | +REST 보충 | +안전장치 | +
|---|
+ 최근 연결 끊김이 없습니다. +
++ 웹소켓 상태를 아직 받지 못했습니다. +
+이전 기본 계좌
+
+
+
+
+ | 종목 | +수량 | +평단가 | +현재가 | +평가금액 | +수익률 | +
|---|
+ 이전 계좌에 보유 종목이 없습니다. +
+