aidev/goldenChart
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

백테스트 전략이름, 이동평균선 그래프 오류 수정

Browse Source
This commit is contained in:
Macbook
2026-06-08 12:19:20 +09:00
parent 9fde6868e2
commit 7f29bbd309
7 changed files with 122 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/BacktestHistoryPage.tsx
+22 -3
View File
@@ -41,6 +41,7 @@ import {
import '../styles/strategyEditorTheme.css';
import { getKoreanName } from '../utils/marketNameCache';
import { repairUtf8Mojibake } from '../utils/textEncoding';
import { enrichStrategyNameMap, strategyNamesFromList } from '../utils/strategyNameResolver';
const LEFT_KEY = 'btd-left-width';
const RIGHT_KEY = 'btd-right-width';
@@ -114,7 +115,11 @@ export function BacktestHistoryPage({ theme = 'dark' }: Props) {
loadPaperSummary(),
loadStrategies(),
]);
const strategyNames = Object.fromEntries(strategies.map(s => [s.id, s.name]));
const baseNames = strategyNamesFromList(strategies);
const strategyNames = await enrichStrategyNameMap(
baseNames,
trades.map(t => t.strategyId),
);
const live = buildLiveExecutionItems(trades, summary, strategyNames);
setLiveItems(live);
setSelectedLive(prev => (prev && live.some(x => x.id === prev.id) ? prev : live[0] ?? null));
@@ -128,10 +133,24 @@ export function BacktestHistoryPage({ theme = 'dark' }: Props) {
loadPaperSummary(),
loadStrategies(),
]);
const strategyNames = Object.fromEntries(strategies.map(s => [s.id, s.name]));
const baseNames = strategyNamesFromList(strategies);
const strategyNames = await enrichStrategyNameMap(
baseNames,
[
...trades.map(t => t.strategyId),
...list.map(r => r.strategyId),
],
);
const live = buildLiveExecutionItems(trades, summary, strategyNames);
const enrichedRecords = list.map(r => ({
...r,
strategyName: r.strategyName?.trim()
|| (r.strategyId != null ? strategyNames[r.strategyId] : undefined)
|| r.strategyName
|| '전략 없음',
}));
setStrategies(strategies);
setRecords(list);
setRecords(enrichedRecords);
setLiveItems(live);
setSelectedBacktest(prev => (prev && list.some(x => x.id === prev.id) ? prev : list[0] ?? null));
setSelectedLive(prev => (prev && live.some(x => x.id === prev.id) ? prev : live[0] ?? null));
frontend/src/components/analysisReport/AnalysisReportPage.tsx
+25 -7
View File
@@ -27,6 +27,7 @@ import {
buildBacktestReportModel,
buildLiveReportModel,
} from '../../utils/backtestReportModel';
import { enrichStrategyNameMap, strategyNamesFromList } from '../../utils/strategyNameResolver';
import '../../styles/backtestDashboard.css';
import '../../styles/analysisReportPage.css';
@@ -53,17 +54,25 @@ export function AnalysisReportPage({ theme = 'dark' }: Props) {
const [loading, setLoading] = useState(true);
const [reportOpen, setReportOpen] = useState(false);
const refreshLive = useCallback(async () => {
const refreshLive = useCallback(async (backtestRecords: BacktestResultRecord[] = []) => {
const [trades, summary, stratList] = await Promise.all([
loadPaperTrades(),
loadPaperSummary(),
loadStrategies(),
]);
setStrategies(stratList);
const strategyNames = Object.fromEntries(stratList.map(s => [s.id, s.name]));
const baseNames = strategyNamesFromList(stratList);
const strategyNames = await enrichStrategyNameMap(
baseNames,
[
...trades.map(t => t.strategyId),
...backtestRecords.map(r => r.strategyId),
],
);
const live = buildLiveExecutionItems(trades, summary, strategyNames);
setLiveItems(live);
setSelectedLive(prev => (prev && live.some(x => x.id === prev.id) ? prev : live[0] ?? null));
return strategyNames;
}, []);
const fetchAll = useCallback(async () => {
@@ -73,10 +82,19 @@ export function AnalysisReportPage({ theme = 'dark' }: Props) {
loadBacktestResults(),
loadStrategies(),
]);
setRecords(recs);
setStrategies(stratList);
setSelectedBacktest(prev => (prev && recs.some(r => r.id === prev.id) ? prev : recs[0] ?? null));
await refreshLive();
const strategyNames = await refreshLive(recs);
const enrichedRecords = recs.map(r => ({
...r,
strategyName: r.strategyName?.trim()
|| (r.strategyId != null ? strategyNames[r.strategyId] : undefined)
|| r.strategyName
|| '전략 없음',
}));
setRecords(enrichedRecords);
setSelectedBacktest(prev => (
prev && enrichedRecords.some(r => r.id === prev.id) ? prev : enrichedRecords[0] ?? null
));
} finally {
setLoading(false);
}
@@ -84,10 +102,10 @@ export function AnalysisReportPage({ theme = 'dark' }: Props) {
useEffect(() => { void fetchAll(); }, [fetchAll]);
useEffect(() => {
const onPaper = () => { void refreshLive(); };
const onPaper = () => { void refreshLive(records); };
window.addEventListener(PAPER_TRADES_CHANGED_EVENT, onPaper);
return () => window.removeEventListener(PAPER_TRADES_CHANGED_EVENT, onPaper);
}, [refreshLive]);
}, [refreshLive, records]);
const compareBacktest = useMemo(() => {
if (!selectedBacktest) return null;
frontend/src/components/backtest/BacktestAnalysisChart.tsx
+13 -24
View File
@@ -1,7 +1,7 @@
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 { loadStrategyForNotification } from '../../utils/backendApi';
import type { ChartType, IndicatorConfig, OHLCVBar, Theme, Timeframe } from '../../types';
import { loadAnalysisCandles } from '../../utils/analysisChartData';
import type { ChartManager } from '../../utils/ChartManager';
@@ -22,12 +22,6 @@ import {
chartPaneFlexRatio,
countNonOverlayIndicatorPanes,
} from '../../utils/strategyOscillatorSeries';
import {
createDefaultSmaPlotVisibility,
normalizeSmaConfig,
smaPeriodKey,
smaPlotId,
} from '../../utils/smaConfig';
import { buildChartIndicatorConfig } from '../../utils/indicatorPaneMerge';
import {
applyPaperOverlayVisibility,
@@ -87,15 +81,7 @@ function defaultOverlayIndicators(
const cfg = buildChartIndicatorConfig('SMA', newIndId(), getParams, getVisualConfig, {
timeframeVisibility: ALL_TF_VISIBLE,
});
if (!cfg) return [];
// 전략 미선택 시 MA1(14)만 표시
const p = { ...cfg.params };
p[smaPeriodKey(1)] = 14;
const plotVisibility = createDefaultSmaPlotVisibility();
for (let i = 0; i < 11; i++) {
plotVisibility[smaPlotId(i)] = i === 0;
}
return [normalizeSmaConfig({ ...cfg, params: p, plotVisibility })];
return cfg ? [cfg] : [];
}
/** 전략 미선택 시 기본 오실레이터(RSI, MACD)를 TradingChart sub-pane 으로 추가 */
@@ -139,6 +125,7 @@ const BacktestAnalysisChart: React.FC<Props> = ({
const [error, setError] = useState<string | null>(null);
const [chartType] = useState<ChartType>('candlestick');
const [strategy, setStrategy] = useState<StrategyDto | undefined>();
const [strategyLoading, setStrategyLoading] = useState(false);
/** 개별 지표 숨김 ID 집합 (실시간 차트와 동일한 per-indicator 숨김 지원) */
const [hiddenIndicatorIds, setHiddenIndicatorIds] = useState<ReadonlySet<string>>(new Set());
const managerRef = useRef<ChartManager | null>(null);
@@ -162,11 +149,16 @@ const BacktestAnalysisChart: React.FC<Props> = ({
useEffect(() => {
if (!strategyId) {
setStrategy(undefined);
setStrategyLoading(false);
return;
}
let cancelled = false;
void loadStrategy(strategyId).then(s => {
if (!cancelled) setStrategy(s ?? undefined);
setStrategyLoading(true);
void loadStrategyForNotification(strategyId).then(s => {
if (!cancelled) {
setStrategy(s ?? undefined);
setStrategyLoading(false);
}
});
return () => { cancelled = true; };
}, [strategyId]);
@@ -181,27 +173,24 @@ const BacktestAnalysisChart: React.FC<Props> = ({
const showOscillatorPanel = !overlayVisibility;
const baseIndicators = useMemo(() => {
if (strategyId && strategyLoading) return [];
let inds: IndicatorConfig[];
if (strategy) {
inds = buildVirtualTradingChartIndicators(strategy, getParams, getVisualConfig);
inds = inds.filter(i => i.timeframeVisibility?.[chartTimeframe] !== false);
// 전략 지표가 모두 캔들 오버레이(SMA/EMA/일목 등)인 경우 기본 오실레이터(RSI·MACD)를 추가.
// 기존 SVG 기반 StrategyOscillatorPanes 의 fallback 동작과 동일.
if (showOscillatorPanel && inds.every(i => isOverlayType(i.type))) {
inds = [...inds, ...defaultOscillatorIndicators(getParams, getVisualConfig)];
}
} else {
inds = defaultOverlayIndicators(getParams, getVisualConfig);
// 전략 미선택 시 기본 오실레이터(RSI, MACD)도 TradingChart sub-pane 으로 추가
if (showOscillatorPanel) {
inds = [...inds, ...defaultOscillatorIndicators(getParams, getVisualConfig)];
}
}
if (overlayVisibility) {
inds = ensurePaperChartOverlays(inds, getParams, getVisualConfig);
}
return inds;
}, [strategy, getParams, getVisualConfig, chartTimeframe, overlayVisibility, showOscillatorPanel]);
}, [strategy, strategyId, strategyLoading, getParams, getVisualConfig, chartTimeframe, overlayVisibility, showOscillatorPanel]);
const indicators = useMemo(() => {
let inds = overlayVisibility
frontend/src/utils/indicatorPaneMerge.ts
+8
View File
@@ -2,6 +2,7 @@ import type { IndicatorConfig } from '../types';
import { enrichIndicatorConfig, getIndicatorDef } from './indicatorRegistry';
import { normalizeSmaConfig, createDefaultSmaPlotVisibility } from './smaConfig';
import { normalizeIchimokuConfig } from './ichimokuConfig';
import { buildMainIndicatorConfig } from './indicatorMainConfig';
import type { PlotDef, HLineDef } from './indicatorRegistry';
import type { IchimokuCloudColors } from './ichimokuConfig';
@@ -195,6 +196,13 @@ export function buildChartIndicatorConfig(
};
if (type === 'SMA') {
const mainSma = buildMainIndicatorConfig(type, [], getParams, getVisualConfig);
if (mainSma?.plotVisibility) {
cfg.plotVisibility = mainSma.plotVisibility;
}
if (mainSma?.plots?.length) {
cfg.plots = mainSma.plots;
}
cfg = normalizeSmaConfig({
...cfg,
plotVisibility: cfg.plotVisibility ?? createDefaultSmaPlotVisibility(),
frontend/src/utils/liveExecutionGroups.ts
+8 -5
View File
@@ -32,12 +32,15 @@ function sourceLabel(source: string): string {
}
function resolveStrategyLabel(
t: PaperTradeDto,
trades: PaperTradeDto[],
strategyNames: Record<number, string>,
): string {
if (t.strategyName) return t.strategyName;
if (t.strategyId != null) {
return strategyNames[t.strategyId] ?? `전략 #${t.strategyId}`;
for (const t of trades) {
if (t.strategyName?.trim()) return t.strategyName.trim();
}
const first = trades[0];
if (first?.strategyId != null) {
return strategyNames[first.strategyId] ?? `전략 #${first.strategyId}`;
}
return '수동 매매';
}
@@ -83,7 +86,7 @@ export function buildLiveExecutionItems(
return {
id: key,
symbol: first.symbol,
strategyLabel: resolveStrategyLabel(first, strategyNames),
strategyLabel: resolveStrategyLabel(sorted, strategyNames),
sourceLabel: sourceLabel(first.source),
timeframe: first.candleType ?? 'unknown',
executionType: first.executionType ?? undefined,
frontend/src/utils/strategyNameResolver.ts
+38
View File
@@ -0,0 +1,38 @@
/**
* 전략 ID → 이름 해석 (목록에 없거나 삭제된 전략 포함)
*/
import { loadStrategyForNotification, type StrategyDto } from './backendApi';
/** 전략 목록 + 누락 ID별 단건 조회로 이름 맵 보강 */
export async function enrichStrategyNameMap(
base: Record<number, string>,
ids: Iterable<number | null | undefined>,
): Promise<Record<number, string>> {
const out = { ...base };
const missing = [...new Set(
[...ids]
.map(id => (id != null && id > 0 ? Math.trunc(id) : null))
.filter((id): id is number => id != null && !out[id]),
)];
if (!missing.length) return out;
await Promise.all(missing.map(async id => {
try {
const s = await loadStrategyForNotification(id);
if (s?.name?.trim()) out[id] = s.name.trim();
} catch {
/* ignore */
}
}));
return out;
}
export function strategyNamesFromList(list: StrategyDto[]): Record<number, string> {
const out: Record<number, string> = {};
for (const s of list) {
if (s.id != null && s.id > 0 && s.name?.trim()) {
out[s.id] = s.name.trim();
}
}
return out;
}
frontend/src/utils/strategyToChartIndicators.ts
+7 -4
View File
@@ -10,7 +10,8 @@ import {
getHLineLabel,
type HLineDef,
} from './indicatorRegistry';
import { createDefaultSmaPlotVisibility, normalizeSmaConfig, smaPeriodKey } from './smaConfig';
import { buildMainIndicatorConfig } from './indicatorMainConfig';
import { normalizeSmaConfig, smaPeriodKey } from './smaConfig';
import { normalizeIchimokuConfig } from './ichimokuConfig';
import { extractVirtualConditions } from './virtualStrategyConditions';
@@ -183,18 +184,20 @@ function buildOneIndicator(
};
if (ref.registryType === 'SMA') {
const mainSma = buildMainIndicatorConfig('SMA', [], getParams, getVisual as Parameters<typeof buildMainIndicatorConfig>[3]);
const periods = [ref.period, ref.leftPeriod, ref.rightPeriod]
.filter((p): p is number => typeof p === 'number' && p > 0);
if (periods.length > 0) {
const p = { ...cfg.params };
if (periods.length > 0) {
periods.slice(0, 11).forEach((val, i) => {
p[smaPeriodKey(i + 1)] = val;
});
cfg = { ...cfg, params: p };
}
cfg = normalizeSmaConfig({
...cfg,
plotVisibility: cfg.plotVisibility ?? createDefaultSmaPlotVisibility(),
params: p,
plots: mainSma?.plots ?? cfg.plots,
plotVisibility: mainSma?.plotVisibility ?? cfg.plotVisibility,
});
} else if (ref.period != null && ref.period > 0) {
cfg = {