628 lines
26 KiB
HTML
628 lines
26 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="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>
|
|
<style>
|
|
/* ── Design tokens ─────────────────────────────────────────────────── */
|
|
:root {
|
|
--coral: #FF6B4A;
|
|
--coral-dim: rgba(255,107,74,0.12);
|
|
--amber: #F5A623;
|
|
--amber-dim: rgba(245,166,35,0.12);
|
|
--green: #2ECC71;
|
|
--green-dim: rgba(46,204,113,0.12);
|
|
--red: #E74C3C;
|
|
--red-dim: rgba(231,76,60,0.12);
|
|
--purple: #9B59B6;
|
|
--transition: 0.25s cubic-bezier(0.4,0,0.2,1);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--bg: #0D1117;
|
|
--bg2: #161B22;
|
|
--bg3: #1C2330;
|
|
--border: rgba(255,255,255,0.07);
|
|
--border2: rgba(255,255,255,0.12);
|
|
--text: #E6EDF3;
|
|
--text2: #8B949E;
|
|
--text3: #484F58;
|
|
--card-bg: rgba(22,27,34,0.95);
|
|
--card-glow: rgba(255,107,74,0.04);
|
|
--shadow: 0 4px 24px rgba(0,0,0,0.4);
|
|
--shadow-lg: 0 8px 48px rgba(0,0,0,0.6);
|
|
--glass: rgba(22,27,34,0.8);
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--bg: #FAF7F4;
|
|
--bg2: #FFFFFF;
|
|
--bg3: #F4EFE9;
|
|
--border: rgba(0,0,0,0.06);
|
|
--border2: rgba(0,0,0,0.12);
|
|
--text: #1A1410;
|
|
--text2: #6B6056;
|
|
--text3: #B8AFA8;
|
|
--card-bg: rgba(255,255,255,0.95);
|
|
--card-glow: rgba(255,107,74,0.03);
|
|
--shadow: 0 4px 24px rgba(0,0,0,0.08);
|
|
--shadow-lg: 0 8px 48px rgba(0,0,0,0.12);
|
|
--glass: rgba(255,255,255,0.85);
|
|
}
|
|
|
|
/* ── Reset & base ──────────────────────────────────────────────────── */
|
|
*, *::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(--transition), color var(--transition);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Background texture */
|
|
body::before {
|
|
content: '';
|
|
position: fixed; inset: 0; pointer-events: none; z-index: 0;
|
|
background-image:
|
|
radial-gradient(ellipse 80vw 60vh at 10% 0%, rgba(255,107,74,0.06) 0%, transparent 60%),
|
|
radial-gradient(ellipse 60vw 50vh at 90% 100%, rgba(245,166,35,0.04) 0%, transparent 60%);
|
|
}
|
|
|
|
.wrap { max-width: 1280px; margin: 0 auto; padding: 24px 20px; position: relative; z-index: 1; }
|
|
|
|
/* ── Typography ────────────────────────────────────────────────────── */
|
|
.serif { font-family: 'DM Serif Display', serif; }
|
|
.mono { font-family: 'Geist Mono', monospace; }
|
|
|
|
/* ── Nav ───────────────────────────────────────────────────────────── */
|
|
nav {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 16px 24px; margin-bottom: 32px;
|
|
background: var(--glass);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
backdrop-filter: blur(12px);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.nav-left { display: flex; align-items: center; gap: 12px; }
|
|
|
|
.nav-logo {
|
|
font-family: 'DM Serif Display', serif;
|
|
font-size: 1.2rem;
|
|
color: var(--coral);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.nav-divider { width: 1px; height: 20px; background: var(--border2); }
|
|
|
|
.nav-subtitle { font-size: 0.75rem; font-weight: 500; color: var(--text2); letter-spacing: 0.06em; text-transform: uppercase; }
|
|
|
|
.nav-right { display: flex; align-items: center; gap: 10px; }
|
|
|
|
.status-pill {
|
|
display: flex; align-items: center; gap: 6px;
|
|
padding: 5px 12px; border-radius: 9999px;
|
|
font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
|
|
border: 1px solid var(--border2);
|
|
color: var(--text2);
|
|
background: var(--bg3);
|
|
transition: all var(--transition);
|
|
}
|
|
.status-pill.open { color: var(--green); border-color: rgba(46,204,113,0.3); background: var(--green-dim); }
|
|
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
|
.status-pill.open .status-dot { animation: pulse 2s infinite; }
|
|
|
|
@keyframes pulse { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:0.5; transform:scale(0.8)} }
|
|
|
|
.last-updated { font-size: 0.72rem; color: var(--text3); font-family: 'Geist Mono', monospace; }
|
|
|
|
.icon-btn {
|
|
width: 36px; height: 36px; border-radius: 10px;
|
|
border: 1px solid var(--border2);
|
|
background: var(--bg3);
|
|
color: var(--text2);
|
|
cursor: pointer;
|
|
display: flex; align-items: center; justify-content: center;
|
|
transition: all var(--transition);
|
|
font-size: 16px;
|
|
}
|
|
.icon-btn:hover { background: var(--bg2); color: var(--text); border-color: var(--coral); transform: translateY(-1px); }
|
|
.icon-btn:active { transform: translateY(0); }
|
|
|
|
/* ── P&L Hero ──────────────────────────────────────────────────────── */
|
|
.pnl-hero {
|
|
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.pnl-card {
|
|
padding: 24px 24px 20px;
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 20px;
|
|
box-shadow: var(--shadow);
|
|
position: relative; overflow: hidden;
|
|
transition: all var(--transition);
|
|
}
|
|
.pnl-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
|
|
|
|
/* Accent bar at top */
|
|
.pnl-card::before {
|
|
content: ''; position: absolute; top: 0; left: 0; right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
|
|
border-radius: 20px 20px 0 0;
|
|
}
|
|
|
|
/* Subtle glow blob */
|
|
.pnl-card::after {
|
|
content: ''; position: absolute; top: -40px; right: -40px;
|
|
width: 120px; height: 120px; border-radius: 50%;
|
|
background: var(--accent-a);
|
|
opacity: 0.08; filter: blur(30px); pointer-events: none;
|
|
}
|
|
|
|
.pnl-card.unrealised { --accent-a: #2ECC71; --accent-b: #1abc9c; }
|
|
.pnl-card.realised { --accent-a: #3498DB; --accent-b: #2980b9; }
|
|
.pnl-card.total { --accent-a: #FF6B4A; --accent-b: #F5A623; }
|
|
|
|
.pnl-label {
|
|
font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
|
|
text-transform: uppercase; color: var(--text2); margin-bottom: 10px;
|
|
}
|
|
|
|
.pnl-value {
|
|
font-family: 'DM Serif Display', serif;
|
|
font-size: 2.4rem; line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 8px;
|
|
transition: color var(--transition);
|
|
}
|
|
.pnl-card.total .pnl-value { font-size: 3rem; }
|
|
|
|
.pnl-sub { font-size: 0.72rem; color: var(--text3); }
|
|
|
|
.up { color: var(--green); }
|
|
.down { color: var(--red); }
|
|
.flat { color: var(--text2); }
|
|
|
|
/* ── Stats row ─────────────────────────────────────────────────────── */
|
|
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
|
|
|
|
.stat-card {
|
|
padding: 16px 18px;
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
box-shadow: var(--shadow);
|
|
transition: all var(--transition);
|
|
}
|
|
.stat-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text2); margin-bottom: 6px; }
|
|
.stat-value { font-family: 'DM Serif Display', serif; font-size: 1.6rem; color: var(--text); }
|
|
.stat-value.amber { color: var(--amber); }
|
|
.stat-value.red { color: var(--red); }
|
|
|
|
/* ── Chart card ────────────────────────────────────────────────────── */
|
|
.chart-card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 20px;
|
|
box-shadow: var(--shadow);
|
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chart-header {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 18px 24px 14px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.chart-title { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text); }
|
|
|
|
.range-btns { display: flex; gap: 4px; }
|
|
.range-btn {
|
|
padding: 4px 12px; border-radius: 8px; font-size: 0.72rem; font-weight: 600;
|
|
border: 1px solid var(--border2); cursor: pointer; background: transparent;
|
|
color: var(--text2); transition: all 0.15s;
|
|
}
|
|
.range-btn:hover { color: var(--text); border-color: var(--coral); }
|
|
.range-btn.active { background: var(--coral); border-color: var(--coral); color: #fff; }
|
|
|
|
.chart-body { padding: 16px 20px 20px; height: 200px; position: relative; }
|
|
.chart-empty { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; color: var(--text3); font-size: 0.8rem; }
|
|
.chart-empty.show { display: flex; }
|
|
|
|
/* ── Table card ────────────────────────────────────────────────────── */
|
|
.table-card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 20px;
|
|
box-shadow: var(--shadow);
|
|
overflow: hidden;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.table-header {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 18px 24px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.table-title { font-size: 0.82rem; font-weight: 600; color: var(--text); }
|
|
.live-badge {
|
|
display: flex; align-items: center; gap: 6px;
|
|
font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em;
|
|
color: var(--green); text-transform: uppercase;
|
|
}
|
|
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
|
|
|
|
table { width: 100%; border-collapse: collapse; }
|
|
thead th {
|
|
padding: 10px 20px; text-align: right;
|
|
font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em;
|
|
text-transform: uppercase; color: var(--text3);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
thead th:first-child { text-align: left; }
|
|
|
|
tbody tr { transition: background 0.12s; }
|
|
tbody tr:hover { background: rgba(255,107,74,0.03); }
|
|
tbody tr + tr { border-top: 1px solid var(--border); }
|
|
|
|
td {
|
|
padding: 13px 20px; font-size: 0.82rem;
|
|
text-align: right; color: var(--text);
|
|
}
|
|
td:first-child { text-align: left; }
|
|
|
|
.sym-name { font-weight: 600; font-size: 0.8rem; color: var(--text); }
|
|
.sym-meta { font-size: 0.67rem; color: var(--text3); margin-top: 2px; font-family: 'Geist Mono', monospace; }
|
|
|
|
.qty-long { color: var(--green); font-weight: 600; font-family: 'Geist Mono', monospace; }
|
|
.qty-short { color: var(--red); font-weight: 600; font-family: 'Geist Mono', monospace; }
|
|
|
|
.mono-val { font-family: 'Geist Mono', monospace; font-size: 0.8rem; }
|
|
|
|
tfoot tr { border-top: 2px solid var(--border2); background: var(--bg3); }
|
|
tfoot td { padding: 12px 20px; font-weight: 600; font-size: 0.82rem; }
|
|
tfoot td:first-child { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text2); }
|
|
|
|
/* ── Alerts card ───────────────────────────────────────────────────── */
|
|
.alert-row-up { border-left: 3px solid var(--green) !important; }
|
|
.alert-row-down { border-left: 3px solid var(--red) !important; }
|
|
|
|
/* ── Utility ───────────────────────────────────────────────────────── */
|
|
.section-gap { margin-bottom: 20px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
|
|
<!-- Nav -->
|
|
<nav>
|
|
<div class="nav-left">
|
|
<span class="nav-logo">Angel</span>
|
|
<div class="nav-divider"></div>
|
|
<span class="nav-subtitle">Position Tracker</span>
|
|
</div>
|
|
<div class="nav-right">
|
|
<span class="last-updated" id="last-updated">—</span>
|
|
<div class="status-pill" id="market-status">
|
|
<span class="status-dot"></span>
|
|
<span id="market-label">Checking</span>
|
|
</div>
|
|
<button class="icon-btn" id="theme-toggle" title="Toggle theme" onclick="toggleTheme()">🌙</button>
|
|
<button class="icon-btn" title="Refresh" onclick="refresh()">↺</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- P&L Hero -->
|
|
<div class="pnl-hero">
|
|
<div class="pnl-card unrealised">
|
|
<div class="pnl-label">Unrealised P&L</div>
|
|
<div class="pnl-value flat" id="val-unrealised">—</div>
|
|
<div class="pnl-sub">Open positions MTM</div>
|
|
</div>
|
|
<div class="pnl-card realised">
|
|
<div class="pnl-label">Realised P&L</div>
|
|
<div class="pnl-value flat" id="val-realised">—</div>
|
|
<div class="pnl-sub">Closed legs today</div>
|
|
</div>
|
|
<div class="pnl-card total">
|
|
<div class="pnl-label">Total P&L</div>
|
|
<div class="pnl-value flat" id="val-total">—</div>
|
|
<div class="pnl-sub">Unrealised + Realised</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
<div class="stats-row">
|
|
<div class="stat-card">
|
|
<div class="stat-label">Open Positions</div>
|
|
<div class="stat-value" id="stat-positions">—</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Alerts Today</div>
|
|
<div class="stat-value amber" id="stat-alerts">—</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Last Error</div>
|
|
<div class="stat-value red" id="stat-error" style="font-size:0.9rem;font-family:'Geist',sans-serif;margin-top:4px">None</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart -->
|
|
<div class="chart-card">
|
|
<div class="chart-header">
|
|
<span class="chart-title">Intraday P&L Curve</span>
|
|
<div class="range-btns">
|
|
<button class="range-btn" onclick="loadChart(2)" id="btn-2h">2H</button>
|
|
<button class="range-btn active" onclick="loadChart(8)" id="btn-8h">8H</button>
|
|
<button class="range-btn" onclick="loadChart(24)" id="btn-24h">24H</button>
|
|
<button class="range-btn" onclick="loadChart(72)" id="btn-72h">3D</button>
|
|
</div>
|
|
</div>
|
|
<div class="chart-body">
|
|
<canvas id="pnl-chart"></canvas>
|
|
<div class="chart-empty" id="chart-empty">No history yet — populates after first poll cycle</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Positions -->
|
|
<div class="table-card section-gap">
|
|
<div class="table-header">
|
|
<span class="table-title">Option Positions</span>
|
|
<div class="live-badge"><span class="live-dot"></span> Live</div>
|
|
</div>
|
|
<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-tbody">
|
|
<tr><td colspan="7" style="text-align:center;padding:40px;color:var(--text3)">Loading positions…</td></tr>
|
|
</tbody>
|
|
<tfoot id="pos-tfoot" style="display:none">
|
|
<tr>
|
|
<td colspan="4">Portfolio Total</td>
|
|
<td id="foot-u" class="mono-val">—</td>
|
|
<td id="foot-r" class="mono-val">—</td>
|
|
<td id="foot-t" class="mono-val">—</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Alerts -->
|
|
<div class="table-card">
|
|
<div class="table-header">
|
|
<span class="table-title">Alert History</span>
|
|
</div>
|
|
<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="alert-tbody">
|
|
<tr><td colspan="6" style="text-align:center;padding:32px;color:var(--text3)">No alerts yet</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div><!-- /wrap -->
|
|
|
|
<script>
|
|
// ── Theme ─────────────────────────────────────────────────────────────────
|
|
let currentTheme = localStorage.getItem('theme') || 'dark';
|
|
document.documentElement.setAttribute('data-theme', currentTheme);
|
|
document.getElementById('theme-toggle').textContent = currentTheme === 'dark' ? '☀️' : '🌙';
|
|
|
|
function toggleTheme() {
|
|
currentTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
document.documentElement.setAttribute('data-theme', currentTheme);
|
|
document.getElementById('theme-toggle').textContent = currentTheme === 'dark' ? '☀️' : '🌙';
|
|
localStorage.setItem('theme', currentTheme);
|
|
if (chartInstance) { chartInstance.destroy(); chartInstance = null; loadChart(currentHours); }
|
|
}
|
|
|
|
// ── Helpers ────────────────────────────────────────────────────────────────
|
|
const fmt = (n, d=0) => {
|
|
if (n == null) return '—';
|
|
const abs = Math.abs(n).toLocaleString('en-IN', {maximumFractionDigits: d});
|
|
return (n >= 0 ? '+₹' : '-₹') + abs;
|
|
};
|
|
const pnlCls = n => n > 50 ? 'up' : n < -50 ? 'down' : 'flat';
|
|
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'});
|
|
|
|
// ── Chart ──────────────────────────────────────────────────────────────────
|
|
let chartInstance = null;
|
|
let currentHours = 8;
|
|
|
|
async function loadChart(h = 8) {
|
|
currentHours = h;
|
|
document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
|
|
const btnMap = {2:'btn-2h', 8:'btn-8h', 24:'btn-24h', 72:'btn-72h'};
|
|
document.getElementById(btnMap[h])?.classList.add('active');
|
|
|
|
const r = await fetch(`/api/pnl-history?hours=${h}`);
|
|
const { summary, history } = await r.json();
|
|
|
|
if (summary) {
|
|
const set = (id, val) => {
|
|
const el = document.getElementById(id);
|
|
el.textContent = fmt(val);
|
|
el.className = 'pnl-value ' + pnlCls(val);
|
|
};
|
|
set('val-unrealised', summary.totalUnrealised);
|
|
set('val-realised', summary.totalRealised);
|
|
set('val-total', summary.totalPnl);
|
|
document.getElementById('stat-positions').textContent = summary.openPositions;
|
|
}
|
|
|
|
const canvas = document.getElementById('pnl-chart');
|
|
const 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 isDark = currentTheme === 'dark';
|
|
const gridColor = isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)';
|
|
const textColor = isDark ? '#484F58' : '#B8AFA8';
|
|
|
|
const labels = history.map(h => toIST(h.recorded_at));
|
|
const unrealised = history.map(h => h.total_unrealised);
|
|
const realised = history.map(h => h.total_realised);
|
|
const total = history.map(h => h.total_pnl);
|
|
|
|
if (chartInstance) chartInstance.destroy();
|
|
chartInstance = new Chart(canvas, {
|
|
type: 'line',
|
|
data: {
|
|
labels,
|
|
datasets: [
|
|
{ label: 'Total P&L', data: total,
|
|
borderColor: '#FF6B4A', backgroundColor: 'rgba(255,107,74,0.08)',
|
|
tension: 0.4, pointRadius: 0, borderWidth: 2, fill: true },
|
|
{ label: 'Unrealised', data: unrealised,
|
|
borderColor: '#2ECC71', backgroundColor: 'transparent',
|
|
tension: 0.4, pointRadius: 0, borderWidth: 1.5 },
|
|
{ label: 'Realised', data: realised,
|
|
borderColor: '#3498DB', backgroundColor: 'transparent',
|
|
tension: 0.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: textColor, boxWidth: 10, font: { size: 11, family: 'Geist' } } },
|
|
tooltip: {
|
|
backgroundColor: isDark ? '#1C2330' : '#fff',
|
|
borderColor: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)',
|
|
borderWidth: 1, titleColor: textColor,
|
|
bodyColor: isDark ? '#E6EDF3' : '#1A1410',
|
|
padding: 10, cornerRadius: 8,
|
|
callbacks: {
|
|
label: ctx => ` ${ctx.dataset.label}: ${ctx.raw >= 0 ? '+' : ''}₹${Math.round(ctx.raw).toLocaleString('en-IN')}`
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: { ticks: { color: textColor, maxTicksLimit: 8, font: {size:10, family:'Geist Mono'} }, grid: { color: gridColor } },
|
|
y: { ticks: { color: textColor, font: {size:10, family:'Geist Mono'},
|
|
callback: v => (v>=0?'+':'')+'₹'+Math.round(v).toLocaleString('en-IN') },
|
|
grid: { color: gridColor } }
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// ── Positions ──────────────────────────────────────────────────────────────
|
|
async function loadPositions() {
|
|
const r = await fetch('/api/positions');
|
|
const { data } = await r.json();
|
|
const open = data.filter(p => p.is_closed === 0);
|
|
const tbody = document.getElementById('pos-tbody');
|
|
const tfoot = document.getElementById('pos-tfoot');
|
|
|
|
if (!open.length) {
|
|
tbody.innerHTML = `<tr><td colspan="7" style="text-align:center;padding:40px;color:var(--text3)">No open positions</td></tr>`;
|
|
tfoot.style.display = 'none'; return;
|
|
}
|
|
|
|
const sumU = open.reduce((s,p) => s + p.unrealised_pnl, 0);
|
|
const sumR = open.reduce((s,p) => s + p.realised_pnl, 0);
|
|
const sumT = open.reduce((s,p) => s + p.total_pnl, 0);
|
|
|
|
tbody.innerHTML = open.map(p => `
|
|
<tr>
|
|
<td>
|
|
<div class="sym-name">${p.tradingsymbol}</div>
|
|
<div class="sym-meta">${p.exchange} · ${p.producttype}</div>
|
|
</td>
|
|
<td class="${p.netqty < 0 ? 'qty-short' : 'qty-long'}">${p.netqty > 0 ? '+' : ''}${p.netqty}</td>
|
|
<td class="mono-val">₹${(+p.ltp).toFixed(2)}</td>
|
|
<td class="mono-val" style="color:var(--text2)">₹${(+p.avg_price).toFixed(2)}</td>
|
|
<td class="mono-val ${pnlCls(p.unrealised_pnl)}">${fmt(p.unrealised_pnl)}</td>
|
|
<td class="mono-val ${pnlCls(p.realised_pnl)}">${fmt(p.realised_pnl)}</td>
|
|
<td class="mono-val ${pnlCls(p.total_pnl)}" style="font-weight:600">${fmt(p.total_pnl)}</td>
|
|
</tr>`).join('');
|
|
|
|
tfoot.style.display = '';
|
|
const sf = (id,v) => {
|
|
const el = document.getElementById(id);
|
|
el.textContent = fmt(v);
|
|
el.className = `mono-val ${pnlCls(v)}`;
|
|
};
|
|
sf('foot-u', sumU); sf('foot-r', sumR); sf('foot-t', sumT);
|
|
}
|
|
|
|
// ── Alerts ─────────────────────────────────────────────────────────────────
|
|
async function loadAlerts() {
|
|
const r = await fetch('/api/alerts?limit=20');
|
|
const { data } = await r.json();
|
|
const today = new Date().toISOString().slice(0,10);
|
|
const todayCount = data.filter(a => a.alerted_at.startsWith(today)).length;
|
|
document.getElementById('stat-alerts').textContent = todayCount;
|
|
|
|
if (!data.length) return;
|
|
document.getElementById('alert-tbody').innerHTML = data.map(a => `
|
|
<tr class="${a.direction==='up' ? 'alert-row-up' : 'alert-row-down'}">
|
|
<td><div class="sym-name">${a.direction==='up'?'▲':'▼'} ${a.tradingsymbol}</div></td>
|
|
<td class="mono-val ${pnlCls(a.current_pnl)}">${fmt(a.current_pnl)}</td>
|
|
<td class="mono-val" style="color:var(--text2)">${fmt(a.anchor_pnl)}</td>
|
|
<td class="mono-val ${pnlCls(a.delta_abs)}">${fmt(a.delta_abs)} <span style="opacity:0.6;font-size:0.75em">(${a.delta_pct>0?'+':''}${(+a.delta_pct).toFixed(1)}%)</span></td>
|
|
<td class="mono-val">₹${(+a.ltp).toFixed(2)}</td>
|
|
<td style="color:var(--text3);font-family:'Geist Mono',monospace;font-size:0.75rem">${toIST(a.alerted_at)}</td>
|
|
</tr>`).join('');
|
|
}
|
|
|
|
// ── Health ─────────────────────────────────────────────────────────────────
|
|
async function loadHealth() {
|
|
const r = await fetch('/api/health');
|
|
const d = await r.json();
|
|
const pill = document.getElementById('market-status');
|
|
const label = document.getElementById('market-label');
|
|
label.textContent = d.marketOpen ? 'Market Open' : 'Market Closed';
|
|
pill.className = 'status-pill' + (d.marketOpen ? ' open' : '');
|
|
document.getElementById('stat-error').textContent = d.lastError ? d.lastError.error.slice(0,30)+'…' : 'None';
|
|
document.getElementById('last-updated').textContent =
|
|
new Date().toLocaleTimeString('en-IN',{timeZone:'Asia/Kolkata',hour12:false}) + ' IST';
|
|
}
|
|
|
|
// ── Main loop ──────────────────────────────────────────────────────────────
|
|
async function refresh() {
|
|
await Promise.all([loadPositions(), loadAlerts(), loadHealth(), loadChart(currentHours)]);
|
|
}
|
|
|
|
refresh();
|
|
setInterval(refresh, 60_000);
|
|
</script>
|
|
</body>
|
|
</html>
|