642 lines
41 KiB
HTML
642 lines
41 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>Angel · Position Tracker</title>
|
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%23FF6B4A'/%3E%3Cpolyline points='4,22 10,14 16,18 22,8 28,11' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"/>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3.0.1/dist/chartjs-plugin-annotation.min.js"></script>
|
|
<style>
|
|
:root{--coral:#FF6B4A;--amber:#F5A623;--green:#2ECC71;--red:#E74C3C;--tr:.22s cubic-bezier(.4,0,.2,1)}
|
|
[data-theme="dark"]{--bg:#0D1117;--bg2:#161B22;--bg3:#1C2330;--border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.13);--text:#E6EDF3;--text2:#8B949E;--text3:#3D444D;--card:rgba(22,27,34,.97);--shadow:0 4px 28px rgba(0,0,0,.45);--shadow-lg:0 8px 48px rgba(0,0,0,.6);--glass:rgba(22,27,34,.8)}
|
|
[data-theme="light"]{--bg:#FAF7F4;--bg2:#FFF;--bg3:#F0EBE5;--border:rgba(0,0,0,.06);--border2:rgba(0,0,0,.13);--text:#1A1410;--text2:#6B6056;--text3:#C4B8B0;--card:rgba(255,255,255,.97);--shadow:0 4px 20px rgba(0,0,0,.08);--shadow-lg:0 8px 40px rgba(0,0,0,.13);--glass:rgba(255,255,255,.85)}
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
body{font-family:'Geist',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;transition:background var(--tr),color var(--tr);overflow-x:hidden}
|
|
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(ellipse 80vw 55vh at 8% 0%,rgba(255,107,74,.055) 0%,transparent 60%),radial-gradient(ellipse 60vw 45vh at 92% 100%,rgba(245,166,35,.04) 0%,transparent 60%)}
|
|
.wrap{max-width:1300px;margin:0 auto;padding:20px;position:relative;z-index:1}
|
|
nav{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;margin-bottom:20px;background:var(--glass);border:1px solid var(--border);border-radius:16px;backdrop-filter:blur(16px);box-shadow:var(--shadow)}
|
|
.nav-l{display:flex;align-items:center;gap:10px}
|
|
.logo{font-family:'DM Serif Display',serif;font-size:1.15rem;color:var(--coral);letter-spacing:-.02em}
|
|
.nav-sep{width:1px;height:18px;background:var(--border2)}
|
|
.nav-sub{font-size:.72rem;font-weight:600;color:var(--text2);letter-spacing:.07em;text-transform:uppercase}
|
|
.nav-r{display:flex;align-items:center;gap:8px}
|
|
.ts{font-size:.7rem;color:var(--text3);font-family:'Geist Mono',monospace}
|
|
.pill{display:flex;align-items:center;gap:5px;padding:4px 11px;border-radius:9999px;font-size:.7rem;font-weight:600;border:1px solid var(--border2);color:var(--text2);background:var(--bg3);transition:all var(--tr)}
|
|
.pill.open{color:var(--green);border-color:rgba(46,204,113,.3);background:rgba(46,204,113,.12)}
|
|
.dot{width:6px;height:6px;border-radius:50%;background:currentColor}
|
|
.pill.open .dot,.ldot{animation:blink 2s infinite}
|
|
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
|
|
.ibtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--tr);font-size:15px}
|
|
.ibtn:hover{background:var(--bg2);color:var(--text);border-color:var(--coral);transform:translateY(-1px)}
|
|
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
|
|
.g6{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:16px}
|
|
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);transition:transform var(--tr),box-shadow var(--tr);overflow:hidden}
|
|
.card:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
|
|
.card-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border)}
|
|
.card-title{font-size:.78rem;font-weight:600;letter-spacing:.03em}
|
|
.pcard{padding:22px 22px 18px;position:relative;overflow:hidden}
|
|
.pcard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--ca),var(--cb));border-radius:18px 18px 0 0}
|
|
.pcard::after{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;border-radius:50%;background:var(--ca);opacity:.07;filter:blur(25px);pointer-events:none}
|
|
.pcard.pu{--ca:#2ECC71;--cb:#1abc9c}.pcard.pr{--ca:#3498DB;--cb:#2980b9}.pcard.pt{--ca:#FF6B4A;--cb:#F5A623}
|
|
.plbl{font-size:.67rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text2);margin-bottom:8px}
|
|
.pval{font-family:'DM Serif Display',serif;font-size:2.2rem;line-height:1;letter-spacing:-.02em;margin-bottom:6px}
|
|
.pcard.pt .pval{font-size:2.7rem}
|
|
.psub{font-size:.68rem;color:var(--text3)}
|
|
.up{color:var(--green)}.dn{color:var(--red)}.fl{color:var(--text2)}
|
|
.mcard{padding:14px 16px}
|
|
.mlbl{font-size:.63rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text2);margin-bottom:6px}
|
|
.mprice{font-family:'DM Serif Display',serif;font-size:1.35rem;letter-spacing:-.01em;color:var(--text);line-height:1.1}
|
|
.mchg{font-size:.68rem;font-family:'Geist Mono',monospace;margin-top:3px}
|
|
.mstale{font-size:.6rem;color:var(--text3);margin-top:2px}
|
|
.scard{padding:14px 16px}
|
|
.slbl{font-size:.67rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);margin-bottom:5px}
|
|
.sval{font-family:'DM Serif Display',serif;font-size:1.5rem;color:var(--text)}
|
|
.sval.amber{color:var(--amber)}
|
|
.range-btns{display:flex;gap:3px}
|
|
.rbtn{padding:3px 10px;border-radius:7px;font-size:.7rem;font-weight:600;border:1px solid var(--border2);cursor:pointer;background:transparent;color:var(--text2);transition:all .12s}
|
|
.rbtn:hover{color:var(--text);border-color:var(--coral)}.rbtn.on{background:var(--coral);border-color:var(--coral);color:#fff}
|
|
.chart-wrap{height:190px;position:relative;padding:12px 16px 16px}
|
|
.chart-empty{display:none;position:absolute;inset:0;align-items:center;justify-content:center;color:var(--text3);font-size:.78rem}
|
|
.chart-empty.show{display:flex}
|
|
.live-badge{display:flex;align-items:center;gap:5px;font-size:.67rem;font-weight:600;letter-spacing:.06em;color:var(--green);text-transform:uppercase}
|
|
.ldot{width:5px;height:5px;border-radius:50%;background:var(--green)}
|
|
table{width:100%;border-collapse:collapse}
|
|
thead th{padding:9px 18px;text-align:right;font-size:.63rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);border-bottom:1px solid var(--border)}
|
|
thead th:first-child{text-align:left}
|
|
tbody tr{transition:background .1s}tbody tr:hover{background:rgba(255,107,74,.025)}
|
|
tbody tr+tr{border-top:1px solid var(--border)}
|
|
td{padding:11px 18px;font-size:.8rem;text-align:right;color:var(--text)}td:first-child{text-align:left}
|
|
.sym{font-weight:600;font-size:.78rem}.sym-meta{font-size:.65rem;color:var(--text3);margin-top:1px;font-family:'Geist Mono',monospace}
|
|
.tte{font-size:.62rem;color:var(--amber);margin-top:2px;font-family:'Geist Mono',monospace}
|
|
.mono{font-family:'Geist Mono',monospace;font-size:.78rem}
|
|
.ql{color:var(--green);font-weight:600;font-family:'Geist Mono',monospace}.qs{color:var(--red);font-weight:600;font-family:'Geist Mono',monospace}
|
|
tfoot tr{border-top:2px solid var(--border2);background:var(--bg3)}
|
|
tfoot td{padding:10px 18px;font-weight:600;font-size:.78rem}
|
|
tfoot td:first-child{font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text2)}
|
|
.alert-up td:first-child{border-left:3px solid var(--green)}.alert-dn td:first-child{border-left:3px solid var(--red)}
|
|
.sg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:14px}
|
|
.field{display:flex;flex-direction:column;gap:5px}
|
|
.field label{font-size:.67rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text2)}
|
|
.field input{padding:8px 12px;border-radius:9px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);font-size:.82rem;font-family:'Geist Mono',monospace;transition:border-color var(--tr);outline:none}
|
|
.field input:focus{border-color:var(--coral)}
|
|
.hint{font-size:.62rem;color:var(--text3)}
|
|
.btn-save{padding:8px 22px;border-radius:9px;background:var(--coral);border:none;color:#fff;font-size:.78rem;font-weight:600;cursor:pointer;transition:all var(--tr)}
|
|
.btn-save:hover{background:#e55a3a;transform:translateY(-1px)}
|
|
.save-msg{font-size:.72rem;color:var(--green);display:none;margin-left:10px}
|
|
|
|
|
|
|
|
/* ── Collapsible ── */
|
|
.collapsible > .card-head { cursor:pointer; user-select:none; }
|
|
.collapse-arrow { margin-left:auto; font-size:.75rem; color:var(--text3); transition:transform .25s ease; display:inline-block; }
|
|
.collapsible.collapsed .collapse-arrow { transform:rotate(-90deg); }
|
|
.collapse-body { overflow:hidden; transition:max-height .35s cubic-bezier(.4,0,.2,1); max-height:5000px; }
|
|
.collapsible.collapsed .collapse-body { max-height:0 !important; }
|
|
|
|
|
|
/* ── Mobile responsive ── */
|
|
@media (max-width: 768px) {
|
|
.wrap { padding: 12px; }
|
|
nav { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
|
|
.nav-sub { display: none; }
|
|
.ts { display: none; }
|
|
.g3, .g6 { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
|
|
.g6 { grid-template-columns: repeat(3, 1fr); }
|
|
.pcard { padding: 16px 14px 12px; }
|
|
.pval { font-size: 1.6rem; }
|
|
.pcard.pt .pval { font-size: 2rem; }
|
|
.mcard { padding: 10px 12px; }
|
|
.mprice { font-size: 1.1rem; }
|
|
.scard { padding: 10px 12px; }
|
|
.card-head { padding: 12px 14px; flex-wrap: wrap; gap: 6px; }
|
|
.chart-wrap { height: 160px; padding: 8px 10px 12px; }
|
|
.range-btns { gap: 2px; }
|
|
.rbtn { padding: 2px 7px; font-size: .65rem; }
|
|
/* Tables: horizontal scroll */
|
|
.card > .collapse-body { overflow-x: auto; }
|
|
table { min-width: 520px; }
|
|
td, thead th { padding: 9px 10px; font-size: .75rem; }
|
|
.sym { font-size: .72rem; }
|
|
.sym-meta, .tte { font-size: .6rem; }
|
|
.mono { font-size: .72rem; }
|
|
/* Settings */
|
|
.sg { grid-template-columns: 1fr; gap: 10px; }
|
|
tfoot td { padding: 8px 10px; font-size: .72rem; }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.g3 { grid-template-columns: 1fr; }
|
|
.g6 { grid-template-columns: repeat(2, 1fr); }
|
|
.pval { font-size: 1.4rem; }
|
|
.pcard.pt .pval { font-size: 1.7rem; }
|
|
}
|
|
|
|
|
|
.pf-stat{padding:12px 16px;border-right:1px solid var(--border);text-align:center}
|
|
.pf-stat:last-child{border-right:none}
|
|
.pfs-lbl{font-size:.6rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin-bottom:5px}
|
|
.pfs-val{font-family:'DM Serif Display',serif;font-size:1.1rem;color:var(--text)}
|
|
@media(max-width:768px){
|
|
#sec-payoff .pf-stat{grid-column:span 2}
|
|
#sec-payoff [style*="grid-template-columns:repeat(6"]{grid-template-columns:repeat(2,1fr)!important}
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<nav>
|
|
<div class="nav-l">
|
|
<span class="logo">Angel</span>
|
|
<div class="nav-sep"></div>
|
|
<span class="nav-sub">Position Tracker</span>
|
|
</div>
|
|
<div class="nav-r">
|
|
<span class="ts" id="ts">—</span>
|
|
<div class="pill" id="mkt-pill"><span class="dot"></span><span id="mkt-lbl">Checking</span></div>
|
|
<button class="ibtn" id="theme-btn" onclick="toggleTheme()">☀️</button>
|
|
<button class="ibtn" onclick="refresh()">↻</button>
|
|
</div>
|
|
</nav>
|
|
<div class="g3">
|
|
<div class="card pcard pu"><div class="plbl">Unrealised P&L</div><div class="pval fl" id="v-u">—</div><div class="psub">Open positions MTM</div></div>
|
|
<div class="card pcard pr"><div class="plbl">Realised P&L</div><div class="pval fl" id="v-r">—</div><div class="psub">Closed legs today</div></div>
|
|
<div class="card pcard pt"><div class="plbl">Total P&L</div><div class="pval fl" id="v-t">—</div><div class="psub">Unrealised + Realised</div></div>
|
|
</div>
|
|
<div class="g6" id="market-grid">
|
|
<div class="card mcard"><div class="mlbl">Loading…</div><div class="mprice">—</div></div>
|
|
<div class="card mcard"><div class="mlbl">Loading…</div><div class="mprice">—</div></div>
|
|
<div class="card mcard"><div class="mlbl">Loading…</div><div class="mprice">—</div></div>
|
|
<div class="card mcard"><div class="mlbl">Loading…</div><div class="mprice">—</div></div>
|
|
<div class="card mcard"><div class="mlbl">Loading…</div><div class="mprice">—</div></div>
|
|
<div class="card mcard"><div class="mlbl">Loading…</div><div class="mprice">—</div></div>
|
|
</div>
|
|
<div class="g3" style="margin-bottom:16px">
|
|
<div class="card scard"><div class="slbl">Open Positions</div><div class="sval" id="s-pos">—</div></div>
|
|
<div class="card scard"><div class="slbl">Alerts Today</div><div class="sval amber" id="s-alrt">—</div></div>
|
|
<div class="card scard"><div class="slbl">System</div><div class="sval" id="s-err" style="font-size:.88rem;font-family:'Geist',sans-serif;margin-top:2px;color:var(--green)">Healthy</div></div>
|
|
</div>
|
|
<div class="card collapsible" id="sec-chart" style="margin-bottom:16px">
|
|
<div class="card-head" onclick="toggleCard('sec-chart')">
|
|
<span class="card-title">Intraday P&L Curve</span>
|
|
<div class="range-btns">
|
|
<button class="rbtn" onclick="loadChart(2)" id="b2">2H</button>
|
|
<button class="rbtn on" onclick="loadChart(8)" id="b8">8H</button>
|
|
<button class="rbtn" onclick="loadChart(24)" id="b24">24H</button>
|
|
<button class="rbtn" onclick="loadChart(72)" id="b72">3D</button>
|
|
</div>
|
|
<span class="collapse-arrow">▼</span>
|
|
</div>
|
|
<div class="collapse-body">
|
|
<div class="chart-wrap"><canvas id="pnl-chart"></canvas><div class="chart-empty" id="chart-empty">No history yet — populates after first poll cycle</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="card collapsible" id="sec-pos" style="margin-bottom:16px">
|
|
<div class="card-head" onclick="toggleCard('sec-pos')"><span class="card-title">Option Positions</span><div style="display:flex;align-items:center;gap:10px"><div class="live-badge"><span class="ldot"></span>Live</div><span id="pos-hpnl" style="font-family:'Geist Mono',monospace;font-size:.75rem;font-weight:600;display:none"></span></div><span class="collapse-arrow">▼</span></div>
|
|
<div class="collapse-body"><table>
|
|
<thead><tr><th>Symbol</th><th>Qty</th><th>LTP</th><th>Avg Cost</th><th>Unrealised</th><th>Realised</th><th>Total P&L</th></tr></thead>
|
|
<tbody id="pos-body"><tr><td colspan="7" style="text-align:center;padding:36px;color:var(--text3)">Loading…</td></tr></tbody>
|
|
<tfoot id="pos-foot" style="display:none"><tr><td colspan="4">Portfolio Total</td><td id="f-u" class="mono">—</td><td id="f-r" class="mono">—</td><td id="f-t" class="mono">—</td></tr></tfoot>
|
|
</table></div>
|
|
</div>
|
|
|
|
<div class="card collapsible" id="sec-payoff" style="margin-bottom:16px">
|
|
<div class="card-head" onclick="toggleCard('sec-payoff')">
|
|
<span class="card-title">Strategy Payoff at Expiry</span>
|
|
<div style="display:flex;align-items:center;gap:8px">
|
|
<span id="pf-underlying" style="font-size:.7rem;font-weight:600;color:var(--text2);font-family:'Geist Mono',monospace"></span>
|
|
<span id="pf-strategy" style="font-size:.68rem;padding:2px 8px;border-radius:9999px;background:var(--bg3);border:1px solid var(--border2);color:var(--text2)"></span>
|
|
</div>
|
|
<span class="collapse-arrow">▼</span>
|
|
</div>
|
|
<div class="collapse-body">
|
|
<!-- Stats row -->
|
|
<div style="display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-bottom:1px solid var(--border)">
|
|
<div class="pf-stat" id="pfs-credit"><div class="pfs-lbl">NET PREMIUM</div><div class="pfs-val">—</div></div>
|
|
<div class="pf-stat" id="pfs-maxp"><div class="pfs-lbl">MAX PROFIT</div><div class="pfs-val up">—</div></div>
|
|
<div class="pf-stat" id="pfs-maxl"><div class="pfs-lbl">MAX LOSS</div><div class="pfs-val dn">—</div></div>
|
|
<div class="pf-stat" id="pfs-rr"><div class="pfs-lbl">REWARD/RISK</div><div class="pfs-val">—</div></div>
|
|
<div class="pf-stat" id="pfs-be"><div class="pfs-lbl">BREAKEVEN(S)</div><div class="pfs-val" style="font-size:.78rem">—</div></div>
|
|
<div class="pf-stat" id="pfs-dte"><div class="pfs-lbl">DTE</div><div class="pfs-val">—</div></div>
|
|
</div>
|
|
<!-- Chart -->
|
|
<div style="padding:16px 16px 12px;height:260px;position:relative">
|
|
<canvas id="payoff-chart"></canvas>
|
|
<div id="payoff-empty" style="display:none;position:absolute;inset:0;align-items:center;justify-content:center;color:var(--text3);font-size:.8rem;flex-direction:column;gap:6px">
|
|
<span style="font-size:1.4rem">📈</span>
|
|
<span>No option positions to analyse</span>
|
|
</div>
|
|
</div>
|
|
<div style="padding:0 16px 12px;font-size:.65rem;color:var(--text3)">
|
|
Theoretical payoff at expiry based on avg cost. Does not account for time value or IV changes.
|
|
Current spot shown as dashed line.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card collapsible" id="sec-alrt" style="margin-bottom:16px">
|
|
<div class="card-head" onclick="toggleCard('sec-alrt')"><span class="card-title">Alert History</span><div style="display:flex;align-items:center;gap:8px"><span id="alrt-hcount" style="font-size:.7rem;font-weight:600;padding:2px 9px;border-radius:9999px;background:rgba(245,166,35,.15);color:var(--amber);display:none"></span><span id="alrt-hmuted" style="font-size:.7rem;font-weight:600;padding:2px 9px;border-radius:9999px;background:rgba(231,76,60,.12);color:var(--red);display:none">MUTED</span></div><span class="collapse-arrow">▼</span></div>
|
|
<div class="collapse-body"><table>
|
|
<thead><tr><th>Symbol</th><th>P&L at Alert</th><th>Anchor</th><th>Move</th><th>LTP</th><th>Time (IST)</th></tr></thead>
|
|
<tbody id="alrt-body"><tr><td colspan="6" style="text-align:center;padding:28px;color:var(--text3)">No alerts yet</td></tr></tbody>
|
|
</table></div>
|
|
</div>
|
|
<div class="card collapsible" id="sec-cfg" style="margin-bottom:16px">
|
|
<div class="card-head" onclick="toggleCard('sec-cfg')">
|
|
<span class="card-title">Alert Settings</span>
|
|
<span style="font-size:.68rem;color:var(--text3)">Changes apply immediately</span>
|
|
<span class="collapse-arrow">▼</span></div>
|
|
<div class="collapse-body"><div style="padding:16px 20px">
|
|
<div class="sg">
|
|
<div class="field"><label>Global Threshold %</label><input id="cfg-pct" type="number" min="1" max="50" step="0.5" value="5"/><span class="hint">Alert when P&L moves this % from anchor</span></div>
|
|
<div class="field"><label>Min Absolute Move (₹)</label><input id="cfg-abs" type="number" min="50" max="10000" step="50" value="100"/><span class="hint">Guard for near-zero P&L positions</span></div>
|
|
<div class="field"><label>Poll Interval (sec)</label><input id="cfg-poll" type="number" value="60" disabled style="opacity:.5;cursor:not-allowed"/><span class="hint">Requires restart to change</span></div>
|
|
</div>
|
|
<div style="display:flex;align-items:center;margin-bottom:18px">
|
|
<button class="btn-save" onclick="saveConfig()">Save Settings</button>
|
|
<span class="save-msg" id="save-msg">✓ Saved</span>
|
|
</div>
|
|
<div style="border-top:1px solid var(--border);padding-top:14px">
|
|
<div style="font-size:.68rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text2);margin-bottom:10px">Per-position Overrides</div>
|
|
<table>
|
|
<thead><tr><th>Symbol</th><th>Custom Threshold %</th><th>Muted Until (IST)</th><th>Action</th></tr></thead>
|
|
<tbody id="override-body"><tr><td colspan="4" style="text-align:center;padding:16px;color:var(--text3)">Load positions first</td></tr></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
if(window.ChartAnnotation)Chart.register(window.ChartAnnotation);
|
|
let theme=localStorage.getItem('theme')||'dark';
|
|
document.documentElement.setAttribute('data-theme',theme);
|
|
document.getElementById('theme-btn').textContent=theme==='dark'?'\u2600\ufe0f':'\ud83c\udf19';
|
|
function toggleTheme(){theme=theme==='dark'?'light':'dark';document.documentElement.setAttribute('data-theme',theme);document.getElementById('theme-btn').textContent=theme==='dark'?'\u2600\ufe0f':'\ud83c\udf19';localStorage.setItem('theme',theme);if(chartInst){chartInst.destroy();chartInst=null;loadChart(curH);}}
|
|
const fmt=(n,d=0)=>n==null?'\u2014':(n>=0?'+\u20b9':'-\u20b9')+Math.abs(n).toLocaleString('en-IN',{maximumFractionDigits:d});
|
|
const cls=n=>n>50?'up':n<-50?'dn':'fl';
|
|
const toIST=s=>new Date(s+(s.includes('Z')?'':'Z')).toLocaleString('en-IN',{timeZone:'Asia/Kolkata',hour12:false,month:'short',day:'numeric',hour:'2-digit',minute:'2-digit'});
|
|
function parseTTE(sym){const m=sym.match(/([A-Z]+)(\d{2})(\d{2})(\d{2})(\d+)(CE|PE)$/);if(!m)return null;const exp=new Date('20'+m[2]+'-'+m[4]+'-'+m[3]);const diff=Math.ceil((exp-new Date())/86400000);if(diff<0)return null;if(diff===0)return'\u26a1 Expires today';if(diff===1)return'\u26a0\ufe0f 1 day left';return diff+'d to expiry';}
|
|
let chartInst=null,curH=8;
|
|
async function loadChart(h=8){
|
|
curH=h;['b2','b8','b24','b72'].forEach(id=>document.getElementById(id)?.classList.remove('on'));
|
|
document.getElementById({2:'b2',8:'b8',24:'b24',72:'b72'}[h])?.classList.add('on');
|
|
const {summary,history}=await fetch('/api/pnl-history?hours='+h).then(r=>r.json());
|
|
if(summary){const set=(id,v)=>{const e=document.getElementById(id);e.textContent=fmt(v);e.className='pval '+cls(v)};set('v-u',summary.totalUnrealised);set('v-r',summary.totalRealised);set('v-t',summary.totalPnl);document.getElementById('s-pos').textContent=summary.openPositions;}
|
|
const canvas=document.getElementById('pnl-chart'),empty=document.getElementById('chart-empty');
|
|
if(!history||history.length<2){canvas.style.display='none';empty.classList.add('show');return;}
|
|
canvas.style.display='block';empty.classList.remove('show');
|
|
const dk=theme==='dark',gc=dk?'rgba(255,255,255,.05)':'rgba(0,0,0,.05)',tc=dk?'#3D444D':'#C4B8B0';
|
|
if(chartInst)chartInst.destroy();
|
|
chartInst=new Chart(canvas,{type:'line',data:{labels:history.map(h=>toIST(h.recorded_at)),datasets:[
|
|
{label:'Total P&L',data:history.map(h=>h.total_pnl),borderColor:'#FF6B4A',backgroundColor:'rgba(255,107,74,.07)',tension:.4,pointRadius:0,borderWidth:2,fill:true},
|
|
{label:'Unrealised',data:history.map(h=>h.total_unrealised),borderColor:'#2ECC71',backgroundColor:'transparent',tension:.4,pointRadius:0,borderWidth:1.5},
|
|
{label:'Realised',data:history.map(h=>h.total_realised),borderColor:'#3498DB',backgroundColor:'transparent',tension:.4,pointRadius:0,borderWidth:1.5,borderDash:[4,3]}
|
|
]},options:{responsive:true,maintainAspectRatio:false,animation:false,interaction:{intersect:false,mode:'index'},
|
|
plugins:{legend:{labels:{color:tc,boxWidth:10,font:{size:10,family:'Geist'}}},tooltip:{backgroundColor:dk?'#1C2330':'#fff',borderColor:dk?'rgba(255,255,255,.1)':'rgba(0,0,0,.1)',borderWidth:1,titleColor:tc,bodyColor:dk?'#E6EDF3':'#1A1410',padding:10,cornerRadius:8,callbacks:{label:c=>' '+c.dataset.label+': '+(c.raw>=0?'+':'')+'\u20b9'+Math.round(c.raw).toLocaleString('en-IN')}}},
|
|
scales:{x:{ticks:{color:tc,maxTicksLimit:8,font:{size:9,family:'Geist Mono'}},grid:{color:gc}},y:{ticks:{color:tc,font:{size:9,family:'Geist Mono'},callback:v=>(v>=0?'+':'')+'\u20b9'+Math.round(v).toLocaleString('en-IN')},grid:{color:gc}}}}});
|
|
}
|
|
async function loadMarket(){
|
|
const {ok,data=[]}=await fetch('/api/market').then(r=>r.json()).catch(()=>({ok:false,data:[]}));
|
|
const grid=document.getElementById('market-grid');
|
|
// Fixed labels for all 6 slots — always render in this order even if data missing
|
|
const SLOTS=[
|
|
{key:'SENSEX', label:'SENSEX', unit:'pts'},
|
|
{key:'NIFTY50', label:'NIFTY 50', unit:'pts'},
|
|
{key:'BANKNIFTY',label:'BANK NIFTY', unit:'pts'},
|
|
{key:'INDIAVIX', label:'INDIA VIX', unit:'%'},
|
|
{key:'CRUDEOIL', label:'Crude Oil', unit:'\u20b9/bbl'},
|
|
{key:'USDINR', label:'INR/USD', unit:'\u20b9'},
|
|
];
|
|
const map=Object.fromEntries(data.map(q=>[q.key,q]));
|
|
grid.innerHTML=SLOTS.map(slot=>{
|
|
const q=map[slot.key];
|
|
if(!q){
|
|
// Placeholder — keep slot, show last known or dash
|
|
return '<div class="card mcard"><div class="mlbl">'+slot.label+'</div><div class="mprice" style="color:var(--text3)">\u2014</div><div class="mchg" style="color:var(--text3)">no data</div></div>';
|
|
}
|
|
const up=q.changePct>=0,cl=up?'up':'dn',arrow=up?'\u25b2':'\u25bc';
|
|
const price=q.price>10000?q.price.toLocaleString('en-IN',{maximumFractionDigits:0}):q.price.toFixed(2);
|
|
return '<div class="card mcard"><div class="mlbl">'+slot.label+'</div>'+
|
|
'<div class="mprice">'+price+' <span style="font-size:.62rem;color:var(--text2)">'+slot.unit+'</span></div>'+
|
|
'<div class="mchg '+cl+'">'+arrow+' '+Math.abs(q.changePct).toFixed(2)+'% <span style="opacity:.6">'+(q.change>=0?'+':'')+q.change.toFixed(0)+'</span></div>'+
|
|
(q.stale?'<div class="mstale">prev close'+(q.cachedAt?' \u00b7 '+q.cachedAt.slice(11,16)+' UTC':'')+'</div>':'')+'</div>';
|
|
}).join('');
|
|
}
|
|
async function loadPositions(){
|
|
const {data}=await fetch('/api/positions').then(r=>r.json());
|
|
const open=data.filter(p=>p.is_closed===0);
|
|
const tbody=document.getElementById('pos-body'),tfoot=document.getElementById('pos-foot');
|
|
if(!open.length){tbody.innerHTML='<tr><td colspan="7" style="text-align:center;padding:36px;color:var(--text3)">No open positions</td></tr>';tfoot.style.display='none';return;}
|
|
const sU=open.reduce((s,p)=>s+p.unrealised_pnl,0),sR=open.reduce((s,p)=>s+p.realised_pnl,0),sT=open.reduce((s,p)=>s+p.total_pnl,0);
|
|
// Update collapsed header badge
|
|
const phEl=document.getElementById('pos-hpnl');
|
|
if(phEl){phEl.textContent=fmt(sT);phEl.className='';phEl.style.cssText='font-family:Geist Mono,monospace;font-size:.75rem;font-weight:600;display:inline;color:'+(sT>50?'var(--green)':sT<-50?'var(--red)':'var(--text2)');}
|
|
tbody.innerHTML=open.map(p=>{const tte=parseTTE(p.tradingsymbol);return'<tr><td><div class="sym">'+p.tradingsymbol+'</div><div class="sym-meta">'+p.exchange+' \u00b7 '+p.producttype+'</div>'+(tte?'<div class="tte">'+tte+'</div>':'')+'</td><td class="'+(p.netqty<0?'qs':'ql')+'">'+(p.netqty>0?'+':'')+p.netqty+'</td><td class="mono">\u20b9'+(+p.ltp).toFixed(2)+'</td><td class="mono" style="color:var(--text2)">\u20b9'+(+p.avg_price).toFixed(2)+'</td><td class="mono '+cls(p.unrealised_pnl)+'">'+fmt(p.unrealised_pnl)+'</td><td class="mono '+cls(p.realised_pnl)+'">'+fmt(p.realised_pnl)+'</td><td class="mono '+cls(p.total_pnl)+'" style="font-weight:600">'+fmt(p.total_pnl)+'</td></tr>';}).join('');
|
|
tfoot.style.display='';
|
|
const sf=(id,v)=>{const e=document.getElementById(id);e.textContent=fmt(v);e.className='mono '+cls(v)};sf('f-u',sU);sf('f-r',sR);sf('f-t',sT);
|
|
document.getElementById('override-body').innerHTML=open.map(p=>'<tr><td><div class="sym" style="font-size:.75rem">'+p.tradingsymbol+'</div></td><td><input type="number" min="1" max="50" step="0.5" placeholder="Global default" id="op-'+p.key+'" style="width:130px;padding:4px 8px;border-radius:7px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);font-size:.75rem;font-family:\'Geist Mono\',monospace;outline:none"/></td><td><input type="datetime-local" id="om-'+p.key+'" style="padding:4px 8px;border-radius:7px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);font-size:.72rem;outline:none"/></td><td><button onclick="saveOverride(\''+p.key+'\')" style="padding:3px 10px;border-radius:7px;background:var(--bg3);border:1px solid var(--border2);color:var(--text2);font-size:.72rem;cursor:pointer">Save</button></td></tr>').join('');
|
|
}
|
|
async function loadAlerts(){
|
|
const {data}=await fetch('/api/alerts?limit=20').then(r=>r.json());
|
|
const today=new Date().toISOString().slice(0,10);
|
|
const todayCnt=data.filter(a=>a.alerted_at.startsWith(today)).length;
|
|
document.getElementById('s-alrt').textContent=todayCnt;
|
|
// Update collapsed header badge
|
|
const ahEl=document.getElementById('alrt-hcount');
|
|
if(ahEl){if(todayCnt>0){ahEl.textContent=todayCnt+' today';ahEl.style.display='inline';}else{ahEl.style.display='none';}}
|
|
// Check if any position is muted
|
|
fetch('/api/config').then(r=>r.json()).then(cfg=>{
|
|
const muted=(cfg.overrides||[]).some(o=>o.muted_until&&new Date(o.muted_until)>new Date());
|
|
const mEl=document.getElementById('alrt-hmuted');
|
|
if(mEl)mEl.style.display=muted?'inline':'none';
|
|
}).catch(()=>{});
|
|
if(!data.length)return;
|
|
document.getElementById('alrt-body').innerHTML=data.map(a=>'<tr class="'+(a.direction==='up'?'alert-up':'alert-dn')+'"><td><div class="sym" style="font-size:.75rem">'+(a.direction==='up'?'\u25b2':'\u25bc')+' '+a.tradingsymbol+'</div></td><td class="mono '+cls(a.current_pnl)+'">'+fmt(a.current_pnl)+'</td><td class="mono" style="color:var(--text2)">'+fmt(a.anchor_pnl)+'</td><td class="mono '+cls(a.delta_abs)+'">'+fmt(a.delta_abs)+' <span style="opacity:.6;font-size:.72em">'+(a.delta_pct>0?'+':'')+parseFloat(a.delta_pct).toFixed(1)+'%</span></td><td class="mono">\u20b9'+parseFloat(a.ltp).toFixed(2)+'</td><td style="color:var(--text3);font-family:\'Geist Mono\',monospace;font-size:.72rem">'+toIST(a.alerted_at)+'</td></tr>').join('');
|
|
}
|
|
async function loadHealth(){
|
|
const d=await fetch('/api/health').then(r=>r.json());
|
|
const pill=document.getElementById('mkt-pill');
|
|
document.getElementById('mkt-lbl').textContent=d.marketOpen?'Market Open':'Market Closed';
|
|
pill.className='pill'+(d.marketOpen?' open':'');
|
|
const e=document.getElementById('s-err');
|
|
if(d.lastError){e.textContent=d.lastError.error.slice(0,30)+'\u2026';e.style.color='var(--red)';}
|
|
else{e.textContent='Healthy';e.style.color='var(--green)';}
|
|
document.getElementById('ts').textContent=new Date().toLocaleTimeString('en-IN',{timeZone:'Asia/Kolkata',hour12:false})+' IST';
|
|
}
|
|
async function loadConfig(){
|
|
const {global:g}=await fetch('/api/config').then(r=>r.json()).catch(()=>({}));
|
|
if(!g)return;
|
|
document.getElementById('cfg-pct').value=g.alertThresholdPct??5;
|
|
document.getElementById('cfg-abs').value=g.alertMinAbsInr??100;
|
|
document.getElementById('cfg-poll').value=g.pollIntervalSeconds??60;
|
|
}
|
|
async function saveConfig(){
|
|
const pct=parseFloat(document.getElementById('cfg-pct').value);
|
|
const abs=parseFloat(document.getElementById('cfg-abs').value);
|
|
await fetch('/api/config/global',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({alertThresholdPct:pct,alertMinAbsInr:abs})});
|
|
const msg=document.getElementById('save-msg');msg.style.display='inline';setTimeout(()=>msg.style.display='none',2500);
|
|
}
|
|
async function saveOverride(key){
|
|
const pct=document.getElementById('op-'+key)?.value;
|
|
const mute=document.getElementById('om-'+key)?.value;
|
|
await fetch('/api/config/'+encodeURIComponent(key),{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({alert_threshold_pct:pct?parseFloat(pct):null,muted_until:mute?new Date(mute).toISOString():null})});
|
|
}
|
|
async function refresh(){await Promise.all([loadPositions(),loadAlerts(),loadHealth(),loadChart(curH),loadMarket(),loadPayoff()]);}
|
|
|
|
|
|
|
|
function toggleCard(id){
|
|
const el=document.getElementById(id);
|
|
if(!el)return;
|
|
el.classList.toggle('collapsed');
|
|
const s=JSON.parse(localStorage.getItem('collapse')||'{}');
|
|
s[id]=el.classList.contains('collapsed');
|
|
localStorage.setItem('collapse',JSON.stringify(s));
|
|
}
|
|
(function restoreCollapse(){
|
|
try{
|
|
const s=JSON.parse(localStorage.getItem('collapse')||'{}');
|
|
Object.entries(s).forEach(([id,c])=>{if(c){const el=document.getElementById(id);if(el)el.classList.add('collapsed');}});
|
|
}catch(e){}
|
|
})();
|
|
|
|
// ── Payoff Graph ──────────────────────────────────────────────────────────────
|
|
let payoffChartInst = null;
|
|
|
|
function parseOptionSym(sym) {
|
|
var RE1 = new RegExp("^([A-Z]+)(\\d{2})(\\d{1})(\\d{2})(\\d+)(CE|PE)$");
|
|
var m = sym.match(RE1);
|
|
if (m) {
|
|
var exp = new Date(20+m[2]+-+m[3].padStart(2,0)+-+m[4]);
|
|
return { underlying: m[1], strike: parseInt(m[5]), type: m[6], expiry: isNaN(exp)?null:exp };
|
|
}
|
|
var RE2 = new RegExp("^([A-Z]+)(\\d{2})(\\d{2})(\\d{2})(\\d+)(CE|PE)$");
|
|
m = sym.match(RE2);
|
|
if (m) {
|
|
var exp2 = new Date(20+m[2]+-+m[3]+-+m[4]);
|
|
return { underlying: m[1], strike: parseInt(m[5]), type: m[6], expiry: isNaN(exp2)?null:exp2 };
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function calcPayoff(positions, spot) {
|
|
let total = 0;
|
|
for (const p of positions) {
|
|
const info = parseOptionSym(p.tradingsymbol);
|
|
if (!info) continue;
|
|
const intrinsic = info.type === 'CE' ? Math.max(spot - info.strike, 0) : Math.max(info.strike - spot, 0);
|
|
// payoff per unit at expiry = intrinsic - avg_price (for long)
|
|
// netqty: positive=long, negative=short → multiply directly
|
|
total += (intrinsic - p.avg_price) * p.netqty;
|
|
}
|
|
return total;
|
|
}
|
|
|
|
function detectStrategy(positions) {
|
|
const calls = positions.filter(p => p._parsed?.type === 'CE');
|
|
const puts = positions.filter(p => p._parsed?.type === 'PE');
|
|
const longs = positions.filter(p => p.netqty > 0);
|
|
const shorts = positions.filter(p => p.netqty < 0);
|
|
if (positions.length === 1) return longs.length ? 'Long ' + (calls.length ? 'Call' : 'Put') : 'Short ' + (calls.length ? 'Call' : 'Put');
|
|
if (calls.length === 2 && puts.length === 0) return longs.length === 1 && shorts.length === 1 ? 'Bull Call Spread' : 'Call Spread';
|
|
if (puts.length === 2 && calls.length === 0) return longs.length === 1 && shorts.length === 1 ? 'Bear Put Spread' : 'Put Spread';
|
|
if (calls.length >= 1 && puts.length >= 1 && shorts.length === positions.length) return 'Short Strangle/Straddle';
|
|
if (calls.length >= 1 && puts.length >= 1 && longs.length === positions.length) return 'Long Strangle/Straddle';
|
|
if (positions.length === 4) return 'Iron Condor / Butterfly';
|
|
return positions.length + '-Leg Strategy';
|
|
}
|
|
|
|
async function loadPayoff() {
|
|
const [posRes, mktRes] = await Promise.all([
|
|
fetch('/api/positions').then(r=>r.json()).catch(()=>({data:[]})),
|
|
fetch('/api/market').then(r=>r.json()).catch(()=>({data:[]})),
|
|
]);
|
|
|
|
const canvas = document.getElementById('payoff-chart');
|
|
const emptyEl = document.getElementById('payoff-empty');
|
|
|
|
const open = (posRes.data || []).filter(p => p.is_closed === 0);
|
|
// Only option positions (have CE/PE in symbol)
|
|
const opts = open.filter(p => /CE|PE/.test(p.tradingsymbol)).map(p => {
|
|
p._parsed = parseOptionSym(p.tradingsymbol);
|
|
return p;
|
|
}).filter(p => p._parsed);
|
|
|
|
if (!opts.length) {
|
|
canvas.style.display = 'none';
|
|
emptyEl.style.display = 'flex';
|
|
['pfs-credit','pfs-maxp','pfs-maxl','pfs-rr','pfs-be','pfs-dte'].forEach(id => {
|
|
document.querySelector('#'+id+' .pfs-val').textContent = '—';
|
|
});
|
|
return;
|
|
}
|
|
canvas.style.display = 'block';
|
|
emptyEl.style.display = 'none';
|
|
|
|
// Get current spot from market data
|
|
const mktMap = Object.fromEntries((mktRes.data || []).map(q => [q.key, q.price]));
|
|
const underlying = opts[0]._parsed.underlying;
|
|
const mktKey = underlying === 'SENSEX' ? 'SENSEX' : underlying === 'NIFTY' ? 'NIFTY50' : underlying === 'BANKNIFTY' ? 'BANKNIFTY' : null;
|
|
const spot = mktKey ? (mktMap[mktKey] || 0) : 0;
|
|
|
|
// Build price range: span all strikes ±15%
|
|
const strikes = opts.map(p => p._parsed.strike);
|
|
const minS = Math.min(...strikes), maxS = Math.max(...strikes);
|
|
const pad = Math.max((maxS - minS) * 0.6, minS * 0.08);
|
|
const lo = Math.floor((Math.min(minS, spot || minS) - pad) / 100) * 100;
|
|
const hi = Math.ceil((Math.max(maxS, spot || maxS) + pad) / 100) * 100;
|
|
const step = Math.max(Math.round((hi - lo) / 120 / 100) * 100, 50);
|
|
|
|
const xs = [], ys = [];
|
|
for (let s = lo; s <= hi; s += step) { xs.push(s); ys.push(calcPayoff(opts, s)); }
|
|
|
|
const maxY = Math.max(...ys), minY = Math.min(...ys);
|
|
|
|
// Breakevens: sign changes
|
|
const breakevens = [];
|
|
for (let i = 1; i < ys.length; i++) {
|
|
if ((ys[i-1] < 0 && ys[i] >= 0) || (ys[i-1] >= 0 && ys[i] < 0)) {
|
|
const be = xs[i-1] + (xs[i]-xs[i-1]) * (-ys[i-1]/(ys[i]-ys[i-1]));
|
|
breakevens.push(Math.round(be));
|
|
}
|
|
}
|
|
|
|
// Net premium (positive = credit, negative = debit)
|
|
const netPremium = opts.reduce((s, p) => s + p.avg_price * p.netqty, 0);
|
|
|
|
// Stats
|
|
const dte = opts[0]._parsed.expiry ? Math.max(0, Math.ceil((opts[0]._parsed.expiry - new Date()) / 86400000)) : '?';
|
|
const rr = minY !== 0 ? (maxY / Math.abs(minY)).toFixed(2) : '∞';
|
|
|
|
const setVal = (id, html, cls='') => {
|
|
const el = document.querySelector('#'+id+' .pfs-val');
|
|
el.innerHTML = html;
|
|
if (cls) el.className = 'pfs-val ' + cls;
|
|
};
|
|
setVal('pfs-credit', (netPremium>=0?'+':'')+'₹'+Math.round(netPremium).toLocaleString('en-IN'), netPremium>=0?'up':'dn');
|
|
setVal('pfs-maxp', maxY > 1e6 ? '∞' : '+₹'+Math.round(maxY).toLocaleString('en-IN'), 'up');
|
|
setVal('pfs-maxl', minY < -1e6 ? '−∞' : '₹'+Math.round(minY).toLocaleString('en-IN'), 'dn');
|
|
setVal('pfs-rr', rr + 'x');
|
|
setVal('pfs-be', breakevens.length ? breakevens.map(b=>b.toLocaleString('en-IN')).join(', ') : 'None', '');
|
|
setVal('pfs-dte', dte + ' days');
|
|
|
|
document.getElementById('pf-underlying').textContent = underlying;
|
|
document.getElementById('pf-strategy').textContent = detectStrategy(opts);
|
|
|
|
// Build chart datasets: split into profit (green) and loss (red) segments
|
|
const dk = theme === 'dark';
|
|
const gc = dk ? 'rgba(255,255,255,.05)' : 'rgba(0,0,0,.05)';
|
|
const tc = dk ? '#3D444D' : '#C4B8B0';
|
|
|
|
canvas._beLines = breakevens; canvas._spotLine = spot; canvas._chartXs = xs;
|
|
if (payoffChartInst) payoffChartInst.destroy();
|
|
payoffChartInst = new Chart(canvas, {
|
|
type: 'line',
|
|
data: { labels: xs, datasets: [
|
|
{label:'Profit Zone',data:ys.map(function(y){return y>=0?y:0;}),borderColor:'transparent',backgroundColor:'rgba(46,204,113,0.18)',tension:0,pointRadius:0,fill:true},
|
|
{label:'Loss Zone',data:ys.map(function(y){return y<0?y:0;}),borderColor:'transparent',backgroundColor:'rgba(231,76,60,0.18)',tension:0,pointRadius:0,fill:true},
|
|
{label:'P&L',data:ys,borderColor:'#FF6B4A',borderWidth:2.5,tension:0,pointRadius:0,fill:false},
|
|
] },
|
|
},
|
|
options: {
|
|
responsive: true, maintainAspectRatio: false, animation: false,
|
|
interaction: { intersect: false, mode: 'index' },
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: {
|
|
backgroundColor: dk ? '#1C2330' : '#fff',
|
|
borderColor: dk ? 'rgba(255,255,255,.1)' : 'rgba(0,0,0,.1)',
|
|
borderWidth: 1, titleColor: tc, bodyColor: dk ? '#E6EDF3' : '#1A1410',
|
|
padding: 10, cornerRadius: 8,
|
|
callbacks: {
|
|
title: items => 'Spot: ₹' + parseInt(items[0].label).toLocaleString('en-IN'),
|
|
label: item => {
|
|
const v = item.raw;
|
|
return ' P&L: ' + (v >= 0 ? '+' : '') + '₹' + Math.round(v).toLocaleString('en-IN');
|
|
},
|
|
},
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
type: 'linear',
|
|
ticks: {
|
|
color: tc, maxTicksLimit: 10, font: { size: 9, family: 'Geist Mono' },
|
|
callback: v => v.toLocaleString('en-IN'),
|
|
},
|
|
grid: { color: gc },
|
|
},
|
|
y: {
|
|
ticks: {
|
|
color: tc, font: { size: 9, family: 'Geist Mono' },
|
|
callback: v => (v >= 0 ? '+' : '') + '₹' + Math.round(v).toLocaleString('en-IN'),
|
|
},
|
|
grid: { color: gc },
|
|
},
|
|
},
|
|
},
|
|
});
|
|
}
|
|
// End payoff graph
|
|
|
|
|
|
var _payoffPlugin = {
|
|
id: 'payoffLines',
|
|
afterDraw: function(chart) {
|
|
if (!chart.canvas || !chart.canvas._beLines) return;
|
|
var ctx = chart.ctx;
|
|
var xs = chart.canvas._chartXs;
|
|
if (!xs || !xs.length) return;
|
|
var xScale = chart.scales.x, yScale = chart.scales.y;
|
|
var lo = xs[0], hi = xs[xs.length-1], range = hi - lo;
|
|
if (!range) return;
|
|
function xPx(v) { return xScale.left + (v-lo)/range*(xScale.right-xScale.left); }
|
|
ctx.save();
|
|
// Breakeven lines — amber dashed
|
|
(chart.canvas._beLines || []).forEach(function(be) {
|
|
var x = xPx(be);
|
|
if (x < xScale.left || x > xScale.right) return;
|
|
ctx.beginPath();
|
|
ctx.setLineDash([5,4]);
|
|
ctx.strokeStyle = 'rgba(245,166,35,0.85)';
|
|
ctx.lineWidth = 1.5;
|
|
ctx.moveTo(x, yScale.top);
|
|
ctx.lineTo(x, yScale.bottom);
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
ctx.fillStyle = '#F5A623';
|
|
ctx.font = '9px monospace';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(Number(be).toLocaleString('en-IN'), x, yScale.top + 10);
|
|
});
|
|
// Spot line — coral dashed
|
|
var spot = chart.canvas._spotLine;
|
|
if (spot) {
|
|
var x = xPx(spot);
|
|
if (x >= xScale.left && x <= xScale.right) {
|
|
ctx.beginPath();
|
|
ctx.setLineDash([6,3]);
|
|
ctx.strokeStyle = 'rgba(255,107,74,0.9)';
|
|
ctx.lineWidth = 2;
|
|
ctx.moveTo(x, yScale.top);
|
|
ctx.lineTo(x, yScale.bottom);
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
ctx.fillStyle = '#FF6B4A';
|
|
ctx.font = 'bold 9px monospace';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText('Spot ' + Number(spot).toLocaleString('en-IN'), x, yScale.bottom - 4);
|
|
}
|
|
}
|
|
ctx.restore();
|
|
}
|
|
};
|
|
Chart.register(_payoffPlugin);
|
|
|
|
loadConfig();refresh();
|
|
setInterval(refresh,60000);
|
|
setInterval(loadMarket,15000);
|
|
</script>
|
|
</body>
|
|
</html>
|