투자관리 차트탭 기능 수정
This commit is contained in:
Macbook
@@ -1131,7 +1131,6 @@ html.theme-blue {
|
||||
border-top: 1px solid var(--border, rgba(42, 46, 58, 0.85));
|
||||
background: color-mix(in srgb, var(--bg, #131722) 88%, transparent);
|
||||
overflow: hidden;
|
||||
will-change: transform;
|
||||
}
|
||||
.candle-pane-time-axis__label {
|
||||
position: absolute;
|
||||
|
||||
@@ -77,22 +77,6 @@ const CandlePaneTimeAxis: React.FC<CandlePaneTimeAxisProps> = ({ manager, contai
|
||||
const root = axisRef.current;
|
||||
if (!root || !containerEl.isConnected) return;
|
||||
|
||||
const panActive = manager.isCandleAxisPanActive();
|
||||
const panOffset = manager.getCandleAxisPanOffsetPx();
|
||||
|
||||
if (panActive) {
|
||||
const state = manager.getCandlePaneTimeAxisOverlay();
|
||||
if (!state || state.labels.length === 0) {
|
||||
root.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
if (panOffset === 0) {
|
||||
applyOverlayLayout(root, labelPoolRef.current, state);
|
||||
}
|
||||
root.style.transform = `translate3d(${panOffset}px, 0, 0)`;
|
||||
return;
|
||||
}
|
||||
|
||||
root.style.transform = '';
|
||||
|
||||
const state = manager.getCandlePaneTimeAxisOverlay();
|
||||
|
||||
@@ -31,6 +31,9 @@ import PaperTradeHistoryList from './paper/PaperTradeHistoryList';
|
||||
import BuilderPageShell from './layout/BuilderPageShell';
|
||||
import { useUpbitOrderbook } from '../hooks/useUpbitOrderbook';
|
||||
import { useUpbitRecentTrades } from '../hooks/useUpbitRecentTrades';
|
||||
import { loadVirtualSession, loadVirtualTargets } from '../utils/virtualTradingStorage';
|
||||
import { resolveVirtualTargetStrategyId } from '../utils/virtualTargetStrategy';
|
||||
import { formatVirtualTargetOptionLabel } from '../utils/virtualTargetNames';
|
||||
|
||||
type HistoryTab = 'open' | 'recent' | 'ledger';
|
||||
type CenterTab = 'invest' | 'chart';
|
||||
@@ -95,10 +98,27 @@ const PaperTradingPage: React.FC<Props> = ({
|
||||
const [historyTab, setHistoryTab] = useState<HistoryTab>('recent');
|
||||
const [rightTab, setRightTab] = useState<RightTab>('trade');
|
||||
const [leftTab, setLeftTab] = useState<LeftTab>('strategy');
|
||||
const [virtualTargets, setVirtualTargets] = useState(() => loadVirtualTargets());
|
||||
const [virtualGlobalStrategyId, setVirtualGlobalStrategyId] = useState(
|
||||
() => loadVirtualSession().globalStrategyId,
|
||||
);
|
||||
const [fillBuy, setFillBuy] = useState<TradeOrderFillRequest | null>(null);
|
||||
const [fillSell, setFillSell] = useState<TradeOrderFillRequest | null>(null);
|
||||
const orderAnchorRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const refreshVirtual = () => {
|
||||
setVirtualTargets(loadVirtualTargets());
|
||||
setVirtualGlobalStrategyId(loadVirtualSession().globalStrategyId);
|
||||
};
|
||||
window.addEventListener('gc_virtual_session_changed', refreshVirtual);
|
||||
window.addEventListener('storage', refreshVirtual);
|
||||
return () => {
|
||||
window.removeEventListener('gc_virtual_session_changed', refreshVirtual);
|
||||
window.removeEventListener('storage', refreshVirtual);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const tickersRef = useRef(tickers);
|
||||
tickersRef.current = tickers;
|
||||
const summaryRef = useRef(summary);
|
||||
@@ -129,6 +149,12 @@ const PaperTradingPage: React.FC<Props> = ({
|
||||
|
||||
useEffect(() => { if (refreshKey > 0) void loadData(); }, [refreshKey, loadData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (initialLoading) return;
|
||||
setVirtualTargets(loadVirtualTargets());
|
||||
setVirtualGlobalStrategyId(loadVirtualSession().globalStrategyId);
|
||||
}, [initialLoading, dataRefreshKey]);
|
||||
|
||||
const priceKey = positionPriceKey(summary?.positions, tickers);
|
||||
const lastPriceKeyRef = useRef('');
|
||||
useEffect(() => {
|
||||
@@ -159,11 +185,33 @@ const PaperTradingPage: React.FC<Props> = ({
|
||||
return coerceFiniteNumber(p?.quantity) ?? 0;
|
||||
}, [s?.positions, selectedMarket]);
|
||||
|
||||
const selectedAlloc = useMemo(
|
||||
() => s?.allocations?.find(a => a.symbol === selectedMarket),
|
||||
[s?.allocations, selectedMarket],
|
||||
const investmentTargets = useMemo(
|
||||
() => s?.allocations ?? [],
|
||||
[s?.allocations],
|
||||
);
|
||||
|
||||
const selectedAlloc = useMemo(
|
||||
() => investmentTargets.find(a => a.symbol === selectedMarket),
|
||||
[investmentTargets, selectedMarket],
|
||||
);
|
||||
|
||||
/** 가상매매 투자대상 종목별 전략(없으면 기본 전략) — virtualLiveStrategySync 와 동일 */
|
||||
const chartStrategyId = useMemo(() => {
|
||||
if (!selectedAlloc) return null;
|
||||
const vt = virtualTargets.find(t => t.market === selectedAlloc.symbol);
|
||||
if (vt) {
|
||||
return resolveVirtualTargetStrategyId(vt, virtualGlobalStrategyId);
|
||||
}
|
||||
return selectedAlloc.strategyId ?? null;
|
||||
}, [selectedAlloc, virtualTargets, virtualGlobalStrategyId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (centerTab !== 'chart' || investmentTargets.length === 0) return;
|
||||
if (!investmentTargets.some(a => a.symbol === selectedMarket)) {
|
||||
setSelectedMarket(investmentTargets[0].symbol);
|
||||
}
|
||||
}, [centerTab, investmentTargets, selectedMarket]);
|
||||
|
||||
const orderableCash = s?.orderableCash ?? s?.cashBalance ?? 0;
|
||||
|
||||
const tradePrice = useMemo(
|
||||
@@ -277,12 +325,40 @@ const PaperTradingPage: React.FC<Props> = ({
|
||||
/>
|
||||
)}
|
||||
centerHead={(
|
||||
<div className="ptd-center-head">
|
||||
<div className={`ptd-center-head${centerTab === 'chart' ? ' ptd-center-head--chart' : ''}`}>
|
||||
<div className="ptd-tabs ptd-tabs--center">
|
||||
<button type="button" className={`ptd-tab${centerTab === 'invest' ? ' active' : ''}`} onClick={() => setCenterTab('invest')}>투자금 관리</button>
|
||||
<button type="button" className={`ptd-tab${centerTab === 'chart' ? ' active' : ''}`} onClick={() => setCenterTab('chart')}>차트</button>
|
||||
</div>
|
||||
{centerTab === 'chart' ? (
|
||||
<div className="ptd-center-head-center">
|
||||
<label className="ptd-chart-market-select-wrap">
|
||||
<select
|
||||
className="ptd-chart-market-select"
|
||||
aria-label="종목 선택"
|
||||
value={investmentTargets.some(a => a.symbol === selectedMarket) ? selectedMarket : ''}
|
||||
onChange={e => setSelectedMarket(e.target.value)}
|
||||
disabled={investmentTargets.length === 0}
|
||||
>
|
||||
{investmentTargets.length === 0 ? (
|
||||
<option value="">투자 대상 없음</option>
|
||||
) : (
|
||||
investmentTargets.map(a => (
|
||||
<option key={a.symbol} value={a.symbol}>
|
||||
{formatVirtualTargetOptionLabel(
|
||||
a.symbol,
|
||||
a.koreanName ?? tickers?.get(a.symbol)?.koreanName,
|
||||
coinCode(a.symbol),
|
||||
)}
|
||||
</option>
|
||||
))
|
||||
)}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
) : (
|
||||
<span className="bps-center-head-title">{coinCode(selectedMarket)} / KRW</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
center={centerTab === 'invest' ? (
|
||||
@@ -306,7 +382,11 @@ const PaperTradingPage: React.FC<Props> = ({
|
||||
</div>
|
||||
) : (
|
||||
<div className="ptd-card ptd-chart-card ptd-center-fill">
|
||||
<PaperAnalysisChart market={selectedMarket} theme={theme} />
|
||||
<PaperAnalysisChart
|
||||
market={selectedMarket}
|
||||
strategyId={chartStrategyId}
|
||||
theme={theme}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
rightTabs={rightTabs}
|
||||
|
||||
@@ -149,6 +149,8 @@ interface TradingChartProps {
|
||||
paneSeparatorOptions?: ChartPaneSeparatorOptions;
|
||||
/** true: pane 합산 높이로 chart-container 를 키우지 않고 래퍼 높이에 맞춤 (미니 차트·알림 목록) */
|
||||
paneLayoutClamp?: boolean;
|
||||
/** 캔들+거래량 vs 보조 pane 높이 비율 (aux 0 이면 미적용) */
|
||||
paneAreaRatio?: { candle: number; aux: number } | null;
|
||||
/** 보조지표 pane 레전드(이름·값 오버레이) 표시 (기본 true, 알림 미니차트는 false) */
|
||||
showPaneLegend?: boolean;
|
||||
/** 크로스헤어 이동 시 OHLC·보조지표 수치 표시 (기본 true) */
|
||||
@@ -195,6 +197,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
|
||||
chartVisible = true,
|
||||
paneSeparatorOptions,
|
||||
paneLayoutClamp = false,
|
||||
paneAreaRatio = null,
|
||||
showPaneLegend = true,
|
||||
crosshairInfoVisible = true,
|
||||
dataLoading = false,
|
||||
@@ -227,6 +230,8 @@ const TradingChart: React.FC<TradingChartProps> = ({
|
||||
const seriesDblSuppressRef = useRef(false);
|
||||
const toggleCandleOnlyRef = useRef<() => void>(() => {});
|
||||
const candleOnlyModeRef = useRef(false);
|
||||
const paneAreaRatioRef = useRef(paneAreaRatio);
|
||||
paneAreaRatioRef.current = paneAreaRatio;
|
||||
const lastCrosshairPriceRef = useRef<number | null>(null);
|
||||
const onTradeOrderRequestRef = useRef(onTradeOrderRequest);
|
||||
onTradeOrderRequestRef.current = onTradeOrderRequest;
|
||||
@@ -387,6 +392,12 @@ const TradingChart: React.FC<TradingChartProps> = ({
|
||||
if (mgr.isCandleOnlyLayout()) {
|
||||
mgr.restoreFromCandleFullscreen(wrapperH);
|
||||
}
|
||||
const ratio = paneAreaRatioRef.current;
|
||||
if (ratio && ratio.aux > 0) {
|
||||
mgr.setPaneAreaRatio(ratio.candle, ratio.aux);
|
||||
} else {
|
||||
mgr.setPaneAreaRatio(0, 0);
|
||||
}
|
||||
required = mgr.resetPaneHeights(wrapperH);
|
||||
}
|
||||
|
||||
@@ -408,7 +419,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
|
||||
} catch { /* ok */ }
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [paneLayoutClamp]);
|
||||
}, [paneLayoutClamp, paneAreaRatio]);
|
||||
|
||||
/** pane 레이아웃 + 가격·시간축 정상화 (느린 네트워크·레이아웃 지연 후 복구용) */
|
||||
const normalizeChartViewport = useCallback((mgr: ChartManager) => {
|
||||
@@ -938,8 +949,8 @@ const TradingChart: React.FC<TradingChartProps> = ({
|
||||
if (!panStateRef.current.active) return;
|
||||
if (panStateRef.current.moved) {
|
||||
suppressClickRef.current = true;
|
||||
managerRef.current?.notifyViewportChanged();
|
||||
}
|
||||
managerRef.current?.endCandleAxisPan();
|
||||
panStateRef.current.active = false;
|
||||
container.style.cursor = canPanRef.current ? 'grab' : '';
|
||||
};
|
||||
|
||||
@@ -1,23 +1,26 @@
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState, type MutableRefObject } from 'react';
|
||||
import TradingChart from '../TradingChart';
|
||||
import type { BacktestSignal, StrategyDto } from '../../utils/backendApi';
|
||||
import { loadStrategy } from '../../utils/backendApi';
|
||||
import type { ChartType, IndicatorConfig, OHLCVBar, Theme, Timeframe } from '../../types';
|
||||
import { loadAnalysisCandles } from '../../utils/analysisChartData';
|
||||
import type { ChartManager } from '../../utils/ChartManager';
|
||||
import { useHistoryLoader } from '../../hooks/useHistoryLoader';
|
||||
import { useHistoryLoader, LOAD_MORE_TRIGGER } from '../../hooks/useHistoryLoader';
|
||||
import { isUpbitMarket } from '../../utils/upbitApi';
|
||||
import { DEFAULT_DISPLAY_TIMEZONE } from '../../utils/timezone';
|
||||
import { normalizeChartTimeframe, timeframeBarSeconds } from '../../utils/backtestUiUtils';
|
||||
import { useIndicatorSettings } from '../../hooks/useIndicatorSettings';
|
||||
import { useAppSettings } from '../../hooks/useAppSettings';
|
||||
import { enrichIndicatorConfig, getIndicatorDef } from '../../utils/indicatorRegistry';
|
||||
import {
|
||||
chartPaneFlexRatio,
|
||||
countNonOverlayIndicatorPanes,
|
||||
} from '../../utils/strategyOscillatorSeries';
|
||||
import { normalizeSmaConfig } from '../../utils/smaConfig';
|
||||
import {
|
||||
buildVirtualTradingChartIndicators,
|
||||
resolveStrategyPrimaryTimeframe,
|
||||
} from '../../utils/strategyToChartIndicators';
|
||||
import BacktestOscillatorPanes from './BacktestOscillatorPanes';
|
||||
|
||||
interface Props {
|
||||
symbol: string;
|
||||
@@ -28,6 +31,10 @@ interface Props {
|
||||
signals: BacktestSignal[];
|
||||
strategyId?: number | null;
|
||||
theme?: Theme;
|
||||
/** 과거 캔들 추가 로드 후 (차트에 반영된 전체 봉) */
|
||||
onHistoryBarsLoaded?: (bars: OHLCVBar[]) => void;
|
||||
/** 과거 로드·시그널 재계산 중 UI */
|
||||
onHistoryLoadingChange?: (loading: boolean) => void;
|
||||
}
|
||||
|
||||
const noop = () => {};
|
||||
@@ -59,6 +66,11 @@ function defaultOverlayIndicators(
|
||||
return [cfg];
|
||||
}
|
||||
|
||||
const isOverlayType = (type: string) => getIndicatorDef(type)?.overlay === true;
|
||||
|
||||
/**
|
||||
* 백테스트·투자관리 차트 — TradingChart 단일 엔진(실시간 차트와 동일 크로스헤어·시간축·우측 가격)
|
||||
*/
|
||||
const BacktestAnalysisChart: React.FC<Props> = ({
|
||||
symbol,
|
||||
timeframe: timeframeRaw,
|
||||
@@ -68,8 +80,9 @@ const BacktestAnalysisChart: React.FC<Props> = ({
|
||||
signals,
|
||||
strategyId,
|
||||
theme = 'dark',
|
||||
onHistoryBarsLoaded,
|
||||
onHistoryLoadingChange,
|
||||
}) => {
|
||||
const timeframe = normalizeChartTimeframe(timeframeRaw);
|
||||
const { getParams, getVisualConfig } = useIndicatorSettings();
|
||||
const { defaults: appDefaults } = useAppSettings();
|
||||
const [bars, setBars] = useState<OHLCVBar[]>([]);
|
||||
@@ -78,10 +91,21 @@ const BacktestAnalysisChart: React.FC<Props> = ({
|
||||
const [chartType] = useState<ChartType>('candlestick');
|
||||
const [strategy, setStrategy] = useState<StrategyDto | undefined>();
|
||||
const managerRef = useRef<ChartManager | null>(null);
|
||||
const logicalRangeUnsubRef = useRef<(() => void) | null>(null);
|
||||
const viewportUnsubRef = useRef<(() => void) | null>(null);
|
||||
const loadMoreRefRef = useRef<MutableRefObject<() => void>>({ current: () => {} });
|
||||
const signalsRef = useRef(signals);
|
||||
signalsRef.current = signals;
|
||||
const onHistoryBarsLoadedRef = useRef(onHistoryBarsLoaded);
|
||||
onHistoryBarsLoadedRef.current = onHistoryBarsLoaded;
|
||||
const [loadedBarCount, setLoadedBarCount] = useState<number | null>(null);
|
||||
const market = symbol.startsWith('KRW-') ? symbol : `KRW-${symbol}`;
|
||||
|
||||
const chartTimeframe = useMemo((): Timeframe => {
|
||||
const tf = strategy ? resolveStrategyPrimaryTimeframe(strategy) : timeframeRaw;
|
||||
return normalizeChartTimeframe(tf) as Timeframe;
|
||||
}, [strategy, timeframeRaw]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!strategyId) {
|
||||
setStrategy(undefined);
|
||||
@@ -97,10 +121,21 @@ const BacktestAnalysisChart: React.FC<Props> = ({
|
||||
const indicators = useMemo(() => {
|
||||
if (strategy) {
|
||||
const inds = buildVirtualTradingChartIndicators(strategy, getParams, getVisualConfig);
|
||||
if (inds.length) return inds.filter(i => i.timeframeVisibility?.[timeframe] !== false);
|
||||
if (inds.length) return inds.filter(i => i.timeframeVisibility?.[chartTimeframe] !== false);
|
||||
}
|
||||
return defaultOverlayIndicators(getParams);
|
||||
}, [strategy, getParams, getVisualConfig, timeframe]);
|
||||
}, [strategy, getParams, getVisualConfig, chartTimeframe]);
|
||||
|
||||
const auxPaneCount = useMemo(
|
||||
() => countNonOverlayIndicatorPanes(indicators, isOverlayType),
|
||||
[indicators],
|
||||
);
|
||||
|
||||
const paneAreaRatio = useMemo(() => {
|
||||
if (auxPaneCount <= 0) return null;
|
||||
const flex = chartPaneFlexRatio(auxPaneCount);
|
||||
return { candle: flex.candle, aux: flex.aux };
|
||||
}, [auxPaneCount]);
|
||||
|
||||
const effectiveBarCount = useMemo(() => {
|
||||
const barSec = timeframeBarSeconds(timeframeRaw);
|
||||
@@ -114,7 +149,8 @@ const BacktestAnalysisChart: React.FC<Props> = ({
|
||||
let cancelled = false;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
void loadAnalysisCandles(market, timeframe, toTimeSec, effectiveBarCount)
|
||||
setLoadedBarCount(null);
|
||||
void loadAnalysisCandles(market, chartTimeframe, toTimeSec, effectiveBarCount)
|
||||
.then(data => {
|
||||
if (cancelled) return;
|
||||
setBars(data);
|
||||
@@ -128,7 +164,7 @@ const BacktestAnalysisChart: React.FC<Props> = ({
|
||||
if (!cancelled) setLoading(false);
|
||||
});
|
||||
return () => { cancelled = true; };
|
||||
}, [market, timeframe, toTimeSec, effectiveBarCount]);
|
||||
}, [market, chartTimeframe, toTimeSec, effectiveBarCount]);
|
||||
|
||||
const applyMarkers = useCallback((attempt = 0) => {
|
||||
const mgr = managerRef.current;
|
||||
@@ -139,51 +175,127 @@ const BacktestAnalysisChart: React.FC<Props> = ({
|
||||
mgr.setBacktestMarkers(signalsRef.current, true);
|
||||
}, []);
|
||||
|
||||
const applyPaneRatio = useCallback((mgr: ChartManager) => {
|
||||
if (paneAreaRatio && paneAreaRatio.aux > 0) {
|
||||
mgr.setPaneAreaRatio(paneAreaRatio.candle, paneAreaRatio.aux);
|
||||
} else {
|
||||
mgr.setPaneAreaRatio(0, 0);
|
||||
}
|
||||
}, [paneAreaRatio]);
|
||||
|
||||
const handleBarsPrepended = useCallback((_added: number, total: number) => {
|
||||
setLoadedBarCount(total);
|
||||
const mgr = managerRef.current;
|
||||
if (!mgr) return;
|
||||
onHistoryBarsLoadedRef.current?.(mgr.getRawBars());
|
||||
// 왼쪽 끝에 붙어 있으면 연속 로드
|
||||
requestAnimationFrame(() => {
|
||||
const lr = mgr.getVisibleLogicalRange();
|
||||
if (lr && lr.from < LOAD_MORE_TRIGGER) {
|
||||
loadMoreRefRef.current.current();
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
const { isLoadingMore, loadMoreRef } = useHistoryLoader({
|
||||
symbol: market,
|
||||
timeframe: chartTimeframe,
|
||||
isUpbit: isUpbitMarket(market),
|
||||
managerRef,
|
||||
onBarsPrepended: handleBarsPrepended,
|
||||
});
|
||||
|
||||
loadMoreRefRef.current = loadMoreRef;
|
||||
|
||||
const setupHistoryScroll = useCallback((mgr: ChartManager) => {
|
||||
logicalRangeUnsubRef.current?.();
|
||||
viewportUnsubRef.current?.();
|
||||
|
||||
const tryLoadMore = () => {
|
||||
if (!mgr.hasMainSeries()) return;
|
||||
const lr = mgr.getVisibleLogicalRange();
|
||||
if (lr && lr.from < LOAD_MORE_TRIGGER) {
|
||||
loadMoreRefRef.current.current();
|
||||
}
|
||||
};
|
||||
|
||||
logicalRangeUnsubRef.current = mgr.subscribeVisibleLogicalRange(r => {
|
||||
if (r && r.from < LOAD_MORE_TRIGGER) {
|
||||
loadMoreRefRef.current.current();
|
||||
}
|
||||
});
|
||||
// 커스텀 패닝은 LWC 논리범위 이벤트를 안 낼 수 있어 뷰포트 알림에도 연결
|
||||
viewportUnsubRef.current = mgr.subscribeViewport(tryLoadMore);
|
||||
requestAnimationFrame(tryLoadMore);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
onHistoryLoadingChange?.(isLoadingMore);
|
||||
}, [isLoadingMore, onHistoryLoadingChange]);
|
||||
|
||||
useEffect(() => () => {
|
||||
logicalRangeUnsubRef.current?.();
|
||||
logicalRangeUnsubRef.current = null;
|
||||
viewportUnsubRef.current?.();
|
||||
viewportUnsubRef.current = null;
|
||||
}, []);
|
||||
|
||||
const onManagerReady = useCallback((mgr: ChartManager) => {
|
||||
managerRef.current = mgr;
|
||||
setupHistoryScroll(mgr);
|
||||
setLoadedBarCount(mgr.getRawBarsLength());
|
||||
applyPaneRatio(mgr);
|
||||
applyMarkers();
|
||||
}, [applyMarkers]);
|
||||
}, [applyMarkers, applyPaneRatio, setupHistoryScroll]);
|
||||
|
||||
const onCandlesReady = useCallback(() => {
|
||||
const mgr = managerRef.current;
|
||||
if (!mgr) return;
|
||||
setupHistoryScroll(mgr);
|
||||
applyPaneRatio(mgr);
|
||||
applyMarkers();
|
||||
}, [applyMarkers]);
|
||||
setLoadedBarCount(mgr.getRawBarsLength());
|
||||
}, [applyMarkers, applyPaneRatio, setupHistoryScroll]);
|
||||
|
||||
useEffect(() => {
|
||||
applyMarkers();
|
||||
}, [signals, bars, applyMarkers]);
|
||||
|
||||
useHistoryLoader({
|
||||
symbol: market,
|
||||
timeframe,
|
||||
isUpbit: isUpbitMarket(market),
|
||||
managerRef,
|
||||
});
|
||||
useEffect(() => {
|
||||
const mgr = managerRef.current;
|
||||
if (mgr) applyPaneRatio(mgr);
|
||||
}, [paneAreaRatio, applyPaneRatio]);
|
||||
|
||||
const symLabel = market.replace(/^KRW-/, '');
|
||||
const stratTf = strategy ? resolveStrategyPrimaryTimeframe(strategy) : timeframe;
|
||||
const stratTf = chartTimeframe;
|
||||
|
||||
const priceLabels = appDefaults.chartSeriesPriceLabels !== false;
|
||||
|
||||
return (
|
||||
<div className="btd-analysis-chart">
|
||||
<div className="btd-analysis-toolbar">
|
||||
<div className="btd-analysis-toolbar-left">
|
||||
<span className="btd-analysis-select btd-analysis-select--static">{symLabel}</span>
|
||||
<span className="btd-analysis-select btd-analysis-select--static">{timeframe}</span>
|
||||
<span className="btd-analysis-select btd-analysis-select--static">{chartTimeframe}</span>
|
||||
<span className="btd-analysis-select btd-analysis-select--static">Candle</span>
|
||||
</div>
|
||||
<div className="btd-analysis-toolbar-right">
|
||||
<span className="btd-analysis-tool" title="자석 모드">⊕</span>
|
||||
<span className="btd-analysis-tool" title="드로잉">✎</span>
|
||||
<span className="btd-analysis-tool" title="삭제">⌫</span>
|
||||
<span className="btd-analysis-count">{effectiveBarCount.toLocaleString()}봉</span>
|
||||
<span className="btd-analysis-count">
|
||||
{(loadedBarCount ?? effectiveBarCount).toLocaleString()}봉
|
||||
{isLoadingMore && ' · 과거 로드…'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="btd-analysis-main">
|
||||
<div className="btd-analysis-canvas-wrap">
|
||||
<div className="btd-analysis-canvas-wrap btd-analysis-canvas-wrap--live">
|
||||
{loading && <div className="btd-analysis-loading">차트 로딩…</div>}
|
||||
{error && !loading && <div className="btd-analysis-error">{error}</div>}
|
||||
{!loading && !error && bars.length > 0 && (
|
||||
<TradingChart
|
||||
key={`${market}-${timeframe}-${toTimeSec}-${effectiveBarCount}`}
|
||||
key={`${market}-${chartTimeframe}-${toTimeSec}-${effectiveBarCount}-${indicators.map(i => i.id).join(',')}`}
|
||||
bars={bars}
|
||||
barsMarket={market}
|
||||
market={market}
|
||||
@@ -201,13 +313,20 @@ const BacktestAnalysisChart: React.FC<Props> = ({
|
||||
onAddDrawing={noop}
|
||||
displayTimezone={DEFAULT_DISPLAY_TIMEZONE}
|
||||
paneSeparatorOptions={appDefaults.chartPaneSeparator}
|
||||
paneLayoutClamp
|
||||
paneAreaRatio={paneAreaRatio}
|
||||
showPaneLegend
|
||||
crosshairInfoVisible
|
||||
candleAreaPriceLabelsEnabled={priceLabels}
|
||||
indicatorAreaPriceLabelsEnabled={priceLabels}
|
||||
seriesPriceLabelsEnabled={priceLabels}
|
||||
showHoverToolbar
|
||||
/>
|
||||
)}
|
||||
{!loading && !error && bars.length === 0 && (
|
||||
<div className="btd-analysis-error">표시할 캔들 데이터가 없습니다.</div>
|
||||
)}
|
||||
</div>
|
||||
{!loading && bars.length > 0 && <BacktestOscillatorPanes bars={bars} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import type { OHLCVBar } from '../../types';
|
||||
import type { StrategyDto } from '../../utils/backendApi';
|
||||
import {
|
||||
buildOscillatorPaneData,
|
||||
collectStrategyOscillatorPanes,
|
||||
defaultOscillatorPaneSpecs,
|
||||
} from '../../utils/strategyOscillatorSeries';
|
||||
|
||||
function spark(values: number[], w: number, h: number, min?: number, max?: number): string {
|
||||
if (!values.length) return '';
|
||||
const lo = min ?? Math.min(...values);
|
||||
const hi = max ?? Math.max(...values);
|
||||
const range = hi - lo || 1;
|
||||
return values.map((v, i) => {
|
||||
const x = (i / Math.max(values.length - 1, 1)) * w;
|
||||
const y = h - ((v - lo) / range) * (h - 6) - 3;
|
||||
return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;
|
||||
}).join(' ');
|
||||
}
|
||||
|
||||
interface Props {
|
||||
bars: OHLCVBar[];
|
||||
strategy?: StrategyDto;
|
||||
/** 부모 flex 영역 높이에 맞춰 pane 균등 분배 */
|
||||
fillHeight?: boolean;
|
||||
}
|
||||
|
||||
/** 전략 조건에 사용된 보조지표 하단 pane (없으면 RSI·MACD 기본) */
|
||||
const StrategyOscillatorPanes: React.FC<Props> = ({ bars, strategy, fillHeight = false }) => {
|
||||
const panes = useMemo(() => {
|
||||
const specs = collectStrategyOscillatorPanes(strategy);
|
||||
const useSpecs = specs.length > 0 ? specs : defaultOscillatorPaneSpecs();
|
||||
return buildOscillatorPaneData(bars, useSpecs);
|
||||
}, [bars, strategy]);
|
||||
|
||||
if (panes.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className={`btd-osc-stack${fillHeight ? ' btd-osc-stack--fill' : ''}`}>
|
||||
{panes.map(pane => {
|
||||
const last = pane.values[pane.values.length - 1];
|
||||
const lo = pane.refLines?.[0];
|
||||
const hi = pane.refLines?.[pane.refLines.length - 1];
|
||||
const path = spark(
|
||||
pane.values,
|
||||
280,
|
||||
52,
|
||||
lo != null && hi != null && pane.spec.registryType === 'RSI' ? 0 : undefined,
|
||||
lo != null && hi != null && pane.spec.registryType === 'RSI' ? 100 : undefined,
|
||||
);
|
||||
return (
|
||||
<div key={pane.spec.key} className={`btd-osc-pane${fillHeight ? ' btd-osc-pane--fill' : ''}`}>
|
||||
<div className="btd-osc-head">
|
||||
<span className="btd-osc-label">{pane.spec.label}</span>
|
||||
<span className="btd-osc-val">
|
||||
{last != null
|
||||
? (pane.spec.registryType === 'RSI' ? last.toFixed(1) : last.toFixed(2))
|
||||
: '–'}
|
||||
</span>
|
||||
</div>
|
||||
<svg className="btd-osc-svg" viewBox="0 0 280 52" preserveAspectRatio="none">
|
||||
{pane.refLines?.map((r, i) => {
|
||||
const min = pane.refLines![0];
|
||||
const max = pane.refLines![pane.refLines!.length - 1];
|
||||
const y = 52 - ((r - min) / (max - min || 1)) * 44 - 4;
|
||||
return (
|
||||
<line
|
||||
key={i}
|
||||
x1="0"
|
||||
y1={y}
|
||||
x2="280"
|
||||
y2={y}
|
||||
className={`btd-osc-ref${i === 0 || i === pane.refLines!.length - 1 ? ' btd-osc-ref--hi' : ''}`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{!pane.refLines?.length && (
|
||||
<line x1="0" y1="26" x2="280" y2="26" className="btd-osc-ref" />
|
||||
)}
|
||||
<path
|
||||
d={path}
|
||||
className="btd-osc-line"
|
||||
fill="none"
|
||||
stroke={pane.color}
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StrategyOscillatorPanes;
|
||||
@@ -1,31 +1,196 @@
|
||||
import React, { useState } from 'react';
|
||||
import type { Theme, Timeframe } from '../../types';
|
||||
import PaperMiniChart from './PaperMiniChart';
|
||||
import PaperIndicatorPanel from './PaperIndicatorPanel';
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import BacktestAnalysisChart from '../backtest/BacktestAnalysisChart';
|
||||
import {
|
||||
DEFAULT_BACKTEST_SETTINGS,
|
||||
loadStrategy,
|
||||
runBacktest,
|
||||
type BacktestSignal,
|
||||
type StrategyDto,
|
||||
} from '../../utils/backendApi';
|
||||
import { loadAnalysisCandles } from '../../utils/analysisChartData';
|
||||
import { normalizeChartTimeframe } from '../../utils/backtestUiUtils';
|
||||
import { resolveStrategyPrimaryTimeframe } from '../../utils/strategyToChartIndicators';
|
||||
import type { OHLCVBar, Theme } from '../../types';
|
||||
import { useIndicatorSettings } from '../../hooks/useIndicatorSettings';
|
||||
|
||||
const BAR_COUNT = 300;
|
||||
const HISTORY_BACKTEST_DEBOUNCE_MS = 450;
|
||||
|
||||
interface Props {
|
||||
market: string;
|
||||
strategyId?: number | null;
|
||||
theme?: Theme;
|
||||
}
|
||||
|
||||
/** 모의투자 중앙 — 상단 캔들 + 하단 보조지표 (실시간 차트 레이아웃) */
|
||||
const PaperAnalysisChart: React.FC<Props> = ({ market, theme = 'dark' }) => {
|
||||
const [timeframe, setTimeframe] = useState<Timeframe>('1h');
|
||||
/**
|
||||
* 모의투자 차트 탭 — 전략 백테스트 시그널 + 캔들·보조지표 (백테스팅 분석 차트와 동일)
|
||||
* 좌측(과거) 스크롤 시 추가 캔들·보조지표 로드 후 전체 구간 시그널 재계산.
|
||||
*/
|
||||
const PaperAnalysisChart: React.FC<Props> = ({ market, strategyId, theme = 'dark' }) => {
|
||||
const { getParams } = useIndicatorSettings();
|
||||
const [signals, setSignals] = useState<BacktestSignal[]>([]);
|
||||
const [strategy, setStrategy] = useState<StrategyDto | undefined>();
|
||||
const [timeframe, setTimeframe] = useState('1h');
|
||||
const [running, setRunning] = useState(false);
|
||||
const [historyLoading, setHistoryLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const toTimeSec = useMemo(() => Math.floor(Date.now() / 1000), [market, strategyId]);
|
||||
const backtestGenRef = useRef(0);
|
||||
const historyDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const strategyRef = useRef(strategy);
|
||||
const strategyIdRef = useRef(strategyId);
|
||||
strategyRef.current = strategy;
|
||||
strategyIdRef.current = strategyId;
|
||||
|
||||
useEffect(() => {
|
||||
if (!strategyId) {
|
||||
setStrategy(undefined);
|
||||
setSignals([]);
|
||||
setError('가상매매 투자대상에 종목 전략 또는 기본 전략이 설정되어 있지 않습니다.');
|
||||
return;
|
||||
}
|
||||
let cancelled = false;
|
||||
setError(null);
|
||||
void loadStrategy(strategyId).then(s => {
|
||||
if (!cancelled) setStrategy(s ?? undefined);
|
||||
});
|
||||
return () => { cancelled = true; };
|
||||
}, [strategyId]);
|
||||
|
||||
const runSignalsForBars = useCallback(async (
|
||||
bars: OHLCVBar[],
|
||||
tf: string,
|
||||
strat: StrategyDto,
|
||||
sid: number,
|
||||
) => {
|
||||
const sym = market.startsWith('KRW-') ? market : `KRW-${market}`;
|
||||
if (bars.length < 10) {
|
||||
setSignals([]);
|
||||
setError('캔들 데이터가 부족합니다.');
|
||||
return;
|
||||
}
|
||||
const gen = ++backtestGenRef.current;
|
||||
setRunning(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await runBacktest({
|
||||
strategyId: sid,
|
||||
bars: bars.map(b => ({
|
||||
time: b.time,
|
||||
open: b.open,
|
||||
high: b.high,
|
||||
low: b.low,
|
||||
close: b.close,
|
||||
volume: b.volume,
|
||||
})),
|
||||
timeframe: tf,
|
||||
symbol: sym,
|
||||
strategyName: strat.name,
|
||||
settings: DEFAULT_BACKTEST_SETTINGS,
|
||||
indicatorParams: Object.fromEntries(
|
||||
['RSI', 'MACD', 'CCI', 'SMA', 'EMA', 'IchimokuCloud', 'Stochastic', 'ADX', 'MFI', 'NewPsychological'].map(t => [
|
||||
t,
|
||||
getParams(t) as Record<string, unknown>,
|
||||
]),
|
||||
),
|
||||
});
|
||||
if (gen !== backtestGenRef.current) return;
|
||||
if (!res) {
|
||||
setSignals([]);
|
||||
setError('시그널 계산에 실패했습니다.');
|
||||
return;
|
||||
}
|
||||
setSignals(res.signals);
|
||||
} catch (e) {
|
||||
if (gen !== backtestGenRef.current) return;
|
||||
setSignals([]);
|
||||
setError(e instanceof Error ? e.message : '차트 분석 실패');
|
||||
} finally {
|
||||
if (gen === backtestGenRef.current) setRunning(false);
|
||||
}
|
||||
}, [market, getParams]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!strategyId || !strategy) {
|
||||
setSignals([]);
|
||||
return;
|
||||
}
|
||||
let cancelled = false;
|
||||
const tf = normalizeChartTimeframe(resolveStrategyPrimaryTimeframe(strategy));
|
||||
setTimeframe(tf);
|
||||
setError(null);
|
||||
|
||||
void (async () => {
|
||||
try {
|
||||
const sym = market.startsWith('KRW-') ? market : `KRW-${market}`;
|
||||
const bars = await loadAnalysisCandles(sym, tf, toTimeSec, BAR_COUNT);
|
||||
if (cancelled) return;
|
||||
await runSignalsForBars(bars, tf, strategy, strategyId);
|
||||
} catch (e) {
|
||||
if (!cancelled) {
|
||||
setSignals([]);
|
||||
setError(e instanceof Error ? e.message : '차트 분석 실패');
|
||||
setRunning(false);
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
++backtestGenRef.current;
|
||||
};
|
||||
}, [market, strategyId, strategy, toTimeSec, runSignalsForBars]);
|
||||
|
||||
const handleHistoryBarsLoaded = useCallback((bars: OHLCVBar[]) => {
|
||||
const strat = strategyRef.current;
|
||||
const sid = strategyIdRef.current;
|
||||
if (!strat || !sid) return;
|
||||
const tf = normalizeChartTimeframe(resolveStrategyPrimaryTimeframe(strat));
|
||||
if (historyDebounceRef.current) clearTimeout(historyDebounceRef.current);
|
||||
historyDebounceRef.current = setTimeout(() => {
|
||||
historyDebounceRef.current = null;
|
||||
void runSignalsForBars(bars, tf, strat, sid);
|
||||
}, HISTORY_BACKTEST_DEBOUNCE_MS);
|
||||
}, [runSignalsForBars]);
|
||||
|
||||
useEffect(() => () => {
|
||||
if (historyDebounceRef.current) clearTimeout(historyDebounceRef.current);
|
||||
}, []);
|
||||
|
||||
if (!strategyId) {
|
||||
return (
|
||||
<div className="ptd-analysis-chart ptd-analysis-chart--empty">
|
||||
<p className="ptd-muted">
|
||||
가상매매 투자대상 목록에서 종목별 전략 또는 기본 전략을 설정하면 차트에 매매 시그널이 표시됩니다.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const statusBusy = running || historyLoading;
|
||||
|
||||
return (
|
||||
<div className="ptd-analysis-chart">
|
||||
<div className="ptd-main-pane">
|
||||
<PaperMiniChart
|
||||
market={market}
|
||||
theme={theme}
|
||||
<div className="ptd-analysis-chart ptd-analysis-chart--backtest">
|
||||
{statusBusy && (
|
||||
<div className="ptd-analysis-chart-status">
|
||||
{historyLoading && !running ? '과거 캔들 로드 중…' : '전략 시그널 계산 중…'}
|
||||
</div>
|
||||
)}
|
||||
{error && !statusBusy && (
|
||||
<div className="ptd-analysis-chart-status ptd-analysis-chart-status--err">{error}</div>
|
||||
)}
|
||||
<BacktestAnalysisChart
|
||||
symbol={market}
|
||||
timeframe={timeframe}
|
||||
onTimeframeChange={setTimeframe}
|
||||
toTimeSec={toTimeSec}
|
||||
barCount={BAR_COUNT}
|
||||
signals={signals}
|
||||
strategyId={strategyId}
|
||||
theme={theme}
|
||||
onHistoryBarsLoaded={handleHistoryBarsLoaded}
|
||||
onHistoryLoadingChange={setHistoryLoading}
|
||||
/>
|
||||
</div>
|
||||
<div className="ptd-sub-panes">
|
||||
<PaperIndicatorPanel market={market} timeframe={timeframe} stacked />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -18,6 +18,8 @@
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import type { RefObject, MutableRefObject } from 'react';
|
||||
import type { ChartManager } from '../utils/ChartManager';
|
||||
import { toHistoryApiIso } from '../utils/analysisChartData';
|
||||
import { timeframeToCandleType } from '../utils/chartCandleType';
|
||||
import { fetchUpbitCandlesBeforeCached } from '../utils/requestCache';
|
||||
import type { OHLCVBar, Timeframe } from '../types';
|
||||
|
||||
@@ -38,6 +40,8 @@ interface UseHistoryLoaderOptions {
|
||||
timeframe: Timeframe;
|
||||
isUpbit: boolean;
|
||||
managerRef: RefObject<ChartManager | null>;
|
||||
/** 과거 캔들 prepend 완료 후 (추가된 봉 수, 전체 봉 수) */
|
||||
onBarsPrepended?: (addedCount: number, totalBars: number) => void;
|
||||
}
|
||||
|
||||
interface UseHistoryLoaderReturn {
|
||||
@@ -91,6 +95,7 @@ export function useHistoryLoader({
|
||||
timeframe,
|
||||
isUpbit,
|
||||
managerRef,
|
||||
onBarsPrepended,
|
||||
}: UseHistoryLoaderOptions): UseHistoryLoaderReturn {
|
||||
const [isLoadingMore, setIsLoadingMore] = useState(false);
|
||||
|
||||
@@ -103,6 +108,8 @@ export function useHistoryLoader({
|
||||
/** false 가 되면 더 이상 API 를 호출하지 않음 */
|
||||
const hasMoreRef = useRef(true);
|
||||
const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const onPrependedRef = useRef(onBarsPrepended);
|
||||
onPrependedRef.current = onBarsPrepended;
|
||||
|
||||
// 심볼·타임프레임이 바뀌면 상태 초기화
|
||||
useEffect(() => {
|
||||
@@ -125,10 +132,15 @@ export function useHistoryLoader({
|
||||
const oldestTime = mgr.getOldestBarTime();
|
||||
if (oldestTime === null) return;
|
||||
|
||||
// Unix 타임스탬프(초) → ISO 8601 UTC ('Z' 없이 전달, 백엔드에서 처리)
|
||||
const beforeIso = new Date(oldestTime * 1000)
|
||||
.toISOString()
|
||||
.replace('.000Z', ''); // '2026-05-20T10:00:00'
|
||||
// exclusive to — 가장 오래된 봉 시각 그대로 쓰면 중복·0건이 될 수 있어 한 봉 이전으로
|
||||
const raw = mgr.getRawBars();
|
||||
let beforeSec = oldestTime;
|
||||
if (raw.length >= 2) {
|
||||
const step = Math.max(1, (raw[1].time as number) - (raw[0].time as number));
|
||||
beforeSec = oldestTime - step;
|
||||
}
|
||||
const beforeIso = toHistoryApiIso(beforeSec);
|
||||
const candleType = timeframeToCandleType(timeframe);
|
||||
|
||||
// ★ 락 설정: 이 시점부터 동일 타임스탬프 중복 요청 차단
|
||||
loadingRef.current = true;
|
||||
@@ -139,8 +151,8 @@ export function useHistoryLoader({
|
||||
|
||||
// ── 1. 백엔드 /api/candles/history 우선 시도 ──────────────────────────
|
||||
try {
|
||||
olderBars = await fetchHistoryFromBackend(symbol, timeframe, beforeIso, LOAD_BATCH);
|
||||
console.debug(`[HistoryLoader] 백엔드에서 ${olderBars.length}개 수신`);
|
||||
olderBars = await fetchHistoryFromBackend(symbol, candleType, beforeIso, LOAD_BATCH);
|
||||
console.debug(`[HistoryLoader] 백엔드에서 ${olderBars.length}개 수신 (${candleType})`);
|
||||
} catch (backendErr) {
|
||||
// ── 2. 백엔드 실패 시 업비트 REST 직접 폴백 ───────────────────────
|
||||
console.warn('[HistoryLoader] 백엔드 실패, 업비트 직접 폴백:', backendErr);
|
||||
@@ -153,7 +165,10 @@ export function useHistoryLoader({
|
||||
hasMoreRef.current = false; // 더 이상 데이터 없음
|
||||
} else {
|
||||
// ── 3. 차트 앞부분에 부드럽게 병합 (Prepend) ──────────────────────
|
||||
await mgr.prependBars(olderBars);
|
||||
const added = await mgr.prependBars(olderBars);
|
||||
if (added > 0) {
|
||||
onPrependedRef.current?.(added, mgr.getRawBarsLength());
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('[HistoryLoader] 과거 데이터 로드 실패:', e);
|
||||
|
||||
@@ -1216,36 +1216,69 @@
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btd-analysis-canvas-wrap {
|
||||
flex: 1;
|
||||
min-height: 320px;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btd-analysis-canvas-wrap--live {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btd-analysis-canvas-wrap--live .tv-chart-wrap {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.btd-analysis-canvas-wrap .tv-chart-wrap {
|
||||
height: 100% !important;
|
||||
min-height: 320px;
|
||||
min-height: 0 !important;
|
||||
}
|
||||
|
||||
.btd-analysis-canvas-wrap .chart-container {
|
||||
min-height: 320px;
|
||||
min-height: 0 !important;
|
||||
}
|
||||
|
||||
/* ── RSI / MACD pane ── */
|
||||
/* ── 보조지표 pane ── */
|
||||
|
||||
.btd-osc-stack {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top: 1px solid var(--btd-divider);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btd-osc-stack--fill {
|
||||
flex-shrink: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.btd-osc-pane {
|
||||
padding: 6px 10px 4px;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--btd-divider) 70%, transparent);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btd-osc-pane--fill {
|
||||
flex: 1 1 0;
|
||||
min-height: 52px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btd-osc-pane--fill .btd-osc-svg {
|
||||
flex: 1 1 auto;
|
||||
min-height: 36px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.btd-osc-pane:last-child { border-bottom: none; }
|
||||
|
||||
@@ -72,6 +72,54 @@
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.ptd-analysis-chart--backtest {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ptd-analysis-chart--backtest .btd-analysis-chart {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ptd-analysis-chart--backtest .btd-analysis-main {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.ptd-analysis-chart--empty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ptd-analysis-chart-status {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 12px;
|
||||
z-index: 4;
|
||||
font-size: 11px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
background: color-mix(in srgb, var(--bg3) 92%, transparent);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text2);
|
||||
}
|
||||
|
||||
.ptd-analysis-chart-status--err {
|
||||
color: var(--down, #ef4444);
|
||||
}
|
||||
|
||||
.ptd-ind-stack {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
|
||||
@@ -2805,6 +2805,59 @@
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ptd-center-head--chart {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.ptd-center-head--chart .ptd-tabs--center {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.ptd-center-head--chart .ptd-center-head-center {
|
||||
justify-self: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ptd-center-head--chart .bps-center-head-title {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.ptd-chart-market-select-wrap {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ptd-chart-market-select {
|
||||
min-width: min(220px, 42vw);
|
||||
max-width: 280px;
|
||||
padding: 5px 28px 5px 10px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--se-border, var(--border));
|
||||
background: var(--gc-surface-2, rgba(255, 255, 255, 0.06));
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2394a3b8' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 10px center;
|
||||
}
|
||||
|
||||
.ptd-chart-market-select:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.ptd-chart-market-select:focus {
|
||||
outline: none;
|
||||
border-color: color-mix(in srgb, var(--gc-trade-buy, #ef5350) 55%, var(--border));
|
||||
}
|
||||
.ptd-tabs--center {
|
||||
flex-shrink: 0;
|
||||
border-bottom: none;
|
||||
|
||||
@@ -264,6 +264,9 @@ export class ChartManager {
|
||||
/** 알림 목록 미니 차트 등 고정 높이 — pane 최소 px·비율 완화 */
|
||||
private _compactPaneLayout = false;
|
||||
|
||||
/** 캔들+거래량 그룹 vs 보조 pane 그룹 stretch 비율 (투자관리·백테스트 분석 차트) */
|
||||
private _paneAreaRatio: { candle: number; aux: number } | null = null;
|
||||
|
||||
constructor(
|
||||
container: HTMLElement,
|
||||
theme: Theme,
|
||||
@@ -2054,10 +2057,6 @@ export class ChartManager {
|
||||
private _viewportLwcHooked = false;
|
||||
private readonly _lwcViewportHandler = (): void => { this._notifyViewport(); };
|
||||
|
||||
/** 캔들 pane 시간축 — 드래그 패닝 중 transform 동기화용 */
|
||||
private _candleAxisPanActive = false;
|
||||
private _candleAxisPanOffsetPx = 0;
|
||||
|
||||
private _notifyViewport(): void {
|
||||
for (const cb of this._viewportListeners) {
|
||||
try { cb(); } catch { /* ok */ }
|
||||
@@ -2096,29 +2095,6 @@ export class ChartManager {
|
||||
this._notifyViewport();
|
||||
}
|
||||
|
||||
/** 캔들 pane 시간축 드래그 패닝 종료 — 라벨 위치를 최종 논리 범위로 재정렬 */
|
||||
endCandleAxisPan(): void {
|
||||
if (!this._candleAxisPanActive) return;
|
||||
this._candleAxisPanActive = false;
|
||||
this._candleAxisPanOffsetPx = 0;
|
||||
this._notifyViewport();
|
||||
}
|
||||
|
||||
isCandleAxisPanActive(): boolean {
|
||||
return this._candleAxisPanActive;
|
||||
}
|
||||
|
||||
getCandleAxisPanOffsetPx(): number {
|
||||
return this._candleAxisPanOffsetPx;
|
||||
}
|
||||
|
||||
private _ensureCandleAxisPan(): void {
|
||||
if (this._candleAxisPanActive) return;
|
||||
this._candleAxisPanActive = true;
|
||||
this._candleAxisPanOffsetPx = 0;
|
||||
this._notifyViewport();
|
||||
}
|
||||
|
||||
/** visible logical range → 플롯 X (LWC 좌표 API와 동일한 선형 매핑) */
|
||||
private _logicalToAxisX(logical: number, lr: { from: number; to: number }, plotWidth: number): number {
|
||||
const span = lr.to - lr.from;
|
||||
@@ -3040,9 +3016,6 @@ export class ChartManager {
|
||||
options?: { allowVerticalPan?: boolean },
|
||||
): void {
|
||||
if (deltaX !== 0) {
|
||||
this._ensureCandleAxisPan();
|
||||
this._candleAxisPanOffsetPx += deltaX;
|
||||
|
||||
const ts = this.chart.timeScale();
|
||||
const lr = ts.getVisibleLogicalRange();
|
||||
if (lr) {
|
||||
@@ -3272,6 +3245,11 @@ export class ChartManager {
|
||||
return this.rawBars.length;
|
||||
}
|
||||
|
||||
/** 현재 차트에 로드된 캔들 스냅샷 (과거 추가 로드·백테스트 재계산용) */
|
||||
getRawBars(): OHLCVBar[] {
|
||||
return this.rawBars.slice();
|
||||
}
|
||||
|
||||
/** 두 시각(초) 사이에 포함된 봉 개수 — 기간(날짜 범위) 측정 라벨용 */
|
||||
countBarsBetweenTime(t0: number, t1: number): number {
|
||||
const lo = Math.min(t0, t1);
|
||||
@@ -3296,15 +3274,15 @@ export class ChartManager {
|
||||
* 사용자가 보고 있던 구간이 유지되도록 합니다.
|
||||
* - 모든 보조지표를 전체 데이터 기준으로 재계산합니다.
|
||||
*/
|
||||
async prependBars(olderBars: OHLCVBar[]): Promise<void> {
|
||||
if (!this.mainSeries || olderBars.length === 0) return;
|
||||
async prependBars(olderBars: OHLCVBar[]): Promise<number> {
|
||||
if (!this.mainSeries || olderBars.length === 0) return 0;
|
||||
|
||||
const firstExistingTime = this.rawBars[0]?.time as number | undefined;
|
||||
const newBars = firstExistingTime !== undefined
|
||||
? olderBars.filter(b => (b.time as number) < firstExistingTime)
|
||||
: olderBars;
|
||||
|
||||
if (newBars.length === 0) return;
|
||||
if (newBars.length === 0) return 0;
|
||||
|
||||
// 현재 가시 논리 범위 저장 (prepend 후 복원용)
|
||||
const logicalRange = this.chart.timeScale().getVisibleLogicalRange();
|
||||
@@ -3349,6 +3327,7 @@ export class ChartManager {
|
||||
|
||||
// 보조지표 전체 재계산 (새 데이터가 왼쪽에 추가됐으므로 전체 갱신 필요)
|
||||
await this._refreshAllIndicatorsData();
|
||||
return newBars.length;
|
||||
}
|
||||
|
||||
/** 모든 보조지표를 현재 rawBars 기준으로 전체 재계산하고 시리즈 데이터를 교체합니다. */
|
||||
@@ -3628,6 +3607,21 @@ export class ChartManager {
|
||||
*
|
||||
* @param availableHeight 외부에서 측정한 실제 가용 높이(px). 스크롤 필요 여부 판단에만 사용.
|
||||
*/
|
||||
/**
|
||||
* 캔들 영역 vs 보조지표 영역 높이 비율 (예: 보조 1개 → 2:1, 2~5개 → 1:1, 6+ → 1:2)
|
||||
* auxWeight 가 0 이면 비율 해제.
|
||||
*/
|
||||
setPaneAreaRatio(candleWeight: number, auxWeight: number): void {
|
||||
if (auxWeight <= 0) {
|
||||
this._paneAreaRatio = null;
|
||||
} else {
|
||||
this._paneAreaRatio = {
|
||||
candle: Math.max(0.1, candleWeight),
|
||||
aux: Math.max(0.1, auxWeight),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
private _volumeFrac(H: number): number {
|
||||
if (!this._volumeVisible || this._candleOnlyLayout) return 0;
|
||||
return Math.min(Math.max(60 / H, 0.04), 0.12);
|
||||
@@ -3750,7 +3744,15 @@ export class ChartManager {
|
||||
? this._lastLayoutAvailableHeight
|
||||
: this.container.clientHeight);
|
||||
const N = this._activeIndicatorPaneIndices().size;
|
||||
const { mainFrac } = this._paneHeightFractions(N, this._volumeFrac(H), H);
|
||||
const volFrac = this._volumeFrac(H);
|
||||
let mainFrac: number;
|
||||
if (this._paneAreaRatio && N > 0) {
|
||||
const total = this._paneAreaRatio.candle + this._paneAreaRatio.aux;
|
||||
const candleGroupFrac = this._paneAreaRatio.candle / total;
|
||||
mainFrac = Math.max(0.12, candleGroupFrac - volFrac);
|
||||
} else {
|
||||
mainFrac = this._paneHeightFractions(N, volFrac, H).mainFrac;
|
||||
}
|
||||
|
||||
return this._applyPaneStretchFactors(mainFrac, availableHeight);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,209 @@
|
||||
import type { OHLCVBar } from '../types';
|
||||
import type { StrategyDto } from './backendApi';
|
||||
import { extractVirtualConditions } from './virtualStrategyConditions';
|
||||
import { formatIndicatorDisplayLabel } from './indicatorRegistry';
|
||||
|
||||
const DSL_TO_REGISTRY: Record<string, string> = {
|
||||
RSI: 'RSI',
|
||||
MACD: 'MACD',
|
||||
MA: 'SMA',
|
||||
EMA: 'EMA',
|
||||
BOLLINGER: 'BollingerBands',
|
||||
STOCHASTIC: 'Stochastic',
|
||||
WILLIAMS_R: 'WilliamsPercentRange',
|
||||
CCI: 'CCI',
|
||||
ADX: 'ADX',
|
||||
DMI: 'DMI',
|
||||
OBV: 'OBV',
|
||||
TRIX: 'TRIX',
|
||||
VOLUME_OSC: 'VolumeOscillator',
|
||||
VR: 'VR',
|
||||
DISPARITY: 'Disparity',
|
||||
PSYCHOLOGICAL: 'Psychological',
|
||||
NEW_PSYCHOLOGICAL: 'NewPsychological',
|
||||
INVEST_PSYCHOLOGICAL: 'InvestPsychological',
|
||||
ICHIMOKU: 'IchimokuCloud',
|
||||
ATR: 'ATR',
|
||||
MFI: 'MFI',
|
||||
};
|
||||
|
||||
/** 메인 캔들 pane 오버레이 — 하단 스파크 pane 제외 */
|
||||
const OVERLAY_DSL = new Set([
|
||||
'MA', 'EMA', 'BOLLINGER', 'ICHIMOKU', 'DONCHIAN', 'NEW_HIGH', 'NEW_LOW', 'DISPARITY',
|
||||
]);
|
||||
|
||||
export interface OscillatorPaneSpec {
|
||||
key: string;
|
||||
registryType: string;
|
||||
label: string;
|
||||
period?: number;
|
||||
}
|
||||
|
||||
export interface OscillatorPaneData {
|
||||
spec: OscillatorPaneSpec;
|
||||
values: number[];
|
||||
refLines?: number[];
|
||||
color: string;
|
||||
}
|
||||
|
||||
const PANE_COLORS: Record<string, string> = {
|
||||
RSI: '#a78bfa',
|
||||
MACD: '#38bdf8',
|
||||
CCI: '#fbbf24',
|
||||
Stochastic: '#f472b6',
|
||||
WilliamsPercentRange: '#c084fc',
|
||||
ADX: '#34d399',
|
||||
MFI: '#fb923c',
|
||||
OBV: '#94a3b8',
|
||||
TRIX: '#22d3ee',
|
||||
VolumeOscillator: '#86efac',
|
||||
VR: '#fcd34d',
|
||||
Psychological: '#e879f9',
|
||||
NewPsychological: '#e879f9',
|
||||
InvestPsychological: '#e879f9',
|
||||
};
|
||||
|
||||
function computeRsi(closes: number[], period = 14): number[] {
|
||||
if (closes.length < period + 1) return [];
|
||||
const out: number[] = [];
|
||||
let avgGain = 0;
|
||||
let avgLoss = 0;
|
||||
for (let i = 1; i <= period; i++) {
|
||||
const d = closes[i] - closes[i - 1];
|
||||
if (d >= 0) avgGain += d; else avgLoss -= d;
|
||||
}
|
||||
avgGain /= period;
|
||||
avgLoss /= period;
|
||||
for (let i = period; i < closes.length; i++) {
|
||||
const d = closes[i] - closes[i - 1];
|
||||
const gain = d > 0 ? d : 0;
|
||||
const loss = d < 0 ? -d : 0;
|
||||
avgGain = (avgGain * (period - 1) + gain) / period;
|
||||
avgLoss = (avgLoss * (period - 1) + loss) / period;
|
||||
const rs = avgLoss === 0 ? 100 : avgGain / avgLoss;
|
||||
out.push(100 - 100 / (1 + rs));
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function computeMacd(closes: number[]): number[] {
|
||||
const ema = (arr: number[], p: number) => {
|
||||
const k = 2 / (p + 1);
|
||||
let v = arr[0];
|
||||
return arr.map((x, i) => (i === 0 ? x : (v = x * k + v * (1 - k))));
|
||||
};
|
||||
const e12 = ema(closes, 12);
|
||||
const e26 = ema(closes, 26);
|
||||
return e12.map((v, i) => v - e26[i]);
|
||||
}
|
||||
|
||||
function computeCci(bars: OHLCVBar[], period = 20): number[] {
|
||||
const tp = bars.map(b => (b.high + b.low + b.close) / 3);
|
||||
const out: number[] = [];
|
||||
for (let i = period; i < tp.length; i++) {
|
||||
const slice = tp.slice(i - period, i);
|
||||
const sma = slice.reduce((a, b) => a + b, 0) / slice.length;
|
||||
const md = slice.reduce((a, v) => a + Math.abs(v - sma), 0) / slice.length;
|
||||
out.push(md === 0 ? 0 : (tp[i] - sma) / (0.015 * md));
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function computeSeries(bars: OHLCVBar[], registryType: string, period?: number): number[] {
|
||||
const closes = bars.map(b => b.close);
|
||||
switch (registryType) {
|
||||
case 'RSI':
|
||||
return computeRsi(closes, period ?? 14);
|
||||
case 'MACD':
|
||||
return computeMacd(closes);
|
||||
case 'CCI':
|
||||
return computeCci(bars, period ?? 20);
|
||||
default:
|
||||
return computeRsi(closes, 14);
|
||||
}
|
||||
}
|
||||
|
||||
function refLinesFor(registryType: string): number[] | undefined {
|
||||
if (registryType === 'RSI') return [30, 50, 70];
|
||||
if (registryType === 'CCI') return [-100, 0, 100];
|
||||
if (registryType === 'MACD') return [0];
|
||||
return undefined;
|
||||
}
|
||||
|
||||
export function collectStrategyOscillatorPanes(strategy: StrategyDto | undefined): OscillatorPaneSpec[] {
|
||||
if (!strategy) return [];
|
||||
const rows = extractVirtualConditions(strategy);
|
||||
const seen = new Set<string>();
|
||||
const out: OscillatorPaneSpec[] = [];
|
||||
for (const row of rows) {
|
||||
if (OVERLAY_DSL.has(row.indicatorType)) continue;
|
||||
const registryType = DSL_TO_REGISTRY[row.indicatorType] ?? row.indicatorType;
|
||||
if (OVERLAY_DSL.has(registryType) || registryType === 'SMA' || registryType === 'EMA'
|
||||
|| registryType === 'BollingerBands' || registryType === 'IchimokuCloud') {
|
||||
continue;
|
||||
}
|
||||
if (seen.has(registryType)) continue;
|
||||
seen.add(registryType);
|
||||
out.push({
|
||||
key: registryType,
|
||||
registryType,
|
||||
label: formatIndicatorDisplayLabel(row.indicatorType),
|
||||
period: undefined,
|
||||
});
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
export function buildOscillatorPaneData(
|
||||
bars: OHLCVBar[],
|
||||
specs: OscillatorPaneSpec[],
|
||||
): OscillatorPaneData[] {
|
||||
if (bars.length < 20) return [];
|
||||
const out: OscillatorPaneData[] = [];
|
||||
for (const spec of specs) {
|
||||
const values = computeSeries(bars, spec.registryType, spec.period).slice(-80);
|
||||
if (values.length < 2) continue;
|
||||
out.push({
|
||||
spec,
|
||||
values,
|
||||
refLines: refLinesFor(spec.registryType),
|
||||
color: PANE_COLORS[spec.registryType] ?? '#94a3b8',
|
||||
});
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
export function defaultOscillatorPaneSpecs(): OscillatorPaneSpec[] {
|
||||
return [
|
||||
{ key: 'RSI', registryType: 'RSI', label: 'RSI (14)', period: 14 },
|
||||
{ key: 'MACD', registryType: 'MACD', label: 'MACD (12, 26, 9)' },
|
||||
];
|
||||
}
|
||||
|
||||
/** StrategyOscillatorPanes 에 실제로 그려지는 보조 pane 개수 */
|
||||
export function countAuxiliaryOscillatorPaneCount(strategy: StrategyDto | undefined): number {
|
||||
const specs = collectStrategyOscillatorPanes(strategy);
|
||||
return (specs.length > 0 ? specs : defaultOscillatorPaneSpecs()).length;
|
||||
}
|
||||
|
||||
/** TradingChart 보조 pane(비오버레이 지표) 개수 */
|
||||
export function countNonOverlayIndicatorPanes(
|
||||
indicators: Array<{ type: string }>,
|
||||
isOverlay: (type: string) => boolean,
|
||||
): number {
|
||||
return indicators.filter(ind => !isOverlay(ind.type)).length;
|
||||
}
|
||||
|
||||
/**
|
||||
* 캔들 vs 보조지표 영역 flex 비율
|
||||
* - 보조 1개: 2:1
|
||||
* - 보조 2~5개: 1:1
|
||||
* - 보조 6개+: 1:2
|
||||
*/
|
||||
export function chartPaneFlexRatio(auxPaneCount: number): { candle: number; aux: number } {
|
||||
const n = Math.max(0, auxPaneCount);
|
||||
if (n === 0) return { candle: 1, aux: 0 };
|
||||
if (n === 1) return { candle: 2, aux: 1 };
|
||||
if (n <= 5) return { candle: 1, aux: 1 };
|
||||
return { candle: 1, aux: 2 };
|
||||
}
|
||||
@@ -23,3 +23,13 @@ export function resolveVirtualTargetNames(
|
||||
: getKoreanName(market);
|
||||
return { koreanName: ko, englishName: en };
|
||||
}
|
||||
|
||||
/** 투자대상·차트 종목 선택 — 한글명(영문명) */
|
||||
export function formatVirtualTargetOptionLabel(
|
||||
market: string,
|
||||
koreanName?: string | null,
|
||||
englishName?: string | null,
|
||||
): string {
|
||||
const { koreanName: ko, englishName: en } = resolveVirtualTargetNames(market, koreanName, englishName);
|
||||
return `${ko}(${en})`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user