Update app.py

app.py

@@ -3,6 +3,7 @@ import requests
 import uvicorn
 import json
 import asyncio
+import re
 from datetime import datetime, timedelta
 from fastapi import FastAPI, Body, HTTPException
 from fastapi.responses import HTMLResponse, JSONResponse
@@ -35,7 +36,7 @@ def sb_get(endpoint: str, params: dict = None):
         return r.json()
     except Exception as e:
         print(f"DB Error ({endpoint}): {e}")
-        return []
+        return[]
 
 # ==========================================
 # 3. API ROUTES - METADATA
@@ -70,7 +71,6 @@ def get_roots(date: str):
 def get_auto_config(date: str, root: str):
     """Smart helper for defaults (Current/Next expiry)."""
     start, end = f"{date}T00:00:00", f"{date}T23:59:59"
-    # Fetch small limit just to inspect structure
     data = sb_get(f"/history_buckets_fyers?select=expiry,data&root=eq.{root}&expiry=neq.MARKET&minute=gte.{start}&minute=lte.{end}&limit=50")
     
     expiry_map = {} 
@@ -119,7 +119,7 @@ def get_expiries(date: str, root: str):
 
 @app.get("/api/instruments")
 def get_instruments(date: str, root: str, expiry: str):
-    """Fetch instruments. Fetches small limit to populate dropdown."""
+    """Fetch instruments."""
     start, end = f"{date}T00:00:00", f"{date}T23:59:59"
     data = sb_get(f"/history_buckets_fyers?select=data&root=eq.{root}&expiry=eq.{expiry}&minute=gte.{start}&minute=lte.{end}&limit=5")
     instruments = set()
@@ -129,7 +129,7 @@ def get_instruments(date: str, root: str, expiry: str):
     return JSONResponse(sorted(list(instruments)))
 
 # ==========================================
-# 4. API ROUTES - DATA FETCHING (OPTIMIZED)
+# 4. API ROUTES - DATA FETCHING
 # ==========================================
 
 @app.post("/api/fetch_series")
@@ -137,58 +137,149 @@ def fetch_series(
     date: str = Body(...),
     root: str = Body(...),
     expiry: str = Body(...),
-    instrument: str = Body(...),
+    instrument: str = Body(""),
     timeframe: str = Body(...), 
     start_time: str = Body(...),
-    end_time: str = Body(...)
+    end_time: str = Body(...),
+    adv_mode: bool = Body(False),
+    atm_range: int = Body(5)
 ):
     """
-    Fetches raw 10s data using Postgres JSON filtering to save bandwidth.
+    Fetches raw 10s data. Supports normal (optimized Postgres JSON filtering) 
+    and advanced mode (aggregated ATM +/- Options dynamics).
     """
     t_start = f"{date}T{start_time}:00"
     t_end = f"{date}T{end_time}:59"
     
-    # CRITICAL: Postgres JSON Filtering
-    # Syntax: inst_data:data->"{instrument}"
-    # This aliases the result to 'inst_data' and extracts ONLY that specific key
-    # Double quotes around {instrument} handle spaces like "Nifty 50"
-    select_query = f'minute,inst_data:data->"{instrument}"'
+    records =[]
     
