Skip to content

UI Screens

JJong-03 edited this page Mar 12, 2026 · 4 revisions

UI 화면 구성 (UI Screens)

목적

사용자가 전략 파라미터를 입력하고, 백테스트 실행 결과를 시각적으로 분석할 수 있도록 설계되었다.


Dashboard

Dashboard Hero

  • 전략 선택 (rule_type: RSI, MACD, RSI+MACD)
  • 파라미터 입력 (initial_capital, fee_rate, position_size 등)
  • 실행 요청 (POST /run_backtest)
  • run_id 발급 → /status/<run_id> 폴링

분석 결과 (5 Tabs)

Tab 1: KPI (Stats)

Stats KPI

  • Total Return (%)
  • Sharpe Ratio
  • Max Drawdown (%)
  • Number of Trades

Tab 2: Equity Curve

Equity Curve

시간에 따른 자산 가치 변화


Tab 3: Drawdown Curve

Drawdown Curve

전고점 대비 하락률 시각화


Tab 4: Portfolio Analysis

Portfolio Analysis Cumulative Return

  • Orders (Buy/Sell markers on price chart)
  • Trade PnL (%) scatter
  • Cumulative Return (%) line

Tab 5: Trades

Trades Table


Data Contract per Tab

각 탭이 요구하는 canonical 입력 데이터파생 차트를 정리한다.

Tab Canonical 입력 (DB 저장) 파생 차트 (Adapter on-demand)
Stats (KPI) metrics_json — (KPI 카드 직접 렌더링)
Equity Curve equity_curve_json chart_base64 (SHOULD persist, legacy)
Drawdown equity_curve_json drawdown_curve_base64 (MUST NOT persist)
Portfolio equity_curve_json + trades_json portfolio_orders_base64, trade_pnl_base64, cumulative_return_base64 (MUST NOT persist)
Trades trades_json — (테이블 직접 렌더링)

핵심:

  • DB에는 canonical data(metrics_json, equity_curve_json, trades_json)만 저장
  • 모든 차트는 Adapter Layer에서 요청 시 렌더링 (Matplotlib Agg → Base64)
  • chart_base64만 레거시 호환으로 SHOULD persist

MUST/SHOULD/MUST NOT 저장 경계 상세 → Reproducibility


UX 설계 원칙

  • 서버 렌더링 차트 (Matplotlib Agg → Base64, Rule 5)
  • Disk write 없음 (완전 Stateless, Rule 4)
  • 입력 검증 실패 → 400 user_error
  • 시스템 오류 → 500 system_error
  • 모든 차트에서 plt.close(fig) 호출 (메모리 누수 방지)

See Also

Clone this wiki locally