aidev
60 lines
2.3 KiB
TypeScript
60 lines
2.3 KiB
TypeScript
/**
|
|
* 백테스팅 결과 통계 배지 — 차트 위에 오버레이로 표시.
|
|
* 전략 선택 / 실행은 Toolbar의 드롭다운에서 담당.
|
|
*/
|
|
import React from 'react';
|
|
import type { BacktestStats } from '../utils/backendApi';
|
|
|
|
interface BacktestPanelProps {
|
|
stats: BacktestStats | null;
|
|
signalCount: number;
|
|
onClear: () => void;
|
|
}
|
|
|
|
const BacktestPanel: React.FC<BacktestPanelProps> = ({ stats, signalCount, onClear }) => {
|
|
const fmt = (n: number) => (n * 100).toFixed(2) + '%';
|
|
const fmtWon = (n: number) => n >= 1000 ? (n / 10000).toFixed(0) + '만원' : n.toFixed(0) + '원';
|
|
const retColor = stats && stats.totalReturn > 0 ? '#26A69A' : stats && stats.totalReturn < 0 ? '#EF5350' : 'var(--text2)';
|
|
|
|
return (
|
|
<div className="bt-result-badge">
|
|
<div className="bt-result-row">
|
|
<span className="bt-result-label">시그널</span>
|
|
<span className="bt-result-val">{signalCount}개</span>
|
|
</div>
|
|
{stats && (
|
|
<>
|
|
<div className="bt-result-sep" />
|
|
<div className="bt-result-row">
|
|
<span className="bt-result-label">거래</span>
|
|
<span className="bt-result-val">{stats.totalTrades}회</span>
|
|
</div>
|
|
<div className="bt-result-row">
|
|
<span className="bt-result-label">승률</span>
|
|
<span className="bt-result-val">{fmt(stats.winRate)}</span>
|
|
</div>
|
|
<div className="bt-result-row">
|
|
<span className="bt-result-label">수익</span>
|
|
<span className="bt-result-val" style={{ color: retColor }}>
|
|
{stats.totalReturn >= 0 ? '+' : ''}{fmt(stats.totalReturn)}
|
|
</span>
|
|
</div>
|
|
<div className="bt-result-row">
|
|
<span className="bt-result-label">낙폭</span>
|
|
<span className="bt-result-val" style={{ color: '#EF5350' }}>{fmt(stats.maxDrawdown)}</span>
|
|
</div>
|
|
{stats.finalEquity > 0 && (
|
|
<div className="bt-result-row">
|
|
<span className="bt-result-label">최종자산</span>
|
|
<span className="bt-result-val" style={{ color: retColor }}>{fmtWon(stats.finalEquity)}</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
<button className="bt-result-clear" onClick={onClear} title="결과 지우기">✕</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BacktestPanel;
|