diegobeyl/backtesting
2
1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Donchian Structural Backtesting</title>
8 <meta name="description"
9 content="Sistema de backtesting para estrategia Donchian Structural con datos de MetaTrader 5">
10
11 <!-- Plotly.js for charts -->
12 <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
13
14 <!-- Google Fonts -->
15 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
16
17 <!-- Styles -->
18 <link rel="stylesheet" href="/static/styles.css?v=1.2.2">
19</head>
20
21<body>
22 <div class="app-container">
23 <!-- Header -->
24 <header class="header">
25 <div class="header-left">
26 <h1 class="logo">
27 <span class="logo-icon">📊</span>
28 Donchian Backtester
29 <span
30 style="font-size: 0.6rem; color: var(--text-muted); margin-left: 5px; opacity: 0.7;">v1.2.2</span>
31 </h1>
32 <span class="connection-status" id="connectionStatus">
33 <span class="status-dot"></span>
34 <span class="status-text">Connecting...</span>
35 </span>
36 </div>
37 <div class="header-right">
38 <button class="btn btn-secondary" id="resetConfigBtn">
39 Reset Config
40 </button>
41 </div>
42 </header>
43
44 <!-- Main Content -->
45 <main class="main-content">
46 <!-- Left Panel - Configuration -->
47 <aside class="config-panel">
48 <div class="panel-header">
49 <h2>⚙️ Configuration</h2>
50 <span class="hot-reload-badge">Hot Reload</span>
51 </div>
52
53 <form id="configForm" class="config-form">
54 <!-- Symbol & Timeframe -->
55 <div class="form-section">
56 <h3>Market</h3>
57 <div class="form-row">
58 <div class="form-group">
59 <label for="symbol">Symbol</label>
60 <input type="text" id="symbol" name="symbol" list="symbolList" value="BTCUSD"
61 placeholder="e.g. BTCUSD">
62 <datalist id="symbolList">
63 <option value="BTCUSD">
64 <option value="ETHUSD">
65 <option value="TSLA">
66 <option value="ADBE">
67 <option value="GOOGL">
68 </datalist>
69 </div>
70 <div class="form-group">
71 <label for="timeframe">Timeframe</label>
72 <select id="timeframe" name="timeframe">
73 <option value="D1">Daily</option>
74 <option value="W1">Weekly</option>
75 <option value="MN">Monthly</option>
76 <option value="H4">4 Hours</option>
77 <option value="H1">1 Hour</option>
78 </select>
79 </div>
80 </div>
81 <div class="form-group">
82 <label for="bars">Bars to Analyze</label>
83 <input type="number" id="bars" name="bars" min="50" max="5000" value="500">
84 </div>
85 </div>
86
87 <!-- Strategy Parameters -->
88 <div class="form-section">
89 <h3>Strategy</h3>
90 <div class="form-row">
91 <div class="form-group">
92 <label for="donchian_period">Donchian Period</label>
93 <input type="number" id="donchian_period" name="donchian_period" min="1" max="100"
94 value="1">
95 </div>
96 <div class="form-group">
97 <label for="lookbehind">Lookbehind</label>
98 <input type="number" id="lookbehind" name="lookbehind" min="0" max="10" value="0">
99 </div>
100 </div>
101 <div class="form-group">
102 <label for="trade_direction">Trade Direction</label>
103 <select id="trade_direction" name="trade_direction">
104 <option value="BOTH">Both (Long & Short)</option>
105 <option value="LONG_ONLY">Long Only</option>
106 <option value="SHORT_ONLY">Short Only</option>
107 </select>
108 </div>
109 <div class="form-group">
110 <label for="trailing_mode">Trailing Stop Mode</label>
111 <select id="trailing_mode" name="trailing_mode">
112 <option value="FAST">Fast (Multiple Structures)</option>
113 <option value="SLOW">Slow (One at a Time)</option>
114 </select>
115 </div>
116 <div class="form-group checkbox-group">
117 <input type="checkbox" id="stop_resets_support" name="stop_resets_support" checked>
118 <label for="stop_resets_support">Stop Resets Support</label>
119 </div>
120 </div>
121
122 <!-- Risk Management -->
123 <div class="form-section">
124 <h3>Risk Management</h3>
125 <div class="form-row">
126 <div class="form-group">
127 <label for="initial_capital">Initial Capital ($)</label>
128 <input type="number" id="initial_capital" name="initial_capital" min="100" step="100"
129 value="10000">
130 </div>
131 <div class="form-group">
132 <label for="risk_percent">Risk per Trade (%)</label>
133 <input type="number" id="risk_percent" name="risk_percent" min="0.1" max="10" step="0.1"
134 value="1.0">
135 </div>
136 </div>
137 <div class="form-group">
138 <label for="leverage">Leverage (Max)</label>
139 <input type="number" id="leverage" name="leverage" min="1" max="500" value="30">
140 </div>
141 </div>
142
143 <!-- Break Margins -->
144 <div class="form-section">
145 <h3>Break Margins (%)</h3>
146 <div class="form-row">
147 <div class="form-group">
148 <label for="break_margin_d1">Daily</label>
149 <input type="number" id="break_margin_d1" name="break_margin_d1" min="0.01" max="5"
150 step="0.01" value="0.4">
151 </div>
152 <div class="form-group">
153 <label for="break_margin_w1">Weekly</label>
154 <input type="number" id="break_margin_w1" name="break_margin_w1" min="0.1" max="10"
155 step="0.1" value="2.0">
156 </div>
157 <div class="form-group">
158 <label for="break_margin_mn">Monthly</label>
159 <input type="number" id="break_margin_mn" name="break_margin_mn" min="0.5" max="15"
160 step="0.1" value="3.0">
161 </div>
162 </div>
163 </div>
164
165 <!-- Execution -->
166 <div class="form-section">
167 <h3>Execution</h3>
168 <div class="form-row">
169 <div class="form-group">
170 <label for="commission">Commission (%)</label>
171 <input type="number" id="commission" name="commission" min="0" max="1" step="0.01"
172 value="0.1">
173 </div>
174 <div class="form-group">
175 <label for="slippage">Slippage (points)</label>
176 <input type="number" id="slippage" name="slippage" min="0" max="50" value="2">
177 </div>
178 <div class="form-group">
179 <label for="offset">SL Offset (points)</label>
180 <input type="number" id="offset" name="offset" min="0" max="100" step="0.1" value="1.0">
181 </div>
182 </div>
183 </div>
184
185 <!-- Run Button -->
186 <button type="submit" class="btn btn-primary btn-run" id="runBtn">
187 <span class="btn-icon">▶</span>
188 Run Backtest
189 </button>
190 </form>
191 </aside>
192
193 <!-- Right Panel - Results -->
194 <section class="results-panel">
195 <!-- Progress Bar -->
196 <div class="progress-container" id="progressContainer" style="display: none;">
197 <div class="progress-bar">
198 <div class="progress-fill" id="progressFill"></div>
199 </div>
200 <span class="progress-text" id="progressText">Initializing...</span>
201 </div>
202
203 <!-- Metrics Cards -->
204 <div class="metrics-grid" id="metricsGrid">
205 <div class="metric-card primary">
206 <div class="metric-label">Total Return</div>
207 <div class="metric-value" id="metricReturn">--</div>
208 <div class="metric-subvalue" id="metricReturnPct">--</div>
209 </div>
210 <div class="metric-card">
211 <div class="metric-label">Sharpe Ratio</div>
212 <div class="metric-value" id="metricSharpe">--</div>
213 </div>
214 <div class="metric-card">
215 <div class="metric-label">Max Drawdown</div>
216 <div class="metric-value negative" id="metricDrawdown">--</div>
217 </div>
218 <div class="metric-card">
219 <div class="metric-label">Win Rate</div>
220 <div class="metric-value" id="metricWinRate">--</div>
221 </div>
222 <div class="metric-card">
223 <div class="metric-label">Profit Factor</div>
224 <div class="metric-value" id="metricProfitFactor">--</div>
225 </div>
226 <div class="metric-card">
227 <div class="metric-label">Total Trades</div>
228 <div class="metric-value" id="metricTrades">--</div>
229 </div>
230 </div>
231
232 <!-- Chart Tabs -->
233 <div class="chart-tabs">
234 <button class="tab-btn active" data-tab="candlestick">📈 Candlestick</button>
235 <button class="tab-btn" data-tab="equity">💰 Equity Curve</button>
236 <button class="tab-btn" data-tab="trades">📋 Trade List</button>
237 </div>
238
239 <!-- Charts Container -->
240 <div class="charts-container">
241 <div class="chart-panel active" id="candlestickPanel">
242 <div id="candlestickChart" class="chart"></div>
243 </div>
244 <div class="chart-panel" id="equityPanel">
245 <div id="equityChart" class="chart"></div>
246 </div>
247 <div class="chart-panel" id="tradesPanel">
248 <div class="trades-table-container">
249 <table class="trades-table" id="tradesTable">
250 <thead>
251 <tr>
252 <th>Entry Time</th>
253 <th>Exit Time</th>
254 <th>Type</th>
255 <th>Entry Price</th>
256 <th>Exit Price</th>
257 <th>Size</th>
258 <th>P&L</th>
259 <th>Return %</th>
260 </tr>
261 </thead>
262 <tbody id="tradesTableBody">
263 <tr>
264 <td colspan="8" class="no-data">Run a backtest to see trades</td>
265 </tr>
266 </tbody>
267 </table>
268 </div>
269 </div>
270 </div>
271 </section>
272 </main>
273 </div>
274
275 <!-- Scripts -->
276 <script src="/static/app.js?v=1.2.2"></script>
277</body>
278
279</html>