Update app.py

app.py

@@ -1,7 +1,10 @@
 import requests
 import uvicorn
 import json
-from fastapi import FastAPI
+import threading
+import os
+import time
+from fastapi import FastAPI, BackgroundTasks
 from fastapi.responses import HTMLResponse, JSONResponse
 from fastapi.middleware.cors import CORSMiddleware
 
@@ -10,7 +13,6 @@ from fastapi.middleware.cors import CORSMiddleware
 # ==========================================
 app = FastAPI()
 
-# Allow CORS to prevent browser blocking
 app.add_middleware(
     CORSMiddleware,
     allow_origins=["*"],
@@ -18,54 +20,131 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
-# GoCharting Headers (Crucial for data fetching)
+# File to store cached symbols
+SYMBOL_FILE = "symbols.json"
+
+# In-memory cache for fast searching
+SYMBOL_CACHE = []
+
+# Headers for GoCharting
 HEADERS = {
     "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
-    "Accept": "application/json, text/plain, */*",
-    "Referer": "https://gocharting.com/option-chain/NSE/BANKNIFTY",
+    "Referer": "https://gocharting.com/",
     "Origin": "https://gocharting.com"
 }
 
 # ==========================================
-# 2. PROXY ROUTE (NO SERVER MATH)
+# 2. BACKGROUND SYMBOL LOADER (PHP REPLICA)
+# ==========================================
+def update_symbol_master():
+    """
+    Replicates the PHP loop: A-Z search to build a master list 
+    of all instruments that have an options chain.
+    """
+    global SYMBOL_CACHE
+    print(">>> [SYSTEM] Updating Symbol Master (A-Z)...")
+    
+    temp_list = []
+    
+    # Loop A to Z (ASCII 65 to 90)
+    for i in range(65, 91):
+        letter = chr(i)
+        try:
+            url = f"https://gocharting.com/api/instruments_with_options/search?q={letter}"
+            r = requests.get(url, headers=HEADERS, timeout=10)
+            if r.status_code == 200:
+                data = r.json()
+                results = data.get("payload", {}).get("results", [])
+                
+                for item in results:
+                    details = item.get("item", {})
+                    # Check if it has options chain (logic from your PHP)
+                    if details.get("has_options_chain") == True:
+                        temp_list.append({
+                            "symbol": details.get("symbol"),
+                            "name": details.get("name"),
+                            "exchange": details.get("exchange")
+                        })
+            time.sleep(0.2) # Be polite to API
+        except Exception as e:
+            print(f"Error fetching {letter}: {e}")
+
+    # Remove duplicates
+    unique_list = {v['symbol']: v for v in temp_list}.values()
+    SYMBOL_CACHE = list(unique_list)
+    
+    # Save to disk
+    with open(SYMBOL_FILE, "w") as f:
+        json.dump(SYMBOL_CACHE, f)
+        
+    print(f">>> [SYSTEM] Master List Updated: {len(SYMBOL_CACHE)} Symbols found.")
+
+def load_cache_on_startup():
+    global SYMBOL_CACHE
+    if os.path.exists(SYMBOL_FILE):
+        try:
+            with open(SYMBOL_FILE, "r") as f:
+                SYMBOL_CACHE = json.load(f)
+            print(f">>> [SYSTEM] Loaded {len(SYMBOL_CACHE)} symbols from cache.")
+        except:
+            pass
+    
+    # If cache empty or old, run update in background
+    if not SYMBOL_CACHE:
+        threading.Thread(target=update_symbol_master).start()
+
+@app.on_event("startup")
+def startup_event():
+    load_cache_on_startup()
+
+# ==========================================
+# 3. API ROUTES
 # ==========================================
 
 @app.get("/")
-def ui():
+def home():
     return HTMLResponse(FRONTEND_HTML)
 
-@app.get("/api/proxy")
-def get_gocharting_data(symbol: str = "BANKNIFTY", exchange: str = "NSE"):
+@app.get("/api/search")
+def search_symbols(q: str):
     """
-    1. Connects to GoCharting.
-    2. Downloads the raw JSON.
-    3. Sends it DIRECTLY to the frontend.
-    No calculation is done here.
+    Fast search from memory. Returns symbol, name, and exchange.
+    """
+    q = q.upper()
+    results = []
+    # Simple search algorithm
+    for item in SYMBOL_CACHE:
+        if q in item["symbol"] or q in item["name"].upper():
+            results.append(item)
+            if len(results) >= 10: break # Limit results
+    return JSONResponse(results)
+
+@app.get("/api/fetch")
+def proxy_data(symbol: str, exchange: str):
+    """
+    Proxies the specific option chain request.
     """
     url = "https://gocharting.com/api/options/chain"
     params = {
-        "exchange": exchange.upper(),
+        "exchange": exchange,
         "segment": "SPOT",
-        "symbol": symbol.upper(),
+        "symbol": symbol,
         "quote_underlying": "true",
         "quote_chain": "true"
     }
-    
     try:
-        # High timeout to handle large data
-        response = requests.get(url, headers=HEADERS, params=params, timeout=15)
-        
-        if response.status_code == 200:
-            # Send raw JSON to frontend
-            return JSONResponse(response.json())
-        else:
-            return JSONResponse({"status": "error", "msg": f"GoCharting API Error: {response.status_code}"})
-            
+        r = requests.get(url, headers=HEADERS, params=params, timeout=15)
+        return JSONResponse(r.json())
     except Exception as e:
         return JSONResponse({"status": "error", "msg": str(e)})
 
+@app.get("/api/force_update")
+def force_update(background_tasks: BackgroundTasks):
+    background_tasks.add_task(update_symbol_master)
+    return {"status": "update_started"}
+
 # ==========================================
-# 3. PROFESSIONAL FRONTEND
+# 4. FRONTEND (Professional Chart UI)
 # ==========================================
 FRONTEND_HTML = """
 <!DOCTYPE html>
@@ -73,288 +152,384 @@ FRONTEND_HTML = """
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>GEX TERMINAL</title>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap" rel="stylesheet">
+    <title>PRO GEX ANALYZER</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
         :root {
-            --bg: #000000;
-            --panel: #0d0d0d;
-            --border: #222;
-            --text: #cfcfcf;
-            --accent: #2962ff;
-            --call: #00ff88;
-            --put: #ff0055;
-            --atm: #222;
+            --bg: #09090b;
+            --panel: #18181b;
+            --border: #27272a;
+            --accent: #3b82f6;
+            --text-main: #f4f4f5;
+            --text-sub: #a1a1aa;
+            --call: #10b981;
+            --put: #ef4444;
         }
 
         * { box-sizing: border-box; outline: none; }
-        body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Roboto Mono', monospace; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
+        body { margin: 0; background: var(--bg); color: var(--text-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; }
 
         /* HEADER */
-        .header { height: 45px; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 15px; justify-content: space-between; background: var(--panel); }
-        .logo { font-weight: 700; font-size: 14px; letter-spacing: -0.5px; color: #fff; }
-        .logo span { color: var(--accent); }
-        .status { font-size: 10px; color: #666; font-weight: 700; }
-
-        /* LAYOUT */
-        .workspace { display: flex; flex: 1; overflow: hidden; }
-        .sidebar { width: 260px; background: #080808; border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 15px; gap: 15px; z-index: 2; }
-        .main { flex: 1; display: flex; flex-direction: column; position: relative; }
-
-        /* INPUTS */
-        .field { display: flex; flex-direction: column; gap: 5px; }
-        label { font-size: 9px; color: #666; font-weight: 700; text-transform: uppercase; }
-        input, select { background: #111; border: 1px solid #333; color: #fff; padding: 8px; font-family: inherit; font-size: 11px; border-radius: 2px; }
-        input:focus, select:focus { border-color: var(--accent); }
-        
-        .btn { background: var(--accent); color: #fff; border: none; padding: 10px; cursor: pointer; font-weight: 700; font-size: 11px; border-radius: 2px; }
-        .btn:hover { opacity: 0.9; }
-
-        /* SPOT DISPLAY */
-        .spot-box { background: #111; border: 1px solid #333; padding: 15px; text-align: center; border-radius: 4px; }
-        .spot-val { font-size: 20px; font-weight: 700; color: #fff; margin: 5px 0; }
-        .spot-lbl { font-size: 9px; color: #666; }
-
-        /* CHART HEADER */
-        .chart-head { height: 35px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr 60px 1fr; align-items: center; padding: 0 20px; font-size: 10px; font-weight: 700; background: var(--panel); color: #888; }
-        .chart-head div:nth-child(1) { text-align: left; color: var(--put); }
-        .chart-head div:nth-child(2) { text-align: center; }
-        .chart-head div:nth-child(3) { text-align: right; color: var(--call); }
-
-        /* CHART BODY */
-        .chart-area { flex: 1; overflow-y: auto; padding: 10px 0; }
-        .row { display: grid; grid-template-columns: 1fr 60px 1fr; height: 20px; align-items: center; margin-bottom: 2px; opacity: 0.8; transition: 0.1s; }
-        .row:hover { opacity: 1; background: #111; }
-        .row.atm { background: #1a1a1a; border-top: 1px solid #333; border-bottom: 1px solid #333; opacity: 1; }
-
-        .strike { text-align: center; font-size: 11px; font-weight: 700; color: #fff; }
-        .atm .strike { color: var(--accent); }
-
-        /* BARS */
-        .bar-wrap { position: relative; height: 100%; display: flex; align-items: center; }
-        .bar-wrap.left { justify-content: flex-end; padding-right: 10px; border-right: 1px dashed #222; }
-        .bar-wrap.right { justify-content: flex-start; padding-left: 10px; border-left: 1px dashed #222; }
-
-        .bar { height: 12px; transition: width 0.4s ease; min-width: 1px; }
-        .bar.put { background: var(--put); border-top-left-radius: 2px; border-bottom-left-radius: 2px; }
-        .bar.call { background: var(--call); border-top-right-radius: 2px; border-bottom-right-radius: 2px; }
+        .top-nav { height: 60px; border-bottom: 1px solid var(--border); background: var(--panel); display: flex; align-items: center; padding: 0 20px; justify-content: space-between; flex-shrink: 0; }
+        .brand { font-family: 'JetBrains Mono'; font-weight: 800; font-size: 18px; letter-spacing: -1px; }
+        .brand span { color: var(--accent); }
 
-        .val { font-size: 9px; color: #aaa; margin: 0 5px; }
+        .search-container { position: relative; width: 300px; }
+        .search-input { width: 100%; background: #000; border: 1px solid var(--border); color: #fff; padding: 10px 12px; border-radius: 6px; font-family: 'JetBrains Mono'; font-size: 12px; }
+        .search-input:focus { border-color: var(--accent); }
+        
+        .search-dropdown { position: absolute; top: 105%; left: 0; width: 100%; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; z-index: 100; max-height: 300px; overflow-y: auto; display: none; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
+        .search-item { padding: 10px; border-bottom: 1px solid var(--border); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
+        .search-item:hover { background: var(--border); }
+        .s-sym { font-weight: 700; font-size: 13px; color: #fff; }
+        .s-name { font-size: 10px; color: var(--text-sub); }
+        .s-exch { font-size: 9px; background: var(--accent); color: #fff; padding: 2px 4px; border-radius: 3px; font-weight: 700; }
+
+        /* MAIN LAYOUT */
+        .layout { display: flex; flex: 1; overflow: hidden; }
+        
+        /* SIDEBAR CONTROLS */
+        .sidebar { width: 260px; background: #000; border-right: 1px solid var(--border); padding: 20px; display: flex; flex-direction: column; gap: 20px; flex-shrink: 0; }
+        .stat-card { background: var(--panel); border: 1px solid var(--border); padding: 15px; border-radius: 8px; text-align: center; }
+        .stat-val { font-size: 24px; font-family: 'JetBrains Mono'; font-weight: 700; color: #fff; }
+        .stat-lbl { font-size: 10px; color: var(--text-sub); font-weight: 600; margin-top: 5px; text-transform: uppercase; }
+
+        .ctrl-group label { display: block; font-size: 10px; font-weight: 700; color: var(--text-sub); margin-bottom: 8px; }
+        select, input[type="range"] { width: 100%; background: var(--panel); border: 1px solid var(--border); color: #fff; padding: 8px; border-radius: 4px; font-family: 'Inter'; font-size: 12px; }
+        
+        /* CHART AREA */
+        .chart-wrapper { flex: 1; padding: 20px; display: flex; flex-direction: column; position: relative; }
+        .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
+        .chart-title { font-size: 14px; font-weight: 700; }
+        .canvas-container { flex: 1; position: relative; min-height: 0; }
 
         /* LOADER */
-        .loader { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.9); display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 10; display: none; }
-        .spinner { width: 30px; height: 30px; border: 2px solid #333; border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s infinite linear; }
+        .loader-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(9,9,11,0.8); z-index: 50; display: none; justify-content: center; align-items: center; flex-direction: column; backdrop-filter: blur(2px); }
+        .spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s infinite linear; }
         @keyframes spin { to { transform: rotate(360deg); } }
 
+        /* BADGE */
+        .live-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; color: var(--call); background: rgba(16, 185, 129, 0.1); padding: 4px 8px; border-radius: 20px; border: 1px solid rgba(16, 185, 129, 0.2); }
+        .dot { width: 6px; height: 6px; background: currentColor; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
     </style>
 </head>
 <body>
 
-<div class="header">
-    <div class="logo">GOCHARTING <span>GEX</span></div>
-    <div class="status" id="lastUpdate">WAITING FOR DATA</div>
+<div class="top-nav">
+    <div class="brand">GEX<span>EXPLORER</span></div>
+    
+    <div class="search-container">
+        <input type="text" class="search-input" id="searchInp" placeholder="Search (e.g. NIFTY, RELIANCE)..." autocomplete="off">
+        <div class="search-dropdown" id="searchRes"></div>
+    </div>
+    
+    <div class="live-badge"><div class="dot"></div> <span id="statusTxt">READY</span></div>
 </div>
 
-<div class="workspace">
+<div class="layout">
     <div class="sidebar">
-        <div class="field">
-            <label>SYMBOL</label>
-            <input type="text" id="symInp" value="BANKNIFTY" style="text-transform: uppercase;">
-        </div>
-        
-        <div class="field">
-            <label>EXCHANGE</label>
-            <select id="exchInp">
-                <option value="NSE">NSE</option>
-                <option value="MCX">MCX</option>
-            </select>
+        <div class="stat-card">
+            <div class="stat-val" id="spotPrice">----</div>
+            <div class="stat-lbl" id="spotLbl">SPOT PRICE</div>
         </div>
 
-        <button class="btn" onclick="fetchChain()">LOAD DATA</button>
-
-        <div class="spot-box">
-            <div class="spot-lbl">SPOT PRICE</div>
-            <div class="spot-val" id="spotPrice">----</div>
-        </div>
-
-        <div class="field">
-            <label>EXPIRY</label>
+        <div class="ctrl-group">
+            <label>EXPIRY DATE</label>
             <select id="expSel" onchange="renderChart()"></select>
         </div>
 
-        <div class="field">
-            <label>STRIKE RANGE</label>
-            <input type="range" id="rangeSld" min="10" max="50" value="20" oninput="renderChart()">
+        <div class="ctrl-group">
+            <label>STRIKE RANGE (ATM ± <span id="rngVal">15</span>)</label>
+            <input type="range" id="rngSld" min="5" max="40" value="15" oninput="updateRange()">
         </div>
-        
-        <div style="margin-top:auto; font-size:9px; color:#444;">
-            GEX = OI * Gamma * Spot * 0.01<br>
-            Powered by GoCharting API
+
+        <div class="stat-card" style="margin-top:auto; border-color: var(--accent);">
+            <div class="stat-lbl" style="color: var(--accent);">NET GEX</div>
+            <div class="stat-val" id="netGex" style="font-size: 16px;">0.00 Cr</div>
         </div>
     </div>
 
-    <div class="main">
-        <div class="loader" id="loader">
+    <div class="chart-wrapper">
+        <div class="loader-overlay" id="loader">
             <div class="spinner"></div>
-            <div style="margin-top:10px; font-size:10px; color:#888;">FETCHING FROM GOCHARTING...</div>
+            <div style="margin-top:10px; font-size:12px; color: var(--text-sub);">PROCESSING DATA...</div>
         </div>
 
-        <div class="chart-head">
-            <div>PUT GAMMA (SHORT)</div>
-            <div>STRIKE</div>
-            <div>CALL GAMMA (LONG)</div>
+        <div class="chart-header">
+            <div class="chart-title">GAMMA EXPOSURE PROFILE</div>
+            <div style="font-size: 10px; color: var(--text-sub);">Formula: OI × Gamma × Spot × 0.01</div>
+        </div>
+        
+        <div class="canvas-container">
+            <canvas id="gexChart"></canvas>
         </div>
-        <div class="chart-area" id="chartBody"></div>
     </div>
 </div>
 
 <script>
+    // GLOBAL STATE
     let RAW_DATA = null;
-    let CHAIN_MAP = {}; 
     let SPOT = 0;
+    let CHART_INSTANCE = null;
+    let CURRENT_SYM = "BANKNIFTY";
+    let CURRENT_EXCH = "NSE";
+
+    // --- SEARCH LOGIC ---
+    const searchInp = document.getElementById('searchInp');
+    const searchRes = document.getElementById('searchRes');
+    let debounceTimer;
+
+    searchInp.addEventListener('input', (e) => {
+        clearTimeout(debounceTimer);
+        const q = e.target.value;
+        if(q.length < 1) { searchRes.style.display='none'; return; }
+        
+        debounceTimer = setTimeout(async () => {
+            const r = await fetch(`/api/search?q=${q}`);
+            const data = await r.json();
+            
+            searchRes.innerHTML = '';
+            if(data.length > 0){
+                searchRes.style.display = 'block';
+                data.forEach(item => {
+                    const div = document.createElement('div');
+                    div.className = 'search-item';
+                    div.innerHTML = `
+                        <div>
+                            <div class="s-sym">${item.symbol}</div>
+                            <div class="s-name">${item.name}</div>
+                        </div>
+                        <div class="s-exch">${item.exchange}</div>
+                    `;
+                    div.onclick = () => loadSymbol(item.symbol, item.exchange);
+                    searchRes.appendChild(div);
+                });
+            } else {
+                searchRes.style.display = 'none';
+            }
+        }, 300);
+    });
 
-    window.onload = () => { fetchChain(); };
+    // Close dropdown on outside click
+    document.addEventListener('click', (e) => {
+        if(!e.target.closest('.search-container')) searchRes.style.display='none';
+    });
 
-    async function fetchChain() {
-        const sym = document.getElementById('symInp').value;
-        const exch = document.getElementById('exchInp').value;
-        const loader = document.getElementById('loader');
+    // --- MAIN APP LOGIC ---
+    window.onload = () => loadSymbol('BANKNIFTY', 'NSE');
+
+    function updateRange() {
+        document.getElementById('rngVal').innerText = document.getElementById('rngSld').value;
+        renderChart();
+    }
+
+    async function loadSymbol(sym, exch) {
+        CURRENT_SYM = sym;
+        CURRENT_EXCH = exch;
+        searchInp.value = sym;
+        searchRes.style.display = 'none';
+        document.getElementById('spotLbl').innerText = `${sym} (${exch})`;
+        
+        await fetchData();
+    }
 
+    async function fetchData() {
+        const loader = document.getElementById('loader');
         loader.style.display = 'flex';
+        document.getElementById('statusTxt').innerText = "FETCHING...";
 
         try {
-            // Call Python Proxy
-            const res = await fetch(`/api/proxy?symbol=${sym}&exchange=${exch}`);
+            const res = await fetch(`/api/fetch?symbol=${CURRENT_SYM}&exchange=${CURRENT_EXCH}`);
             const json = await res.json();
 
-            // Validate based on Data example.txt structure
-            if (!json.payload || !json.payload.chain) {
-                alert("Invalid Data received from GoCharting. Check Symbol.");
+            if(!json.payload || !json.payload.chain) {
+                alert("No Options Data Found for " + CURRENT_SYM);
                 loader.style.display = 'none';
                 return;
             }
 
             RAW_DATA = json.payload;
             
-            // 1. Get Spot Price
-            if (RAW_DATA.underlying && RAW_DATA.underlying.quote) {
+            // Get Spot
+            if(RAW_DATA.underlying && RAW_DATA.underlying.quote) {
                 SPOT = RAW_DATA.underlying.quote.last_price;
             } else {
-                SPOT = 0;
+                SPOT = 0; // Fallback
             }
-            document.getElementById('spotPrice').innerText = SPOT.toFixed(2);
+            document.getElementById('spotPrice').innerText = SPOT.toLocaleString();
 
-            // 2. Parse Expiries
+            // Populate Expiries
             const expSel = document.getElementById('expSel');
             expSel.innerHTML = '';
-            
-            // GoCharting returns 'chain' array where each item is an expiry object
-            RAW_DATA.chain.forEach((expObj, index) => {
+            RAW_DATA.chain.forEach((exp, idx) => {
                 const opt = document.createElement('option');
-                opt.value = index; // Store index to access data array later
-                opt.innerText = expObj.expiry_date;
+                opt.value = idx;
+                opt.innerText = exp.expiry_date;
                 expSel.appendChild(opt);
             });
 
-            document.getElementById('lastUpdate').innerText = "UPDATED: " + new Date().toLocaleTimeString();
-            
+            document.getElementById('statusTxt').innerText = "LIVE";
             renderChart();
 
-        } catch (e) {
-            alert("Error: " + e);
+        } catch(e) {
+            console.error(e);
+            document.getElementById('statusTxt').innerText = "ERROR";
         } finally {
             loader.style.display = 'none';
         }
     }
 
     function renderChart() {
-        if (!RAW_DATA) return;
+        if(!RAW_DATA) return;
 
         const expIndex = document.getElementById('expSel').value;
-        const range = parseInt(document.getElementById('rangeSld').value);
-        const container = document.getElementById('chartBody');
-        
-        // Access specific expiry data
-        const currentChain = RAW_DATA.chain[expIndex];
-        const optionsList = currentChain.options; // Array of strikes
+        const range = parseInt(document.getElementById('rngSld').value);
+        const chainData = RAW_DATA.chain[expIndex].options;
 
-        if (!optionsList) return;
+        if(!chainData) return;
 
-        // Find ATM index
+        // Find ATM
         let minDiff = Infinity;
-        let atmIndex = 0;
-
-        optionsList.forEach((opt, idx) => {
+        let atmIdx = 0;
+        chainData.forEach((opt, i) => {
             const diff = Math.abs(opt.strike_price - SPOT);
-            if (diff < minDiff) {
+            if(diff < minDiff) {
                 minDiff = diff;
-                atmIndex = idx;
+                atmIdx = i;
             }
         });
 
-        // Slice data
-        const start = Math.max(0, atmIndex - range);
-        const end = Math.min(optionsList.length, atmIndex + range + 1);
-        const viewData = optionsList.slice(start, end);
+        // Slice Data
+        const start = Math.max(0, atmIdx - range);
+        const end = Math.min(chainData.length, atmIdx + range + 1);
+        const viewData = chainData.slice(start, end);
 
-        // Process GEX
-        let maxGex = 0;
-        const rows = viewData.map(opt => {
+        // Prepare Arrays for Chart
+        const labels = [];
+        const callGex = [];
+        const putGex = []; // Will store as negative for visual
+        let totalNetGex = 0;
+
+        viewData.forEach(opt => {
             const k = opt.strike_price;
-            
-            // Safe Access based on Data example.txt
-            // Structure: options[i].call.greeks.gamma
-            
-            // Call Data
+            labels.push(k);
+
+            // GEX Calc: Gamma * OI * Spot * 0.01
             const cGamma = opt.call?.greeks?.gamma || 0;
             const cOI = opt.call?.quote?.open_interest || 0;
-            const cGex = (cGamma * cOI * SPOT * 0.01);
+            const cVal = cGamma * cOI * SPOT * 0.01;
 
-            // Put Data
             const pGamma = opt.put?.greeks?.gamma || 0;
             const pOI = opt.put?.quote?.open_interest || 0;
-            const pGex = (pGamma * pOI * SPOT * 0.01);
+            const pVal = pGamma * pOI * SPOT * 0.01;
 
-            if (cGex > maxGex) maxGex = cGex;
-            if (pGex > maxGex) maxGex = pGex;
-
-            return { k, c: cGex, p: pGex };
-        });
-
-        // Build HTML
-        let html = '';
-        
-        rows.forEach(r => {
-            const isAtm = r.k === optionsList[atmIndex].strike_price;
+            callGex.push(cVal);
+            putGex.push(-pVal); // Negative for putting on left/down side
             
-            // Calculate widths %
-            const wC = maxGex > 0 ? (r.c / maxGex) * 100 : 0;
-            const wP = maxGex > 0 ? (r.p / maxGex) * 100 : 0;
-
-            // Format numbers (Millions)
-            const fmt = (n) => (n / 1000000).toFixed(2) + "M";
-
-            html += `
-            <div class="row ${isAtm ? 'atm' : ''}" id="${isAtm ? 'atmRow' : ''}">
-                <div class="bar-wrap left">
-                    <span class="val">${fmt(r.p)}</span>
-                    <div class="bar put" style="width:${wP}%"></div>
-                </div>
-                <div class="strike">${r.k}</div>
-                <div class="bar-wrap right">
-                    <div class="bar call" style="width:${wC}%"></div>
-                    <span class="val">${fmt(r.c)}</span>
-                </div>
-            </div>`;
+            totalNetGex += (cVal - pVal);
         });
 
-        container.innerHTML = html;
+        // Update Net Gex Stats
+        const netEl = document.getElementById('netGex');
+        netEl.innerText = (totalNetGex / 10000000).toFixed(2) + " Cr";
+        netEl.style.color = totalNetGex >= 0 ? 'var(--call)' : 'var(--put)';
 
-        // Auto scroll to ATM
-        setTimeout(() => {
-            const atmEl = document.getElementById('atmRow');
-            if (atmEl) atmEl.scrollIntoView({ block: "center", behavior: "smooth" });
-        }, 100);
+        // DESTROY OLD CHART
+        if(CHART_INSTANCE) CHART_INSTANCE.destroy();
+
+        // CREATE NEW CHART (Professional Look)
+        const ctx = document.getElementById('gexChart').getContext('2d');
+        
+        // Define Gradient Colors
+        const gradCall = ctx.createLinearGradient(0, 0, 0, 400);
+        gradCall.addColorStop(0, 'rgba(16, 185, 129, 0.8)');
+        gradCall.addColorStop(1, 'rgba(16, 185, 129, 0.2)');
+
+        const gradPut = ctx.createLinearGradient(0, 0, 0, 400);
+        gradPut.addColorStop(0, 'rgba(239, 68, 68, 0.2)');
+        gradPut.addColorStop(1, 'rgba(239, 68, 68, 0.8)');
+
+        CHART_INSTANCE = new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: labels,
+                datasets: [
+                    {
+                        label: 'Call GEX',
+                        data: callGex,
+                        backgroundColor: '#10b981',
+                        borderRadius: 2,
+                        barPercentage: 0.6,
+                        order: 1
+                    },
+                    {
+                        label: 'Put GEX',
+                        data: putGex,
+                        backgroundColor: '#ef4444',
+                        borderRadius: 2,
+                        barPercentage: 0.6,
+                        order: 2
+                    }
+                ]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                indexAxis: 'x', // Vertical bars, Strike on X axis (Professional standard)
+                interaction: {
+                    mode: 'index',
+                    intersect: false,
+                },
+                plugins: {
+                    legend: { display: true, labels: { color: '#a1a1aa', font: {family: 'Inter', size: 10} } },
+                    tooltip: {
+                        backgroundColor: '#18181b',
+                        titleColor: '#fff',
+                        bodyColor: '#a1a1aa',
+                        borderColor: '#27272a',
+                        borderWidth: 1,
+                        callbacks: {
+                            label: function(ctx) {
+                                let val = ctx.raw;
+                                val = Math.abs(val); // Show positive value for Put tooltip
+                                let valStr = (val/100000).toFixed(2) + " L";
+                                return ctx.dataset.label + ": " + valStr;
+                            }
+                        }
+                    },
+                    annotation: {
+                        annotations: {
+                            line1: {
+                                type: 'line',
+                                scaleID: 'x',
+                                value: (ctx) => {
+                                    // Identify index close to spot
+                                    // This requires advanced mapping, simplistic for now
+                                    return null; 
+                                },
+                                borderColor: '#3b82f6',
+                                borderWidth: 1,
+                                borderDash: [5, 5],
+                            }
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        grid: { color: '#27272a' },
+                        ticks: { color: '#a1a1aa', font: {family: 'JetBrains Mono'} },
+                        stacked: true,
+                        title: { display: true, text: 'STRIKE PRICE', color: '#52525b', font: {size: 10, weight: 700} }
+                    },
+                    y: {
+                        grid: { color: '#27272a' },
+                        ticks: { color: '#a1a1aa', callback: function(value) { return (value/10000000).toFixed(1) + "Cr"; } },
+                        stacked: true
+                    }
+                }
+            }
+        });
     }
 </script>