-    url = f"/history_buckets_fyers?select={select_query}&root=eq.{root}&expiry=eq.{expiry}&minute=gte.{t_start}&minute=lte.{t_end}&order=minute.asc"
-    
-    rows = sb_get(url)
-    
-    records = []
-    for row in rows:
-        try:
-            base_ts = datetime.fromisoformat(row['minute'])
-            # The data is now in the alias 'inst_data', not 'data'
-            inst_data = row.get('inst_data')
-            
-            if not inst_data: continue
-
-            # Extract buckets (0s to 50s)
-            p_arr = inst_data.get('p', []) or []
-            b_arr = inst_data.get('b', []) or []
-            s_arr = inst_data.get('s', []) or []
-            v_arr = inst_data.get('v', []) or []
-            o_arr = inst_data.get('o', []) or []
-            
-            for i in range(6):
-                if i < len(p_arr) and p_arr[i] is not None:
+    if not adv_mode:
+        # --- NORMAL MODE (Highly Optimized Postgres Select) ---
+        select_query = f'minute,inst_data:data->"{instrument}"'
+        url = f"/history_buckets_fyers?select={select_query}&root=eq.{root}&expiry=eq.{expiry}&minute=gte.{t_start}&minute=lte.{t_end}&order=minute.asc"
+        rows = sb_get(url)
+        
+        for row in rows:
+            try:
+                base_ts = datetime.fromisoformat(row['minute'])
+                inst_data = row.get('inst_data')
+                
+                if not inst_data: continue
+
+                p_arr = inst_data.get('p', []) or []
+                b_arr = inst_data.get('b', []) or[]
+                s_arr = inst_data.get('s', []) or[]
+                v_arr = inst_data.get('v', []) or []
+                o_arr = inst_data.get('o',[]) or[]
+                
+                for i in range(6):
+                    if i < len(p_arr) and p_arr[i] is not None:
+                        records.append({
+                            "ts": base_ts + timedelta(seconds=i*10),
+                            "price": float(p_arr[i]),
+                            "buy_qty": float(b_arr[i]) if i < len(b_arr) and b_arr[i] else 0.0,
+                            "sell_qty": float(s_arr[i]) if i < len(s_arr) and s_arr[i] else 0.0,
+                            "volume": float(v_arr[i]) if i < len(v_arr) and v_arr[i] else 0.0,
+                            "oi": float(o_arr[i]) if i < len(o_arr) and o_arr[i] else 0.0
+                        })
+            except Exception:
+                continue
+
+    else:
+        # --- ADVANCED MODE (Full JSON Fetch & Custom Multi-Strike Aggregation) ---
+        select_query = 'minute,data'
+        url = f"/history_buckets_fyers?select={select_query}&root=eq.{root}&expiry=eq.{expiry}&minute=gte.{t_start}&minute=lte.{t_end}&order=minute.asc"
+        rows = sb_get(url)
+        
+        last_p_ref = 0.0
+
+        for row in rows:
+            try:
+                base_ts = datetime.fromisoformat(row['minute'])
+                data_dict = row.get('data', {})
+                if not data_dict: continue
+
+                # Identify reference instrument (Index, Equity or Future)
+                ref_inst = None
+                for inst in data_dict.keys():
+                    if "-EQ" in inst or "-INDEX" in inst or "FUT" in inst:
+                        ref_inst = inst
+                        break
+                
+                # Pre-parse option instruments to map strikes to CE/PE
+                options_meta = {}
+                strikes_set = set()
+                for inst in data_dict.keys():
+                    match = re.search(r'(\d+)(CE|PE)$', inst)
+                    if match:
+                        strike = int(match.group(1))
+                        opt_type = match.group(2)
+                        strikes_set.add(strike)
+                        if strike not in options_meta:
+                            options_meta[strike] = {}
+                        options_meta[strike][opt_type] = inst
+
+                sorted_strikes = sorted(list(strikes_set))
+                if not sorted_strikes: continue
+
+                # Process all 6 x 10sec slots inside the minute
+                for i in range(6):
+                    p_ref = last_p_ref
+                    if ref_inst and ref_inst in data_dict:
+                        p_arr = data_dict[ref_inst].get('p', [])
+                        if i < len(p_arr) and p_arr[i] is not None:
+                            p_ref = float(p_arr[i])
+                            last_p_ref = p_ref
+                    
+                    if p_ref == 0.0:
+                        continue
+
+                    # Dynamic ATM calculation per tick
+                    atm_strike = min(sorted_strikes, key=lambda x: abs(x - p_ref))
+                    atm_idx = sorted_strikes.index(atm_strike)
+
+                    start_idx = max(0, atm_idx - atm_range)
+                    end_idx = min(len(sorted_strikes) - 1, atm_idx + atm_range)
+                    selected_strikes = sorted_strikes[start_idx : end_idx + 1]
+
+                    cb_tot, cs_tot, pb_tot, ps_tot = 0.0, 0.0, 0.0, 0.0
+                    v_tot, o_tot = 0.0, 0.0
+
+                    for s in selected_strikes:
+                        # Call Accumulation
+                        ce_inst = options_meta[s].get('CE')
+                        if ce_inst:
+                            ce_data = data_dict[ce_inst]
+                            if i < len(ce_data.get('b',[])) and ce_data['b'][i] is not None: cb_tot += float(ce_data['b'][i])
+                            if i < len(ce_data.get('s', [])) and ce_data['s'][i] is not None: cs_tot += float(ce_data['s'][i])
+                            if i < len(ce_data.get('v', [])) and ce_data['v'][i] is not None: v_tot += float(ce_data['v'][i])
+                            if i < len(ce_data.get('o', [])) and ce_data['o'][i] is not None: o_tot += float(ce_data['o'][i])
+
+                        # Put Accumulation
+                        pe_inst = options_meta[s].get('PE')
+                        if pe_inst:
+                            pe_data = data_dict[pe_inst]
+                            if i < len(pe_data.get('b', [])) and pe_data['b'][i] is not None: pb_tot += float(pe_data['b'][i])
+                            if i < len(pe_data.get('s',[])) and pe_data['s'][i] is not None: ps_tot += float(pe_data['s'][i])
+                            if i < len(pe_data.get('v', [])) and pe_data['v'][i] is not None: v_tot += float(pe_data['v'][i])
+                            if i < len(pe_data.get('o', [])) and pe_data['o'][i] is not None: o_tot += float(pe_data['o'][i])
+
                     records.append({
                         "ts": base_ts + timedelta(seconds=i*10),
-                        "price": float(p_arr[i]),
-                        "buy_qty": float(b_arr[i]) if i < len(b_arr) and b_arr[i] else 0.0,
-                        "sell_qty": float(s_arr[i]) if i < len(s_arr) and s_arr[i] else 0.0,
-                        "volume": float(v_arr[i]) if i < len(v_arr) and v_arr[i] else 0.0,
-                        "oi": float(o_arr[i]) if i < len(o_arr) and o_arr[i] else 0.0
+                        "price": p_ref,
+                        "cb": cb_tot,
+                        "cs": cs_tot,
+                        "pb": pb_tot,
+                        "ps": ps_tot,
+                        "v": v_tot,
+                        "o": o_tot
                     })
