전략평가 매매시그널 표시안되는 문제 수정
This commit is contained in:
Macbook
@@ -424,6 +424,7 @@ export default function StrategyEvaluationPage({ theme = 'dark' }: Props) {
|
||||
onSelectedBarIndexChange={setSelectedBarIndex}
|
||||
onBarsLoaded={setBars}
|
||||
paramsRevision={paramsRevision}
|
||||
appliedIndicatorParams={appliedIndicatorParams}
|
||||
getParamsOverride={getEvalParams}
|
||||
getVisualConfigOverride={getVisualConfig}
|
||||
evalLoading={evalLoading}
|
||||
|
||||
@@ -18,8 +18,8 @@ import { loadBacktestSettings, runBacktest } from '../../utils/backendApi';
|
||||
import {
|
||||
BACKTEST_DISPLAY_BAR_COUNT,
|
||||
fetchBacktestCandleBundle,
|
||||
resolveEvaluationFromLoadedBars,
|
||||
} from '../../utils/backtestWarmup';
|
||||
import type { EvalIndicatorParams } from '../../utils/strategyEvaluationParams';
|
||||
import { DISPLAY_COUNT } from '../../hooks/useUpbitData';
|
||||
import { buildVirtualTradingChartIndicators } from '../../utils/strategyToChartIndicators';
|
||||
import { buildEvalParamsFromStrategy } from '../../utils/strategyEvaluationParams';
|
||||
@@ -49,6 +49,8 @@ interface Props {
|
||||
onSelectedBarIndexChange: (index: number) => void;
|
||||
onBarsLoaded?: (bars: OHLCVBar[]) => void;
|
||||
paramsRevision?: number;
|
||||
/** 사용자가 저장한 지표 파라미터 — null 이면 백테스트도 서버 DB 설정 사용 (live-conditions 와 동일) */
|
||||
appliedIndicatorParams?: EvalIndicatorParams | null;
|
||||
getParamsOverride?: (
|
||||
type: string,
|
||||
defaults?: Record<string, number | string | boolean>,
|
||||
@@ -94,6 +96,7 @@ const StrategyEvaluationChart: React.FC<Props> = ({
|
||||
onSelectedBarIndexChange,
|
||||
onBarsLoaded,
|
||||
paramsRevision = 0,
|
||||
appliedIndicatorParams = null,
|
||||
getParamsOverride,
|
||||
getVisualConfigOverride,
|
||||
evalLoading = false,
|
||||
@@ -115,6 +118,7 @@ const StrategyEvaluationChart: React.FC<Props> = ({
|
||||
const marketBtnRef = useRef<HTMLButtonElement>(null);
|
||||
const managerRef = useRef<ChartManager | null>(null);
|
||||
const backtestGenRef = useRef(0);
|
||||
const evaluationBarCountRef = useRef(BACKTEST_DISPLAY_BAR_COUNT);
|
||||
const signalsRef = useRef(signals);
|
||||
signalsRef.current = signals;
|
||||
const chartType: ChartType = 'candlestick';
|
||||
@@ -135,9 +139,14 @@ const StrategyEvaluationChart: React.FC<Props> = ({
|
||||
return { candle: flex.candle, aux: flex.aux };
|
||||
}, [auxPaneCount]);
|
||||
|
||||
/** 저장된 오버라이드가 있을 때만 백테스트에 전달 — 미설정 시 live-conditions 와 같이 서버 DB 사용 */
|
||||
const indicatorParams = useMemo(
|
||||
() => (strategy ? buildEvalParamsFromStrategy(strategy, getParams) : {}),
|
||||
[strategy, getParams],
|
||||
() => (
|
||||
strategy && appliedIndicatorParams
|
||||
? buildEvalParamsFromStrategy(strategy, getParams)
|
||||
: undefined
|
||||
),
|
||||
[strategy, getParams, appliedIndicatorParams],
|
||||
);
|
||||
|
||||
const resolveInitialDisplayCount = useCallback(
|
||||
@@ -180,13 +189,6 @@ const StrategyEvaluationChart: React.FC<Props> = ({
|
||||
setBacktestError(null);
|
||||
try {
|
||||
const btSettings = await loadBacktestSettings();
|
||||
const { evaluationBarCount } = resolveEvaluationFromLoadedBars(
|
||||
barData.length,
|
||||
strategy.buyCondition,
|
||||
strategy.sellCondition,
|
||||
indicatorParams,
|
||||
);
|
||||
const evalCount = Math.min(BACKTEST_DISPLAY_BAR_COUNT, evaluationBarCount);
|
||||
const res = await runBacktest({
|
||||
strategyId: strategy.id,
|
||||
bars: barData.map(b => ({
|
||||
@@ -200,9 +202,13 @@ const StrategyEvaluationChart: React.FC<Props> = ({
|
||||
timeframe,
|
||||
symbol: market,
|
||||
strategyName: strategy.name,
|
||||
settings: btSettings,
|
||||
settings: {
|
||||
...btSettings,
|
||||
// 전략 평가 차트 — 조건 충족 시작 봉마다 매수/매도 마커 (포지션 락 무시)
|
||||
positionMode: 'SIGNAL_ONLY',
|
||||
},
|
||||
indicatorParams,
|
||||
evaluationBarCount: evalCount,
|
||||
evaluationBarCount: evaluationBarCountRef.current,
|
||||
});
|
||||
if (gen !== backtestGenRef.current) return;
|
||||
if (!res) {
|
||||
@@ -267,8 +273,9 @@ const StrategyEvaluationChart: React.FC<Props> = ({
|
||||
sellDsl: strategy?.sellCondition,
|
||||
indicatorParams,
|
||||
})
|
||||
.then(({ bars: data }) => {
|
||||
.then(({ bars: data, evaluationBarCount: evalCount }) => {
|
||||
if (cancelled) return;
|
||||
evaluationBarCountRef.current = evalCount;
|
||||
setBars(data);
|
||||
onBarsLoaded?.(data);
|
||||
if (data.length > 0) {
|
||||
@@ -284,7 +291,7 @@ const StrategyEvaluationChart: React.FC<Props> = ({
|
||||
if (!cancelled) setLoading(false);
|
||||
});
|
||||
return () => { cancelled = true; };
|
||||
}, [market, timeframe, strategy?.id, strategy?.buyCondition, strategy?.sellCondition, indicatorParams, onBarsLoaded, onSelectedBarIndexChange]);
|
||||
}, [market, timeframe, strategy?.id, paramsRevision, onBarsLoaded, onSelectedBarIndexChange]);
|
||||
|
||||
const scrollToBar = useCallback((barIdx: number) => {
|
||||
const mgr = chartMgr;
|
||||
|
||||
@@ -25,16 +25,6 @@ interface Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const InterpretIcon = () => (
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden className="seval-interpret-icon">
|
||||
<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" strokeWidth="1.75" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M11.25 10.5h1.5V17h-1.5V10.5zm0-3.25h1.5V9h-1.5V6.25z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
interface SideCardProps {
|
||||
side: 'buy' | 'sell';
|
||||
metrics: ConditionMetric[];
|
||||
@@ -53,9 +43,10 @@ const SideCard: React.FC<SideCardProps> = ({
|
||||
barTimeSec,
|
||||
}) => {
|
||||
const [interpretOpen, setInterpretOpen] = useState(false);
|
||||
const sideLabel = side === 'buy' ? '매수' : '매도';
|
||||
const title = side === 'buy' ? '매수 조건' : '매도 조건';
|
||||
const overallLabel =
|
||||
overallMet === true ? '전체 충족' : overallMet === false ? '전체 미충족' : null;
|
||||
overallMet === true ? '충족' : overallMet === false ? '미충족' : null;
|
||||
|
||||
const contextMap = useMemo(() => buildConditionContextMap(strategy), [strategy]);
|
||||
const interpretation = useMemo(
|
||||
@@ -75,7 +66,7 @@ const SideCard: React.FC<SideCardProps> = ({
|
||||
>
|
||||
<header className="seval-side-card-head">
|
||||
<div className="seval-side-card-head-main">
|
||||
<span className={`seval-side-card-badge seval-side-card-badge--${side}`}>{title}</span>
|
||||
<span className={`seval-side-card-badge seval-side-card-badge--${side}`}>{sideLabel}</span>
|
||||
{overallLabel && (
|
||||
<span
|
||||
className={`seval-side-overall seval-side-overall--${overallMet ? 'met' : 'unmet'}`}
|
||||
@@ -87,13 +78,13 @@ const SideCard: React.FC<SideCardProps> = ({
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="seval-interpret-btn"
|
||||
title="전략 판별 해석 — 조건별 충족/미충족 이유"
|
||||
aria-label={`${title} 전략 판별 해석`}
|
||||
className="seval-analyze-btn"
|
||||
title="조건별 충족/미충족 분석"
|
||||
aria-label={`${title} 분석보기`}
|
||||
disabled={metrics.length === 0}
|
||||
onClick={() => setInterpretOpen(true)}
|
||||
>
|
||||
<InterpretIcon />
|
||||
분석보기
|
||||
</button>
|
||||
</header>
|
||||
<div className="seval-side-card-body">
|
||||
|
||||
@@ -9,6 +9,7 @@ import { timeframeToCandleType } from '../utils/chartCandleType';
|
||||
import { getCandleStart, TF_SECONDS } from '../utils/upbitApi';
|
||||
import { DISPLAY_COUNT, WARMUP_COUNT, OBV_DEEP_HISTORY } from './useUpbitData';
|
||||
import type { WsStatus } from './useUpbitData';
|
||||
import { fetchBacktestHistoryCandles } from '../utils/backtestWarmup';
|
||||
import { API_BASE } from '../utils/backendApi';
|
||||
|
||||
/** 백엔드 BarBuilder 는 틱마다 1m 만 STOMP 발행 — 차트 분봉은 클라이언트에서 집계 */
|
||||
@@ -63,58 +64,16 @@ interface Return {
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
async function fetchInitialBars(market: string, candleType: string, count: number): Promise<OHLCVBar[]> {
|
||||
const params = new URLSearchParams({
|
||||
market,
|
||||
type: candleType,
|
||||
count: String(count),
|
||||
});
|
||||
const res = await fetch(`${API_BASE}/candles/history?${params}`);
|
||||
if (!res.ok) throw new Error(`history ${res.status}`);
|
||||
const data = (await res.json()) as StompCandlePayload[];
|
||||
return data.map(b => ({
|
||||
time: b.time,
|
||||
open: b.open,
|
||||
high: b.high,
|
||||
low: b.low,
|
||||
close: b.close,
|
||||
volume: b.volume,
|
||||
}));
|
||||
}
|
||||
|
||||
async function fetchInitialBarsWithRetry(
|
||||
market: string,
|
||||
candleType: string,
|
||||
count: number,
|
||||
attempts = 3,
|
||||
): Promise<OHLCVBar[]> {
|
||||
let lastErr: Error | null = null;
|
||||
for (let i = 0; i < attempts; i++) {
|
||||
try {
|
||||
return await fetchInitialBars(market, candleType, count);
|
||||
} catch (e) {
|
||||
lastErr = e as Error;
|
||||
if (i < attempts - 1) {
|
||||
await new Promise(r => setTimeout(r, 400 * (i + 1)));
|
||||
}
|
||||
}
|
||||
}
|
||||
throw lastErr ?? new Error('history fetch failed');
|
||||
}
|
||||
|
||||
/**
|
||||
* 백엔드 /api/candles/history 에서만 초기 캔들을 로드한다.
|
||||
* Upbit REST 직접 호출을 하지 않음 — 백엔드가 데이터를 아직 쌓지 못한 경우
|
||||
* 빈 배열을 반환하고, 호출부에서 STOMP bootstrap 경로로 처리한다.
|
||||
* 백엔드 /api/candles/history — 200봉 초과 시 페이지네이션 (워밍업·OBV 누적용)
|
||||
*/
|
||||
async function loadInitialBars(
|
||||
market: string,
|
||||
timeframe: Timeframe,
|
||||
count: number,
|
||||
): Promise<OHLCVBar[]> {
|
||||
const candleType = timeframeToCandleType(timeframe);
|
||||
try {
|
||||
return await fetchInitialBarsWithRetry(market, candleType, count);
|
||||
return await fetchBacktestHistoryCandles(market, timeframe, count);
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
|
||||
@@ -472,9 +472,11 @@
|
||||
|
||||
.seval-side-card-head-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.seval-side-card-badge {
|
||||
@@ -1138,38 +1140,37 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ── 전략 판별 해석 버튼 · 팝업 ─────────────────────────────────────────── */
|
||||
.seval-interpret-btn {
|
||||
/* ── 조건 분석보기 버튼 · 팝업 ─────────────────────────────────────────── */
|
||||
.seval-analyze-btn {
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
border-radius: 8px;
|
||||
height: 26px;
|
||||
padding: 0 10px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid color-mix(in srgb, var(--se-border) 85%, transparent);
|
||||
background: color-mix(in srgb, var(--se-input-bg, #121826) 92%, transparent);
|
||||
color: var(--se-text-muted);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, border-color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.seval-interpret-btn:hover:not(:disabled) {
|
||||
.seval-analyze-btn:hover:not(:disabled) {
|
||||
color: var(--se-accent, #3f7ef5);
|
||||
border-color: color-mix(in srgb, var(--se-accent, #3f7ef5) 45%, transparent);
|
||||
background: color-mix(in srgb, var(--se-accent, #3f7ef5) 10%, transparent);
|
||||
}
|
||||
|
||||
.seval-interpret-btn:disabled {
|
||||
.seval-analyze-btn:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.seval-interpret-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.seval-interpret-overlay {
|
||||
z-index: 10999;
|
||||
}
|
||||
|
||||
@@ -531,6 +531,11 @@ export class ChartManager {
|
||||
if (this._auxIndicatorOnlyLayout) {
|
||||
this.syncChartOverlayVisibility();
|
||||
}
|
||||
|
||||
// setData 시 마커 플러그인만 dispose 되고 backtestMarkers 배열은 유지됨 — 재적용
|
||||
if (this.backtestMarkers.length > 0 || this.liveStrategyMarkers.length > 0) {
|
||||
this._reapplyAllPatternMarkers();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -139,10 +139,11 @@ export async function fetchBacktestHistoryCandles(
|
||||
const raw = (await res.json()) as OHLCVBar[];
|
||||
if (raw.length === 0) break;
|
||||
|
||||
const before = byTime.size;
|
||||
for (const b of raw) byTime.set(b.time, b);
|
||||
remaining -= raw.length;
|
||||
if (byTime.size === before) break;
|
||||
|
||||
if (raw.length < batch) break;
|
||||
remaining -= raw.length;
|
||||
|
||||
const oldest = raw[0]?.time;
|
||||
if (!oldest || oldest <= 0) break;
|
||||
|
||||
Reference in New Issue
Block a user