spb/hfchart Public
HFChart — la référence des charts haute fréquence : 14 types rendus canvas from scratch (zéro dépendance), données HF Market Data — www.hfchart.io
JavaScript 82.1%
CSS 10%
HTML 5.8%
Python 2.1%
1<!DOCTYPE html>2<!-- ==========================================================================3 HFChart — Options Lab : stratégies d'options sur données historiques réelles4 Données : API HF Market Data — https://www.hfmarketdata.io (chaînes + Greeks depuis 2010)5 Author : Simon-Pierre Boucher — contact@spboucher.ai6=========================================================================== -->7<html lang="fr" data-theme="light" data-scheme="classic">8<head>9 <meta charset="utf-8">10 <meta name="viewport" content="width=device-width, initial-scale=1">11 <meta name="author" content="Simon-Pierre Boucher — contact@spboucher.ai">12 <meta name="description" content="Options Lab — construisez et analysez des stratégies d'options sur chaînes historiques réelles (Greeks, payoff, replay mark-to-market) depuis 2010.">13 <title>Options Lab — HFChart</title>14 <link rel="stylesheet" href="css/style.css">15 <link rel="stylesheet" href="css/options.css">16</head>17<body id="options-lab">18 <header id="topbar">19 <div class="brand">20 <span class="logo">HF</span>21 <strong>Options Lab</strong>22 <a class="provider" href="/">← Charts</a>23 <a class="provider" href="https://www.hfmarketdata.io" target="_blank" rel="noopener">données · hfmarketdata.io</a>24 </div>25 <div class="ctl">26 <label for="ol-ticker">Sous-jacent</label>27 <input id="ol-ticker" type="text" list="ol-tickers" placeholder="SPY" autocomplete="off"28 spellcheck="false" style="width:110px;text-transform:uppercase">29 <datalist id="ol-tickers"></datalist>30 </div>31 <div class="ctl">32 <label for="ol-date">Date historique</label>33 <input id="ol-date" type="date" min="2010-01-04">34 </div>35 <button id="ol-load" type="button" class="primary">Charger</button>36 <span id="ol-spot" class="spot-chip"></span>37 <span class="flex-spacer"></span>38 <button id="btn-theme" type="button" title="Thème clair / sombre">☾</button>39 </header>4041 <div id="ol-layout">42 <!-- ===== chaîne d'options ===== -->43 <section id="ol-chain">44 <div id="ol-expiries" class="expiry-tabs" aria-label="Échéances"></div>45 <div class="chain-filters">46 <label>|Δ| max <input id="f-delta" type="range" min="0.05" max="1" step="0.05" value="1">47 <b id="f-delta-v">1.00</b></label>48 <label>± spot <input id="f-dist" type="range" min="2" max="100" step="2" value="20">49 <b id="f-dist-v">20 %</b></label>50 <span class="dim" id="chain-count"></span>51 </div>52 <div id="chain-scroll">53 <table id="chain-table" aria-label="Chaîne d'options"></table>54 <p id="chain-empty" class="empty-state" hidden></p>55 </div>56 </section>5758 <!-- ===== labo : position, métriques, payoff, replay ===== -->59 <section id="ol-lab">60 <div class="lab-block">61 <div class="lab-head">62 <h2>Position</h2>63 <select id="preset-select" aria-label="Presets de stratégie">64 <option value="">Presets…</option>65 <option value="coveredcall">Covered call</option>66 <option value="csp">Cash-secured put</option>67 <option value="bullcall">Vertical — bull call spread</option>68 <option value="bearput">Vertical — bear put spread</option>69 <option value="ironcondor">Iron condor</option>70 <option value="straddle">Straddle</option>71 <option value="strangle">Strangle</option>72 </select>73 <button id="legs-clear" type="button" title="Vider la position">Vider</button>74 </div>75 <ul id="legs-list"></ul>76 <p id="legs-empty" class="dim">Cliquez sur un prix dans la chaîne (côté call ou put) pour ajouter une jambe, ou choisissez un preset.</p>77 </div>7879 <div class="lab-block" id="metrics-block" hidden>80 <h2>Métriques à l'échéance</h2>81 <div id="metrics" class="metrics-grid"></div>82 <div id="greeks" class="greeks-row"></div>83 </div>8485 <div class="lab-block" id="payoff-block" hidden>86 <h2>Payoff <span class="dim" style="font-weight:400">— P&L à l'échéance et courbe T+0 (Greeks)</span></h2>87 <div id="payoff-wrap" class="chart-box"></div>88 </div>8990 <div class="lab-block" id="replay-block" hidden>91 <div class="lab-head">92 <h2>Replay historique</h2>93 <button id="replay-run" type="button" class="primary">Lancer le replay</button>94 </div>95 <p class="dim">Mark-to-market réel jour par jour (prix historiques de chaque contrat, pas une simulation).</p>96 <div id="replay-body" hidden>97 <div id="replay-wrap" class="chart-box"></div>98 <input id="replay-slider" type="range" min="0" max="0" value="0" step="1" aria-label="Jour du replay">99 <div id="replay-readout" class="replay-readout"></div>100 </div>101 <p id="replay-status" class="dim" hidden></p>102 </div>103 </section>104 </div>105106 <footer id="footer">107 <b>Outil éducatif — ceci n'est pas un conseil en investissement.</b>108 Les options comportent un risque de perte totale du capital ; données de fin de journée, prix mid indicatifs.109 · Données <a href="https://www.hfmarketdata.io" target="_blank" rel="noopener">HF Market Data</a>110 · Simon-Pierre Boucher — <a href="mailto:contact@spboucher.ai">contact@spboucher.ai</a>111 </footer>112113 <div id="toast" class="toast"></div>114115 <script src="js/options-math.js"></script>116 <script src="js/options-data.js"></script>117 <script src="js/options-app.js"></script>118</body>119</html>120