New paste
Recent API Trending Blog
Guest
 
Guest

ALTERNATIVA 2

Guest
Apr 3rd, 2026
14
0
Never
Not a member of GistPad yet? Sign Up, it unlocks many cool features!
None 176.85 KB | None | 0 0
copy raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="it">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Vertical Spread Tracker</title>
  7. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>;
  8. <style>
  9. :root {
  10. --bg: #0f1117; --surface: #1a1d2e; --surface2: #22263a;
  11. --border: #2e3250; --accent: #6c63ff; --green: #00d395;
  12. --red: #ff4d6d; --yellow: #f9c74f; --text: #e2e8f0;
  13. --muted: #8892b0; --white: #ffffff;
  14. }
  15. * { margin:0; padding:0; box-sizing:border-box; }
  16. body { background:var(--bg); color:var(--text); font-family:'Segoe UI',sans-serif; font-size:14px; min-height:100vh; }
  17.  
  18. /* HEADER */
  19. header { background:var(--surface); border-bottom:1px solid var(--border); padding:14px 24px; display:flex; align-items:center; justify-content:space-between; }
  20. header h1 { font-size:18px; font-weight:700; color:var(--white); display:flex; align-items:center; gap:10px; }
  21. header h1 span { background:var(--accent); border-radius:8px; padding:4px 10px; font-size:13px; }
  22. .header-actions { display:flex; gap:10px; }
  23.  
  24. /* BUTTONS */
  25. .btn { padding:8px 16px; border-radius:8px; border:none; cursor:pointer; font-size:13px; font-weight:600; transition:all .2s; }
  26. .btn-primary { background:var(--accent); color:#fff; }
  27. .btn-primary:hover { background:#7c75ff; }
  28. .btn-success { background:var(--green); color:#000; }
  29. .btn-success:hover { opacity:.85; }
  30. .btn-danger { background:var(--red); color:#fff; }
  31. .btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); }
  32. .btn-outline:hover { border-color:var(--accent); color:var(--accent); }
  33. .btn-sm { padding:5px 10px; font-size:12px; }
  34.  
  35. /* LAYOUT */
  36. .container { max-width:1400px; margin:0 auto; padding:20px; }
  37. .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
  38. .grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:24px; }
  39.  
  40. /* KPI CARDS */
  41. .kpi { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px; }
  42. .kpi.highlight { border-color:var(--accent); }
  43. .kpi label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; display:block; margin-bottom:8px; }
  44. .kpi .val { font-size:26px; font-weight:700; }
  45. .kpi .sub { font-size:11px; color:var(--muted); margin-top:4px; }
  46. .green { color:var(--green); } .red { color:var(--red); } .yellow { color:var(--yellow); }
  47.  
  48. /* SECTION */
  49. .section { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:24px; }
  50. .section-title { font-size:15px; font-weight:700; color:var(--white); margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; }
  51.  
  52. /* FORM */
  53. .form-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
  54. .form-group { display:flex; flex-direction:column; gap:5px; }
  55. .form-group label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
  56. .form-group input, .form-group select { background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:8px 12px; color:var(--text); font-size:13px; outline:none; transition:.2s; }
  57. .form-group input:focus, .form-group select:focus { border-color:var(--accent); }
  58. .form-group select option { background:var(--surface2); }
  59. .form-row { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-top:12px; }
  60.  
  61. /* CALC PREVIEW */
  62. .calc-preview { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:14px; display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:14px; }
  63. .calc-item label { font-size:10px; color:var(--muted); display:block; margin-bottom:4px; }
  64. .calc-item span { font-size:15px; font-weight:700; }
  65.  
  66. /* TABLE */
  67. .table-wrap { overflow-x:auto; }
  68. table { width:100%; border-collapse:collapse; font-size:13px; }
  69. thead tr { background:var(--surface2); }
  70. th { padding:10px 12px; text-align:left; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; border-bottom:1px solid var(--border); }
  71. td { padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap; vertical-align:middle; }
  72. tr:hover td { background:rgba(108,99,255,.05); }
  73. .badge { display:inline-block; padding:3px 8px; border-radius:20px; font-size:11px; font-weight:600; }
  74. .badge-call { background:rgba(108,99,255,.2); color:#a29bff; }
  75. .badge-put { background:rgba(249,199,79,.15); color:var(--yellow); }
  76. .badge-open { background:rgba(0,211,149,.15); color:var(--green); }
  77. .badge-closed { background:rgba(142,142,142,.15); color:#999; }
  78. .badge-stop { background:rgba(255,77,109,.15); color:var(--red); }
  79. .badge-win { background:rgba(0,211,149,.2); color:var(--green); }
  80. .badge-loss { background:rgba(255,77,109,.2); color:var(--red); }
  81.  
  82. /* MODAL */
  83. .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:100; align-items:center; justify-content:center; }
  84. .modal-overlay.active { display:flex; }
  85. .modal { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px; width:90%; max-width:600px; }
  86. .modal h2 { font-size:17px; margin-bottom:20px; color:var(--white); }
  87.  
  88. /* TABS */
  89. .tabs { display:flex; gap:4px; background:var(--surface2); border-radius:10px; padding:4px; margin-bottom:20px; width:fit-content; }
  90. .tab { padding:7px 18px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600; color:var(--muted); transition:.2s; border:none; background:transparent; }
  91. .tab.active { background:var(--accent); color:#fff; }
  92.  
  93. /* ALERT */
  94. .alert { padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:12px; display:none; }
  95. .alert.success { background:rgba(0,211,149,.12); border:1px solid var(--green); color:var(--green); display:block; }
  96. .alert.error { background:rgba(255,77,109,.12); border:1px solid var(--red); color:var(--red); display:block; }
  97.  
  98. /* TOAST NOTIFICATION */
  99. .toast { position:fixed; bottom:28px; right:28px; z-index:999; padding:14px 22px; border-radius:12px; font-size:14px; font-weight:600; display:flex; align-items:center; gap:10px; box-shadow:0 8px 32px rgba(0,0,0,.4); transform:translateY(80px); opacity:0; transition:all .35s cubic-bezier(.21,1.02,.73,1); pointer-events:none; }
  100. .toast.show { transform:translateY(0); opacity:1; }
  101. .toast.success { background:#00d395; color:#000; }
  102. .toast.error { background:#ff4d6d; color:#fff; }
  103. .toast.info { background:#4cc9f0; color:#000; }
  104.  
  105. /* AUTO-SAVE INDICATOR */
  106. .autosave-dot { width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; margin-left:8px; animation:pulse 2s infinite; }
  107. @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
  108.  
  109. /* INPUT ERROR STATE */
  110. .input-error { border-color:var(--red) !important; background:rgba(255,77,109,.08) !important; animation:shake .3s ease; }
  111. @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
  112.  
  113. /* TABLE RESPONSIVE β€” no horizontal scroll */
  114. .table-wrap { overflow-x:visible; }
  115. table { width:100%; border-collapse:collapse; font-size:12px; table-layout:fixed; }
  116. th, td { padding:8px 6px; overflow:hidden; text-overflow:ellipsis; }
  117. th { white-space:normal; word-break:break-word; }
  118. td { white-space:normal; word-break:break-word; }
  119.  
  120. /* NAV */
  121. nav { background:var(--surface); border-bottom:1px solid var(--border); padding:0 24px; display:flex; gap:4px; }
  122. .nav-btn { padding:12px 20px; background:none; border:none; border-bottom:3px solid transparent; color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; transition:.2s; margin-bottom:-1px; }
  123. .nav-btn:hover { color:var(--text); }
  124. .nav-btn.active { color:var(--accent); border-bottom-color:var(--accent); }
  125.  
  126. /* PAGES */
  127. .page { display:none; }
  128. .page.active { display:block; }
  129.  
  130. /* ANALYTICS */
  131. .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
  132. .grid-2-1 { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:24px; }
  133. .grid-1-1 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px; }
  134. .chart-box { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; }
  135. .chart-box .chart-title { font-size:13px; font-weight:700; color:var(--white); margin-bottom:4px; }
  136. .chart-box .chart-sub { font-size:11px; color:var(--muted); margin-bottom:16px; }
  137. .chart-box canvas { max-height:260px; }
  138. .chart-box.tall canvas { max-height:320px; }
  139.  
  140. /* STAT TABLE */
  141. .stat-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px; }
  142. .stat-row:last-child { border-bottom:none; }
  143. .stat-label { color:var(--muted); }
  144. .stat-val { font-weight:700; }
  145.  
  146. /* EQUITY TICKER */
  147. .equity-change { font-size:12px; padding:2px 8px; border-radius:20px; margin-left:8px; }
  148. .equity-up { background:rgba(0,211,149,.15); color:var(--green); }
  149. .equity-down { background:rgba(255,77,109,.15); color:var(--red); }
  150.  
  151. /* HEATMAP */
  152. .heatmap { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
  153. .heatmap-cell { aspect-ratio:1; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; cursor:default; transition:.2s; }
  154. .heatmap-cell:hover { transform:scale(1.1); }
  155.  
  156. /* NO DATA */
  157. .no-data-chart { display:flex; flex-direction:column; align-items:center; justify-content:center; height:160px; color:var(--muted); font-size:13px; gap:8px; }
  158. .no-data-chart span { font-size:32px; }
  159.  
  160. /* EQUITY FILTER BUTTONS */
  161. .eq-btn { padding:5px 12px; border-radius:20px; border:1px solid var(--border); background:transparent; color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; transition:.2s; }
  162. .eq-btn:hover { border-color:var(--accent); color:var(--accent); }
  163. .eq-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
  164.  
  165. /* EXPIRY CALENDAR */
  166. .cal-filter-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
  167. .cal-yr-btn { padding:5px 14px; border-radius:20px; border:1px solid var(--border); background:transparent; color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; transition:all .2s; }
  168. .cal-yr-btn.active, .cal-yr-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
  169. .cal-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
  170. .cal-month { background:var(--surface2); border:1px solid var(--border); border-radius:12px; overflow:hidden; transition:border-color .2s; }
  171. .cal-month:hover { border-color:var(--accent); }
  172. .cal-month-header { padding:12px 16px 10px; font-size:14px; font-weight:700; color:var(--white); display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); }
  173. .cal-month-header .cal-count { font-size:11px; padding:2px 8px; border-radius:20px; background:rgba(108,99,255,.2); color:var(--accent); }
  174. .cal-month-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; border-bottom:1px solid var(--border); }
  175. .cal-ms { padding:8px 10px; text-align:center; border-right:1px solid var(--border); }
  176. .cal-ms:last-child { border-right:none; }
  177. .cal-ms-val { font-size:16px; font-weight:800; color:var(--white); }
  178. .cal-ms-lbl { font-size:9px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-top:2px; }
  179. .cal-type-bar { display:flex; height:6px; border-radius:3px; overflow:hidden; margin:0 14px 8px; }
  180. .cal-type-seg { transition:width .3s; }
  181. .cal-outcome-row { display:flex; gap:8px; padding:4px 14px 8px; flex-wrap:wrap; }
  182. .cal-outcome-pill { font-size:10px; padding:2px 8px; border-radius:12px; font-weight:600; }
  183. .cal-trade-row { padding:7px 14px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,.04); font-size:12px; }
  184. .cal-trade-row:last-child { border-bottom:none; }
  185. .cal-trade-left { display:flex; flex-direction:column; gap:2px; }
  186. .cal-trade-ticker { font-weight:700; color:var(--white); }
  187. .cal-trade-info { color:var(--muted); font-size:11px; }
  188. .cal-trade-right { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
  189. .cal-past { opacity:.5; }
  190. .cal-soon { border-left:3px solid var(--yellow); }
  191. .cal-pnl-bar { display:flex; align-items:center; gap:6px; padding:6px 14px 10px; }
  192. .cal-pnl-track { flex:1; height:8px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; position:relative; }
  193. .cal-pnl-fill { height:100%; border-radius:4px; transition:width .3s; }
  194. .cal-pnl-val { font-size:11px; font-weight:700; min-width:60px; text-align:right; }
  195. /* Stats enhanced */
  196. .stat-section-title { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--accent); font-weight:700; padding:10px 0 6px; border-bottom:1px solid var(--border); margin-bottom:4px; }
  197. .cal-today { border-left:3px solid var(--red); }
  198.  
  199. /* TRADE CARDS */
  200. .trade-card { background:var(--surface2); border:1px solid var(--border); border-radius:12px; padding:16px 20px; margin-bottom:10px; display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; transition:.2s; }
  201. .trade-card:hover { border-color:var(--accent); box-shadow:0 0 0 1px rgba(108,99,255,.2); }
  202. .trade-card.status-open { border-left:3px solid var(--green); }
  203. .trade-card.status-closed { border-left:3px solid #555; }
  204. .trade-card.status-stop { border-left:3px solid var(--red); }
  205. .trade-card.status-early { border-left:3px solid var(--yellow); }
  206. .tc-left { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:64px; }
  207. .tc-ticker { font-size:20px; font-weight:800; color:var(--white); letter-spacing:.5px; }
  208. .tc-asset { font-size:10px; color:var(--muted); text-transform:uppercase; }
  209. .tc-mid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px 16px; }
  210. .tc-field { display:flex; flex-direction:column; gap:2px; }
  211. .tc-field span { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; }
  212. .tc-field strong { font-size:13px; color:var(--text); font-weight:600; }
  213. .tc-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; min-width:120px; }
  214. .tc-pnl { font-size:22px; font-weight:800; }
  215. .tc-roi { font-size:12px; font-weight:600; }
  216. .tc-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
  217. .tc-divider { height:1px; background:var(--border); margin:0 0 4px 0; }
  218. .tc-dates { display:flex; gap:16px; }
  219. .tc-dates .tc-field strong { font-size:12px; }
  220.  
  221. @media(max-width:1100px){ .grid-2-1{grid-template-columns:1fr;} .grid-3{grid-template-columns:repeat(2,1fr);} }
  222. @media(max-width:900px){ .grid-4{grid-template-columns:repeat(2,1fr);} .calc-preview{grid-template-columns:repeat(2,1fr);} .grid-1-1{grid-template-columns:1fr;} }
  223. @media(max-width:600px){ .grid-4{grid-template-columns:1fr;} .grid-3{grid-template-columns:1fr;} }
  224. </style>
  225. </head>
  226. <body>
  227.  
  228. <header>
  229. <h1>πŸ“Š Vertical Spread Tracker <span>Options</span><span class="autosave-dot" title="Auto-salvataggio attivo nel browser"></span></h1>
  230. <div class="header-actions">
  231. <button class="btn btn-outline" onclick="exportCSV()" title="Esporta tutti i trade in formato CSV per Excel">⬇ CSV</button>
  232. <button class="btn btn-outline" style="border-color:#4cc9f0;color:#4cc9f0;" onclick="importJSON()" title="Ripristina un backup JSON salvato in precedenza">⬆ Ripristina JSON</button>
  233. <button class="btn btn-outline" style="border-color:#f9c74f;color:#f9c74f;" onclick="exportJSON()" title="Salva tutti i tuoi trade in un file JSON sul PC">πŸ’Ύ Salva JSON</button>
  234. <button class="btn btn-primary" onclick="openModal()">οΌ‹ Nuovo Trade</button>
  235. </div>
  236. </header>
  237.  
  238. <!-- INPUT NASCOSTO PER IMPORT FILE -->
  239. <input type="file" id="jsonFileInput" accept=".json" style="display:none" onchange="loadJSONFile(event)" />
  240.  
  241. <!-- TOAST -->
  242. <div class="toast" id="toast"></div>
  243.  
  244. <nav>
  245. <button class="nav-btn active" onclick="showPage('dashboard',this)">πŸ“‹ Dashboard</button>
  246. <button class="nav-btn" onclick="showPage('analytics',this)">πŸ“ˆ Analytics</button>
  247. </nav>
  248.  
  249. <!-- ═══════════════════════════ PAGE: DASHBOARD ═══════════════════════════ -->
  250. <div class="page active" id="page-dashboard">
  251. <div class="container">
  252.  
  253. <!-- KPI ROW 1: 4 box principali -->
  254. <div class="grid-4">
  255. <div class="kpi"><label>Trades Aperti</label><div class="val yellow" id="k-open">0</div><div class="sub">posizioni attive</div></div>
  256. <div class="kpi"><label>Margine Impiegato</label><div class="val yellow" id="k-margin">$0,00</div><div class="sub">somma margine broker posizioni aperte</div></div>
  257. <div class="kpi highlight"><label>P&L Realizzato</label><div class="val green" id="k-pnl">$0,00</div><div class="sub">al netto di tutte le fee</div></div>
  258. <div class="kpi"><label>Win Rate</label><div class="val green" id="k-wr">0%</div><div class="sub" id="k-wr-sub">0 win / 0 chiusi</div></div>
  259. </div>
  260.  
  261. <!-- KPI ROW 2: Dettaglio WR + ROI medio + AVERAGE box -->
  262. <div style="display:grid;grid-template-columns:1fr 1fr 2fr;gap:16px;margin-bottom:24px;">
  263.  
  264. <!-- Dettaglio Win Rate -->
  265. <div class="kpi">
  266. <label>Dettaglio Win Rate</label>
  267. <div style="display:flex;flex-direction:column;gap:6px;margin-top:4px;" id="k-wr-detail">
  268. <div style="display:flex;justify-content:space-between;font-size:13px;"><span style="color:var(--muted)">βœ… Scadenza</span><span id="k-wr-exp" class="green">0 (0%)</span></div>
  269. <div style="display:flex;justify-content:space-between;font-size:13px;"><span style="color:var(--muted)">↩ Uscita Ant.</span><span id="k-wr-early" class="yellow">0 (0%)</span></div>
  270. <div style="display:flex;justify-content:space-between;font-size:13px;"><span style="color:var(--muted)">πŸ›‘ Stop Loss</span><span id="k-wr-stop" class="red">0 (0%)</span></div>
  271. </div>
  272. </div>
  273.  
  274. <!-- ROI Medio per Trade -->
  275. <div class="kpi">
  276. <label>ROI Medio Atteso per Trade</label>
  277. <div class="val green" id="k-roi-avg">0,00%</div>
  278. <div class="sub">media ROI atteso (aperti + chiusi)</div>
  279. </div>
  280.  
  281. <!-- AVERAGE box: 4 metriche in griglia -->
  282. <div class="kpi">
  283. <label>Average β€” medie su tutti i trade</label>
  284. <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px;margin-top:8px;">
  285. <div>
  286. <div style="font-size:10px;color:var(--muted);text-transform:uppercase;margin-bottom:4px;">Max Profitto Netto</div>
  287. <div style="font-size:15px;font-weight:700;color:var(--green);" id="k-avg-profit">β€”</div>
  288. </div>
  289. <div>
  290. <div style="font-size:10px;color:var(--muted);text-transform:uppercase;margin-bottom:4px;">Max Perdita (SL)</div>
  291. <div style="font-size:15px;font-weight:700;color:var(--red);" id="k-avg-loss">β€”</div>
  292. </div>
  293. <div>
  294. <div style="font-size:10px;color:var(--muted);text-transform:uppercase;margin-bottom:4px;">Margine Broker</div>
  295. <div style="font-size:15px;font-weight:700;color:var(--yellow);" id="k-avg-margin">β€”</div>
  296. </div>
  297. <div>
  298. <div style="font-size:10px;color:var(--muted);text-transform:uppercase;margin-bottom:4px;">R/R Ratio medio</div>
  299. <div style="font-size:15px;font-weight:700;" id="k-avg-rr">β€”</div>
  300. </div>
  301. </div>
  302. </div>
  303.  
  304. </div>
  305.  
  306. <!-- TRADE ENTRY SECTION -->
  307. <div class="section">
  308. <div class="section-title">Aggiungi / Modifica Trade</div>
  309. <div id="formAlert" class="alert"></div>
  310.  
  311. <!-- TABS -->
  312. <div class="tabs">
  313. <button class="tab active" onclick="setSpreadType('bull_put',this)">Bull Put Spread</button>
  314. <button class="tab" onclick="setSpreadType('bear_call',this)">Bear Call Spread</button>
  315. </div>
  316.  
  317. <input type="hidden" id="editId" value="">
  318. <input type="hidden" id="spreadType" value="bull_put">
  319.  
  320. <div class="form-grid">
  321. <div class="form-group">
  322. <label>Tipo Strumento</label>
  323. <select id="f-asset-type" onchange="onAssetTypeChange()">
  324. <option value="stock">Stock</option>
  325. <option value="etf">ETF</option>
  326. <option value="future_index">Future Index</option>
  327. <option value="future_mp">Future M.P.</option>
  328. <option value="future_fx">Future Valute</option>
  329. </select>
  330. </div>
  331. <div class="form-group"><label>Ticker</label><input type="text" id="f-ticker" placeholder="es. AAPL" oninput="this.value=this.value.toUpperCase()" /></div>
  332. <div class="form-group"><label>Data Apertura</label><input type="date" id="f-open-date" /></div>
  333. <div class="form-group"><label>Scadenza</label><input type="date" id="f-expiry" /></div>
  334. <div class="form-group"><label>Contratti</label><input type="number" id="f-contracts" value="1" min="1" onchange="calcPreview()" /></div>
  335. <div class="form-group">
  336. <label>Moltiplicatore</label>
  337. <input type="text" inputmode="numeric" id="f-multiplier" value="100" oninput="calcPreview()" />
  338. </div>
  339. <div class="form-group">
  340. <label>Margine Broker ($)</label>
  341. <input type="text" inputmode="decimal" id="f-margin-broker" placeholder="es. 760" oninput="calcPreview()" />
  342. </div>
  343. <div class="form-group"><label id="sell-strike-lbl">Put VENDUTA (OTM)</label><input type="text" inputmode="decimal" id="f-sell-strike" placeholder="es. 30" oninput="validateStrikesLive(); calcPreview();" /></div>
  344. <div class="form-group"><label id="buy-strike-lbl">Put COMPRATA (piΓΉ bassa)</label><input type="text" inputmode="decimal" id="f-buy-strike" placeholder="es. 25" oninput="validateStrikesLive(); calcPreview();" /></div>
  345. <div class="form-group"><label>Premio Netto Incassato ($)</label><input type="text" inputmode="decimal" id="f-premium" placeholder="es. 0,26" oninput="calcPreview()" /></div>
  346. <div class="form-group"><label>Commissioni ($)</label><input type="text" inputmode="decimal" id="f-fees" placeholder="es. 6,50" value="0" oninput="calcPreview()" /></div>
  347. </div>
  348.  
  349. <!-- STRIKE ERROR -->
  350. <div id="strikeError" style="display:none;background:rgba(255,77,109,.1);border:1px solid var(--red);border-radius:8px;padding:10px 14px;font-size:13px;color:var(--red);margin-top:10px;">
  351. ⚠ <strong>Strike non valido:</strong> per un Bull Put Spread la Put COMPRATA deve essere <em>inferiore</em> alla Put VENDUTA. Per un Bear Call Spread la Call COMPRATA deve essere <em>superiore</em> alla Call VENDUTA.
  352. </div>
  353.  
  354. <!-- CALC PREVIEW -->
  355. <div class="calc-preview" id="calcPreview" style="grid-template-columns:repeat(4,1fr);">
  356. <div class="calc-item">
  357. <label>Max Profitto Netto</label>
  358. <span class="green" id="cp-maxprofit">β€”</span>
  359. <small style="color:var(--muted);font-size:10px;display:block;margin-top:3px;">Premio Γ— Molt. Γ— Cont. βˆ’ Comm.</small>
  360. </div>
  361. <div class="calc-item">
  362. <label>Max Perdita (con SL)</label>
  363. <span class="red" id="cp-maxloss">β€”</span>
  364. <small style="color:var(--muted);font-size:10px;display:block;margin-top:3px;">SL debit + Comm. βˆ’ Max Profitto</small>
  365. </div>
  366. <div class="calc-item">
  367. <label>R/R Ratio</label>
  368. <span id="cp-rr">β€”</span>
  369. <small style="color:var(--muted);font-size:10px;display:block;margin-top:3px;">Max Perdita SL Γ· Max Profitto</small>
  370. </div>
  371. <div class="calc-item">
  372. <label>ROI % (su margine broker)</label>
  373. <span class="green" id="cp-roi">β€”</span>
  374. <small style="color:var(--muted);font-size:10px;display:block;margin-top:3px;">Max Profitto Netto / Margine</small>
  375. </div>
  376. </div>
  377.  
  378. <div class="form-row">
  379. <button class="btn btn-success" onclick="saveTrade()">βœ“ Salva Trade</button>
  380. <button class="btn btn-outline" onclick="resetForm()">βœ• Reset</button>
  381. </div>
  382. </div>
  383.  
  384. <!-- TRADES TABLE -->
  385. <div class="section">
  386. <div class="section-title">
  387. <span>Trades Recenti</span>
  388. <div style="display:flex;gap:8px;">
  389. <select id="filterStatus" onchange="renderTable()" style="background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 10px;font-size:12px;">
  390. <option value="all">Tutti i stati</option>
  391. <option value="open">Aperti</option>
  392. <option value="closed">Chiusi (Win)</option>
  393. <option value="stop">Stop Loss</option>
  394. </select>
  395. <select id="filterType" onchange="renderTable()" style="background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 10px;font-size:12px;">
  396. <option value="all">Tutti i tipi</option>
  397. <option value="bull_put">Bull Put</option>
  398. <option value="bear_call">Bear Call</option>
  399. </select>
  400. </div>
  401. </div>
  402. <div id="tradeList"></div>
  403. <div id="noTrades" style="text-align:center;padding:40px;color:var(--muted);">Nessun trade ancora. Aggiungi il tuo primo trade!</div>
  404. </div>
  405.  
  406. </div>
  407. </div><!-- end page-dashboard -->
  408.  
  409. <!-- ═══════════════════════════ PAGE: ANALYTICS ═══════════════════════════ -->
  410. <div class="page" id="page-analytics">
  411. <div class="container">
  412.  
  413. <!-- KPI BAR -->
  414. <div class="grid-4" style="margin-bottom:20px;">
  415. <div class="kpi highlight">
  416. <label>P&L Cumulativo</label>
  417. <div class="val green" id="an-equity">$0,00</div>
  418. <div class="sub" id="an-equity-sub">su 0 trade chiusi</div>
  419. </div>
  420. <div class="kpi">
  421. <label>Profit Factor</label>
  422. <div class="val" id="an-pf">β€”</div>
  423. <div class="sub">Gross Win Γ· Gross Loss (>1 = profittevole)</div>
  424. </div>
  425. <div class="kpi">
  426. <label>Max Drawdown</label>
  427. <div class="val red" id="an-dd">$0,00</div>
  428. <div class="sub">peggior perdita cumulata consecutiva</div>
  429. </div>
  430. <div class="kpi">
  431. <label>Avg Win / Avg Loss</label>
  432. <div class="val" id="an-avgwl">β€”</div>
  433. <div class="sub">qualitΓ  media per trade</div>
  434. </div>
  435. </div>
  436.  
  437. <!-- EQUITY CURVE (full width) con filtro temporale -->
  438. <div class="chart-box" style="margin-bottom:20px;">
  439. <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:4px;">
  440. <div>
  441. <div class="chart-title">Equity Curve β€” P&L Cumulativo nel Tempo</div>
  442. <div class="chart-sub">Ogni punto = chiusura di un trade. Filtra per periodo per vedere l'andamento.</div>
  443. </div>
  444. <div style="display:flex;gap:6px;flex-wrap:wrap;">
  445. <button class="eq-btn active" onclick="setEqFilter('all',this)">Tutto</button>
  446. <button class="eq-btn" onclick="setEqFilter('1y',this)">1 Anno</button>
  447. <button class="eq-btn" onclick="setEqFilter('6m',this)">6 Mesi</button>
  448. <button class="eq-btn" onclick="setEqFilter('3m',this)">3 Mesi</button>
  449. <button class="eq-btn" onclick="setEqFilter('1m',this)">1 Mese</button>
  450. </div>
  451. </div>
  452. <canvas id="chartEquity" style="max-height:300px;"></canvas>
  453. <div class="no-data-chart" id="nd-equity"><span>πŸ“‰</span>Nessun trade chiuso nel periodo selezionato</div>
  454. </div>
  455.  
  456. <!-- ROW 2: Mensile (waterfall) + Drawdown -->
  457. <div class="grid-1-1" style="margin-bottom:20px;">
  458. <div class="chart-box">
  459. <div class="chart-title">P&L per Mese</div>
  460. <div class="chart-sub">Profitto/perdita realizzata aggregata per mese di chiusura</div>
  461. <canvas id="chartMonthly" style="max-height:240px;"></canvas>
  462. <div class="no-data-chart" id="nd-monthly"><span>πŸ“…</span>Nessun trade chiuso</div>
  463. </div>
  464. <div class="chart-box">
  465. <div class="chart-title">Drawdown nel Tempo</div>
  466. <div class="chart-sub">Distanza dal picco massimo di equity β€” misura la resilienza del metodo</div>
  467. <canvas id="chartDrawdown" style="max-height:240px;"></canvas>
  468. <div class="no-data-chart" id="nd-drawdown"><span>πŸ“‰</span>Nessun trade chiuso</div>
  469. </div>
  470. </div>
  471.  
  472. <!-- ROW 3: Outcome donut + Holding Period + Asset Type -->
  473. <div class="grid-3" style="margin-bottom:20px;">
  474. <div class="chart-box">
  475. <div class="chart-title">Distribuzione Esiti</div>
  476. <div class="chart-sub">Scadenza Β· Stop Loss Β· Uscita Anticipata</div>
  477. <canvas id="chartDonut" style="max-height:200px;"></canvas>
  478. <div class="no-data-chart" id="nd-donut"><span>🍩</span>Nessun trade chiuso</div>
  479. </div>
  480. <div class="chart-box">
  481. <div class="chart-title">Holding Period</div>
  482. <div class="chart-sub">Distribuzione dei giorni di permanenza in posizione</div>
  483. <canvas id="chartHolding" style="max-height:200px;"></canvas>
  484. <div class="no-data-chart" id="nd-holding"><span>⏱</span>Nessun trade chiuso</div>
  485. </div>
  486. <div class="chart-box">
  487. <div class="chart-title">P&L per Tipo Strumento</div>
  488. <div class="chart-sub">Stock Β· ETF Β· Future β€” profitto netto realizzato</div>
  489. <canvas id="chartAsset" style="max-height:200px;"></canvas>
  490. <div class="no-data-chart" id="nd-asset"><span>πŸ“Š</span>Nessun trade chiuso</div>
  491. </div>
  492. </div>
  493.  
  494. <!-- ROW 4: Bull Put vs Bear Call + P&L Reale per trade -->
  495. <div class="grid-1-1" style="margin-bottom:20px;">
  496. <div class="chart-box">
  497. <div class="chart-title">Bull Put vs Bear Call</div>
  498. <div class="chart-sub">Avg P&L realizzato e Win Rate per tipologia di spread</div>
  499. <canvas id="chartTypeComp" style="max-height:240px;"></canvas>
  500. <div class="no-data-chart" id="nd-type"><span>βš–οΈ</span>Nessun trade chiuso</div>
  501. </div>
  502. <div class="chart-box">
  503. <div class="chart-title">P&L Realizzato per Trade</div>
  504. <div class="chart-sub">Ogni barra = un trade chiuso, in ordine cronologico</div>
  505. <canvas id="chartPnlBar" style="max-height:240px;"></canvas>
  506. <div class="no-data-chart" id="nd-pnlbar"><span>πŸ’Ή</span>Nessun trade chiuso</div>
  507. </div>
  508. </div>
  509.  
  510. <!-- CALENDARIO SCADENZE (full width) -->
  511. <div class="chart-box" style="margin-bottom:20px;">
  512. <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:4px;">
  513. <div>
  514. <div class="chart-title">πŸ“… Calendario Scadenze Avanzato</div>
  515. <div class="chart-sub">Scadenze organizzate per mese con statistiche dettagliate β€” quantitΓ , tipologia, esiti, P&L</div>
  516. </div>
  517. <div class="cal-filter-bar" id="calYearFilter"></div>
  518. </div>
  519. <!-- Calendar summary KPIs -->
  520. <div class="grid-4" id="calSummaryKpis" style="margin:10px 0 14px;"></div>
  521. <div id="expiryCalendar" style="margin-top:0;"></div>
  522. </div>
  523.  
  524. <!-- STATS TABLE full width -->
  525. <div class="chart-box" style="margin-bottom:20px;">
  526. <div class="chart-title">πŸ“‹ Statistiche Avanzate</div>
  527. <div class="chart-sub">Riepilogo completo della performance</div>
  528. <div id="statsTable" style="margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:0 40px;"></div>
  529. </div>
  530.  
  531. </div>
  532. </div><!-- end page-analytics -->
  533.  
  534. <!-- CLOSE MODAL -->
  535. <div class="modal-overlay" id="closeModal">
  536. <div class="modal">
  537. <h2>πŸ“Œ Chiudi Trade</h2>
  538. <input type="hidden" id="close-trade-id">
  539. <div class="form-grid" style="grid-template-columns:1fr 1fr;">
  540. <div class="form-group"><label>Prezzo di Chiusura (debit pagato, 0 se scaduto)</label><input type="text" inputmode="decimal" id="close-price" placeholder="es. 0,20" value="0" oninput="onClosePriceChange()" /></div>
  541. <div class="form-group"><label>Data Chiusura</label><input type="date" id="close-date" /></div>
  542. <div class="form-group"><label id="close-fees-label">Commissioni Chiusura ($) <span id="close-fees-note" style="color:var(--green);font-size:10px;">βœ“ Scadenza β€” nessuna comm.</span></label><input type="text" inputmode="decimal" id="close-fees" placeholder="es. 6,50" value="0" disabled style="opacity:.4;cursor:not-allowed;" /></div>
  543. <div class="form-group"><label>Motivo Chiusura</label>
  544. <select id="close-reason">
  545. <option value="closed">βœ… Profitto / Scadenza</option>
  546. <option value="stop">πŸ›‘ Stop Loss</option>
  547. <option value="early">↩ Chiusura Anticipata</option>
  548. </select>
  549. </div>
  550. </div>
  551. <div id="closePreview" style="background:var(--surface2);border-radius:8px;padding:12px;margin:14px 0;font-size:13px;"></div>
  552. <div style="display:flex;gap:10px;margin-top:16px;">
  553. <button class="btn btn-success" onclick="confirmClose()">Conferma Chiusura</button>
  554. <button class="btn btn-outline" onclick="closeModal()">Annulla</button>
  555. </div>
  556. </div>
  557. </div>
  558.  
  559. <script>
  560. // ─── STATE ───────────────────────────────────────────────────────────────────
  561. let trades = JSON.parse(localStorage.getItem('vst_trades') || '[]');
  562. let nextId = parseInt(localStorage.getItem('vst_nextid') || '1');
  563.  
  564. function save() {
  565. localStorage.setItem('vst_trades', JSON.stringify(trades));
  566. localStorage.setItem('vst_nextid', nextId);
  567. flashAutosave();
  568. }
  569.  
  570. // ─── TOAST NOTIFICATION ───────────────────────────────────────────────────────
  571. let toastTimer = null;
  572. function showToast(msg, type = 'success', duration = 3000) {
  573. const el = document.getElementById('toast');
  574. el.textContent = msg;
  575. el.className = `toast ${type} show`;
  576. clearTimeout(toastTimer);
  577. toastTimer = setTimeout(() => el.classList.remove('show'), duration);
  578. }
  579.  
  580. // ─── AUTO-SAVE FLASH ──────────────────────────────────────────────────────────
  581. function flashAutosave() {
  582. const dot = document.querySelector('.autosave-dot');
  583. if (!dot) return;
  584. dot.style.background = '#f9c74f';
  585. setTimeout(() => dot.style.background = '#00d395', 800);
  586. }
  587.  
  588. // ─── EXPORT JSON (BACKUP COMPLETO) ────────────────────────────────────────────
  589. function exportJSON() {
  590. if (trades.length === 0) {
  591. showToast('⚠ Nessun trade da salvare!', 'error'); return;
  592. }
  593. const backup = {
  594. version: 1,
  595. exportDate: new Date().toISOString(),
  596. nextId,
  597. trades
  598. };
  599. const blob = new Blob([JSON.stringify(backup, null, 2)], { type: 'application/json' });
  600. const a = document.createElement('a');
  601. a.href = URL.createObjectURL(blob);
  602. a.download = `VST_backup_${today()}.json`;
  603. a.click();
  604. URL.revokeObjectURL(a.href);
  605. showToast(`πŸ’Ύ Backup salvato β€” ${trades.length} trade esportati!`, 'success');
  606. }
  607.  
  608. // ─── IMPORT JSON (RIPRISTINO) ─────────────────────────────────────────────────
  609. function importJSON() {
  610. // Chiede conferma solo se ci sono giΓ  dati
  611. if (trades.length > 0) {
  612. if (!confirm(`⚠ Attenzione!\n\nHai giΓ  ${trades.length} trade caricati.\n\nScegli:\nβ€’ OK = Sostituisci tutto con il backup\nβ€’ Annulla = Aggiungi il backup ai trade esistenti\n\n(Premi OK per sostituire, Annulla per unire)`)) {
  613. document.getElementById('jsonFileInput').setAttribute('data-mode', 'merge');
  614. } else {
  615. document.getElementById('jsonFileInput').setAttribute('data-mode', 'replace');
  616. }
  617. } else {
  618. document.getElementById('jsonFileInput').setAttribute('data-mode', 'replace');
  619. }
  620. document.getElementById('jsonFileInput').value = ''; // reset per permettere di ricaricare lo stesso file
  621. document.getElementById('jsonFileInput').click();
  622. }
  623.  
  624. function loadJSONFile(event) {
  625. const file = event.target.files[0];
  626. if (!file) return;
  627. const mode = document.getElementById('jsonFileInput').getAttribute('data-mode') || 'replace';
  628. const reader = new FileReader();
  629. reader.onload = function(e) {
  630. try {
  631. const backup = JSON.parse(e.target.result);
  632. // Supporta sia il formato con wrapper { version, trades } che un array diretto
  633. const incoming = Array.isArray(backup) ? backup : (backup.trades || []);
  634. const incomingNextId = backup.nextId || null;
  635.  
  636. if (!incoming.length) {
  637. showToast('⚠ File JSON vuoto o non valido.', 'error'); return;
  638. }
  639.  
  640. if (mode === 'replace') {
  641. trades = incoming;
  642. nextId = incomingNextId || (Math.max(...incoming.map(t => t.id || 0)) + 1);
  643. } else {
  644. // Merge: evita duplicati per ID
  645. const existingIds = new Set(trades.map(t => t.id));
  646. const toAdd = incoming.filter(t => !existingIds.has(t.id));
  647. trades = [...trades, ...toAdd];
  648. nextId = Math.max(nextId, ...[...trades.map(t => t.id || 0)]) + 1;
  649. }
  650.  
  651. save();
  652. renderAll();
  653. const modeLabel = mode === 'replace' ? 'sostituiti' : 'uniti';
  654. showToast(`βœ… ${incoming.length} trade ${modeLabel} con successo!`, 'info', 4000);
  655. } catch(err) {
  656. showToast('❌ Errore: file JSON non valido o corrotto.', 'error', 5000);
  657. }
  658. };
  659. reader.readAsText(file);
  660. }
  661.  
  662. // ─── INIT ─────────────────────────────────────────────────────────────────────
  663. document.addEventListener('DOMContentLoaded', () => {
  664. document.getElementById('f-open-date').value = today();
  665. document.getElementById('close-date').value = today();
  666. renderAll();
  667. });
  668.  
  669. function today() {
  670. return new Date().toISOString().split('T')[0];
  671. }
  672.  
  673. // ─── EU NUMBER FORMATTING ─────────────────────────────────────────────────────
  674. // Decimali con virgola, migliaia con punto (es: 1.234,56)
  675. function euFmt(n, decimals = 2) {
  676. return n.toLocaleString('it-IT', { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
  677. }
  678. function euCurr(n) {
  679. return '$' + euFmt(n, 2);
  680. }
  681. // Accetta sia "0.26" che "0,26" β€” fondamentale per utenti con tastiera europea
  682. function parseEU(str) {
  683. if (str === null || str === undefined) return NaN;
  684. const s = String(str).trim();
  685. // Se contiene sia punto che virgola: il punto Γ¨ migliaia, la virgola Γ¨ decimale
  686. // Es: "1.234,56" β†’ "1234.56"
  687. if (s.includes(',') && s.includes('.')) {
  688. return parseFloat(s.replace(/\./g, '').replace(',', '.'));
  689. }
  690. // Se contiene solo virgola: Γ¨ il decimale
  691. // Es: "0,26" β†’ "0.26"
  692. if (s.includes(',')) {
  693. return parseFloat(s.replace(',', '.'));
  694. }
  695. // Altrimenti Γ¨ giΓ  formato JS standard con punto
  696. // Es: "1.4", "300", "6.5"
  697. return parseFloat(s);
  698. }
  699.  
  700. // Converte un numero JS in stringa EU per i campi del form
  701. // Es: 1.4 β†’ "1,4" | 300 β†’ "300" | 6.5 β†’ "6,5"
  702. function toField(n, decimals) {
  703. if (n === null || n === undefined || isNaN(n)) return '';
  704. if (decimals !== undefined) {
  705. return euFmt(n, decimals);
  706. }
  707. // Decimali automatici: mostra solo i decimali necessari
  708. const s = n.toString();
  709. const parts = s.split('.');
  710. if (parts.length === 1) return s; // numero intero, nessuna virgola
  711. return parts[0] + ',' + parts[1]; // sostituisce il punto con virgola
  712. }
  713.  
  714. // ─── ASSET TYPE β†’ AUTO MOLTIPLICATORE ────────────────────────────────────────
  715. const MULT_MAP = { stock:100, etf:100, future_index:1, future_mp:1000, future_fx:100000 };
  716. function onAssetTypeChange() {
  717. const at = document.getElementById('f-asset-type').value;
  718. document.getElementById('f-multiplier').value = MULT_MAP[at] || 100;
  719. calcPreview();
  720. }
  721.  
  722. // ─── SPREAD TYPE ──────────────────────────────────────────────────────────────
  723. function setSpreadType(type, btn) {
  724. document.getElementById('spreadType').value = type;
  725. document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
  726. btn.classList.add('active');
  727. const isBullPut = type === 'bull_put';
  728. document.getElementById('sell-strike-lbl').textContent = isBullPut ? 'Put VENDUTA (OTM)' : 'Call VENDUTA (OTM)';
  729. document.getElementById('buy-strike-lbl').textContent = isBullPut ? 'Put COMPRATA (piΓΉ bassa)' : 'Call COMPRATA (piΓΉ alta)';
  730. validateStrikesLive();
  731. calcPreview();
  732. }
  733.  
  734. // ─── LIVE STRIKE VALIDATION ───────────────────────────────────────────────────
  735. // PuΓ² essere chiamata senza parametri (aggiorna il DOM) o con valori giΓ  parsati
  736. // (usata da saveTrade per validare senza toccare il DOM state)
  737. function validateStrikesLive(sellVal, buyVal, typeVal) {
  738. const sell = sellVal !== undefined ? sellVal : parseFloat(document.getElementById('f-sell-strike').value);
  739. const buy = buyVal !== undefined ? buyVal : parseFloat(document.getElementById('f-buy-strike').value);
  740. const type = typeVal !== undefined ? typeVal : document.getElementById('spreadType').value;
  741. const buyEl = document.getElementById('f-buy-strike');
  742. const errEl = document.getElementById('strikeError');
  743.  
  744. // Se uno dei due campi Γ¨ vuoto/NaN β†’ nessun errore, lascia passare
  745. if (isNaN(sell) || isNaN(buy) || sell === 0 || buy === 0) {
  746. buyEl.classList.remove('input-error');
  747. errEl.style.display = 'none';
  748. return true;
  749. }
  750.  
  751. // Bull Put Spread: Put comprata DEVE essere INFERIORE alla Put venduta
  752. // Bear Call Spread: Call comprata DEVE essere SUPERIORE alla Call venduta
  753. const invalid = (type === 'bull_put' && buy >= sell) || (type === 'bear_call' && buy <= sell);
  754.  
  755. // Aggiorna il DOM solo se chiamata senza parametri (dalla UI)
  756. if (sellVal === undefined) {
  757. buyEl.classList.toggle('input-error', invalid);
  758. errEl.style.display = invalid ? 'block' : 'none';
  759. }
  760.  
  761. return !invalid;
  762. }
  763.  
  764. // ─── CALC PREVIEW ─────────────────────────────────────────────────────────────
  765. function calcPreview() {
  766. const prem = parseEU(document.getElementById('f-premium').value) || 0;
  767. const sell = parseEU(document.getElementById('f-sell-strike').value) || 0;
  768. const buy = parseEU(document.getElementById('f-buy-strike').value) || 0;
  769. const cont = parseInt(document.getElementById('f-contracts').value) || 1;
  770. const mult = parseEU(document.getElementById('f-multiplier').value) || 100;
  771. const broker = parseEU(document.getElementById('f-margin-broker').value) || 0;
  772. const fees = parseEU(document.getElementById('f-fees').value) || 0;
  773. if (!prem || !sell || !buy) return;
  774.  
  775. // 1) Max Profitto Netto = (premio Γ— molt Γ— cont) βˆ’ commissioni
  776. // Es: 0,26 Γ— 100 Γ— 5 = 130 βˆ’ 6,50 comm = 123,50
  777. const grossPremium = prem * mult * cont;
  778. const maxProfit = grossPremium - fees;
  779.  
  780. // 2) Stop Loss debit totale = premio Γ— 3 Γ— molt Γ— cont
  781. // Es: 0,26 Γ— 3 Γ— 100 Γ— 5 = 390,00
  782. const stopDebit = prem * 3 * mult * cont;
  783.  
  784. // 3) Max Perdita con SL = stopDebit + commissioni βˆ’ maxProfittoNetto
  785. // Es: 390 + 6,50 βˆ’ 123,50 = 273,00
  786. const maxLossWithSL = stopDebit + fees - maxProfit;
  787.  
  788. // 4) R/R = MaxPerditaSL / MaxProfittoNetto (quante volte rischio vs guadagno)
  789. // poi si toglie 1 per avere il rapporto puro
  790. // Es: 273 / 123,50 = 2,21 β†’ mostro "1 : 2,21"
  791. const rrRaw = maxLossWithSL > 0 && maxProfit > 0 ? (maxLossWithSL / maxProfit) : null;
  792. const rrStr = rrRaw !== null ? `1 : ${euFmt(rrRaw, 2)}` : 'β€”';
  793.  
  794. // 5) ROI = MaxProfittoNetto / margine broker Γ— 100
  795. const roi = broker > 0 ? euFmt((maxProfit / broker) * 100, 2) + '%' : 'β€”';
  796.  
  797. document.getElementById('cp-maxprofit').textContent = euCurr(maxProfit);
  798. document.getElementById('cp-maxloss').textContent = '-' + euCurr(maxLossWithSL);
  799. document.getElementById('cp-rr').textContent = rrStr;
  800. document.getElementById('cp-roi').textContent = roi;
  801. }
  802.  
  803. // ─── SAVE TRADE ───────────────────────────────────────────────────────────────
  804. function saveTrade() {
  805. const ticker = document.getElementById('f-ticker').value.trim().toUpperCase();
  806. const openDate = document.getElementById('f-open-date').value;
  807. const expiry = document.getElementById('f-expiry').value;
  808. const contracts = parseInt(document.getElementById('f-contracts').value) || 1;
  809. const mult = parseEU(document.getElementById('f-multiplier').value) || 100;
  810. const brokerMargin= parseEU(document.getElementById('f-margin-broker').value) || 0;
  811. const sellStr = parseEU(document.getElementById('f-sell-strike').value);
  812. const buyStr = parseEU(document.getElementById('f-buy-strike').value);
  813. const prem = parseEU(document.getElementById('f-premium').value);
  814. const fees = parseEU(document.getElementById('f-fees').value) || 0;
  815. const type = document.getElementById('spreadType').value;
  816. const assetType = document.getElementById('f-asset-type').value;
  817. const editId = document.getElementById('editId').value;
  818.  
  819. const alertEl = document.getElementById('formAlert');
  820. alertEl.className = 'alert';
  821.  
  822. if (!ticker || !openDate || !expiry || isNaN(sellStr) || isNaN(buyStr) || isNaN(prem)) {
  823. alertEl.textContent = '⚠ Compila tutti i campi obbligatori.';
  824. alertEl.className = 'alert error'; return;
  825. }
  826. if (prem <= 0) { alertEl.textContent = '⚠ Il premio deve essere > 0.'; alertEl.className = 'alert error'; return; }
  827. // Valida gli strike passando i valori giΓ  letti β€” nessuna dipendenza dal DOM state
  828. if (!validateStrikesLive(sellStr, buyStr, type)) {
  829. alertEl.textContent = '⚠ Strike non valido: per Bull Put la Put comprata deve essere inferiore. Per Bear Call la Call comprata deve essere superiore.';
  830. alertEl.className = 'alert error'; return;
  831. }
  832.  
  833. const spread = Math.abs(sellStr - buyStr);
  834. const spreadVal = spread * mult * contracts;
  835. const grossPremium = prem * mult * contracts;
  836. const maxProfit = grossPremium - fees; // netto commissioni
  837. const stopDebit = prem * 3 * mult * contracts; // SL debit
  838. const maxLoss = stopDebit + fees - maxProfit; // perdita effettiva con SL
  839. const stopLoss = stopDebit; // soglia debit da monitorare
  840. const margin = brokerMargin > 0 ? brokerMargin : spreadVal;
  841.  
  842. const trade = { id: editId ? parseInt(editId) : nextId++,
  843. ticker, type, assetType, openDate, expiry, contracts, multiplier: mult,
  844. sellStrike: sellStr, buyStrike: buyStr, spread, premium: prem, fees,
  845. brokerMargin, margin, maxProfit, maxLoss, stopLoss, status: 'open',
  846. closeDate: null, closePrice: null, closeFees: 0, pnl: null, closeReason: null };
  847.  
  848. if (editId) {
  849. const idx = trades.findIndex(t => t.id === parseInt(editId));
  850. if (idx > -1) { trade.status = trades[idx].status; trade.closeDate = trades[idx].closeDate;
  851. trade.closePrice = trades[idx].closePrice; trade.pnl = trades[idx].pnl;
  852. trade.closeFees = trades[idx].closeFees; trade.closeReason = trades[idx].closeReason;
  853. trades[idx] = trade; }
  854. } else { trades.unshift(trade); }
  855.  
  856. save();
  857. alertEl.textContent = editId ? 'βœ“ Trade aggiornato!' : 'βœ“ Trade salvato!';
  858. alertEl.className = 'alert success';
  859. setTimeout(() => alertEl.className = 'alert', 2500);
  860. resetForm();
  861. renderAll();
  862. }
  863.  
  864. // ─── RESET FORM ───────────────────────────────────────────────────────────────
  865. function resetForm() {
  866. ['f-ticker','f-sell-strike','f-buy-strike','f-premium','f-margin-broker'].forEach(id => document.getElementById(id).value = '');
  867. document.getElementById('f-contracts').value = 1;
  868. document.getElementById('f-fees').value = 0;
  869. document.getElementById('f-multiplier').value = 100;
  870. document.getElementById('f-asset-type').value = 'stock';
  871. document.getElementById('f-open-date').value = today();
  872. document.getElementById('f-expiry').value = '';
  873. document.getElementById('editId').value = '';
  874. document.getElementById('strikeError').style.display = 'none';
  875. document.getElementById('f-buy-strike').classList.remove('input-error');
  876. ['cp-maxprofit','cp-maxloss','cp-rr','cp-roi'].forEach(id => document.getElementById(id).textContent = 'β€”');
  877. }
  878.  
  879. // ─── EDIT TRADE ───────────────────────────────────────────────────────────────
  880. function editTrade(id) {
  881. const t = trades.find(x => x.id === id); if (!t) return;
  882. document.getElementById('editId').value = t.id;
  883. document.getElementById('f-ticker').value = t.ticker;
  884. document.getElementById('f-open-date').value = t.openDate;
  885. document.getElementById('f-expiry').value = t.expiry;
  886. document.getElementById('f-contracts').value = t.contracts;
  887. document.getElementById('f-multiplier').value = toField(t.multiplier || 100);
  888. document.getElementById('f-margin-broker').value = t.brokerMargin ? toField(t.brokerMargin) : '';
  889. document.getElementById('f-sell-strike').value = toField(t.sellStrike);
  890. document.getElementById('f-buy-strike').value = toField(t.buyStrike);
  891. document.getElementById('f-premium').value = toField(t.premium);
  892. document.getElementById('f-fees').value = toField(t.fees || 0);
  893. document.getElementById('spreadType').value = t.type;
  894. document.getElementById('f-asset-type').value = t.assetType || 'stock';
  895. document.querySelectorAll('.tab').forEach(tab => {
  896. tab.classList.toggle('active', (t.type === 'bull_put' && tab.textContent.includes('Bull')) || (t.type === 'bear_call' && tab.textContent.includes('Bear')));
  897. });
  898. validateStrikesLive();
  899. calcPreview();
  900. window.scrollTo({ top: 200, behavior: 'smooth' });
  901. }
  902.  
  903. // ─── DELETE TRADE ─────────────────────────────────────────────────────────────
  904. function deleteTrade(id) {
  905. if (!confirm('Eliminare questo trade?')) return;
  906. trades = trades.filter(t => t.id !== id);
  907. save(); renderAll();
  908. }
  909.  
  910. // ─── RIAPRI TRADE ─────────────────────────────────────────────────────────────
  911. function reopenTrade(id) {
  912. const t = trades.find(x => x.id === id);
  913. if (!t) return;
  914. const label = { closed:'Chiuso', stop:'Stop Loss', early:'Uscita Anticipata' }[t.status] || t.status;
  915. if (!confirm(`Riaprire questo trade?\n\nStato attuale: ${label}\nP&L registrato: ${t.pnl !== null ? '$'+t.pnl.toFixed(2) : 'β€”'}\n\nConfermando, il trade tornerΓ  "Aperto" e tutti i dati di chiusura saranno azzerati.`)) return;
  916. t.status = 'open';
  917. t.closeDate = null;
  918. t.closePrice = null;
  919. t.closeFees = 0;
  920. t.pnl = null;
  921. t.closeReason = null;
  922. save();
  923. renderAll();
  924. showToast('↩ Trade riaperto β€” ora puoi chiuderlo correttamente.', 'info');
  925. }
  926.  
  927. // ─── OPEN CLOSE MODAL ─────────────────────────────────────────────────────────
  928. function openModal() { window.scrollTo({ top: 200, behavior:'smooth'}); }
  929. function openCloseModal(id) {
  930. const t = trades.find(x => x.id === id); if (!t) return;
  931. const mult = t.multiplier || 100;
  932. const grossPremium = t.premium * mult * t.contracts;
  933. document.getElementById('close-trade-id').value = id;
  934. document.getElementById('close-date').value = today();
  935. document.getElementById('close-price').value = '0';
  936. document.getElementById('close-fees').value = '0';
  937. const prev = document.getElementById('closePreview');
  938. prev.innerHTML = `
  939. <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;font-size:13px;">
  940. <div><span style="color:var(--muted);font-size:10px;display:block;">TICKER / TIPO</span>
  941. <b>${t.ticker}</b> β€” ${t.type === 'bull_put' ? 'Bull Put' : 'Bear Call'}</div>
  942. <div><span style="color:var(--muted);font-size:10px;display:block;">PREMIO LORDO INCASSATO</span>
  943. <b style="color:var(--green)">${euCurr(grossPremium)}</b></div>
  944. <div><span style="color:var(--muted);font-size:10px;display:block;">STOP LOSS DEBIT SOGLIA</span>
  945. <b style="color:var(--red)">${euCurr(t.stopLoss)}</b> (riacquisto a ${euFmt(t.premium * 3, 4)})</div>
  946. <div><span style="color:var(--muted);font-size:10px;display:block;">COMM. APERTURA GIΓ€ PAGATE</span>
  947. <b>${euCurr(t.fees || 0)}</b></div>
  948. <div><span style="color:var(--muted);font-size:10px;display:block;">MOLTIPLICATORE</span>
  949. <b>${mult}</b></div>
  950. <div><span style="color:var(--muted);font-size:10px;display:block;">CONTRATTI</span>
  951. <b>${t.contracts}</b></div>
  952. </div>
  953. <div style="margin-top:10px;padding-top:8px;border-top:1px solid var(--border);font-size:11px;color:var(--muted);">
  954. P&amp;L = Premio lordo βˆ’ (Prezzo riacquisto Γ— ${mult} Γ— ${t.contracts}) βˆ’ Comm. apertura βˆ’ Comm. chiusura
  955. </div>`;
  956. document.getElementById('closeModal').classList.add('active');
  957. onClosePriceChange(); // imposta subito lo stato corretto del campo commissioni
  958. }
  959. function closeModal() { document.getElementById('closeModal').classList.remove('active'); }
  960.  
  961. function onClosePriceChange() {
  962. const price = parseEU(document.getElementById('close-price').value) || 0;
  963. const feesInput = document.getElementById('close-fees');
  964. const noteEl = document.getElementById('close-fees-note');
  965. if (price === 0) {
  966. // Scaduto a zero: nessun riacquisto β†’ nessuna commissione di chiusura
  967. feesInput.value = '0';
  968. feesInput.disabled = true;
  969. feesInput.style.opacity = '.4';
  970. feesInput.style.cursor = 'not-allowed';
  971. noteEl.textContent = 'βœ“ Scadenza β€” nessuna comm.';
  972. noteEl.style.color = 'var(--green)';
  973. } else {
  974. // Riacquisto attivo: commissioni di chiusura applicabili
  975. feesInput.disabled = false;
  976. feesInput.style.opacity = '1';
  977. feesInput.style.cursor = 'text';
  978. noteEl.textContent = '(riacquisto attivo)';
  979. noteEl.style.color = 'var(--muted)';
  980. }
  981. }
  982.  
  983. function confirmClose() {
  984. const id = parseInt(document.getElementById('close-trade-id').value);
  985. const closePrice = parseEU(document.getElementById('close-price').value) || 0;
  986. const closeDate = document.getElementById('close-date').value;
  987. const closeFees = parseEU(document.getElementById('close-fees').value) || 0;
  988. const reason = document.getElementById('close-reason').value;
  989. const t = trades.find(x => x.id === id); if (!t) return;
  990.  
  991. const mult = t.multiplier || 100;
  992.  
  993. // P&L = Premio lordo incassato βˆ’ debit pagato per riacquisto βˆ’ commissioni apertura βˆ’ commissioni chiusura
  994. const grossPremium = t.premium * mult * t.contracts;
  995. const buybackCost = closePrice * mult * t.contracts;
  996. const pnl = grossPremium - buybackCost - (t.fees || 0) - closeFees;
  997.  
  998. t.closeDate = closeDate;
  999. t.closePrice = closePrice;
  1000. t.closeFees = closeFees;
  1001. t.pnl = pnl;
  1002. t.status = reason;
  1003. t.closeReason = reason;
  1004. save(); renderAll(); closeModal();
  1005. showToast(`βœ” Trade chiuso β€” P&L: ${pnl >= 0 ? '+' : ''}${euCurr(pnl)}`, pnl >= 0 ? 'success' : 'error', 4000);
  1006. }
  1007.  
  1008. // ─── RENDER CARDS ─────────────────────────────────────────────────────────────
  1009. function renderTable() {
  1010. const filterSt = document.getElementById('filterStatus').value;
  1011. const filterTy = document.getElementById('filterType').value;
  1012. const list = document.getElementById('tradeList');
  1013. list.innerHTML = '';
  1014.  
  1015. const filtered = trades.filter(t =>
  1016. (filterSt === 'all' || t.status === filterSt) &&
  1017. (filterTy === 'all' || t.type === filterTy)
  1018. );
  1019.  
  1020. document.getElementById('noTrades').style.display = filtered.length ? 'none' : 'block';
  1021.  
  1022. const assetLabels = { stock:'Stock', etf:'ETF', future_index:'Future Index', future_mp:'Future M.P.', future_fx:'Future Valute' };
  1023. const statusLabel = { open:'● Aperto', closed:'βœ” Chiuso', stop:'βœ– Stop Loss', early:'↩ Uscita Anticipata' };
  1024. const statusColors = { open:'var(--green)', closed:'#777', stop:'var(--red)', early:'var(--yellow)' };
  1025.  
  1026. filtered.forEach((t, i) => {
  1027. const typeLabel = t.type === 'bull_put' ? 'Bull Put Spread' : 'Bear Call Spread';
  1028. const typeBadge = t.type === 'bull_put' ? 'badge-put' : 'badge-call';
  1029. const mult = t.multiplier || 100;
  1030. const statusCol = statusColors[t.status] || statusColors.open;
  1031. const stLabel = statusLabel[t.status] || t.status;
  1032.  
  1033. // P&L display
  1034. const hasPnl = t.pnl !== null;
  1035. const pnlColor = hasPnl ? (t.pnl >= 0 ? 'var(--green)' : 'var(--red)') : 'var(--muted)';
  1036. const pnlText = hasPnl ? `${t.pnl >= 0 ? '+' : ''}${euCurr(t.pnl)}` : 'Aperto';
  1037. // ROI atteso = Max Profitto Netto / Margine Broker (fisso, usato per decidere il trade)
  1038. const roiAtteso = (t.margin > 0 && t.maxProfit != null) ? euFmt((t.maxProfit / t.margin) * 100, 2) + '%' : 'β€”';
  1039. const roiColor = 'var(--green)'; // sempre verde: Γ¨ un dato atteso, non realizzato
  1040.  
  1041. list.innerHTML += `
  1042. <div class="trade-card status-${t.status}">
  1043. <!-- LEFT: ticker + badge + stato -->
  1044. <div class="tc-left">
  1045. <div class="tc-ticker">${t.ticker}</div>
  1046. <span class="badge ${typeBadge}" style="text-align:center">${t.type === 'bull_put' ? 'Bull Put' : 'Bear Call'}</span>
  1047. <div class="tc-asset">${assetLabels[t.assetType] || 'β€”'}</div>
  1048. <div style="font-size:11px;font-weight:700;color:${statusCol};margin-top:2px;">${stLabel}</div>
  1049. </div>
  1050.  
  1051. <!-- MID: tutti i dati in griglia -->
  1052. <div style="display:flex;flex-direction:column;gap:10px;">
  1053. <div class="tc-mid">
  1054. <div class="tc-field"><span>Strike Venduto</span><strong>${euCurr(t.sellStrike)}</strong></div>
  1055. <div class="tc-field"><span>Strike Comprato</span><strong>${euCurr(t.buyStrike)}</strong></div>
  1056. <div class="tc-field"><span>Contratti Γ— Molt.</span><strong>${t.contracts} Γ— ${mult}</strong></div>
  1057. <div class="tc-field"><span>Premio Lordo</span><strong class="green">${euCurr(t.premium * mult * t.contracts)}</strong></div>
  1058. <div class="tc-field"><span>Commissioni</span><strong>${euCurr(t.fees||0)}</strong></div>
  1059. <div class="tc-field"><span>Max Profitto Netto</span><strong class="green">${euCurr(t.maxProfit)}</strong></div>
  1060. <div class="tc-field"><span>Stop Loss Debit</span><strong class="red">${euCurr(t.stopLoss)}</strong></div>
  1061. <div class="tc-field"><span>Max Perdita (con SL)</span><strong class="red">-${euCurr(t.maxLoss)}</strong></div>
  1062. <div class="tc-field"><span>Margine Broker</span><strong class="yellow">${euCurr(t.margin)}</strong></div>
  1063. <div class="tc-field"><span>R/R Ratio</span><strong>${t.maxProfit > 0 && t.maxLoss > 0 ? '1 : ' + euFmt(t.maxLoss/t.maxProfit, 2) : 'β€”'}</strong></div>
  1064. </div>
  1065. <div class="tc-divider"></div>
  1066. <div class="tc-dates">
  1067. <div class="tc-field"><span>Apertura</span><strong>${t.openDate}</strong></div>
  1068. <div class="tc-field"><span>Scadenza</span><strong>${t.expiry}</strong></div>
  1069. ${t.closeDate ? `<div class="tc-field"><span>Chiusura</span><strong>${t.closeDate}</strong></div>` : ''}
  1070. ${t.closePrice !== null && t.closePrice !== undefined ? `<div class="tc-field"><span>Prezzo Chiusura</span><strong>$${parseFloat(t.closePrice).toFixed(2)}</strong></div>` : ''}
  1071. </div>
  1072. </div>
  1073.  
  1074. <!-- RIGHT: P&L + ROI + azioni -->
  1075. <div class="tc-right">
  1076. <div class="tc-pnl" style="color:${pnlColor}">${pnlText}</div>
  1077. <div class="tc-roi" style="color:${roiColor}">ROI atteso ${roiAtteso}</div>
  1078. <div class="tc-actions">
  1079. ${t.status === 'open'
  1080. ? `<button class="btn btn-success btn-sm" onclick="openCloseModal(${t.id})">πŸ“Œ Chiudi</button>`
  1081. : `<button class="btn btn-sm" style="background:rgba(249,199,79,.15);border:1px solid var(--yellow);color:var(--yellow);" onclick="reopenTrade(${t.id})">↩ Riapri</button>`
  1082. }
  1083. <button class="btn btn-outline btn-sm" onclick="editTrade(${t.id})">✏ Modifica</button>
  1084. <button class="btn btn-danger btn-sm" onclick="deleteTrade(${t.id})">πŸ—‘</button>
  1085. </div>
  1086. </div>
  1087. </div>`;
  1088. });
  1089. }
  1090.  
  1091. // ─── RENDER KPIs ──────────────────────────────────────────────────────────────
  1092. function renderKPIs() {
  1093. const open = trades.filter(t => t.status === 'open');
  1094. const closed = trades.filter(t => t.status !== 'open');
  1095. const all = trades; // tutti: aperti + chiusi
  1096.  
  1097. // ── Margine impiegato = somma margine broker posizioni APERTE
  1098. const margineImpiegato = open.reduce((s, t) => s + (t.margin || 0), 0);
  1099.  
  1100. // ── P&L Realizzato
  1101. const totalPnl = closed.reduce((s, t) => s + (t.pnl || 0), 0);
  1102.  
  1103. // ── Win Rate: chiusi in profitto (scadenza + uscita anticipata in profitto)
  1104. const winsAll = closed.filter(t => (t.pnl || 0) > 0);
  1105. const wr = closed.length > 0 ? ((winsAll.length / closed.length) * 100).toFixed(1) : 0;
  1106.  
  1107. // ── Dettaglio Win Rate per categoria
  1108. const nExp = closed.filter(t => t.status === 'closed').length;
  1109. const nEarly = closed.filter(t => t.status === 'early').length;
  1110. const nStop = closed.filter(t => t.status === 'stop').length;
  1111. const tot = closed.length || 1;
  1112. const pct = n => ((n / tot) * 100).toFixed(1);
  1113.  
  1114. // ── ROI medio atteso = media semplice del ROI atteso di TUTTI i trade (aperti + chiusi)
  1115. // ROI atteso = maxProfit / margin Γ— 100 (giΓ  calcolato al momento del salvataggio)
  1116. const roiArr = all.filter(t => t.margin > 0 && t.maxProfit != null)
  1117. .map(t => (t.maxProfit / t.margin) * 100);
  1118. const roiAvg = roiArr.length > 0 ? (roiArr.reduce((a,b)=>a+b,0) / roiArr.length) : 0;
  1119.  
  1120. // ── AVERAGE box: medie su tutti i trade (aperti + chiusi)
  1121. const avg = (arr, fn) => arr.length > 0 ? arr.reduce((s,t)=>s+(fn(t)||0),0)/arr.length : null;
  1122.  
  1123. const avgProfit = avg(all, t => t.maxProfit);
  1124. const avgLoss = avg(all, t => t.maxLoss);
  1125. const avgMargin = avg(all, t => t.margin);
  1126. // R/R per ogni trade = maxLoss / maxProfit
  1127. const rrArr = all.filter(t => t.maxProfit > 0 && t.maxLoss > 0).map(t => t.maxLoss / t.maxProfit);
  1128. const avgRR = rrArr.length > 0 ? rrArr.reduce((a,b)=>a+b,0)/rrArr.length : null;
  1129.  
  1130. // ── Aggiorno il DOM
  1131. document.getElementById('k-open').textContent = open.length;
  1132. document.getElementById('k-margin').textContent = euCurr(margineImpiegato);
  1133. document.getElementById('k-margin').className = 'val yellow';
  1134.  
  1135. document.getElementById('k-pnl').textContent = `${totalPnl >= 0 ? '+' : ''}${euCurr(totalPnl)}`;
  1136. document.getElementById('k-pnl').className = `val ${totalPnl >= 0 ? 'green' : 'red'}`;
  1137.  
  1138. document.getElementById('k-wr').textContent = euFmt(parseFloat(wr), 1) + '%';
  1139. document.getElementById('k-wr').className = `val ${parseFloat(wr) >= 50 ? 'green' : 'red'}`;
  1140. document.getElementById('k-wr-sub').textContent = `${winsAll.length} win / ${closed.length} chiusi`;
  1141.  
  1142. document.getElementById('k-wr-exp').textContent = `${nExp} (${pct(nExp)}%)`;
  1143. document.getElementById('k-wr-early').textContent = `${nEarly} (${pct(nEarly)}%)`;
  1144. document.getElementById('k-wr-stop').textContent = `${nStop} (${pct(nStop)}%)`;
  1145.  
  1146. document.getElementById('k-roi-avg').textContent = euFmt(roiAvg, 2) + '%';
  1147. document.getElementById('k-roi-avg').className = `val ${roiAvg >= 0 ? 'green' : 'red'}`;
  1148.  
  1149. document.getElementById('k-avg-profit').textContent = avgProfit !== null ? euCurr(avgProfit) : 'β€”';
  1150. document.getElementById('k-avg-loss').textContent = avgLoss !== null ? euCurr(avgLoss) : 'β€”';
  1151. document.getElementById('k-avg-margin').textContent = avgMargin !== null ? euCurr(avgMargin) : 'β€”';
  1152. document.getElementById('k-avg-rr').textContent = avgRR !== null ? '1 : ' + euFmt(avgRR, 2) : 'β€”';
  1153. }
  1154.  
  1155. function renderAll() { renderKPIs(); renderTable(); if(document.getElementById('page-analytics').classList.contains('active')) renderAnalytics(); }
  1156.  
  1157. // ─── PAGE NAVIGATION ──────────────────────────────────────────────────────────
  1158. function showPage(id, btn) {
  1159. document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
  1160. document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
  1161. document.getElementById('page-' + id).classList.add('active');
  1162. btn.classList.add('active');
  1163. if (id === 'analytics') renderAnalytics();
  1164. }
  1165.  
  1166. // ─── CHART DEFAULTS ───────────────────────────────────────────────────────────
  1167. const C = { green:'#00d395', red:'#ff4d6d', accent:'#6c63ff', yellow:'#f9c74f',
  1168. blue:'#4cc9f0', orange:'#f77f00', purple:'#b5179e', muted:'#8892b0',
  1169. surface2:'#22263a', border:'#2e3250', text:'#e2e8f0' };
  1170.  
  1171. Chart.defaults.color = C.muted;
  1172. Chart.defaults.borderColor = C.border;
  1173. Chart.defaults.font.family = "'Segoe UI', sans-serif";
  1174. Chart.defaults.font.size = 12;
  1175.  
  1176. let charts = {};
  1177. function destroyChart(id) { if(charts[id]) { charts[id].destroy(); delete charts[id]; } }
  1178.  
  1179. function noData(canvasId, ndId, show) {
  1180. document.getElementById(canvasId).style.display = show ? 'none' : 'block';
  1181. document.getElementById(ndId).style.display = show ? 'flex' : 'none';
  1182. }
  1183.  
  1184. // ─── ANALYTICS STATE ──────────────────────────────────────────────────────────
  1185. let eqFilter = 'all';
  1186.  
  1187. function setEqFilter(f, btn) {
  1188. eqFilter = f;
  1189. document.querySelectorAll('.eq-btn').forEach(b => b.classList.remove('active'));
  1190. btn.classList.add('active');
  1191. const closed = getFilteredClosed();
  1192. renderEquityCurve(closed);
  1193. }
  1194.  
  1195. function getFilteredClosed() {
  1196. const all = trades.filter(t => t.status !== 'open' && t.pnl !== null)
  1197. .sort((a,b) => new Date(a.closeDate) - new Date(b.closeDate));
  1198. if (eqFilter === 'all') return all;
  1199. const now = new Date();
  1200. const ms = { '1m':30, '3m':90, '6m':180, '1y':365 }[eqFilter] * 86400000;
  1201. return all.filter(t => t.closeDate && (now - new Date(t.closeDate)) <= ms);
  1202. }
  1203.  
  1204. // ─── ANALYTICS MASTER RENDER ──────────────────────────────────────────────────
  1205. function renderAnalytics() {
  1206. const allClosed = trades.filter(t => t.status !== 'open' && t.pnl !== null)
  1207. .sort((a,b) => new Date(a.closeDate) - new Date(b.closeDate));
  1208. const filtered = getFilteredClosed();
  1209.  
  1210. renderAnalyticsKPIs(allClosed);
  1211. renderEquityCurve(filtered);
  1212. renderMonthlyPnl(allClosed);
  1213. renderDrawdown(allClosed);
  1214. renderDonut(allClosed);
  1215. renderHolding(allClosed);
  1216. renderAssetType(allClosed);
  1217. renderTypeComp(allClosed);
  1218. renderPnlBar(allClosed);
  1219. renderExpiryCalendar();
  1220. renderStatsTable(allClosed);
  1221. }
  1222.  
  1223. // ─── ANALYTICS KPIs ───────────────────────────────────────────────────────────
  1224. function renderAnalyticsKPIs(closed) {
  1225. const totalPnl = closed.reduce((s,t)=>s+(t.pnl||0),0);
  1226. const wins = closed.filter(t=>t.pnl>0);
  1227. const losses = closed.filter(t=>t.pnl<=0);
  1228. const grossWin = wins.reduce((s,t)=>s+t.pnl,0);
  1229. const grossLoss = Math.abs(losses.reduce((s,t)=>s+t.pnl,0));
  1230. const pf = grossLoss>0 ? euFmt(grossWin/grossLoss,2) : wins.length>0 ? '∞' : 'β€”';
  1231. const avgWin = wins.length>0 ? wins.reduce((s,t)=>s+t.pnl,0)/wins.length : 0;
  1232. const avgLoss = losses.length>0 ? Math.abs(losses.reduce((s,t)=>s+t.pnl,0)/losses.length) : 0;
  1233. const avgWL = avgLoss>0 ? euFmt(avgWin/avgLoss,2) : avgWin>0 ? '∞' : 'β€”';
  1234. let peak=0, dd=0, cumul=0;
  1235. closed.forEach(t=>{ cumul+=t.pnl; if(cumul>peak) peak=cumul; const d=peak-cumul; if(d>dd) dd=d; });
  1236.  
  1237. document.getElementById('an-equity').textContent = (totalPnl>=0?'+':'')+euCurr(totalPnl);
  1238. document.getElementById('an-equity').className = `val ${totalPnl>=0?'green':'red'}`;
  1239. document.getElementById('an-equity-sub').textContent = `su ${closed.length} trade chiusi`;
  1240. document.getElementById('an-pf').textContent = pf;
  1241. document.getElementById('an-pf').className = `val ${parseFloat(String(pf).replace(',','.'))>=1?'green':'red'}`;
  1242. document.getElementById('an-dd').textContent = '-'+euCurr(dd);
  1243. document.getElementById('an-avgwl').textContent = avgWL;
  1244. document.getElementById('an-avgwl').className = `val ${parseFloat(String(avgWL).replace(',','.'))>=1?'green':'red'}`;
  1245. }
  1246.  
  1247. // ─── EQUITY CURVE (con filtro temporale) ──────────────────────────────────────
  1248. function renderEquityCurve(closed) {
  1249. destroyChart('equity');
  1250. if (!closed.length) { noData('chartEquity','nd-equity',true); return; }
  1251. noData('chartEquity','nd-equity',false);
  1252. let cum=0;
  1253. const labels = closed.map(t=>t.closeDate||t.openDate);
  1254. const data = closed.map(t=>{ cum+=t.pnl; return parseFloat(cum.toFixed(2)); });
  1255. const ptColors = data.map(v=>v>=0?C.green:C.red);
  1256. charts.equity = new Chart(document.getElementById('chartEquity'),{
  1257. type:'line',
  1258. data:{ labels, datasets:[{
  1259. label:'Equity ($)', data,
  1260. borderColor:C.accent, borderWidth:2.5,
  1261. pointBackgroundColor:ptColors, pointBorderColor:ptColors,
  1262. pointRadius:4, pointHoverRadius:7,
  1263. fill:true,
  1264. backgroundColor:(ctx)=>{
  1265. const g=ctx.chart.ctx.createLinearGradient(0,0,0,260);
  1266. g.addColorStop(0,'rgba(108,99,255,0.3)');
  1267. g.addColorStop(1,'rgba(108,99,255,0.01)');
  1268. return g;
  1269. }, tension:0.3
  1270. }]},
  1271. options:{ responsive:true, plugins:{ legend:{display:false},
  1272. tooltip:{ callbacks:{
  1273. title: ctx => `Data: ${ctx[0].label}`,
  1274. label: c => `Equity cumulativa: ${euCurr(c.raw)}`
  1275. }}},
  1276. scales:{
  1277. x:{ ticks:{maxRotation:45,font:{size:10}}, grid:{color:C.border} },
  1278. y:{ ticks:{callback:v=>euCurr(v)}, grid:{color:C.border} }
  1279. }}
  1280. });
  1281. }
  1282.  
  1283. // ─── MONTHLY P&L ──────────────────────────────────────────────────────────────
  1284. function renderMonthlyPnl(closed) {
  1285. destroyChart('monthly');
  1286. const wd=closed.filter(t=>t.closeDate);
  1287. if (!wd.length) { noData('chartMonthly','nd-monthly',true); return; }
  1288. noData('chartMonthly','nd-monthly',false);
  1289. const map={};
  1290. wd.forEach(t=>{ const k=t.closeDate.substring(0,7); map[k]=(map[k]||0)+t.pnl; });
  1291. const sorted=Object.entries(map).sort((a,b)=>a[0].localeCompare(b[0]));
  1292. // Etichette leggibili: "Gen 25" etc.
  1293. const monthNames=['Gen','Feb','Mar','Apr','Mag','Giu','Lug','Ago','Set','Ott','Nov','Dic'];
  1294. const labels=sorted.map(([k])=>{ const [y,m]=k.split('-'); return `${monthNames[parseInt(m)-1]} '${y.slice(2)}`; });
  1295. const data=sorted.map(e=>parseFloat(e[1].toFixed(2)));
  1296. charts.monthly = new Chart(document.getElementById('chartMonthly'),{
  1297. type:'bar',
  1298. data:{ labels, datasets:[{ label:'P&L Mensile', data,
  1299. backgroundColor:data.map(v=>v>=0?'rgba(0,211,149,0.75)':'rgba(255,77,109,0.75)'),
  1300. borderColor:data.map(v=>v>=0?C.green:C.red),
  1301. borderWidth:1.5, borderRadius:5 }]},
  1302. options:{ responsive:true, plugins:{ legend:{display:false},
  1303. tooltip:{callbacks:{label:c=>`P&L: ${euCurr(c.raw)}`}}},
  1304. scales:{ x:{grid:{color:C.border}}, y:{ticks:{callback:v=>euCurr(v)},grid:{color:C.border}} }}
  1305. });
  1306. }
  1307.  
  1308. // ─── DRAWDOWN ─────────────────────────────────────────────────────────────────
  1309. function renderDrawdown(closed) {
  1310. destroyChart('drawdown');
  1311. if (!closed.length) { noData('chartDrawdown','nd-drawdown',true); return; }
  1312. noData('chartDrawdown','nd-drawdown',false);
  1313. let peak=0, cum=0;
  1314. const labels=closed.map(t=>t.closeDate||t.openDate);
  1315. const data=closed.map(t=>{ cum+=t.pnl; if(cum>peak) peak=cum; return parseFloat((-(peak-cum)).toFixed(2)); });
  1316. charts.drawdown = new Chart(document.getElementById('chartDrawdown'),{
  1317. type:'line',
  1318. data:{ labels, datasets:[{ label:'Drawdown ($)', data,
  1319. borderColor:C.red, borderWidth:2,
  1320. pointRadius:3, pointBackgroundColor:C.red,
  1321. fill:true,
  1322. backgroundColor:'rgba(255,77,109,0.12)',
  1323. tension:0.3 }]},
  1324. options:{ responsive:true, plugins:{ legend:{display:false},
  1325. tooltip:{callbacks:{label:c=>`DD: ${euCurr(c.raw)}`}}},
  1326. scales:{
  1327. x:{ticks:{maxRotation:45,font:{size:10}},grid:{color:C.border}},
  1328. y:{ticks:{callback:v=>euCurr(v)},grid:{color:C.border}}
  1329. }}
  1330. });
  1331. }
  1332.  
  1333. // ─── DONUT ESITI ──────────────────────────────────────────────────────────────
  1334. function renderDonut(closed) {
  1335. destroyChart('donut');
  1336. if (!closed.length) { noData('chartDonut','nd-donut',true); return; }
  1337. noData('chartDonut','nd-donut',false);
  1338. const exp =closed.filter(t=>t.status==='closed').length;
  1339. const stops=closed.filter(t=>t.status==='stop').length;
  1340. const early=closed.filter(t=>t.status==='early').length;
  1341. charts.donut = new Chart(document.getElementById('chartDonut'),{
  1342. type:'doughnut',
  1343. data:{ labels:['βœ… Scadenza','πŸ›‘ Stop Loss','↩ Uscita Ant.'],
  1344. datasets:[{ data:[exp,stops,early],
  1345. backgroundColor:[C.green,C.red,C.yellow],
  1346. borderColor:C.surface2, borderWidth:3, hoverOffset:10 }]},
  1347. options:{ responsive:true, cutout:'65%',
  1348. plugins:{ legend:{position:'bottom',labels:{padding:14,usePointStyle:true,font:{size:11}}},
  1349. tooltip:{callbacks:{label:c=>`${c.label}: ${c.raw} (${closed.length>0?(c.raw/closed.length*100).toFixed(1):0}%)`}}
  1350. }}
  1351. });
  1352. }
  1353.  
  1354. // ─── HOLDING PERIOD ───────────────────────────────────────────────────────────
  1355. function renderHolding(closed) {
  1356. destroyChart('holding');
  1357. const wd=closed.filter(t=>t.closeDate&&t.openDate);
  1358. if (!wd.length) { noData('chartHolding','nd-holding',true); return; }
  1359. noData('chartHolding','nd-holding',false);
  1360. const b={'≀5gg':0,'6-14gg':0,'15-30gg':0,'31-60gg':0,'61-90gg':0,'90+gg':0};
  1361. wd.forEach(t=>{
  1362. const d=Math.round((new Date(t.closeDate)-new Date(t.openDate))/86400000);
  1363. if(d<=5) b['≀5gg']++; else if(d<=14) b['6-14gg']++; else if(d<=30) b['15-30gg']++;
  1364. else if(d<=60) b['31-60gg']++; else if(d<=90) b['61-90gg']++; else b['90+gg']++;
  1365. });
  1366. const pal=[C.accent,'#7c75ff',C.blue,'#74b9ff',C.yellow,C.orange];
  1367. charts.holding = new Chart(document.getElementById('chartHolding'),{
  1368. type:'bar',
  1369. data:{ labels:Object.keys(b),
  1370. datasets:[{ label:'NΒ° Trade', data:Object.values(b),
  1371. backgroundColor:pal, borderColor:pal, borderWidth:1.5, borderRadius:5 }]},
  1372. options:{ responsive:true, plugins:{legend:{display:false},
  1373. tooltip:{callbacks:{label:c=>`${c.raw} trade`}}},
  1374. scales:{ x:{grid:{color:C.border}},
  1375. y:{ticks:{stepSize:1,callback:v=>Number.isInteger(v)?v:''},grid:{color:C.border}} }}
  1376. });
  1377. }
  1378.  
  1379. // ─── P&L PER TIPO STRUMENTO ───────────────────────────────────────────────────
  1380. function renderAssetType(closed) {
  1381. destroyChart('asset');
  1382. if (!closed.length) { noData('chartAsset','nd-asset',true); return; }
  1383. noData('chartAsset','nd-asset',false);
  1384. const labels={'stock':'Stock','etf':'ETF','future_index':'Future Index','future_mp':'Future M.P.','future_fx':'Future Valute'};
  1385. const map={};
  1386. closed.forEach(t=>{ const k=labels[t.assetType]||t.assetType||'Altro'; map[k]=(map[k]||0)+t.pnl; });
  1387. const sorted=Object.entries(map).sort((a,b)=>b[1]-a[1]);
  1388. const pal=['rgba(108,99,255,0.8)','rgba(76,201,240,0.8)','rgba(249,199,79,0.8)','rgba(0,211,149,0.8)','rgba(255,77,109,0.8)'];
  1389. charts.asset = new Chart(document.getElementById('chartAsset'),{
  1390. type:'bar',
  1391. data:{ labels:sorted.map(e=>e[0]),
  1392. datasets:[{ label:'P&L ($)', data:sorted.map(e=>parseFloat(e[1].toFixed(2))),
  1393. backgroundColor:sorted.map((e,i)=>e[1]>=0?pal[i%pal.length]:'rgba(255,77,109,0.75)'),
  1394. borderRadius:6, borderWidth:1.5 }]},
  1395. options:{ responsive:true, plugins:{legend:{display:false},
  1396. tooltip:{callbacks:{label:c=>`P&L: ${euCurr(c.raw)}`}}},
  1397. scales:{ x:{grid:{color:C.border}}, y:{ticks:{callback:v=>euCurr(v)},grid:{color:C.border}} }}
  1398. });
  1399. }
  1400.  
  1401. // ─── BULL PUT vs BEAR CALL ────────────────────────────────────────────────────
  1402. function renderTypeComp(closed) {
  1403. destroyChart('typeComp');
  1404. if (!closed.length) { noData('chartTypeComp','nd-type',true); return; }
  1405. noData('chartTypeComp','nd-type',false);
  1406. const bp=closed.filter(t=>t.type==='bull_put');
  1407. const bc=closed.filter(t=>t.type==='bear_call');
  1408. const avgPnl=arr=>arr.length>0?arr.reduce((s,t)=>s+t.pnl,0)/arr.length:0;
  1409. const wr=arr=>arr.length>0?arr.filter(t=>t.pnl>0).length/arr.length*100:0;
  1410. charts.typeComp = new Chart(document.getElementById('chartTypeComp'),{
  1411. type:'bar',
  1412. data:{ labels:['Bull Put Spread','Bear Call Spread'],
  1413. datasets:[
  1414. { label:'Avg P&L ($)', data:[parseFloat(avgPnl(bp).toFixed(2)),parseFloat(avgPnl(bc).toFixed(2))],
  1415. backgroundColor:['rgba(249,199,79,0.75)','rgba(108,99,255,0.75)'],
  1416. borderColor:[C.yellow,C.accent], borderWidth:1.5, borderRadius:6, yAxisID:'y' },
  1417. { label:'Win Rate (%)', data:[parseFloat(wr(bp).toFixed(1)),parseFloat(wr(bc).toFixed(1))],
  1418. type:'line', yAxisID:'y2', tension:0.3,
  1419. borderColor:C.green, borderWidth:2.5,
  1420. pointBackgroundColor:C.green, pointRadius:7, pointHoverRadius:10,
  1421. backgroundColor:'transparent' }
  1422. ]},
  1423. options:{ responsive:true,
  1424. plugins:{legend:{position:'bottom',labels:{usePointStyle:true,padding:14}}},
  1425. scales:{
  1426. y:{position:'left',ticks:{callback:v=>euCurr(v)},grid:{color:C.border}},
  1427. y2:{position:'right',min:0,max:100,ticks:{callback:v=>v+'%'},grid:{drawOnChartArea:false}}
  1428. }}
  1429. });
  1430. }
  1431.  
  1432. // ─── P&L REALIZZATO PER TRADE (barre) ─────────────────────────────────────────
  1433. function renderPnlBar(closed) {
  1434. destroyChart('pnlbar');
  1435. if (!closed.length) { noData('chartPnlBar','nd-pnlbar',true); return; }
  1436. noData('chartPnlBar','nd-pnlbar',false);
  1437. const labels=closed.map((t,i)=>`#${i+1} ${t.closeDate||''}`);
  1438. const data=closed.map(t=>parseFloat(t.pnl.toFixed(2)));
  1439. charts.pnlbar = new Chart(document.getElementById('chartPnlBar'),{
  1440. type:'bar',
  1441. data:{ labels, datasets:[{ label:'P&L ($)', data,
  1442. backgroundColor:data.map(v=>v>=0?'rgba(0,211,149,0.75)':'rgba(255,77,109,0.75)'),
  1443. borderColor:data.map(v=>v>=0?C.green:C.red),
  1444. borderWidth:1.5, borderRadius:5 }]},
  1445. options:{ responsive:true, plugins:{legend:{display:false},
  1446. tooltip:{callbacks:{label:c=>`P&L: ${euCurr(c.raw)}`}}},
  1447. scales:{ x:{ticks:{maxRotation:45,font:{size:10}},grid:{color:C.border}},
  1448. y:{ticks:{callback:v=>euCurr(v)},grid:{color:C.border}} }}
  1449. });
  1450. }
  1451.  
  1452. // ─── CALENDARIO SCADENZE AVANZATO ─────────────────────────────────────────────
  1453. let calYearFilter = 'all';
  1454. function setCalYear(yr, btn) {
  1455. calYearFilter = yr;
  1456. document.querySelectorAll('.cal-yr-btn').forEach(b=>b.classList.remove('active'));
  1457. btn.classList.add('active');
  1458. renderExpiryCalendar();
  1459. }
  1460.  
  1461. function renderExpiryCalendar() {
  1462. const el = document.getElementById('expiryCalendar');
  1463. const kpiEl = document.getElementById('calSummaryKpis');
  1464. const filterEl = document.getElementById('calYearFilter');
  1465. if (!trades.length) { el.innerHTML='<div class="no-data-chart" style="height:80px"><span>πŸ“…</span>Nessun trade inserito</div>'; kpiEl.innerHTML=''; filterEl.innerHTML=''; return; }
  1466.  
  1467. const now = new Date();
  1468. const today = now.toISOString().split('T')[0];
  1469.  
  1470. // Collect years for filter
  1471. const years = [...new Set(trades.filter(t=>t.expiry).map(t=>t.expiry.substring(0,4)))].sort();
  1472. filterEl.innerHTML = `<button class="cal-yr-btn ${calYearFilter==='all'?'active':''}" onclick="setCalYear('all',this)">Tutti</button>` +
  1473. years.map(y=>`<button class="cal-yr-btn ${calYearFilter===y?'active':''}" onclick="setCalYear('${y}',this)">${y}</button>`).join('');
  1474.  
  1475. // Filter trades
  1476. const filtered = trades.filter(t => t.expiry && (calYearFilter==='all' || t.expiry.startsWith(calYearFilter)));
  1477.  
  1478. // Group by YYYY-MM
  1479. const map = {};
  1480. filtered.forEach(t => { const k=t.expiry.substring(0,7); if(!map[k]) map[k]=[]; map[k].push(t); });
  1481. const sorted = Object.entries(map).sort((a,b)=>a[0].localeCompare(b[0]));
  1482.  
  1483. // Summary KPIs
  1484. const totalExp = filtered.length;
  1485. const openExp = filtered.filter(t=>t.status==='open').length;
  1486. const closedExp = totalExp - openExp;
  1487. const totalPremium = filtered.reduce((s,t)=>s+t.premium*(t.multiplier||100)*t.contracts,0);
  1488. const closedPnl = filtered.filter(t=>t.status!=='open'&&t.pnl!=null).reduce((s,t)=>s+t.pnl,0);
  1489. const winCount = filtered.filter(t=>t.status!=='open'&&t.pnl>0).length;
  1490. const wr = closedExp>0 ? (winCount/closedExp*100).toFixed(1) : 'β€”';
  1491.  
  1492. kpiEl.innerHTML = `
  1493. <div class="kpi"><label>Scadenze Totali</label><div class="val">${totalExp}</div><div class="sub">${openExp} aperte Β· ${closedExp} chiuse</div></div>
  1494. <div class="kpi"><label>Win Rate</label><div class="val ${closedExp>0&&winCount/closedExp>=.5?'green':'red'}">${wr}%</div><div class="sub">${winCount} vinti su ${closedExp} chiusi</div></div>
  1495. <div class="kpi"><label>Premio Lordo</label><div class="val yellow">${euCurr(totalPremium)}</div><div class="sub">premio totale incassato</div></div>
  1496. <div class="kpi"><label>P&L Realizzato</label><div class="val ${closedPnl>=0?'green':'red'}">${(closedPnl>=0?'+':'')+euCurr(closedPnl)}</div><div class="sub">sui trade chiusi</div></div>`;
  1497.  
  1498. const monthNames=['Gen','Feb','Mar','Apr','Mag','Giu','Lug','Ago','Set','Ott','Nov','Dic'];
  1499. const assetShort={'stock':'STK','etf':'ETF','future_index':'IDX','future_mp':'MP','future_fx':'FX'};
  1500. const typeShort={'bull_put':'BP','bear_call':'BC'};
  1501. const typeColors={'bull_put':'var(--green)','bear_call':'var(--red)'};
  1502. const outcomeLabels={closed:'Scadenza',stop:'Stop Loss',early:'Uscita Ant.'};
  1503. const outcomeColors={closed:'rgba(142,142,142,.2)',stop:'rgba(255,71,87,.2)',early:'rgba(255,214,10,.2)'};
  1504. const outcomeFg={closed:'#999',stop:'var(--red)',early:'var(--yellow)'};
  1505.  
  1506. // Find max month pnl for bar scaling
  1507. const monthPnls = sorted.map(([,ts])=> {
  1508. const c=ts.filter(t=>t.status!=='open'&&t.pnl!=null);
  1509. return c.reduce((s,t)=>s+t.pnl,0);
  1510. });
  1511. const maxAbsPnl = Math.max(...monthPnls.map(Math.abs), 1);
  1512.  
  1513. el.innerHTML = `<div class="cal-grid">${sorted.map(([ym, ts], idx) => {
  1514. const [y,m] = ym.split('-');
  1515. const mi = parseInt(m)-1;
  1516. const monthLabel = `${monthNames[mi]} ${y}`;
  1517. const isPast = ym < today.substring(0,7);
  1518. const isCur = ym === today.substring(0,7);
  1519. const openC = ts.filter(t=>t.status==='open').length;
  1520. const closedC = ts.filter(t=>t.status!=='open').length;
  1521.  
  1522. // Type breakdown
  1523. const bpCount = ts.filter(t=>t.type==='bull_put').length;
  1524. const bcCount = ts.filter(t=>t.type==='bear_call').length;
  1525. const total = ts.length;
  1526. const bpPct = total>0 ? (bpCount/total*100).toFixed(0) : 0;
  1527. const bcPct = total>0 ? (bcCount/total*100).toFixed(0) : 0;
  1528.  
  1529. // Outcome breakdown (closed only)
  1530. const closedTrades = ts.filter(t=>t.status!=='open');
  1531. const outcomes = {};
  1532. closedTrades.forEach(t=>{ outcomes[t.status]=(outcomes[t.status]||0)+1; });
  1533.  
  1534. // P&L for month
  1535. const mPnl = closedTrades.filter(t=>t.pnl!=null).reduce((s,t)=>s+t.pnl,0);
  1536. const pnlPct = Math.min(Math.abs(mPnl)/maxAbsPnl*100, 100);
  1537. const pnlColor = mPnl>=0 ? 'var(--green)' : 'var(--red)';
  1538.  
  1539. // Contracts total
  1540. const totalContracts = ts.reduce((s,t)=>s+t.contracts,0);
  1541.  
  1542. // Trade rows
  1543. const rows = ts.sort((a,b)=>a.expiry.localeCompare(b.expiry)).map(t => {
  1544. const dte = Math.ceil((new Date(t.expiry)-now)/86400000);
  1545. const isSoon = dte>=0 && dte<=7 && t.status==='open';
  1546. const isExp = t.expiry < today;
  1547. const rc = isExp&&t.status!=='open' ? 'cal-past' : isSoon ? 'cal-soon' : '';
  1548. const dot = {open:'<span style="color:var(--green);font-weight:700;">●</span>',closed:'<span style="color:#666;">βœ”</span>',stop:'<span style="color:var(--red);">βœ–</span>',early:'<span style="color:var(--yellow);">↩</span>'}[t.status]||'';
  1549. const roi = t.margin>0&&t.maxProfit!=null ? `ROI ${euFmt(t.maxProfit/t.margin*100,1)}%` : '';
  1550. const ed = t.expiry.split('-')[2];
  1551. const ds = t.status==='open' ? (dte<0?'scaduta':`${dte}gg`) : (t.pnl!=null?(t.pnl>=0?'+':'')+euCurr(t.pnl):'');
  1552. const dsColor = t.status==='open' ? (dte<0?'var(--muted)':dte<=7?'var(--yellow)':'var(--accent)') : (t.pnl>=0?'var(--green)':'var(--red)');
  1553. return `<div class="cal-trade-row ${rc}">
  1554. <div class="cal-trade-left">
  1555. <div class="cal-trade-ticker">${dot} ${t.ticker} <span style="color:var(--muted);font-size:10px;font-weight:400;">${assetShort[t.assetType]||''} Β· ${typeShort[t.type]||''}</span></div>
  1556. <div class="cal-trade-info">Scad. ${ed}/${m} Β· ${t.contracts}ct Β· ${euFmt(t.premium,2)} prem.</div>
  1557. </div>
  1558. <div class="cal-trade-right">
  1559. <span style="color:var(--green);font-size:11px;font-weight:700;">${roi}</span>
  1560. <span style="color:${dsColor};font-size:11px;font-weight:600;">${ds}</span>
  1561. </div>
  1562. </div>`;
  1563. }).join('');
  1564.  
  1565. const hBg = isPast ? 'var(--surface2)' : isCur ? 'rgba(108,99,255,0.15)' : 'rgba(76,201,240,0.08)';
  1566. const outcomePills = Object.entries(outcomes).map(([k,v])=>`<span class="cal-outcome-pill" style="background:${outcomeColors[k]||'rgba(142,142,142,.1)'};color:${outcomeFg[k]||'#888'};">${outcomeLabels[k]||k} ${v}</span>`).join('');
  1567.  
  1568. return `<div class="cal-month">
  1569. <div class="cal-month-header" style="background:${hBg};">
  1570. <span>${monthLabel} ${isCur?'<span style="font-size:10px;color:var(--accent);">← ora</span>':isPast?'<span style="font-size:10px;color:var(--muted);">(passato)</span>':''}</span>
  1571. <span class="cal-count">${total} trade</span>
  1572. </div>
  1573. <div class="cal-month-stats">
  1574. <div class="cal-ms"><div class="cal-ms-val">${openC}</div><div class="cal-ms-lbl">Aperti</div></div>
  1575. <div class="cal-ms"><div class="cal-ms-val">${closedC}</div><div class="cal-ms-lbl">Chiusi</div></div>
  1576. <div class="cal-ms"><div class="cal-ms-val">${totalContracts}</div><div class="cal-ms-lbl">Contratti</div></div>
  1577. </div>
  1578. <div class="cal-type-bar">
  1579. <div class="cal-type-seg" style="width:${bpPct}%;background:var(--green);" title="Bull Put ${bpPct}%"></div>
  1580. <div class="cal-type-seg" style="width:${bcPct}%;background:var(--red);" title="Bear Call ${bcPct}%"></div>
  1581. </div>
  1582. ${outcomePills?`<div class="cal-outcome-row">${outcomePills}</div>`:''}
  1583. <div class="cal-pnl-bar">
  1584. <div class="cal-pnl-track"><div class="cal-pnl-fill" style="width:${pnlPct}%;background:${pnlColor};"></div></div>
  1585. <div class="cal-pnl-val" style="color:${pnlColor};">${closedC>0?(mPnl>=0?'+':'')+euCurr(mPnl):'β€”'}</div>
  1586. </div>
  1587. ${rows}
  1588. </div>`;
  1589. }).join('')}</div>`;
  1590. }
  1591.  
  1592. // ─── STATISTICHE AVANZATE ─────────────────────────────────────────────────────
  1593. function renderStatsTable(closed) {
  1594. const el = document.getElementById('statsTable');
  1595. if (!closed.length) { el.innerHTML='<div class="no-data-chart" style="height:80px;"><span>πŸ“‹</span>Nessun dato ancora</div>'; return; }
  1596. const wins = closed.filter(t=>t.pnl>0);
  1597. const losses = closed.filter(t=>t.pnl<=0);
  1598. const pnlArr = closed.map(t=>t.pnl);
  1599. const maxWin = Math.max(...pnlArr);
  1600. const maxLoss = Math.min(...pnlArr);
  1601. const totalPnl = closed.reduce((s,t)=>s+t.pnl,0);
  1602. const grossWin = wins.reduce((s,t)=>s+t.pnl,0);
  1603. const grossLoss= Math.abs(losses.reduce((s,t)=>s+t.pnl,0));
  1604. const avgWin = wins.length>0 ? grossWin/wins.length : 0;
  1605. const avgLoss = losses.length>0 ? grossLoss/losses.length : 0;
  1606. const daysArr = closed.filter(t=>t.closeDate).map(t=>Math.round((new Date(t.closeDate)-new Date(t.openDate))/86400000));
  1607. const avgDays = daysArr.length>0 ? Math.round(daysArr.reduce((a,b)=>a+b,0)/daysArr.length) : 0;
  1608. const maxDays = daysArr.length>0 ? Math.max(...daysArr) : 0;
  1609. const roiArr = closed.filter(t=>t.margin>0&&t.maxProfit!=null).map(t=>t.maxProfit/t.margin*100);
  1610. const avgRoi = roiArr.length>0 ? roiArr.reduce((a,b)=>a+b,0)/roiArr.length : 0;
  1611. const totalPrem= closed.reduce((s,t)=>s+t.premium*(t.multiplier||100)*t.contracts,0);
  1612.  
  1613. const col1=[
  1614. ['Trade chiusi totali', closed.length, ''],
  1615. ['Trade in profitto', `${wins.length} (${closed.length>0?(wins.length/closed.length*100).toFixed(1):0}%)`, 'green'],
  1616. ['Trade in perdita', `${losses.length} (${closed.length>0?(losses.length/closed.length*100).toFixed(1):0}%)`, 'red'],
  1617. ['Miglior trade', euCurr(maxWin), 'green'],
  1618. ['Peggior trade', euCurr(maxLoss), 'red'],
  1619. ['P&L cumulativo', (totalPnl>=0?'+':'')+euCurr(totalPnl), totalPnl>=0?'green':'red'],
  1620. ];
  1621. const col2=[
  1622. ['Premio lordo totale incassato', euCurr(totalPrem), 'yellow'],
  1623. ['Avg Win per trade', euCurr(avgWin), 'green'],
  1624. ['Avg Loss per trade', euCurr(avgLoss), 'red'],
  1625. ['ROI medio atteso', euFmt(avgRoi,2)+'%', 'green'],
  1626. ['Giorni medi in posizione', `${avgDays} gg`, ''],
  1627. ['Holding max', `${maxDays} gg`, ''],
  1628. ];
  1629. const renderCol = rows => rows.map(([l,v,c])=>`<div class="stat-row"><span class="stat-label">${l}</span><span class="stat-val ${c}">${v}</span></div>`).join('');
  1630. el.innerHTML = `<div>${renderCol(col1)}</div><div>${renderCol(col2)}</div>`;
  1631. }
  1632.  
  1633. // ─── EXPORT CSV ───────────────────────────────────────────────────────────────
  1634. function exportCSV() {
  1635. const headers = ['ID','Ticker','Tipo','Apertura','Scadenza','Short Strike','Long Strike','Spread','Contratti','Premio','Max Profit','Max Loss','Margine','Stop Loss','Prezzo Chiusura','Data Chiusura','P&L','ROM%','Stato'];
  1636. const rows = trades.map(t => [
  1637. t.id, t.ticker, t.type === 'bull_put' ? 'Bull Put' : 'Bear Call',
  1638. t.openDate, t.expiry, t.sellStrike, t.buyStrike, t.spread, t.contracts,
  1639. t.premium, t.maxProfit.toFixed(2), t.maxLoss.toFixed(2),
  1640. t.margin.toFixed(2), t.stopLoss.toFixed(2),
  1641. t.closePrice ?? '', t.closeDate ?? '',
  1642. t.pnl !== null ? t.pnl.toFixed(2) : '',
  1643. (t.pnl !== null && t.margin > 0) ? (t.pnl/t.margin*100).toFixed(2) : '',
  1644. t.status
  1645. ]);
  1646. const csv = [headers, ...rows].map(r => r.join(',')).join('\n');
  1647. const a = document.createElement('a');
  1648. a.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv);
  1649. a.download = `vertical_spreads_${today()}.csv`;
  1650. a.click();
  1651. }
  1652. </script>
  1653. </body>
  1654. </html>
RAW Paste Data Copied
Public Pastes
Hello
Not a member of Fast Pastebin Alternative yet?
Sign Up, it unlocks many cool features!
 
We use cookies for various purposes including analytics. By continuing to use Fast Pastebin Alternative, you agree to our use of cookies as described in the Privacy Policy.  OK, I Understand