-        except Exception:
-            continue
+            except Exception as e:
+                print(f"Error parsing advanced row: {e}")
+                continue
 
     if not records:
-         return JSONResponse({"error": "No data found", "labels": [], "P": []})
+         return JSONResponse({"error": "No data found", "labels": [], "P":[]})
 
     df = pd.DataFrame(records)
     df.set_index('ts', inplace=True)
@@ -201,14 +292,27 @@ def fetch_series(
     
     resampled = df.resample(panda_tf).median().dropna()
     
-    response_data = {
-        "labels": resampled.index.strftime('%H:%M').tolist(),
-        "P": resampled['price'].tolist(),
-        "B": resampled['buy_qty'].tolist(),
-        "S": resampled['sell_qty'].tolist(),
-        "V": resampled['volume'].tolist(),
-        "OI": resampled['oi'].tolist()
-    }
+    # Return formatted JSON properly matching active mode
+    if not adv_mode:
+        response_data = {
+            "labels": resampled.index.strftime('%H:%M').tolist(),
+            "P": resampled['price'].tolist(),
+            "B": resampled['buy_qty'].tolist(),
+            "S": resampled['sell_qty'].tolist(),
+            "V": resampled['volume'].tolist(),
+            "OI": resampled['oi'].tolist()
+        }
+    else:
+        response_data = {
+            "labels": resampled.index.strftime('%H:%M').tolist(),
+            "P": resampled['price'].tolist(),
+            "CB": resampled['cb'].tolist(),
+            "CS": resampled['cs'].tolist(),
+            "PB": resampled['pb'].tolist(),
+            "PS": resampled['ps'].tolist(),
+            "V": resampled['v'].tolist(),
+            "OI": resampled['o'].tolist()
+        }
     
     return JSONResponse(response_data)
 
@@ -296,7 +400,7 @@ HTML_TEMPLATE = """
             padding: 0 12px; background: var(--bg-header); flex-shrink: 0;
         }
         .card-info { display: flex; gap: 10px; align-items: center; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; }
-        .inst-label { color: var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 400; }
+        .inst-label { color: var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 400; background:rgba(47,129,247,0.1); padding:2px 6px; border-radius:4px; }
         .card-meta { color: var(--text-secondary); font-family: var(--font-mono); font-size: 11px; font-weight: 400; }
         
         .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary); }
@@ -329,6 +433,21 @@ HTML_TEMPLATE = """
         .series-row { display: grid; grid-template-columns: 32px 1fr 1fr 60px 24px; gap: 8px; align-items: center; margin-bottom: 6px; }
         .color-input { padding: 0; width: 100%; border: none; background: none; height: 28px; cursor: pointer; }
 
+        /* TOOLTIP & INFO ICON */
+        .tooltip-container { position: relative; display: inline-flex; align-items: center; cursor: help; margin-left:8px; }
+        .tooltip-icon { 
+            width: 14px; height: 14px; border-radius: 50%; background: var(--border-hover); 
+            color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; font-weight: bold; 
+        }
+        .tooltip-content { 
+            visibility: hidden; width: 220px; background: var(--bg-panel); color: var(--text-primary); text-align: left; 
+            border: 1px solid var(--border); border-radius: 6px; padding: 12px; position: absolute; z-index: 10; 
+            bottom: 125%; left: 50%; margin-left: -110px; opacity: 0; transition: opacity 0.2s; 
+            font-size: 11px; font-weight: normal; font-family: var(--font-mono); box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+            text-transform: none; line-height: 1.4;
+        }
+        .tooltip-container:hover .tooltip-content { visibility: visible; opacity: 1; }
+        optgroup { background: var(--bg-panel); color: var(--text-primary); font-weight: bold; }
     </style>
 </head>
 <body>
@@ -380,7 +499,7 @@ HTML_TEMPLATE = """
 
                 <!-- Single Chart Config Mode -->
                 <div id="cfgChartOnly">
-                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
+                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;">
                         <div class="form-section">
                             <label>Symbol</label>
                             <select id="cfgRoot" onchange="Config.onRootChange()" style="width:100%"></select>
@@ -390,10 +509,30 @@ HTML_TEMPLATE = """
                             <select id="cfgExp" onchange="Config.onExpChange()" style="width:100%"></select>
                         </div>
                     </div>
-                    <div class="form-section">
-                        <label>Instrument</label>
-                        <select id="cfgInst" style="width:100%"></select>
+
+                    <!-- Mode Toggle & Instrument / ATM Options -->
+                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background:rgba(255,255,255,0.02);">
+                        <div class="form-section" style="margin-bottom:0;">
+                            <label>Analysis Mode</label>
+                            <select id="cfgMode" onchange="Config.onChartModeChange()" style="width:100%">
+                                <option value="normal">Normal (Single)</option>
+                                <option value="advanced">Advanced (ATM Options)</option>
+                            </select>
+                        </div>
+                        
+                        <!-- Normal Mode: Instrument Selector -->
+                        <div class="form-section" id="instBox" style="margin-bottom:0;">
+                            <label>Instrument</label>
+                            <select id="cfgInst" style="width:100%"></select>
+                        </div>
+                        
+                        <!-- Advanced Mode: ATM Range Input -->
+                        <div class="form-section" id="atmBox" style="margin-bottom:0; display:none;">
+                            <label>ATM +/- Strikes</label>
+                            <input type="number" id="cfgAtm" value="5" min="1" max="25" style="width:100%">
+                        </div>
                     </div>
+
                     <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
                         <div class="form-section">
                             <label>Timeframe</label>
@@ -414,12 +553,30 @@ HTML_TEMPLATE = """
                             </div>
                         </div>
                     </div>
-                    <div style="height:1px; background:var(--border); margin: 8px 0;"></div>
+                    <div style="height:1px; background:var(--border); margin: 12px 0;"></div>
                 </div>
 
                 <!-- Common Series Config -->
                 <div class="form-section">
-                    <label>Plot Series</label>
+                    <label style="display:flex; align-items:center;">
+                        Plot Series Formulas
+                        <div class="tooltip-container">
+                            <div class="tooltip-icon">i</div>
+                            <div class="tooltip-content">
+                                <strong style="color:var(--accent)">Global Variables:</strong><br>
+                                $P = Price (Spot/Future)<br>
+                                $V = Total Volume<br>
+                                $OI = Total Open Interest<br>
+                                $B = Total Buy Qty<br>
+                                $S = Total Sell Qty<br><br>
+                                <strong style="color:var(--warning)">Advanced Mode Only:</strong><br>
+                                $CB = Call Buy Qty<br>
+                                $CS = Call Sell Qty<br>
+                                $PB = Put Buy Qty<br>
+                                $PS = Put Sell Qty
+                            </div>
+                        </div>
+                    </label>
                     <div id="cfgSeries"></div>
                     <button style="width:100%; margin-top:8px; border:1px dashed var(--border); background:transparent; color:var(--text-secondary);" onclick="Config.addSeriesRow()">+ Add Line</button>
                 </div>
@@ -434,8 +591,8 @@ HTML_TEMPLATE = """
 
 <script>
 const App = {
-    state: { date: null, mode: 'LIVE', columns: 3, layout: [[], [], []], charts: {}, refreshRate: 15 },
-    defaults: [
+    state: { date: null, mode: 'LIVE', columns: 3, layout: [[], [],[]], charts: {}, refreshRate: 15 },
+    defaults:[
         { formula: '$P', color: '#2f81f7', label: 'Price', axis: 'left' },
         { formula: '$B', color: '#238636', label: 'Buy', axis: 'right' },
         { formula: '$S', color: '#da3633', label: 'Sell', axis: 'right' }
@@ -448,14 +605,12 @@ const App = {
             try {
                 const s = JSON.parse(saved);
                 this.state = { ...this.state, ...s };
-                // Ensure layout matches columns
                 if(this.state.layout.length !== this.state.columns) this.setLayout(this.state.columns);
             } catch(e) { this.initDefault(); }
         } else {
             this.initDefault();
         }
         
-        // Sync Date UI
         const dSel = document.getElementById('globalDate');
         if(this.state.date && Array.from(dSel.options).some(o=>o.value===this.state.date)) dSel.value = this.state.date;
         else if(dSel.options.length) this.state.date = dSel.options[0].value;
@@ -468,9 +623,8 @@ const App = {
 
     initDefault() {
         this.state.columns = 3;
-        this.state.layout = [[], [], []];
+        this.state.layout = [[], [],[]];
         this.state.refreshRate = 15;
-        // 3x2 Grid (3 Cols, 2 Rows = 6 Charts)
         for(let i=0; i<3; i++) {
             this.addChartInternal(i);
             this.addChartInternal(i);
@@ -494,7 +648,6 @@ const App = {
     },
 
     save() {
-        // Strip non-serializable data
         const cleanCharts = {};
         for(let id in this.state.charts) cleanCharts[id] = { config: this.state.charts[id].config };
         
@@ -518,18 +671,17 @@ const App = {
     setLayout(n) {
         const all = this.state.layout.flat();
         this.state.columns = n;
-        this.state.layout = Array.from({length: n}, () => []);
+        this.state.layout = Array.from({length: n}, () =>[]);
         all.forEach((id, i) => this.state.layout[i % n].push(id));
         this.renderGrid();
         this.save();
     },
 
     renderGrid() {
-        // Fix Layout Buttons
         document.querySelectorAll('.layout-btn').forEach((b, i) => b.classList.toggle('active', (i+1) === this.state.columns));
         
         const container = document.getElementById('gridRoot');
-        container.innerHTML = ''; // Wipes DOM
+        container.innerHTML = '';
 
         this.state.layout.forEach((ids, colIdx) => {
             const col = document.createElement('div');
@@ -538,15 +690,12 @@ const App = {
             const viewH = window.innerHeight - 52;
 
             ids.forEach(id => {
-                // IMPORTANT: Since we wiped DOM, old instances are dead.
-                // We MUST nullify them so plot() creates new ones.
                 if(this.state.charts[id] && this.state.charts[id].instance) {
                     this.state.charts[id].instance.destroy();
                     this.state.charts[id].instance = null;
                 }
 
                 const card = this.createCardDOM(id);
-                // 50/50 split if 2 charts, 33% if 3, else fixed
                 if (count > 0 && count <= 3) card.style.height = `calc(${viewH / count}px - 1px)`;
                 else card.style.height = '300px';
 
@@ -571,12 +720,17 @@ const App = {
         const cfg = this.state.charts[id] ? this.state.charts[id].config : {};
         const isCfg = cfg && cfg.root;
 
+        let displayInst = cfg.instrument;
+        if(cfg.mode === 'advanced') {
+            displayInst = `ADV: ATM ±${cfg.atm_range}`;
+        }
+
         div.innerHTML = `
             <div class="card-header">
                 <div class="card-info">
                     <div class="status-dot ${isCfg ? (this.state.mode==='LIVE'?'live':'hist') : ''}" id="dot-${id}"></div>
                     <span>${isCfg ? cfg.root : 'New Chart'}</span>
-                    ${isCfg ? `<span class="inst-label">${cfg.instrument}</span> <span class="card-meta">${cfg.expiry}</span>` : ''}
+                    ${isCfg ? `<span class="inst-label">${displayInst}</span> <span class="card-meta">${cfg.expiry}</span>` : ''}
                 </div>
                 <div class="card-tools">
                     <button class="tool-btn" onclick="Config.open('${id}')">⚙</button>
@@ -660,8 +814,10 @@ const ChartLogic = {
                 headers: {'Content-Type': 'application/json'},
                 body: JSON.stringify({
                     date: App.state.date, root: cfg.root, expiry: cfg.expiry,
-                    instrument: cfg.instrument, timeframe: cfg.timeframe,
-                    start_time: cfg.start, end_time: endTime
+                    instrument: cfg.instrument || "", timeframe: cfg.timeframe,
+                    start_time: cfg.start, end_time: endTime,
+                    adv_mode: cfg.mode === 'advanced',
+                    atm_range: cfg.atm_range || 5
                 })
             });
             const data = await res.json();
@@ -682,8 +838,16 @@ const ChartLogic = {
 
             const datasets = cfg.series.map(s => {
                 const vals = data.labels.map((_, i) => {
-                    const P=data.P[i]||0, V=data.V[i]||0, OI=data.OI[i]||0, B=data.B[i]||0, S=data.S[i]||0;
-                    let f = s.formula.replace(/\$OI/g,OI).replace(/\$P/g,P).replace(/\$V/g,V).replace(/\$B/g,B).replace(/\$S/g,S);
+                    let f = s.formula
+                        .replace(/\$OI/g, data.OI ? (data.OI[i]||0) : 0)
+                        .replace(/\$CB/g, data.CB ? (data.CB[i]||0) : 0)
+                        .replace(/\$CS/g, data.CS ? (data.CS[i]||0) : 0)
+                        .replace(/\$PB/g, data.PB ? (data.PB[i]||0) : 0)
+                        .replace(/\$PS/g, data.PS ? (data.PS[i]||0) : 0)
+                        .replace(/\$P/g,  data.P ? (data.P[i]||0) : 0)
+                        .replace(/\$V/g,  data.V ? (data.V[i]||0) : 0)
+                        .replace(/\$B/g,  data.B ? (data.B[i]||0) : 0)
+                        .replace(/\$S/g,  data.S ? (data.S[i]||0) : 0);
                     try { return new Function('return '+f)(); } catch{ return null; }
                 });
                 return {
@@ -701,7 +865,6 @@ const ChartLogic = {
         const ctx = document.getElementById(`canvas-${id}`);
         if(!ctx) return;
         
-        // Ensure we aren't updating a dead instance (Double check)
         if(App.state.charts[id].instance && App.state.charts[id].instance.ctx.canvas !== ctx) {
             App.state.charts[id].instance.destroy();
             App.state.charts[id].instance = null;
@@ -752,6 +915,12 @@ const Config = {
         rSel.innerHTML = `<option value="">-- Select --</option>` + roots.map(r=>`<option>${r}</option>`).join('');
 
         const cfg = App.state.charts[id].config;
+        
+        // Mode Setting
+        document.getElementById('cfgMode').value = cfg.mode || 'normal';
+        document.getElementById('cfgAtm').value = cfg.atm_range || 5;
+        this.onChartModeChange(false); // Update UI visibility, but don't reset series formulas
+
         document.getElementById('cfgTF').value = cfg.timeframe || '1min';
         document.getElementById('cfgStart').value = cfg.start || '09:15';
         document.getElementById('cfgEnd').value = cfg.end || '15:30';
@@ -778,6 +947,28 @@ const Config = {
 
     close() { document.getElementById('configModal').style.display = 'none'; },
 
+    onChartModeChange(resetSeries = true) {
+        const mode = document.getElementById('cfgMode').value;
+        if(mode === 'advanced') {
+            document.getElementById('instBox').style.display = 'none';
+            document.getElementById('atmBox').style.display = 'block';
+            if(resetSeries) {
+                // Default formula mapping as requested by user
+                this.renderSeries([
+                    { formula: '$CB + $PS', color: '#238636', label: 'Buyers', axis: 'left' },
+                    { formula: '$CS + $PB', color: '#da3633', label: 'Sellers', axis: 'left' },
+                    { formula: '$P', color: '#2f81f7', label: 'Price', axis: 'right' }
+                ]);
+            }
+        } else {
+            document.getElementById('instBox').style.display = 'block';
+            document.getElementById('atmBox').style.display = 'none';
+            if(resetSeries) {
+                this.renderSeries(App.defaults);
+            }
+        }
+    },
+
     async onRootChange(preExp, preInst) {
         const root = document.getElementById('cfgRoot').value;
         const eSel = document.getElementById('cfgExp');
@@ -798,9 +989,27 @@ const Config = {
         const exp = document.getElementById('cfgExp').value;
         const iSel = document.getElementById('cfgInst');
         iSel.innerHTML = '<option>Loading...</option>';
+        
         const res = await fetch(`/api/instruments?date=${App.state.date}&root=${root}&expiry=${exp}`);
         const insts = await res.json();
-        iSel.innerHTML = insts.map(i=>`<option>${i}</option>`).join('');
+        
+        // Split instruments neatly for Normal Mode
+        const futEq = insts.filter(i => !i.endswith('CE') && !i.endswith('PE'));
+        const opts = insts.filter(i => i.endswith('CE') || i.endswith('PE'));
+        
+        let html = '<option value="">-- Select --</option>';
+        if(futEq.length) {
+            html += '<optgroup label="Futures & Equity">';
+            html += futEq.map(i => `<option>${i}</option>`).join('');
+            html += '</optgroup>';
+        }
+        if(opts.length) {
+            html += '<optgroup label="Options">';
+            html += opts.map(i => `<option>${i}</option>`).join('');
+            html += '</optgroup>';
+        }
+        
+        iSel.innerHTML = html;
         if(preInst && insts.includes(preInst)) iSel.value = preInst;
     },
 
@@ -846,11 +1055,15 @@ const Config = {
         else {
             const root = document.getElementById('cfgRoot').value;
             const exp = document.getElementById('cfgExp').value;
+            const mode = document.getElementById('cfgMode').value;
             const inst = document.getElementById('cfgInst').value;
-            if(!root || !exp || !inst) return alert("Incomplete Details");
+            const atm = parseInt(document.getElementById('cfgAtm').value) || 5;
+
+            if(!root || !exp || (mode === 'normal' && !inst)) return alert("Incomplete Details");
 
             App.state.charts[this.tid].config = {
                 root, expiry: exp, instrument: inst,
+                mode: mode, atm_range: atm,
                 timeframe: document.getElementById('cfgTF').value,
                 start: document.getElementById('cfgStart').value,
                 end: document.getElementById('cfgEnd').value,