// ============================================================================
// Charts — pure SVG, no chart lib. Equity curve, drawdown, bar charts, exposure.
// ============================================================================
const useSize = () => {
const ref = React.useRef(null);
const [size, setSize] = React.useState({ w: 0, h: 0 });
React.useLayoutEffect(() => {
if (!ref.current) return;
const ro = new ResizeObserver(([e]) => {
setSize({ w: e.contentRect.width, h: e.contentRect.height });
});
ro.observe(ref.current);
return () => ro.disconnect();
}, []);
return [ref, size];
};
const EquityChart = ({ points, height = 180, scale = "linear" }) => {
const [ref, { w }] = useSize();
const W = w || 600, H = height, PAD = { l: 44, r: 8, t: 8, b: 22 };
const safePoints = points && points.length ? points : [{ i: 0, v: 0 }, { i: 1, v: 0 }];
const xs = safePoints.map((p, i) => p.i ?? i);
const values = safePoints.map((p) => Number(p.v) || 0);
const toYDomain = (v) => scale === "log" ? Math.log10(Math.max(v, 1e-9)) : v;
const fromYDomain = (v) => scale === "log" ? Math.pow(10, v) : v;
const ys = values.map(toYDomain);
const xMin = Math.min(...xs), xMax = Math.max(...xs);
const yMin = Math.min(...ys), yMax = Math.max(...ys);
const x = (v) => PAD.l + ((v - xMin) / (xMax - xMin || 1)) * (W - PAD.l - PAD.r);
const y = (v) => PAD.t + (1 - (toYDomain(v) - yMin) / (yMax - yMin || 1)) * (H - PAD.t - PAD.b);
const path = safePoints.map((p, i) => `${i === 0 ? "M" : "L"} ${x(p.i ?? i)} ${y(p.v)}`).join(" ");
const area = `${path} L ${x(xMax)} ${H - PAD.b} L ${x(xMin)} ${H - PAD.b} Z`;
const ticks = 4;
const yTicks = Array.from({ length: ticks + 1 }, (_, i) => fromYDomain(yMin + (yMax - yMin) * (i / ticks)));
return (
);
};
const DrawdownChart = ({ points, height = 110 }) => {
const [ref, { w }] = useSize();
const W = w || 600, H = height, PAD = { l: 44, r: 8, t: 8, b: 18 };
const safePoints = points && points.length ? points : [{ i: 0, v: 0 }, { i: 1, v: 0 }];
// Drawdown is measured from the latest high-water mark, so every new high
// resets the current drawdown to 0%.
let peak = -Infinity;
const dd = safePoints.map((p, i) => {
const value = Number(p.v) || 0;
if (value >= peak) {
peak = value;
return { i, v: 0 };
}
return { i, v: peak > 0 ? ((value - peak) / peak) * 100 : 0 };
});
const ys = dd.map((p) => p.v);
const yMin = Math.min(...ys, 0);
const x = (v) => PAD.l + (v / (safePoints.length - 1 || 1)) * (W - PAD.l - PAD.r);
const y = (v) => PAD.t + (1 - (v - yMin) / (0 - yMin || 1)) * (H - PAD.t - PAD.b);
const path = dd.map((p, i) => `${i === 0 ? "M" : "L"} ${x(p.i)} ${y(p.v)}`).join(" ");
const area = `${path} L ${x(safePoints.length - 1)} ${y(0)} L ${x(0)} ${y(0)} Z`;
return (
);
};
const BarChartH = ({ data, valueKey = "pnl", labelKey = "symbol", height = 180 }) => {
const [ref, { w }] = useSize();
const W = w || 400, H = height, PAD = { l: 70, r: 40, t: 6, b: 6 };
const safeData = data && data.length ? data : [];
const max = Math.max(1, ...safeData.map((d) => Math.abs(Number(d[valueKey]) || 0)));
const rowH = safeData.length ? (H - PAD.t - PAD.b) / safeData.length : H - PAD.t - PAD.b;
const barH = Math.min(20, rowH - 6);
const zeroX = PAD.l + 4;
const usable = W - PAD.l - PAD.r - 8;
return (
);
};
const MonthlyBars = ({ data, height = 130 }) => {
const [ref, { w }] = useSize();
const W = w || 400, H = height, PAD = { l: 30, r: 8, t: 8, b: 20 };
const safeData = data && data.length ? data : [{ m: "—", v: 0 }];
const max = Math.max(1, ...safeData.map((d) => Math.abs(d.v)));
const bw = (W - PAD.l - PAD.r) / safeData.length;
const zeroY = PAD.t + (H - PAD.t - PAD.b) / 2;
const half = (H - PAD.t - PAD.b) / 2;
return (
);
};
const ExposureBar = ({ data }) => {
const colors = ["var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)"];
return (
{data.map((d, i) => (
))}
{data.map((d, i) => (
{d.symbol}
{d.pct}%
))}
);
};
const SymbolPriceChart = ({
symbol,
bars = [],
openPositions = [],
closedTrades = [],
height = 360,
focusTicket = null,
onHoverTicketChange,
onTicketClick,
}) => {
const [ref, { w }] = useSize();
const [localHoverTicket, setLocalHoverTicket] = React.useState(null);
const activeTicket = focusTicket ?? localHoverTicket;
const setHoverTicket = (ticket) => {
setLocalHoverTicket(ticket);
onHoverTicketChange?.(ticket);
};
const W = Math.max(w || 900, 760), H = height, PAD = { l: 62, r: 18, t: 14, b: 28 };
const safeBars = (bars || []).filter((b) => b && Number.isFinite(Number(b.close)));
if (!safeBars.length) {
return (
차트 데이터 없음
DB market_bars_5m에 {symbol || "선택 종목"} 데이터가 아직 없습니다.
);
}
const tsOf = (v) => {
const t = v ? new Date(v).getTime() : NaN;
return Number.isFinite(t) ? t : null;
};
const times = safeBars.map((b, i) => tsOf(b.ts) ?? i);
const xMin = times[0], xMax = times[times.length - 1];
const lastClose = Number(safeBars[safeBars.length - 1]?.close) || 0;
const tradeLines = [
...(closedTrades || []).map((p) => ({
kind: "closed",
ticket: p.ticket,
direction: p.direction,
startTs: tsOf(p.openedAt),
endTs: tsOf(p.closedAt),
entry: Number(p.entry),
exit: Number(p.exit || p.entry),
pnl: Number(p.pnl) || 0,
lots: Number(p.lots) || 0,
source: p.source || "",
})),
...(openPositions || []).map((p) => ({
kind: "open",
ticket: p.ticket,
direction: p.direction,
startTs: tsOf(p.openedAt),
endTs: xMax,
entry: Number(p.entry),
exit: Number(p.current || lastClose || p.entry),
sl: Number(p.sl),
tp: Number(p.tp),
pnl: Number(p.pnl) || 0,
lots: Number(p.lots) || 0,
source: p.source || "",
})),
].filter((p) => p.startTs != null && p.endTs != null && Number.isFinite(p.entry) && Number.isFinite(p.exit) && p.entry > 0 && p.exit > 0)
.map((p) => ({
...p,
visibleStartTs: Math.max(xMin, Math.min(xMax, p.startTs)),
visibleEndTs: Math.max(xMin, Math.min(xMax, p.endTs)),
startVisible: p.startTs >= xMin && p.startTs <= xMax,
endVisible: p.endTs >= xMin && p.endTs <= xMax,
}))
.filter((p) => p.visibleEndTs >= xMin && p.visibleStartTs <= xMax && Math.abs(p.visibleEndTs - p.visibleStartTs) > 1);
const markerRows = tradeLines.flatMap((p) => [
p.startVisible ? {
kind: p.kind === "open" ? "open-entry" : "closed-entry",
ts: p.startTs,
price: p.entry,
ticket: p.ticket,
label: `${p.kind === "open" ? "오픈" : "청산"} ${p.direction === "short" ? "S" : "L"} 진입 #${p.ticket}`,
tone: p.direction === "short" ? "danger" : "success",
detail: `${fmt.num(p.lots, 2)} lots · ${p.source}`,
} : null,
p.kind === "closed" && p.endVisible ? {
kind: "closed",
ts: p.endTs,
price: p.exit,
ticket: p.ticket,
label: `청산 #${p.ticket}`,
tone: p.pnl >= 0 ? "success" : "danger",
detail: `${fmt.pnl(p.pnl, 2)} · 청산가`,
} : null,
]).filter(Boolean);
const highs = safeBars.map((b) => Number(b.high || b.close)).filter(Number.isFinite);
const lows = safeBars.map((b) => Number(b.low || b.close)).filter(Number.isFinite);
const tradePrices = [
...tradeLines.flatMap((m) => [m.entry, m.exit, m.sl, m.tp]),
].filter((v) => Number.isFinite(v) && v > 0);
let yMin = Math.min(...lows, ...tradePrices);
let yMax = Math.max(...highs, ...tradePrices);
const padY = (yMax - yMin || Math.max(1, yMax * 0.001)) * 0.08;
yMin -= padY;
yMax += padY;
const x = (t) => PAD.l + ((t - xMin) / (xMax - xMin || 1)) * (W - PAD.l - PAD.r);
const y = (v) => PAD.t + (1 - (v - yMin) / (yMax - yMin || 1)) * (H - PAD.t - PAD.b);
const yTicks = Array.from({ length: 5 }, (_, i) => yMin + (yMax - yMin) * (i / 4));
const xTicks = [0, 0.25, 0.5, 0.75, 1].map((r) => xMin + (xMax - xMin) * r);
const decimals = symbol === "USDJPY" ? 3 : ["XAUUSD", "NAS100"].includes(symbol) ? 2 : 5;
const candleW = Math.max(2, Math.min(9, ((W - PAD.l - PAD.r) / safeBars.length) * 0.62));
const hoverKey = activeTicket == null ? null : String(activeTicket);
const isHovered = (ticket) => hoverKey != null && String(ticket) === hoverKey;
const isDimmed = (ticket) => hoverKey != null && !isHovered(ticket);
const orderByHover = (rows) => hoverKey
? [...rows.filter((r) => !isHovered(r.ticket)), ...rows.filter((r) => isHovered(r.ticket))]
: rows;
const orderedTradeLines = orderByHover(tradeLines);
const orderedMarkers = orderByHover(markerRows);
return (
);
};
Object.assign(window, { EquityChart, DrawdownChart, BarChartH, MonthlyBars, ExposureBar, SymbolPriceChart });