feat(calibration): Step 3 - Stategies preparado conceptualmente
This commit is contained in:
@@ -0,0 +1,322 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-xl">
|
||||
|
||||
<!-- ========================= -->
|
||||
<!-- Wizard header -->
|
||||
<!-- ========================= -->
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
|
||||
<!-- Back arrow -->
|
||||
<div class="me-3">
|
||||
<a href="/calibration/risk" class="btn btn-outline-secondary btn-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon icon-tabler icon-tabler-arrow-left"
|
||||
width="24" height="24" viewBox="0 0 24 24"
|
||||
stroke-width="2" stroke="currentColor"
|
||||
fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<path d="M15 6l-6 6l6 6"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1 text-center">
|
||||
<h2 class="mb-0">Calibración · Paso 3 · Strategies</h2>
|
||||
<div class="text-secondary">Optimización + Walk Forward (OOS)</div>
|
||||
</div>
|
||||
|
||||
<!-- Forward arrow (disabled until OK) -->
|
||||
<div class="ms-3">
|
||||
<a
|
||||
id="next-step-btn"
|
||||
href="#"
|
||||
class="btn btn-outline-secondary btn-icon"
|
||||
aria-disabled="true"
|
||||
title="Next step not implemented yet"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon icon-tabler icon-tabler-arrow-right"
|
||||
width="24" height="24" viewBox="0 0 24 24"
|
||||
stroke-width="2" stroke="currentColor"
|
||||
fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<path d="M9 6l6 6l-6 6"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ========================= -->
|
||||
<!-- Context -->
|
||||
<!-- ========================= -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Context</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">Symbol</label>
|
||||
<input id="symbol" class="form-control" placeholder="BTC/USDT">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">Timeframe</label>
|
||||
<input id="timeframe" class="form-control" placeholder="1h">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">Account equity</label>
|
||||
<input id="account_equity" class="form-control" type="number" step="0.01" value="10000">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 text-secondary">
|
||||
Tip: Symbol y timeframe se cargan desde Step 1 (localStorage). Si no aparecen, rellénalos manualmente.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========================= -->
|
||||
<!-- Risk & Stops snapshot -->
|
||||
<!-- ========================= -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Risk & Stops snapshot (Step 2)</h3>
|
||||
<div class="card-actions">
|
||||
<button id="load_step2_btn" class="btn btn-sm btn-outline-primary">Load from Step 2</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Stop type</label>
|
||||
<select id="stop_type" class="form-select">
|
||||
<option value="fixed">fixed</option>
|
||||
<option value="trailing">trailing</option>
|
||||
<option value="atr">atr</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Stop fraction (%)</label>
|
||||
<input id="stop_fraction" class="form-control" type="number" step="0.01" value="1.0">
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">ATR period</label>
|
||||
<input id="atr_period" class="form-control" type="number" step="1" value="14">
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">ATR multiplier</label>
|
||||
<input id="atr_multiplier" class="form-control" type="number" step="0.1" value="3.0">
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Risk per trade (%)</label>
|
||||
<input id="risk_fraction" class="form-control" type="number" step="0.01" value="1.0">
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Max position fraction (%)</label>
|
||||
<input id="max_position_fraction" class="form-control" type="number" step="0.1" value="95">
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Max DD (%)</label>
|
||||
<input id="max_drawdown_pct" class="form-control" type="number" step="0.1" value="20">
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Daily loss limit (%) (optional)</label>
|
||||
<input id="daily_loss_limit_pct" class="form-control" type="number" step="0.1" value="">
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Max consecutive losses (optional)</label>
|
||||
<input id="max_consecutive_losses" class="form-control" type="number" step="1" value="">
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Cooldown bars (optional)</label>
|
||||
<input id="cooldown_bars" class="form-control" type="number" step="1" value="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 text-secondary">
|
||||
Este snapshot se envía al backend para reproducibilidad y para que WF/optimizer use el mismo sizing/stop.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========================= -->
|
||||
<!-- WF + Optimizer config -->
|
||||
<!-- ========================= -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Walk-Forward & Optimization</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Train days</label>
|
||||
<input id="wf_train_days" class="form-control" type="number" step="1" value="120">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Test days</label>
|
||||
<input id="wf_test_days" class="form-control" type="number" step="1" value="30">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Step days (optional)</label>
|
||||
<input id="wf_step_days" class="form-control" type="number" step="1" value="">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Metric</label>
|
||||
<select id="opt_metric" class="form-select">
|
||||
<option value="sharpe_ratio">sharpe_ratio</option>
|
||||
<option value="total_return">total_return</option>
|
||||
<option value="max_drawdown">max_drawdown</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Max combinations</label>
|
||||
<input id="opt_max_combinations" class="form-control" type="number" step="1" value="300">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Min trades (train)</label>
|
||||
<input id="opt_min_trades_train" class="form-control" type="number" step="1" value="30">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Min trades (test)</label>
|
||||
<input id="opt_min_trades_test" class="form-control" type="number" step="1" value="10">
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Commission</label>
|
||||
<input id="commission" class="form-control" type="number" step="0.0001" value="0.001">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Slippage</label>
|
||||
<input id="slippage" class="form-control" type="number" step="0.0001" value="0.0005">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========================= -->
|
||||
<!-- Strategy selection -->
|
||||
<!-- ========================= -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Strategies</h3>
|
||||
<div class="card-actions">
|
||||
<button id="refresh_strategies_btn" class="btn btn-sm btn-outline-secondary">Refresh</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="strategies_list" class="row g-3"></div>
|
||||
<div class="mt-3 text-secondary">
|
||||
Cada estrategia incluye un <b>param_grid</b> en JSON.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========================= -->
|
||||
<!-- Actions -->
|
||||
<!-- ========================= -->
|
||||
<div class="d-flex gap-2 mb-4">
|
||||
<button id="validate_strategies_btn" class="btn btn-primary">
|
||||
Validate (WF)
|
||||
</button>
|
||||
<button id="report_strategies_btn" class="btn btn-outline-primary">
|
||||
Generate PDF report
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ========================= -->
|
||||
<!-- Prograss Bar -->
|
||||
<!-- ========================= -->
|
||||
<div id="wf_progress_card" class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Walk-Forward Progress</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="progress mb-2">
|
||||
<div
|
||||
id="wfProgressBar"
|
||||
class="progress-bar progress-bar-striped progress-bar-animated"
|
||||
role="progressbar"
|
||||
style="width: 0%"
|
||||
>
|
||||
0%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="wf_progress_text" class="text-secondary small">
|
||||
Waiting to start...
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========================= -->
|
||||
<!-- Results -->
|
||||
<!-- ========================= -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Results</h3>
|
||||
<div class="card-actions">
|
||||
<span id="strategies_status_badge" class="badge bg-secondary">—</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="strategies_message" class="mb-3 text-secondary">Run validation to see results.</div>
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">Strategy plot</label>
|
||||
<select id="plot_strategy_select" class="form-select"></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<div id="plot_equity" style="height: 320px;"></div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<div id="plot_returns" style="height: 320px;"></div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<div id="strategies_table_wrap"></div>
|
||||
|
||||
<details class="mt-3">
|
||||
<summary class="text-secondary">Debug JSON</summary>
|
||||
<pre id="strategies_debug" class="mt-2" style="max-height: 300px; overflow:auto;"></pre>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========================= -->
|
||||
<!-- PDF Viewer -->
|
||||
<!-- ========================= -->
|
||||
<div id="pdf_viewer_section" class="card mb-4 d-none">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Strategies Report (PDF)</h3>
|
||||
<div class="card-actions">
|
||||
<button id="close_pdf_btn" class="btn btn-sm btn-outline-secondary">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<iframe id="pdf_frame" style="width: 100%; height: 800px; border: none;"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
|
||||
<script src="/static/js/pages/calibration_strategies.js"></script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user