Update app.py

app.py

@@ -2,357 +2,241 @@ import pandas as pd
 import requests
 import uvicorn
 import json
-import time
-import os
-import threading
-from datetime import datetime
-from fastapi import FastAPI, Cookie, BackgroundTasks, Query
-from fastapi.responses import HTMLResponse, RedirectResponse, JSONResponse
-from typing import Optional
+import io
+from datetime import datetime, timedelta
+from fastapi import FastAPI, Query, Body
+from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from typing import Optional, List
 
 # ==========================================
-# 1. CONFIGURATION
+# 1. CONFIGURATION (From upstox4.txt)
 # ==========================================
-# REPLACE THESE WITH YOUR UPSTOX CREDENTIALS
-API_KEY      = "13c3ac18-b78f-4e5b-a6b8-d8f66de0b52c"
-API_SECRET   = "qymj4zn0i1"
-REDIRECT_URI = "https://topsecrettraders-depthchainindiaup.hf.space/callback" 
-
-CACHE_FILE = "upstox_master_cache.json"
+SB_URL = "https://tuyhtqxfvjndbyjazosi.supabase.co"
+SB_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InR1eWh0cXhmdmpuZGJ5amF6b3NpIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTc2ODE0NjAyMiwiZXhwIjoyMDgzNzIyMDIyfQ.YsmGS67vL5TghB5OOi6pmsPL6rrgx7SNpARHmQ9b5cw"
+
+HEADERS = {
+    "apikey": SB_KEY,
+    "Authorization": f"Bearer {SB_KEY}",
+    "Content-Type": "application/json",
+    "Prefer": "return=representation"
+}
 
 app = FastAPI()
 
 # ==========================================
-# 2. DATA LOADER (UPSTOX MASTER)
+# 2. SUPABASE HELPER FUNCTIONS
 # ==========================================
 
-MASTER_DB = {}
-SEARCH_INDEX = [] 
-
-SYSTEM_STATUS = {
-    "ready": False,
-    "message": "Booting..."
-}
-UPDATE_LOCK = threading.Lock()
+def sb_get(endpoint: str, params: dict = None):
+    """Generic Supabase GET request"""
+    try:
+        url = f"{SB_URL}/rest/v1{endpoint}"
+        r = requests.get(url, headers=HEADERS, params=params)
+        r.raise_for_status()
+        return r.json()
+    except Exception as e:
+        print(f"DB Error: {e}")
+        return []
 
-# Manual mapping for Index Spot Keys (Safety Net)
-INDEX_MAP = {
-    "NIFTY": "NSE_INDEX|Nifty 50",
-    "BANKNIFTY": "NSE_INDEX|Nifty Bank",
-    "FINNIFTY": "NSE_INDEX|Nifty Fin Service",
-    "MIDCPNIFTY": "NSE_INDEX|NIFTY MID SELECT",
-    "SENSEX": "BSE_INDEX|SENSEX",
-    "BANKEX": "BSE_INDEX|BANKEX",
-    "SENSEX50": "BSE_INDEX|SENSEX50"
-}
+# ==========================================
+# 3. API ROUTES
+# ==========================================
 
-def update_master_db():
-    global SYSTEM_STATUS, MASTER_DB, SEARCH_INDEX
+@app.get("/")
+def home():
+    return HTMLResponse(HTML_TEMPLATE)
+
+@app.get("/api/dates")
+def get_available_dates():
+    """Fetch distinct dates available in the history DB."""
+    # Supabase doesn't support 'select distinct' easily on timestamps without RPC
+    # We fetch unique dates by querying a range or assuming data exists for recent days.
+    # Strategy: Fetch distinct 'minute' ordered descending, truncate to date in Python
+    # To save bandwidth, we limit to last 1000 buckets and extract dates
+    data = sb_get("/history_buckets_upstox", {"select": "minute", "order": "minute.desc", "limit": "2000"})
+    dates = set()
+    for row in data:
+        dt_str = row['minute'].split('T')[0]
+        dates.add(dt_str)
+    return JSONResponse(sorted(list(dates), reverse=True))
+
+@app.get("/api/roots")
+def get_roots(date: str):
+    """Fetch symbols (roots) available for a specific date."""
+    # Filter by the 24h range of that date
+    start = f"{date}T00:00:00"
+    end = f"{date}T23:59:59"
     
-    if not UPDATE_LOCK.acquire(blocking=False):
-        return
-
-    try:
-        SYSTEM_STATUS["message"] = "Downloading Upstox Master Data..."
-        print(">>> [BG TASK] STARTING DOWNLOAD (NSE, BSE, MCX)...")
-        
-        # 1. NSE
-        url_nse = "https://assets.upstox.com/market-quote/instruments/exchange/NSE.json.gz"
-        df_nse = pd.read_json(url_nse, compression='gzip')
-        
-        # 2. BSE
-        url_bse = "https://assets.upstox.com/market-quote/instruments/exchange/BSE.json.gz"
-        df_bse = pd.read_json(url_bse, compression='gzip')
-
-        # 3. MCX
-        url_mcx = "https://assets.upstox.com/market-quote/instruments/exchange/MCX.json.gz"
-        df_mcx = pd.read_json(url_mcx, compression='gzip')
+    # We use a hack to get distinct roots: fetch all rows for date (lightweight select)
+    params = {
+        "select": "root",
+        "minute": f"gte.{start}",
+        "minute": f"lte.{end}"
+    }
+    # To avoid URL encoding issues in python requests dict, handle duplicate keys manually if needed
+    # But requests params dict doesn't support duplicate keys for 'minute'. 
+    # Supabase allows 'and' logic naturally.
+    # Using raw query string for safety with multiple filters on same column
+    url = f"/history_buckets_upstox?select=root&minute=gte.{start}&minute=lte.{end}"
+    data = sb_get(url)
+    
+    roots = set()
+    for row in data:
+        roots.add(row['root'])
+    return JSONResponse(sorted(list(roots)))
+
+@app.get("/api/expiries")
+def get_expiries(date: str, root: str):
+    """Fetch available expiries for a root on a specific date."""
+    start = f"{date}T00:00:00"
+    end = f"{date}T23:59:59"
+    
+    url = f"/history_buckets_upstox?select=expiry&root=eq.{root}&minute=gte.{start}&minute=lte.{end}"
+    data = sb_get(url)
+    
+    exps = set()
+    for row in data:
+        exps.add(row['expiry'])
+    return JSONResponse(sorted(list(exps)))
+
+@app.get("/api/instruments")
+def get_instruments(date: str, root: str, expiry: str):
+    """
+    Fetch one bucket to parse the JSON keys and find available Instruments 
+    (e.g., NIFTY24JANFUT, RELIANCE, NIFTY24JAN21500CE).
+    """
+    start = f"{date}T00:00:00"
+    end = f"{date}T23:59:59"
+    
+    # Fetch just 1 row to analyze the keys inside 'data' column
+    url = f"/history_buckets_upstox?select=data&root=eq.{root}&expiry=eq.{expiry}&minute=gte.{start}&minute=lte.{end}&limit=1"
+    res = sb_get(url)
+    
+    instruments = set()
+    if res and len(res) > 0:
+        bucket_data = res[0]['data']
+        instruments = bucket_data.keys()
+        
+    return JSONResponse(sorted(list(instruments)))
+
+@app.post("/api/plot")
+def get_plot_data(
+    date: str = Body(...),
+    root: str = Body(...),
+    expiry: str = Body(...),
+    instrument: str = Body(...),
+    timeframe: str = Body(...), # "1min", "3min", "5min"
+    start_time: str = Body(...), # "HH:MM"
+    end_time: str = Body(...)    # "HH:MM"
+):
+    """
+    Core Logic:
+    1. Fetch buckets within time range.
+    2. Extract 6-slot data for the specific instrument.
+    3. Flatten into a TimeSeries.
+    4. Resample to TimeFrame using Median.
+    5. Return JSON for Chart.js.
+    """
+    
+    # 1. Build Query
+    t_start = f"{date}T{start_time}:00"
+    t_end = f"{date}T{end_time}:59"
+    
+    url = f"/history_buckets_upstox?select=minute,data&root=eq.{root}&expiry=eq.{expiry}&minute=gte.{t_start}&minute=lte.{t_end}&order=minute.asc"
+    rows = sb_get(url)
+    
+    if not rows:
+        return JSONResponse({"error": "No data found for this selection"})
 
-        SYSTEM_STATUS["message"] = "Processing Data..."
-        
-        # Combine all exchanges
-        df = pd.concat([df_nse, df_bse, df_mcx], ignore_index=True)
+    # 2. Process Data into DataFrame
+    # Columns: timestamp, price, buy_qty, sell_qty, volume, oi
+    records = []
+    
+    for row in rows:
+        minute_str = row['minute'] # e.g., "2023-10-27T09:15:00"
+        try:
+            base_ts = datetime.fromisoformat(minute_str)
+        except:
+            continue # Skip malformed dates
+            
+        json_data = row['data']
         
-        # Filter relevant segments
-        mask = df['segment'].isin(['NSE_FO', 'BSE_FO', 'MCX_FO', 'NSE_INDEX', 'BSE_INDEX', 'NSE_EQ'])
-        df = df[mask]
+        # Check if instrument exists in this bucket
+        if instrument not in json_data:
+            continue
+            
+        inst_data = json_data[instrument]
         
-        temp_db = {}
-        search_list = []
+        # Data keys: 'p' (price), 'b' (buy), 's' (sell), 'v' (vol), 'o' (oi)
+        # Each is an array of 6 items (0s, 10s, 20s, 30s, 40s, 50s)
         
-        # ---------------------------------------------------------
-        # STEP 1: Build the SPOT LOOKUP Dictionary
-        # Map: "RELIANCE" -> "NSE_EQ|INE002A01018"
-        # ---------------------------------------------------------
-        spot_lookup = {}
-
-        for _, row in df.iterrows():
-            seg = row['segment']
-            
-            # For Stocks (Equity): Use 'trading_symbol' (e.g., "RELIANCE")
-            if seg == 'NSE_EQ':
-                sym = str(row['trading_symbol']).strip().upper()
-                key = row['instrument_key']
-                spot_lookup[sym] = key
-            
-            # For Indices: Use 'trading_symbol' (e.g., "Nifty 50")
-            elif seg == 'NSE_INDEX' or seg == 'BSE_INDEX':
-                sym = str(row['trading_symbol']).strip().upper()
-                key = row['instrument_key']
-                spot_lookup[sym] = key
-                
-                # Also map 'name' just in case
-                name = str(row['name']).strip().upper()
-                spot_lookup[name] = key
-
-        # ---------------------------------------------------------
-        # STEP 2: Build the DERIVATIVES Chain
-        # ---------------------------------------------------------
-        for _, row in df.iterrows():
-            seg = row['segment']
-            
-            # Skip non-derivatives
-            if seg not in ['NSE_FO', 'BSE_FO', 'MCX_FO']: 
-                continue 
-            
-            sym = row['trading_symbol'] # e.g. RELIANCE24JANFUT
-            key = row['instrument_key']
+        for i in range(6):
+            # Calculate exact timestamp for this slot (10s intervals)
+            slot_ts = base_ts + timedelta(seconds=i*10)
             
-            # -----------------------------------------------------
-            # CRITICAL FIX: IDENTIFY THE ROOT SYMBOL
-            # Priority: underlying_symbol > asset_symbol > name
-            # -----------------------------------------------------
-            root = ""
+            # Safe extraction handling potential missing arrays or shorter arrays
+            p = inst_data.get('p', [None]*6)[i] if i < len(inst_data.get('p', [])) else None
+            b = inst_data.get('b', [None]*6)[i] if i < len(inst_data.get('b', [])) else None
+            s = inst_data.get('s', [None]*6)[i] if i < len(inst_data.get('s', [])) else None
+            v = inst_data.get('v', [None]*6)[i] if i < len(inst_data.get('v', [])) else None
+            o = inst_data.get('o', [None]*6)[i] if i < len(inst_data.get('o', [])) else None
             
-            # 1. Try 'underlying_symbol' (This gives "RELIANCE" correctly for stocks)
-            us = row.get('underlying_symbol')
-            if pd.notna(us) and str(us).strip() != "":
-                root = str(us).strip().upper()
-                
-            # 2. Fallback to 'asset_symbol' if underlying is empty
-            if not root:
-                asym = row.get('asset_symbol')
-                if pd.notna(asym) and str(asym).strip() != "":
-                    root = str(asym).strip().upper()
-                    
-            # 3. Last resort: 'name' (Though usually Long Name for stocks)
-            if not root:
-                nm = row.get('name')
-                if pd.notna(nm):
-                    root = str(nm).strip().upper()
-
-            # Normalize (remove spaces just in case)
-            clean_root = root.replace(' ', '') 
-
-            # Initialize DB Entry
-            if clean_root not in temp_db:
-                # Find Spot Key
-                spot_key = ""
+            # Skip if Price is None (usually indicates no tick data for that 10s slot)
+            if p is None:
+                continue
                 
-                # A: Manual Map (Indices)
-                if clean_root in INDEX_MAP:
-                    spot_key = INDEX_MAP[clean_root]
-                
-                # B: Lookup using raw ROOT (e.g. "RELIANCE") matches "NSE_EQ" trading_symbol
-                elif root in spot_lookup:
-                    spot_key = spot_lookup[root]
-                
-                # C: Lookup using cleaned ROOT
-                elif clean_root in spot_lookup:
-                    spot_key = spot_lookup[clean_root]
-                
-                # Determine Exchange Code
-                exch_code = seg.split('_')[0] 
-                
-                # Use Short Name for display if possible, else Full Name
-                # If root is "RELIANCE", display is likely "RELIANCE"
-                # If row['name'] is "RELIANCE INDUSTRIES LTD", use that for nice display
-                display_name = row['name'] if pd.notna(row['name']) else root
-
-                temp_db[clean_root] = { 
-                    "spot": spot_key, 
-                    "exch": exch_code, 
-                    "name": display_name, 
-                    "items": [] 
-                }
-
-            inst_type = row.get('instrument_type', '') 
-            
-            # Parse Expiry
-            exp = 0
-            raw_exp = row.get('expiry')
-            if pd.notna(raw_exp):
-                try:
-                    if isinstance(raw_exp, (int, float)):
-                        exp = int(raw_exp / 1000)
-                    elif isinstance(raw_exp, str):
-                        dt = datetime.strptime(raw_exp, "%Y-%m-%d")
-                        exp = int(dt.replace(tzinfo=None).timestamp())
-                except: pass
-
-            strike = float(row.get('strike_price', 0.0))
-            
-            # Map Types
-            t_mapped = "FUT"
-            if inst_type == "CE": t_mapped = "CE"
-            elif inst_type == "PE": t_mapped = "PE"
-            elif inst_type in ["FUTIDX", "FUTSTK", "FUTCOM", "FUTBLN", "FUTENR"]: t_mapped = "FUT"
-            
-            temp_db[clean_root]["items"].append({
-                "s": key,       
-                "dis": sym,     
-                "e": exp,       
-                "k": strike,    
-                "t": t_mapped   
-            })
-
-        # ---------------------------------------------------------
-        # STEP 3: Finalize
-        # ---------------------------------------------------------
-        final_db = {}
-        for root, data in temp_db.items():
-            if not data["items"]: continue
-            
-            sorted_items = sorted(data["items"], key=lambda x: (x['e'], x['k']))
-            
-            final_db[root] = { 
-                "spot": data["spot"], 
-                "exch": data["exch"], 
-                "items": sorted_items 
-            }
-            
-            # Add to Search
-            # We use the full name in display so user sees "RELIANCE INDUSTRIES LTD"
-            # But the 'root' key is "RELIANCE"
-            search_list.append({
-                "root": root,           
-                "name": data["name"],   
-                "exch": data["exch"],   
-                "display": f"{data['name']} ({root})"
+            records.append({
+                "ts": slot_ts,
+                "price": float(p),
+                "buy_qty": float(b) if b is not None else 0,
+                "sell_qty": float(s) if s is not None else 0,
+                "volume": float(v) if v is not None else 0,
+                "oi": float(o) if o is not None else 0
             })
 
-        MASTER_DB = final_db
-        SEARCH_INDEX = sorted(search_list, key=lambda x: x['root'])
-        
-        with open(CACHE_FILE, "w") as f:
-            json.dump({"db": final_db, "idx": SEARCH_INDEX}, f)
-
-        SYSTEM_STATUS["ready"] = True
-        SYSTEM_STATUS["message"] = "Ready"
-        print(f">>> [BG TASK] COMPLETE. Loaded {len(SEARCH_INDEX)} roots. Fixed Underlying Symbol Logic.")
-
-    except Exception as e:
-        print(f">>> [BG TASK] ERROR: {e}")
-        SYSTEM_STATUS["message"] = f"Error: {str(e)}"
-    finally:
-        UPDATE_LOCK.release()
-
-@app.on_event("startup")
-def startup_event():
-    global MASTER_DB, SEARCH_INDEX
-    if os.path.exists(CACHE_FILE):
-        try:
-            print(">>> STARTUP: Loading Cache...")
-            with open(CACHE_FILE, "r") as f:
-                data = json.load(f)
-                MASTER_DB = data["db"]
-                SEARCH_INDEX = data["idx"]
-            SYSTEM_STATUS["ready"] = True
-            SYSTEM_STATUS["message"] = "Ready (Cached)"
-        except: pass
-            
-    if not SYSTEM_STATUS["ready"]:
-        thread = threading.Thread(target=update_master_db)
-        thread.start()
-
-# ==========================================
-# 3. ROUTES
-# ==========================================
+    if not records:
+         return JSONResponse({"error": "Instrument found but contains no valid data points"})
 
-@app.get("/")
-def home(access_token: Optional[str] = Cookie(None)):
-    if not access_token:
-        auth_url = (
-            f"https://api.upstox.com/v2/login/authorization/dialog?"
-            f"response_type=code&client_id={API_KEY}&redirect_uri={REDIRECT_URI}"
-        )
-        return HTMLResponse(f"""
-        <div style="height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; font-family:sans-serif; background:#f5f5f5;">
-            <div style="background:white; padding:40px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.1); text-align:center;">
-                <h2 style="margin-top:0;">Authentication Required</h2>
-                <a href="{auth_url}" style="display:inline-block; background:#2962ff; color:white; padding:12px 25px; text-decoration:none; border-radius:5px; font-weight:bold; margin-top:10px;">LOGIN WITH UPSTOX</a>
-            </div>
-        </div>
-        """)
+    df = pd.DataFrame(records)
+    df.set_index('ts', inplace=True)
     
-    return HTMLResponse(HTML_TEMPLATE.replace("{{USER_TOKEN}}", access_token))
-
-@app.get("/callback")
-def callback(code: Optional[str] = None):
-    if not code: return JSONResponse({"error": "No Code Provided"})
-
-    url = "https://api.upstox.com/v2/login/authorization/token"
-    headers = { 'accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded' }
-    data = {
-        'code': code,
-        'client_id': API_KEY,
-        'client_secret': API_SECRET,
-        'redirect_uri': REDIRECT_URI,
-        'grant_type': 'authorization_code'
+    # 3. Resample Logic (Median)
+    # Map input timeframe (e.g., "1min") to Pandas Offset aliases (e.g., "1T")
+    tf_map = {
+        "1min": "1T", "3min": "3T", "5min": "5T", 
+        "15min": "15T", "30min": "30T", "1hour": "1H"
     }
+    panda_tf = tf_map.get(timeframe, "1T")
     
-    resp = requests.post(url, headers=headers, data=data)
-    json_resp = resp.json()
+    # Resample
+    # For OHLC, we usually take Open/High/Low/Close. 
+    # But prompt asks specifically: "do average... get the median value... ignore null"
+    # We will produce a single value per timeframe per variable using Median.
     
-    if "access_token" in json_resp:
-        response = RedirectResponse(url="/")
-        response.set_cookie(key="access_token", value=json_resp['access_token'], httponly=True)
-        return response
-    else:
-        return HTMLResponse(f"<h3>Login Failed</h3><pre>{json.dumps(json_resp, indent=2)}</pre>")
-
-@app.get("/logout")
-def logout():
-    response = RedirectResponse(url="/")
-    response.delete_cookie("access_token")
-    return response
-
-@app.get("/api/status")
-def get_status():
-    return JSONResponse(SYSTEM_STATUS)
-
-@app.get("/api/search")
-def search_symbol(q: str = Query(..., min_length=1)):
-    if not SYSTEM_STATUS["ready"]: return JSONResponse([])
-    query = q.upper()
+    resampled = df.resample(panda_tf).median()
     
-    results = []
-    # 1. Exact Starts With Root (e.g. "REL")
-    results += [x for x in SEARCH_INDEX if x['root'].startswith(query)]
+    # Remove rows where all data is NaN (gaps in data)
+    resampled.dropna(how='all', inplace=True)
     
-    # 2. Contains in Name (e.g. "RELIANCE") - limit to 10
-    if len(results) < 20:
-        results += [x for x in SEARCH_INDEX if query in x['name'].upper() and x not in results][:10]
-        
-    return JSONResponse(results[:30])
-
-@app.get("/api/chain")
-def get_chain(symbol: str):
-    root = symbol.upper()
-    if root in MASTER_DB:
-        return JSONResponse(MASTER_DB[root])
-    return JSONResponse({"error": "Symbol not found"}, status_code=404)
-
-@app.get("/api/refresh")
-def force_refresh(background_tasks: BackgroundTasks):
-    SYSTEM_STATUS["ready"] = False
-    SYSTEM_STATUS["message"] = "Refreshing..."
-    background_tasks.add_task(update_master_db)
-    return JSONResponse({"s": "ok"})
+    # 4. Prepare Response
+    # Convert timestamps to string for JS
+    labels = resampled.index.strftime('%H:%M').tolist()
+    
+    response_data = {
+        "labels": labels,
+        "price": resampled['price'].tolist(),
+        "buy_qty": resampled['buy_qty'].tolist(),
+        "sell_qty": resampled['sell_qty'].tolist(),
+        "volume": resampled['volume'].tolist(),
+        "oi": resampled['oi'].tolist(),
+    }
+    
+    return JSONResponse(response_data)
 
 
 # ==========================================
-# 4. FRONTEND
+# 4. FRONTEND (HTML/JS)
 # ==========================================
 
 HTML_TEMPLATE = """
@@ -360,888 +244,357 @@ HTML_TEMPLATE = """
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>PRO CHAIN (UPSTOX)</title>
-    <meta name="viewport" content="width=1100">
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;800&family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
+    <title>DepthChain Historical</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
         :root { 
             --bg: #ffffff; --panel: #f4f6f8; --border: #e0e0e0; 
             --text-main: #1a1a1a; --text-sub: #555555;
-            --accent: #6c4af5; --green: #00c853; --red: #d50000;
-            --green-soft: rgba(0, 200, 83, 0.27); --red-soft: rgba(213, 0, 0, 0.18);
-            --atm-bg: rgba(108, 74, 245, 0.08);
-            --badge-nse: #00c853; --badge-bse: #ff6d00; --badge-mcx: #2962ff;
+            --accent: #2962ff; --green: #00c853; --red: #d50000;
         }
         * { box-sizing: border-box; }
-        body { margin: 0; background: var(--bg); color: var(--text-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
-
-        .top-nav { padding: 0 20px; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; height: 60px; z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.03); }
-        .btn { background: #fff; border: 1px solid var(--border); padding: 8px 16px; font-size: 12px; border-radius: 6px; cursor: pointer; font-weight: 700; display: flex; gap: 8px; align-items: center; transition:0.2s; white-space:nowrap; color: var(--text-sub); }
-        .btn:hover { border-color: var(--accent); color: var(--accent); background:#f0f7ff; }
-        .btn.active { background: var(--accent); color: white; border-color: var(--accent); }
-        
-        .icon-btn { padding: 8px; border-radius: 50%; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--text-sub); transition:0.2s; }
-        .icon-btn:hover { background: #f0f0f0; color: var(--text-main); }
-
-        .search-box { position: relative; width: 350px; margin-right: 20px; }
-        .search-input { width: 100%; padding: 10px 15px; border: 1px solid var(--border); border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-weight: bold; font-size: 14px; outline: none; transition: 0.3s; background: #f9f9f9; }
-        .search-input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(108, 74, 245, 0.1); }
-        .search-dropdown { position: absolute; top: 105%; left: 0; width: 100%; background: white; border: 1px solid var(--border); max-height: 400px; overflow-y: auto; display: none; box-shadow: 0 10px 20px rgba(0,0,0,0.1); border-radius: 6px; z-index: 100; }
-        
-        .search-item { padding: 12px 15px; cursor: pointer; border-bottom: 1px solid #f5f5f5; font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
-        .search-item:hover { background: #f0f7ff; color: var(--accent); }
+        body { margin: 0; background: var(--bg); color: var(--text-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; }
         
-        .exch-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; color: white; font-weight: 800; min-width: 40px; text-align: center; }
-        .badge-NSE { background: var(--badge-nse); }
-        .badge-BSE { background: var(--badge-bse); }
-        .badge-MCX { background: var(--badge-mcx); }
+        /* Top Header */
+        .top-nav { padding: 0 20px; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; height: 60px; flex-shrink:0; }
+        .logo { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 16px; letter-spacing: -0.5px; }
+        .logo span { color: var(--accent); }
 
-        .grid-layout { display: flex; height: calc(100vh - 60px); }
-        
-        /* Chain Panel */
-        .chain-panel { flex: 1; display: flex; flex-direction: column; position: relative; }
-        
-        .chain-header { display: grid; grid-template-columns: 1fr 1fr; background: #f8f9fa; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 800; text-align: center; color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.5px; }
-        .header-cell { padding: 12px 5px; display: flex; align-items: center; justify-content: center; gap: 8px; position:relative; border-right: 1px solid var(--border); }
-        .header-icon { opacity: 0.3; cursor: pointer; transition: 0.2s; }
-        .header-icon:hover { opacity: 1; color: var(--accent); }
-
-        .chain-body { flex: 1; overflow-y: auto; background: #fff; scroll-behavior: smooth; }
-        
-        .row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #f0f0f0; height: 42px; align-items: center; font-family: 'JetBrains Mono'; font-size: 12px; }
-        .row:hover { background: #fafafa; }
-        .row.atm { background: var(--atm-bg); border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
+        /* Layout */
+        .container { display: flex; flex: 1; overflow: hidden; }
         
-        .graph-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border-right: 1px solid var(--border); cursor: crosshair; }
-        .visual-bar { position: absolute; top: 8px; bottom: 8px; z-index: 0; border-radius: 4px; transition: width 0.3s, left 0.3s; opacity: 0.9; }
+        /* Sidebar Controls */
+        .sidebar { width: 300px; background: var(--panel); border-right: 1px solid var(--border); padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
         
-        .strike-txt { z-index: 2; font-weight: 800; font-size: 13px; color: var(--text-main); }
-        .delta-txt { z-index: 2; font-size: 10px; font-weight: 700; background: rgba(255,255,255,0.85); padding: 0 5px; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); margin-top: -2px; }
+        .control-group { display: flex; flex-direction: column; gap: 5px; }
+        .label { font-size: 11px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
         
-        /* Futures / Sidebar Panel */
-        .fut-panel { width: 300px; background: var(--panel); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; }
+        select, input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-family: 'JetBrains Mono'; font-size: 12px; outline: none; background: #fff; }
+        select:focus, input:focus { border-color: var(--accent); }
         
-        .panel-section { padding: 15px; border-bottom: 1px solid var(--border); background: #fff; margin-bottom: 10px; }
-        .panel-title { font-size: 11px; font-weight: 800; color: #888; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; display:flex; justify-content:space-between; align-items:center; }
-        
-        .fut-card { padding: 12px; background: #fff; border: 1px solid #eee; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
-        .meter-bg { height: 6px; background: #eee; border-radius: 3px; display: flex; overflow: hidden; margin-top: 8px; }
-        
-        .netflow-card { background: #fff; padding: 15px; border-radius: 8px; border: 1px solid var(--border); text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
-        
-        .nf-sec { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
-        .nf-sec:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
-        .nf-title { font-size: 10px; font-weight: 800; color: #888; text-transform: uppercase; margin-bottom: 8px; text-align: left; }
-        
-        .aggr-row { display: flex; width: 100%; border: 1px solid transparent; }
-        .aggr-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
-        
-        .aggr-val { font-size: 20px; font-family: 'JetBrains Mono'; font-weight: 800; line-height: 1; margin-bottom: 2px; }
-        .aggr-lbl { font-size: 9px; font-weight: 700; color: #aaa; background: transparent; padding: 0; border-radius: 0; margin-top: 2px; display:flex; align-items:center; gap:3px; }
-        
-        .info-bubble { width:12px; height:12px; background:#eee; color:#666; border-radius:50%; font-size:8px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-family:'Inter'; font-weight:800; }
-        .info-bubble:hover { background:var(--accent); color:white; }
+        .btn { padding: 12px; background: var(--accent); color: white; border: none; border-radius: 6px; font-weight: 700; cursor: pointer; font-size: 13px; margin-top: 10px; transition: 0.2s; }
+        .btn:hover { background: #1e4bd6; }
+        .btn:disabled { background: #ccc; cursor: not-allowed; }
 
-        /* Modals */
-        .modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); z-index: 1000; display: none; justify-content: center; align-items: center; backdrop-filter: blur(2px); }
-        .modal-box { background: #fff; width: 420px; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); padding: 25px; display:flex; flex-direction:column; animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
-        @keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+        .checkbox-group { display: flex; flex-direction: column; gap: 8px; background: #fff; padding: 10px; border: 1px solid #ddd; border-radius: 6px; }
+        .cb-item { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; }
         
-        .modal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; max-height: 300px; overflow-y: auto; }
-        .opt-btn { padding: 10px; text-align: center; border: 1px solid #eee; border-radius: 6px; cursor: pointer; font-weight:600; font-size:12px; transition:0.2s; background:#f9f9f9; }
-        .opt-btn:hover { background: #fff; border-color: var(--accent); box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
-        .opt-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
+        /* Main Chart Area */
+        .chart-area { flex: 1; padding: 20px; display: flex; flex-direction: column; position: relative; overflow-y:auto; }
+        .chart-container { position: relative; height: 100%; width: 100%; min-height: 400px; }
         
-        .inp-group { margin-top:15px; }
-        .inp-label { font-size:11px; font-weight:800; color:#888; margin-bottom:5px; display:block; }
-        .modal-inp { width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; font-family:'JetBrains Mono'; font-weight:bold; font-size:14px; }
-        .modal-action { background:var(--accent); color:white; border:none; padding:10px 20px; border-radius:6px; font-weight:bold; cursor:pointer; width:100%; margin-top:20px; }
-        .modal-action.sec { background:#eee; color:#333; margin-top:10px; }
-
-        .info-table { width:100%; font-family:'JetBrains Mono'; font-size:10px; border-collapse: collapse; margin-top:10px; }
-        .info-table th { text-align:left; color:#888; border-bottom:1px solid #eee; padding:5px; }
-        .info-table td { padding:5px; border-bottom:1px solid #f9f9f9; color:#333; }
-        .info-row-res { background: #f0f7ff; font-weight:800; }
-
-        .conf-list { max-height: 250px; overflow-y: auto; margin-bottom: 15px; border: 1px solid #eee; border-radius: 6px; background: #fafafa; }
-        .conf-item { background: #fff; border-bottom: 1px solid #eee; padding: 10px; }
-        .conf-item:last-child { border-bottom: none; }
-        .conf-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
-        .conf-body { margin-top: 10px; display: none; padding-top: 10px; border-top: 1px solid #f5f5f5; }
-        .conf-item.expanded .conf-body { display: block; }
-        .conf-item.expanded .conf-header { color: var(--accent); }
-        .del-btn { color: var(--red); cursor: pointer; font-size: 10px; font-weight: bold; border: 1px solid var(--red-soft); padding: 2px 6px; border-radius: 4px; }
-        .add-btn { width: 100%; border: 1px dashed #ccc; padding: 10px; text-align: center; font-size: 11px; font-weight: bold; color: #888; cursor: pointer; border-radius: 6px; margin-bottom: 15px; transition: 0.2s; background: #fff; }
-        .add-btn:hover { border-color: var(--accent); color: var(--accent); background: #f0f7ff; }
-
-        .loader-ov { position: fixed; top:0; left:0; width:100%; height:100%; background:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; z-index: 9999; }
-        .spinner { width: 30px; height: 30px; border: 3px solid #f3f3f3; border-top: 3px solid var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 15px; }
+        /* Loading Overlay */
+        .loader-ov { position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.8); display:none; justify-content:center; align-items:center; z-index: 10; backdrop-filter: blur(2px); }
+        .spinner { width: 30px; height: 30px; border: 3px solid #f3f3f3; border-top: 3px solid var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+
+        /* Multiple Charts Layout */
+        .multi-chart-grid { display: grid; grid-template-rows: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; height: 100%; }
         
-        @keyframes blink { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
-        .live-dot { width:8px; height:8px; background:#ccc; border-radius:50%; transition:0.3s; }
-        .live-dot.active { background: var(--green); animation: blink 1.5s infinite; box-shadow: 0 0 5px var(--green); }
-        .live-dot.error { background: var(--red); }
-        
-        ::-webkit-scrollbar { width: 6px; height: 6px; }
-        ::-webkit-scrollbar-track { background: transparent; }
-        ::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
-        ::-webkit-scrollbar-thumb:hover { background: #bbb; }
-        
-        .code-box { background:#f4f4f4; padding:10px; border-radius:6px; font-family:'JetBrains Mono'; font-size:11px; color:#555; margin-top:5px; display:none; }
-        .var-tag { color:var(--accent); font-weight:bold; }
     </style>
 </head>
 <body>
 
-<!-- LOADER -->
-<div class="loader-ov" id="loader">
-    <div class="spinner"></div>
-    <div id="loaderMsg" style="font-weight:700; color:var(--text-main); font-size:14px; letter-spacing:1px;">CONNECTING...</div>
-</div>
-
-<!-- EXPIRY MODAL -->
-<div class="modal" id="expModal">
-    <div class="modal-box">
-        <div style="display:flex; justify-content:space-between; font-weight:800; font-size:16px; border-bottom:1px solid #eee; padding-bottom:15px;">
-            <span>SELECT EXPIRY</span>
-            <span style="cursor:pointer; color:#999;" onclick="closeModal('expModal')">✕</span>
-        </div>
-        <div class="modal-grid" id="expGrid"></div>
-    </div>
+<div class="top-nav">
+    <div class="logo">DepthChain <span>HISTORICAL</span></div>
 </div>
 
-<!-- INFO BREAKDOWN MODAL -->
-<div class="modal" id="infoModal">
-    <div class="modal-box" style="width: 500px; max-width:95%;">
-        <div style="display:flex; justify-content:space-between; font-weight:800; font-size:16px; border-bottom:1px solid #eee; padding-bottom:15px;">
-            <span>CALCULATION BREAKDOWN</span>
-            <span style="cursor:pointer; color:#999;" onclick="closeModal('infoModal')">✕</span>
-        </div>
-        <div style="margin-top:15px; font-size:12px;">
-            <div><strong>LIVE SPOT:</strong> <span id="infoSpot" style="font-family:'JetBrains Mono'; color:var(--accent);">0.00</span></div>
-            <div style="margin-top:5px;"><strong>FORMULA:</strong> <span id="infoForm" style="font-family:'JetBrains Mono'; background:#f4f4f4; padding:2px 6px; border-radius:4px;"></span></div>
+<div class="container">
+    <div class="sidebar">
+        <!-- 1. DATE -->
+        <div class="control-group">
+            <span class="label">1. Select Date</span>
+            <select id="selDate" onchange="loadRoots()"><option>Loading...</option></select>
         </div>
-        <div style="overflow-y:auto; max-height:400px; margin-top:10px;">
-            <table class="info-table" id="infoTable">
-                <!-- Dynamic Content -->
-            </table>
+        
+        <!-- 2. ROOT SYMBOL -->
+        <div class="control-group">
+            <span class="label">2. Root Symbol</span>
+            <select id="selRoot" onchange="loadExpiries()" disabled><option>--</option></select>
         </div>
-        <div style="margin-top:10px; font-size:10px; color:#888; text-align:center;">* Uses Raw Integer Values for Accuracy</div>
-    </div>
-</div>
 
-<!-- CONFIG MODAL -->
-<div class="modal" id="confModal">
-    <div class="modal-box">
-        <div style="display:flex; justify-content:space-between; font-weight:800; font-size:16px; border-bottom:1px solid #eee; padding-bottom:15px;">
-            <span id="confTitle">COLUMN SETTINGS</span>
-            <span style="cursor:pointer; color:#999;" onclick="closeModal('confModal')">✕</span>
-        </div>
-        <div class="inp-group">
-            <span class="inp-label">DISPLAY TITLE</span>
-            <input type="text" id="confName" class="modal-inp" placeholder="e.g. NET FLOW">
+        <!-- 3. EXPIRY TYPE -->
+        <div class="control-group">
+            <span class="label">3. Expiry / Type</span>
+            <select id="selExpiry" onchange="loadInstruments()" disabled><option>--</option></select>
         </div>
-        <div class="inp-group">
-            <span class="inp-label">CUSTOM FORMULA</span>
-            <input type="text" id="confForm" class="modal-inp" placeholder="e.g. PS - CS">
-        </div>
-        <button class="modal-action" onclick="saveConfig()">SAVE CONFIGURATION</button>
-        <button class="modal-action sec" onclick="resetConfig()">RESET TO DEFAULTS</button>
-    </div>
-</div>
 
-<!-- SIDEBAR AGGREGATE SETTINGS MODAL -->
-<div class="modal" id="sideConfModal">
-    <div class="modal-box">
-        <div style="display:flex; justify-content:space-between; font-weight:800; font-size:16px; border-bottom:1px solid #eee; padding-bottom:15px;">
-            <span>SIDEBAR CONFIG</span>
-            <span style="cursor:pointer; color:#999;" onclick="closeModal('sideConfModal')">✕</span>
-        </div>
-        <div style="margin-top:10px; font-size:11px; font-weight:700; color:#888; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center;">
-            <span>CONFIGURE CARDS & RANGES</span>
-            <span onclick="toggleVarHelp()" style="color:var(--accent); cursor:pointer; font-weight:800;">[?] VARIABLES</span>
+        <!-- 4. TIME RANGE -->
+        <div class="control-group">
+            <span class="label">4. Time Range (HH:MM)</span>
+            <div style="display:flex; gap:5px;">
+                <input type="time" id="startTime" value="09:15">
+                <input type="time" id="endTime" value="15:30">
+            </div>
         </div>
-        <div class="code-box" id="sideVarHelp">
-             <div>VARIABLES AVAILABLE:</div>
-             <div style="margin-top:4px;">
-                 <span class="var-tag">CS</span> = Call Sell &nbsp; <span class="var-tag">CB</span> = Call Buy &nbsp; <span class="var-tag">CO</span> = Call OI &nbsp; <span class="var-tag">CLTP</span> = Call LTP &nbsp; <span class="var-tag">CV</span> = Call Vol<br>
-                 <span class="var-tag">PS</span> = Put Sell &nbsp;&nbsp; <span class="var-tag">PB</span> = Put Buy &nbsp; <span class="var-tag">PO</span> = Put OI &nbsp; <span class="var-tag">PLTP</span> = Put LTP &nbsp; <span class="var-tag">PV</span> = Put Vol
-             </div>
-             <div style="margin-top:4px; font-size:10px; color:#888;">Supports +, -, *, /, ( ) arithmetic.</div>
+        
+        <!-- 5. TIME FRAME -->
+        <div class="control-group">
+            <span class="label">5. Time Frame</span>
+            <select id="selTF">
+                <option value="1min">1 Minute</option>
+                <option value="3min">3 Minutes</option>
+                <option value="5min">5 Minutes</option>
+                <option value="15min">15 Minutes</option>
+                <option value="30min">30 Minutes</option>
+                <option value="1hour">1 Hour</option>
+            </select>
         </div>
-        <div class="conf-list" id="sideListContainer"></div>
-        <div class="add-btn" onclick="addSideItem()">+ ADD NEW AGGREGATE CARD</div>
-        <button class="modal-action" onclick="saveSideConfig()">SAVE SETTINGS</button>
-        <button class="modal-action sec" onclick="resetSideConfig()">RESET DEFAULTS</button>
-    </div>
-</div>
 
-<!-- TOP NAV -->
-<div class="top-nav">
-    <div style="display:flex; align-items:center;">
-        <div class="search-box">
-            <input type="text" class="search-input" id="searchInp" placeholder="SEARCH (e.g. SBIN, CRUDE)..." autocomplete="off">
-            <div class="search-dropdown" id="searchRes"></div>
-        </div>
-    </div>
-    
-    <div style="display:flex; gap:20px; align-items:center;">
-        <button class="icon-btn" onclick="refreshDB()" title="Refresh Master DB">
-            <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
-        </button>
-        <div style="text-align:right;">
-            <div style="font-size:10px; font-weight:700; color:#aaa; letter-spacing:1px;" id="spotLabel">SPOT</div>
-            <div id="spotPrice" style="font-family:'JetBrains Mono'; font-weight:800; font-size:17px; color:var(--text-main);">0.00</div>
+        <!-- 6. INSTRUMENT -->
+        <div class="control-group">
+            <span class="label">6. Specific Instrument</span>
+            <select id="selInst" disabled><option>--</option></select>
         </div>
-        <button class="btn" onclick="document.getElementById('expModal').style.display='flex'">
-            <span style="color:#888">EXP:</span> <span id="selExpTxt" style="color:var(--text-main)">SELECT</span>
-            <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"></path></svg>
-        </button>
-        <div class="live-dot" id="statusDot" title="Connection Status"></div>
-        <button class="btn" onclick="location.href='/logout'" style="border:none; color:var(--red); padding:0;">
-            <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
-        </button>
-    </div>
-</div>
 
-<div class="grid-layout">
-    <div class="chain-panel">
-        <div class="chain-header">
-            <div class="header-cell">
-                <span id="headL_txt">NET FLOW</span>
-                <svg class="header-icon" onclick="openConfig('left')" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
-            </div>
-            <div class="header-cell">
-                <span id="headR_txt">OVERALL FLOW</span>
-                <svg class="header-icon" onclick="openConfig('right')" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
+        <!-- 7. VARIABLES -->
+        <div class="control-group">
+            <span class="label">7. Variables to Plot</span>
+            <div class="checkbox-group">
+                <div class="cb-item"><input type="checkbox" id="vPrice" checked> Price</div>
+                <div class="cb-item"><input type="checkbox" id="vVol"> Volume</div>
+                <div class="cb-item"><input type="checkbox" id="vOI" checked> OI (Open Interest)</div>
+                <div class="cb-item"><input type="checkbox" id="vBuy"> Total Buy Qty</div>
+                <div class="cb-item"><input type="checkbox" id="vSell"> Total Sell Qty</div>
             </div>
         </div>
-        <div class="chain-body" id="chainBody">
-            <div style="padding:40px; text-align:center; color:#999; font-weight:600; font-size:14px;">USE SEARCH BAR TO LOAD DATA</div>
+        
+        <!-- 8. CHART MODE -->
+        <div class="control-group">
+            <span class="label">8. Plot Mode</span>
+            <select id="selMode">
+                <option value="multi">Separate Charts (Recommended)</option>
+                <option value="single">Same Chart (Dual Axis)</option>
+            </select>
         </div>
+
+        <button class="btn" onclick="plotData()">PLOT DATA</button>
+        <div id="statusMsg" style="font-size:10px; color:#d50000; text-align:center; min-height:15px;"></div>
     </div>
-    
-    <div class="fut-panel">
-        <div class="panel-section">
-            <div class="panel-title">
-                <span>AGGREGATE FLOW</span>
-                <div style="display:flex; align-items:center; gap:5px;">
-                    <svg onclick="openSideConfig()" style="cursor:pointer; opacity:0.5;" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
-                </div>
-            </div>
-            <div class="netflow-card" id="sideContainer">
-                <div style="padding:20px; color:#ccc; font-size:10px;">LOADING CONFIG...</div>
-            </div>
-        </div>
-        <div class="panel-section">
-            <div class="panel-title">FUTURES CONTRACTS</div>
-            <div id="futBody"></div>
+
+    <div class="chart-area" id="chartArea">
+        <div class="loader-ov" id="loader"><div class="spinner"></div></div>
+        <!-- Canvas elements will be injected here -->
+        <div style="color:#aaa; display:flex; justify-content:center; align-items:center; height:100%;">
+            SELECT PARAMETERS AND CLICK PLOT
         </div>
     </div>
 </div>
 
 <script>
-    const UPSTOX_TOKEN = "{{USER_TOKEN}}";
-    
-    // Core State
-    let CURRENT_ROOT = "";
-    let CHAIN_DATA = null;
-    let ACTIVE_EXP = 0;
-    let SPOT_SYM = "";
-    let SPOT_PRICE = 0;
-    let FUT_SYMS = [];
-    let OPT_SYMS = [];
-    let POLLER = null;
-    let IS_POLLING = false;
-    let SEARCH_TIMER = null;
-    let ATM_STRIKE = 0;
-    let LATEST_ROW_DATA = {};
-
-    // Default Configurations
-    const DEFAULTS = {
-        left: { name: "NET FLOW", formula: "PS - CS" },
-        right: { name: "OVERALL FLOW", formula: "CB + PS - (PB + CS)" },
-        side: [
-            { id: 1, name: "NET FLOW", formula: "PS - CS", ranges: [7,10], _expanded: true },
-            { id: 2, name: "OVERALL", formula: "CB + PS - (PB + CS)", ranges: [7,10], _expanded: false },
-            { id: 3, name: "NET OI", formula: "PO - CO", ranges: [10], _expanded: false }
-        ]
-    };
-
-    // Load Config from LocalStorage
-    let CONFIG = JSON.parse(localStorage.getItem('tst_chain_config')) || JSON.parse(JSON.stringify(DEFAULTS));
-    if(!Array.isArray(CONFIG.side)) CONFIG.side = JSON.parse(JSON.stringify(DEFAULTS.side));
+    // State
+    let CHARTS = [];
 
-    let EDITING_COL = null; 
-
-    window.onload = () => { 
-        applyConfig();
-        checkStatus();
-        const inp = document.getElementById('searchInp');
-        inp.addEventListener('input', (e) => {
-            clearTimeout(SEARCH_TIMER);
-            SEARCH_TIMER = setTimeout(() => doSearch(e.target.value), 300);
-        });
-        document.addEventListener('click', (e) => {
-            if(!e.target.closest('.search-box')) document.getElementById('searchRes').style.display = 'none';
-        });
-    };
-
-    // ===================================
-    // MATH ENGINE
-    // ===================================
-    function evaluateFormula(formula, vars) {
+    // Init
+    window.onload = async () => {
         try {
-            let exp = formula;
-            exp = exp.replace(/CS/g, vars.CS || 0);
-            exp = exp.replace(/CB/g, vars.CB || 0);
-            exp = exp.replace(/PS/g, vars.PS || 0);
-            exp = exp.replace(/PB/g, vars.PB || 0);
-            
-            exp = exp.replace(/CO/g, vars.CO || 0);
-            exp = exp.replace(/PO/g, vars.PO || 0);
-            exp = exp.replace(/CLTP/g, vars.CLTP || 0);
-            exp = exp.replace(/PLTP/g, vars.PLTP || 0);
-            exp = exp.replace(/CV/g, vars.CV || 0);
-            exp = exp.replace(/PV/g, vars.PV || 0);
-            
-            if(/[^0-9+\-*/(). ]/.test(exp)) return 0;
-            return new Function('return ' + exp)();
-        } catch(e) { return 0; }
-    }
-    
-    // ===================================
-    // CONFIG LOGIC
-    // ===================================
-    function applyConfig() {
-        document.getElementById('headL_txt').innerText = CONFIG.left.name;
-        document.getElementById('headR_txt').innerText = CONFIG.right.name;
-        renderSidebar();
-    }
-
-    function renderSidebar() {
-        const con = document.getElementById('sideContainer');
-        if(!CONFIG.side || CONFIG.side.length === 0) {
-            con.innerHTML = '<div style="padding:10px; color:#aaa; font-size:10px;">NO METRICS CONFIGURED</div>';
-            return;
+            const res = await fetch('/api/dates');
+            const dates = await res.json();
+            const sel = document.getElementById('selDate');
+            sel.innerHTML = dates.map(d => `<option value="${d}">${d}</option>`).join('');
+            if(dates.length > 0) loadRoots();
+        } catch(e) {
+            console.error(e);
+            document.getElementById('selDate').innerHTML = '<option>Error Loading Dates</option>';
         }
+    };
 
-        con.innerHTML = CONFIG.side.map((item, idx) => {
-            const boxes = item.ranges.map((r, rIdx) => `
-                <div class="aggr-item">
-                    <span class="aggr-val" id="sv-${idx}-${rIdx}">0</span>
-                    <span class="aggr-lbl">
-                        ATM ±${r} 
-                        <span class="info-bubble" onclick="showInfo(${idx}, ${rIdx})">i</span>
-                    </span>
-                </div>
-            `).join('');
-
-            return `
-            <div class="nf-sec">
-                <div class="nf-title">${item.name}</div>
-                <div class="aggr-row">
-                    ${boxes}
-                </div>
-            </div>`;
-        }).join('');
-    }
-
-    function showInfo(cardIdx, rangeIdx) {
-        if(!CONFIG.side[cardIdx]) return;
-        const cfg = CONFIG.side[cardIdx];
-        const range = cfg.ranges[rangeIdx];
-        const formula = cfg.formula;
-        
-        document.getElementById('infoSpot').innerText = SPOT_PRICE.toFixed(2);
-        document.getElementById('infoForm').innerText = formula;
-        
-        const kList = Object.keys(LATEST_ROW_DATA).map(parseFloat).sort((a,b)=>a-b);
-        const lowers = kList.filter(k => k < SPOT_PRICE);
-        const uppers = kList.filter(k => k >= SPOT_PRICE);
+    async function loadRoots() {
+        const date = document.getElementById('selDate').value;
+        const sel = document.getElementById('selRoot');
+        sel.disabled = true; sel.innerHTML = '<option>Loading...</option>';
         
-        const selLow = lowers.slice(-range);
-        const selHigh = uppers.slice(0, range);
-        const allSel = [...selLow, ...selHigh].sort((a,b)=>a-b);
-        let grandTotal = 0;
-        
-        const table = document.getElementById('infoTable');
-        
-        let hHTML = `<tr><th style="width:50px;">STRIKE</th><th>CS</th><th>CB</th><th>PS</th><th>PB</th><th>CALC</th></tr>`;
-        
-        let rowsHTML = allSel.map(k => {
-            const d = LATEST_ROW_DATA[k] || {};
-            const val = evaluateFormula(formula, d);
-            grandTotal += val;
-            const borderStyle = (k >= SPOT_PRICE && selLow.includes(k- (kList[1]-kList[0]))) ? "border-top:2px solid var(--accent);" : "";
-            return `<tr style="${borderStyle}"><td style="font-weight:bold;">${k}</td><td>${d.CS||0}</td><td>${d.CB||0}</td><td>${d.PS||0}</td><td>${d.PB||0}</td><td style="font-weight:bold; color:${val>=0?'var(--green)':'var(--red)'}">${val}</td></tr>`;
-        }).join('');
-        
-        rowsHTML += `<tr class="info-row-res"><td colspan="5" style="text-align:right;">TOTAL</td><td style="color:${grandTotal>=0?'var(--green)':'var(--red)'}">${grandTotal}</td></tr>`;
-        table.innerHTML = hHTML + rowsHTML;
-        document.getElementById('infoModal').style.display = 'flex';
-    }
-
-    function openConfig(col) {
-        EDITING_COL = col;
-        const cfg = CONFIG[col];
-        document.getElementById('confTitle').innerText = (col === 'left' ? "LEFT COLUMN" : "RIGHT COLUMN") + " SETTINGS";
-        document.getElementById('confName').value = cfg.name;
-        document.getElementById('confForm').value = cfg.formula;
-        document.getElementById('confModal').style.display = 'flex';
-    }
-
-    function saveConfig() {
-        const name = document.getElementById('confName').value;
-        const form = document.getElementById('confForm').value.toUpperCase();
-        if(!name || !form) { alert("Fields cannot be empty"); return; }
-        CONFIG[EDITING_COL] = { name: name, formula: form };
-        saveAndReload();
-        closeModal('confModal');
-    }
-
-    function resetConfig() {
-        if(confirm("Reset Main Columns to Default?")) {
-            CONFIG.left = DEFAULTS.left;
-            CONFIG.right = DEFAULTS.right;
-            saveAndReload();
-            closeModal('confModal');
-        }
-    }
-
-    // --- SIDEBAR DYNAMIC CONFIG ---
-    let TEMP_SIDE_CONFIG = [];
-
-    function openSideConfig() {
-        TEMP_SIDE_CONFIG = JSON.parse(JSON.stringify(CONFIG.side));
-        renderSideConfigList();
-        document.getElementById('sideConfModal').style.display = 'flex';
-    }
-
-    function renderSideConfigList() {
-        const list = document.getElementById('sideListContainer');
-        list.innerHTML = TEMP_SIDE_CONFIG.map((item, idx) => `
-            <div class="conf-item ${item._expanded ? 'expanded' : ''}">
-                <div class="conf-header" onclick="toggleSideItem(${idx})">
-                    <span style="font-weight:700; font-size:12px;">${idx+1}. ${item.name}</span>
-                    <div style="display:flex; align-items:center; gap:10px;">
-                        <span style="font-size:10px; color:#aaa;">${item.ranges.length} RANGES</span>
-                        <span class="del-btn" onclick="removeSideItem(event, ${idx})">DEL</span>
-                    </div>
-                </div>
-                <div class="conf-body" onclick="event.stopPropagation()">
-                    <div class="inp-group" style="margin-top:0;">
-                        <span class="inp-label">TITLE</span>
-                        <input type="text" class="modal-inp" value="${item.name}" onchange="updateSideItem(${idx}, 'name', this.value)">
-                    </div>
-                    <div class="inp-group">
-                        <span class="inp-label">FORMULA</span>
-                        <input type="text" class="modal-inp" value="${item.formula}" onchange="updateSideItem(${idx}, 'formula', this.value)">
-                    </div>
-                    <div class="inp-group">
-                        <span class="inp-label">RANGES (Comma separated, max 3 recommended)</span>
-                        <input type="text" class="modal-inp" value="${item.ranges.join(', ')}" onchange="updateSideItem(${idx}, 'ranges', this.value)">
-                    </div>
-                </div>
-            </div>
-        `).join('');
-    }
-
-    function toggleSideItem(idx) { TEMP_SIDE_CONFIG[idx]._expanded = !TEMP_SIDE_CONFIG[idx]._expanded; renderSideConfigList(); }
-    function toggleVarHelp() { const box = document.getElementById('sideVarHelp'); box.style.display = (box.style.display === 'none' || box.style.display === '') ? 'block' : 'none'; }
-    function addSideItem() { TEMP_SIDE_CONFIG.push({ id: Date.now(), name: "NEW METRIC", formula: "PS - CS", ranges: [10], _expanded: true }); renderSideConfigList(); }
-    function removeSideItem(e, idx) { e.stopPropagation(); if(confirm("Delete this card?")) { TEMP_SIDE_CONFIG.splice(idx, 1); renderSideConfigList(); } }
-    function updateSideItem(idx, field, val) {
-        if(field === 'ranges') {
-            const nums = val.split(',').map(s => parseInt(s.trim())).filter(n => !isNaN(n) && n > 0 && n <= 50);
-            TEMP_SIDE_CONFIG[idx][field] = nums.length > 0 ? nums : [10];
-        } else if (field === 'formula') { TEMP_SIDE_CONFIG[idx][field] = val.toUpperCase();
-        } else { TEMP_SIDE_CONFIG[idx][field] = val; }
-    }
-    function saveSideConfig() {
-        const clean = TEMP_SIDE_CONFIG.map(x => { const { _expanded, ...rest } = x; return rest; });
-        CONFIG.side = clean;
-        saveAndReload();
-        closeModal('sideConfModal');
-    }
-    function resetSideConfig() { if(confirm("Reset Sidebar to defaults?")) { CONFIG.side = JSON.parse(JSON.stringify(DEFAULTS.side)); saveAndReload(); closeModal('sideConfModal'); } }
-    function saveAndReload() { localStorage.setItem('tst_chain_config', JSON.stringify(CONFIG)); applyConfig(); pollData(); }
-    function closeModal(id) { document.getElementById(id).style.display = 'none'; }
-
-    // ===================================
-    // UPSTOX DATA LOGIC
-    // ===================================
-    async function checkStatus() {
         try {
-            const res = await fetch('/api/status');
-            const status = await res.json();
-            if(status.ready) {
-                document.getElementById('loader').style.display = 'none';
-                if(!CURRENT_ROOT) loadSymbol('NIFTY'); 
-            } else {
-                document.getElementById('loaderMsg').innerText = status.message.toUpperCase();
-                setTimeout(checkStatus, 2000);
-            }
-        } catch(e) { setTimeout(checkStatus, 2000); }
+            const res = await fetch(`/api/roots?date=${date}`);
+            const roots = await res.json();
+            sel.innerHTML = roots.map(r => `<option value="${r}">${r}</option>`).join('');
+            sel.disabled = false;
+            if(roots.length > 0) loadExpiries();
+        } catch(e) { sel.innerHTML = '<option>Error</option>'; }
     }
 
-    async function refreshDB() {
-        if(!confirm("Download fresh Master Data? (Takes ~15s)")) return;
-        document.getElementById('loaderMsg').innerText = "DOWNLOADING...";
-        document.getElementById('loader').style.display = 'flex';
-        await fetch('/api/refresh');
-        checkStatus();
-    }
-
-    async function doSearch(q) {
-        const resDiv = document.getElementById('searchRes');
-        if(q.length < 2) { resDiv.style.display = 'none'; return; }
+    async function loadExpiries() {
+        const date = document.getElementById('selDate').value;
+        const root = document.getElementById('selRoot').value;
+        const sel = document.getElementById('selExpiry');
+        sel.disabled = true; sel.innerHTML = '<option>Loading...</option>';
+        
         try {
-            const res = await fetch(`/api/search?q=${q}`);
-            const data = await res.json();
-            
-            // Format: "Company Name (Symbol) [Exchange]"
-            resDiv.innerHTML = data.map(item => 
-                `<div class="search-item" onclick="loadSymbol('${item.root}')">
-                    <span>${item.name} <small style="color:#888; font-weight:normal;">(${item.root})</small></span>
-                    <span class="exch-badge badge-${item.exch}">${item.exch}</span>
-                </div>`
-            ).join('');
-            resDiv.style.display = 'block';
-        } catch(e) { console.error(e); }
+            const res = await fetch(`/api/expiries?date=${date}&root=${root}`);
+            const exps = await res.json();
+            sel.innerHTML = exps.map(e => `<option value="${e}">${e}</option>`).join('');
+            sel.disabled = false;
+            if(exps.length > 0) loadInstruments();
+        } catch(e) { sel.innerHTML = '<option>Error</option>'; }
     }
 
-    async function loadSymbol(root) {
-        document.getElementById('searchInp').value = root;
-        document.getElementById('searchRes').style.display = 'none';
-        document.getElementById('loaderMsg').innerText = "LOADING CHAIN...";
-        document.getElementById('loader').style.display = 'flex';
+    async function loadInstruments() {
+        const date = document.getElementById('selDate').value;
+        const root = document.getElementById('selRoot').value;
+        const exp = document.getElementById('selExpiry').value;
+        const sel = document.getElementById('selInst');
+        sel.disabled = true; sel.innerHTML = '<option>Loading...</option>';
         
         try {
-            const res = await fetch(`/api/chain?symbol=${root}`);
-            if(!res.ok) throw new Error("Symbol not found");
-            const data = await res.json();
-            
-            CURRENT_ROOT = root;
-            CHAIN_DATA = data.items;
-            SPOT_SYM = data.spot;
-            SPOT_PRICE = 0; 
-
-            // Find valid futures (closest expiry)
-            FUT_SYMS = CHAIN_DATA.filter(x => x.t === 'FUT').sort((a,b) => a.e - b.e).slice(0, 3);
-            
-            // For MCX, often spot sym is empty, use Future as reference
-            if(SPOT_SYM === "" && FUT_SYMS.length > 0) SPOT_SYM = FUT_SYMS[0].s; 
-            
-            document.getElementById('spotLabel').innerText = (SPOT_SYM.includes('INDEX') || SPOT_SYM.includes('_EQ')) ? "SPOT PRICE" : "FUT REFERENCE";
-
-            setupExpiries();
-            document.getElementById('loader').style.display = 'none';
-
-        } catch(e) {
-            alert("Error: " + e.message);
-            document.getElementById('loader').style.display = 'none';
-        }
+            const res = await fetch(`/api/instruments?date=${date}&root=${root}&expiry=${exp}`);
+            const insts = await res.json();
+            sel.innerHTML = insts.map(i => `<option value="${i}">${i}</option>`).join('');
+            sel.disabled = false;
+        } catch(e) { sel.innerHTML = '<option>Error</option>'; }
     }
 
-    function setupExpiries() {
-        const opts = CHAIN_DATA.filter(x => x.t === 'CE' || x.t === 'PE');
-        const exps = [...new Set(opts.map(i => i.e))].sort((a,b) => a-b);
-        const today = Math.floor(Date.now()/1000) - 86400;
-        const validExps = exps.filter(ts => ts > today); 
+    async function plotData() {
+        const inst = document.getElementById('selInst').value;
+        if(!inst || inst === '--') { alert("Please select an instrument"); return; }
         
-        if(validExps.length === 0) { 
-            document.getElementById('chainBody').innerHTML = '<div style="padding:20px; text-align:center;">NO OPTIONS DATA</div>';
-            return; 
-        }
+        const loader = document.getElementById('loader');
+        const area = document.getElementById('chartArea');
+        const msg = document.getElementById('statusMsg');
         
-        ACTIVE_EXP = validExps[0];
-        updateExpText(ACTIVE_EXP);
+        msg.innerText = "";
+        loader.style.display = 'flex';
         
-        const grid = document.getElementById('expGrid');
-        grid.innerHTML = validExps.map(ts => {
-            const dStr = new Date(ts*1000).toLocaleDateString('en-GB', {day:'2-digit', month:'short'});
-            return `<div class="opt-btn ${ts===ACTIVE_EXP?'active':''}" onclick="selectExp(${ts})">${dStr}</div>`;
-        }).join('');
+        // Destroy old charts
+        CHARTS.forEach(c => c.destroy());
+        CHARTS = [];
         
-        buildChain();
-    }
-    
-    function selectExp(ts) {
-        ACTIVE_EXP = ts;
-        updateExpText(ts);
-        closeModal('expModal');
-        document.querySelectorAll('.opt-btn').forEach(b => {
-            if(b.innerText === new Date(ts*1000).toLocaleDateString('en-GB', {day:'2-digit', month:'short'})) 
-                b.classList.add('active'); 
-            else b.classList.remove('active');
-        });
-        buildChain();
-    }
-    
-    function updateExpText(ts) {
-        document.getElementById('selExpTxt').innerText = new Date(ts*1000).toLocaleDateString('en-GB', {day:'2-digit', month:'short'});
-    }
-    
-    function buildChain() {
-        const body = document.getElementById('chainBody');
-        const relevant = CHAIN_DATA.filter(x => x.e === ACTIVE_EXP && (x.t === 'CE' || x.t === 'PE'));
-        OPT_SYMS = relevant;
-        
-        const strikes = [...new Set(relevant.map(x => x.k))].sort((a,b) => a-b);
-        
-        body.innerHTML = strikes.map(k => `
-            <div class="row" id="row-${k}" data-k="${k}">
-                <div class="graph-col">
-                    <div style="width:160px; height:100%; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center;">
-                        <div class="visual-bar" id="barL-${k}"></div>
-                        <span class="strike-txt">${k}</span>
-                        <span class="delta-txt" id="valL-${k}">-</span>
-                    </div>
-                </div>
-                <div class="graph-col">
-                    <div style="width:160px; height:100%; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center;">
-                        <div class="visual-bar" id="barR-${k}"></div>
-                        <span class="strike-txt">${k}</span>
-                        <span class="delta-txt" id="valR-${k}">-</span>
-                    </div>
-                </div>
-            </div>
-        `).join('');
-        
-        window.scrolled = false;
-        restartPoller();
-    }
-
-    function restartPoller() {
-        if(POLLER) clearInterval(POLLER);
-        POLLER = setInterval(pollData, 1500);
-        pollData();
-    }
-
-    async function pollData() {
-        if(IS_POLLING || !CURRENT_ROOT) return;
-        IS_POLLING = true;
+        const payload = {
+            date: document.getElementById('selDate').value,
+            root: document.getElementById('selRoot').value,
+            expiry: document.getElementById('selExpiry').value,
+            instrument: inst,
+            timeframe: document.getElementById('selTF').value,
+            start_time: document.getElementById('startTime').value,
+            end_time: document.getElementById('endTime').value
+        };
         
         try {
-            let symbolsToFetch = [SPOT_SYM, ...FUT_SYMS.map(x => x.s)];
-            const kList = Array.from(document.querySelectorAll('.row')).map(r => parseFloat(r.dataset.k));
+            const res = await fetch('/api/plot', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify(payload)
+            });
+            const data = await res.json();
             
-            if(kList.length > 0) {
-                const refPrice = SPOT_PRICE > 0 ? SPOT_PRICE : kList[Math.floor(kList.length/2)];
-                let selectedK = kList.find(k => k >= refPrice);
-                if (selectedK === undefined) selectedK = kList[kList.length - 1];
-
-                ATM_STRIKE = selectedK;
-                const atmIdx = kList.indexOf(selectedK);
-                
-                document.querySelectorAll('.atm').forEach(e => e.classList.remove('atm'));
-                const atmRow = document.getElementById(`row-${selectedK}`);
-                if(atmRow) {
-                    atmRow.classList.add('atm');
-                    if(!window.scrolled && SPOT_PRICE > 0) { 
-                        atmRow.scrollIntoView({block:'center', behavior:'auto'}); 
-                        window.scrolled = true; 
-                    }
-                }
-
-                let maxRange = 10;
-                if(CONFIG.side && Array.isArray(CONFIG.side)) {
-                    CONFIG.side.forEach(item => { if(item.ranges) { const m = Math.max(...item.ranges); if(m > maxRange) maxRange = m; } });
-                }
-                
-                const start = Math.max(0, atmIdx - 20);
-                const end = Math.min(kList.length, atmIdx + 20);
-                const viewKs = kList.slice(start, end);
-
-                const rangeStart = Math.max(0, atmIdx - maxRange);
-                const rangeEnd = Math.min(kList.length, atmIdx + maxRange + 1);
-                const calcKs = kList.slice(rangeStart, rangeEnd);
-                
-                const allNeededKs = new Set([...viewKs, ...calcKs]);
-
-                OPT_SYMS.forEach(o => {
-                    if(allNeededKs.has(o.k)) symbolsToFetch.push(o.s);
-                });
+            if(data.error) {
+                msg.innerText = data.error;
+                loader.style.display = 'none';
+                return;
             }
-
-            const uniqueSyms = [...new Set(symbolsToFetch)].filter(s => s && s.length > 2);
-            if(uniqueSyms.length === 0) return;
             
-            const url = `https://api.upstox.com/v2/market-quote/quotes?instrument_key=${uniqueSyms.join(',')}`;
-            const res = await fetch(url, { headers: { 'Accept': 'application/json', 'Authorization': `Bearer ${UPSTOX_TOKEN}` }});
+            // Determine Variables
+            const vars = [];
+            if(document.getElementById('vPrice').checked) vars.push({k:'price', l:'Price', c:'#2962ff'});
+            if(document.getElementById('vVol').checked) vars.push({k:'volume', l:'Volume', c:'#ff6d00'});
+            if(document.getElementById('vOI').checked) vars.push({k:'oi', l:'Open Interest', c:'#00c853'});
+            if(document.getElementById('vBuy').checked) vars.push({k:'buy_qty', l:'Buy Qty', c:'#00b0ff'});
+            if(document.getElementById('vSell').checked) vars.push({k:'sell_qty', l:'Sell Qty', c:'#d50000'});
             
-            if(res.status === 401) { location.href = '/logout'; return; }
+            if(vars.length === 0) { alert("Select at least one variable"); loader.style.display = 'none'; return; }
             
-            const json = await res.json();
-            if(json.status === 'success') {
-                updateUI(json.data);
-                const dot = document.getElementById('statusDot');
-                dot.classList.add('active');
-                dot.classList.remove('error');
-            }
-        } catch(e) { 
-            console.error(e); 
-            const dot = document.getElementById('statusDot');
-            dot.classList.remove('active');
-            dot.classList.add('error');
-        } 
-        finally { IS_POLLING = false; }
-    }
-
-    function updateUI(raw_data) {
-        // Create a Token Map for easy lookup since Upstox keys by Symbol
-        const tokenMap = {};
-        for(const key in raw_data) {
-            const item = raw_data[key];
-            if(item && item.instrument_token) {
-                tokenMap[item.instrument_token] = item;
-            }
-        }
-
-        // Update Spot
-        const spotData = tokenMap[SPOT_SYM];
-        if(spotData) {
-            SPOT_PRICE = spotData.last_price;
-            document.getElementById('spotPrice').innerText = SPOT_PRICE.toFixed(2);
-        }
-        
-        // Update Futures
-        const futHTML = FUT_SYMS.map(f => {
-            const d = tokenMap[f.s];
-            if(!d) return '';
-            const dt = new Date(f.e*1000).toLocaleDateString('en-GB', {day:'numeric', month:'short'});
-            const b = d.total_buy_quantity || 0;
-            const s = d.total_sell_quantity || 0;
-            const ch = d.net_change || 0;
-            const tot = (b + s) || 1;
-            const bPct = (b/tot)*100;
-            return `
-            <div class="fut-card">
-                <div style="display:flex; justify-content:space-between; font-weight:700;">
-                    <span>${dt} FUT</span> <span style="color:${ch>=0?'var(--green)':'var(--red)'}">${d.last_price}</span>
-                </div>
-                <div class="meter-bg">
-                    <div style="width:${bPct}%; background:var(--green)"></div>
-                    <div style="width:${100-bPct}%; background:var(--red)"></div>
-                </div>
-                <div style="display:flex; justify-content:space-between; font-size:10px; color:#666; margin-top:4px;">
-                    <span>B: ${fmt(b)}</span> <span>S: ${fmt(s)}</span>
-                </div>
-            </div>`;
-        }).join('');
-        if(futHTML) document.getElementById('futBody').innerHTML = futHTML;
-
-        // Process Options
-        const rowData = {};
-        for(const item of OPT_SYMS) {
-            const d = tokenMap[item.s];
-            if(!d) continue;
-
-            if(!rowData[item.k]) rowData[item.k] = { 
-                CS:0, CB:0, PS:0, PB:0, 
-                CO:0, PO:0, CLTP:0, PLTP:0, CV:0, PV:0 
-            };
-            
-            if(item.t === 'CE') {
-                rowData[item.k].CS = d.total_sell_quantity || 0;
-                rowData[item.k].CB = d.total_buy_quantity || 0;
-                rowData[item.k].CO = d.oi || 0;
-                rowData[item.k].CLTP = d.last_price || 0;
-                rowData[item.k].CV = d.volume || 0;
-            }
-            if(item.t === 'PE') {
-                rowData[item.k].PS = d.total_sell_quantity || 0;
-                rowData[item.k].PB = d.total_buy_quantity || 0;
-                rowData[item.k].PO = d.oi || 0;
-                rowData[item.k].PLTP = d.last_price || 0;
-                rowData[item.k].PV = d.volume || 0;
-            }
-        }
-        
-        LATEST_ROW_DATA = rowData;
-
-        // --- RENDER CHAIN ---
-        let maxL = 0, maxR = 0;
-        const processedRows = {};
-
-        for(const k in rowData) {
-            const vars = rowData[k];
-            processedRows[k] = {
-                left: evaluateFormula(CONFIG.left.formula, vars),
-                right: evaluateFormula(CONFIG.right.formula, vars)
-            };
-            maxL = Math.max(maxL, Math.abs(processedRows[k].left));
-            maxR = Math.max(maxR, Math.abs(processedRows[k].right));
-        }
-
-        for(const k in processedRows) {
-            const r = processedRows[k];
+            const mode = document.getElementById('selMode').value;
+            area.innerHTML = ''; // Clear container
+            area.appendChild(loader); // Re-append loader to keep it visible while rendering
             
-            const valL = document.getElementById(`valL-${k}`);
-            if(valL) {
-                valL.innerText = (r.left>0?"+":"") + fmt(r.left);
-                valL.style.color = r.left >= 0 ? 'var(--green)' : 'var(--red)';
+            if(mode === 'single') {
+                // Same Chart
+                const cvs = document.createElement('canvas');
+                cvs.style.maxHeight = '100%';
+                area.appendChild(cvs);
                 
-                const barL = document.getElementById(`barL-${k}`);
-                if(maxL > 0) {
-                    const pct = (Math.abs(r.left) / maxL) * 100;
-                    barL.style.left = '0%';
-                    barL.style.width = pct + '%';
-                    barL.style.background = r.left >= 0 ? 'var(--green-soft)' : 'var(--red-soft)';
-                }
-            }
-
-            const valR = document.getElementById(`valR-${k}`);
-            if(valR) {
-                valR.innerText = (r.right>0?"+":"") + fmt(r.right);
-                valR.style.color = r.right >= 0 ? 'var(--green)' : 'var(--red)';
+                const datasets = vars.map((v, idx) => ({
+                    label: v.l,
+                    data: data[v.k],
+                    borderColor: v.c,
+                    backgroundColor: v.c,
+                    borderWidth: 1.5,
+                    pointRadius: 0,
+                    pointHoverRadius: 4,
+                    yAxisID: idx === 0 ? 'y' : 'y1', // Simplistic dual axis: First var left, others right
+                    tension: 0.1
+                }));
                 
-                const barR = document.getElementById(`barR-${k}`);
-                if(maxR > 0) {
-                    const pct = (Math.abs(r.right) / maxR) * 100;
-                    barR.style.left = '0%';
-                    barR.style.width = pct + '%';
-                    barR.style.background = r.right >= 0 ? 'var(--green-soft)' : 'var(--red-soft)';
-                }
-            }
-        }
-
-        // --- SIDEBAR AGGREGATION ---
-        if(SPOT_PRICE > 0 && CONFIG.side && CONFIG.side.length > 0) {
-            const kList = Object.keys(rowData).map(parseFloat).sort((a,b)=>a-b);
-            const lowers = kList.filter(k => k < SPOT_PRICE);
-            const uppers = kList.filter(k => k >= SPOT_PRICE);
-
-            CONFIG.side.forEach((item, idx) => {
-                item.ranges.forEach((rng, rIdx) => {
-                    const el = document.getElementById(`sv-${idx}-${rIdx}`);
-                    if(el) {
-                        const selLow = lowers.slice(-rng);
-                        const selHigh = uppers.slice(0, rng);
-                        const targetStrikes = [...selLow, ...selHigh];
-                        
-                        let total = 0;
-                        for(const k of targetStrikes) {
-                            if(rowData[k]) total += evaluateFormula(item.formula, rowData[k]);
+                const ctx = cvs.getContext('2d');
+                const chart = new Chart(ctx, {
+                    type: 'line',
+                    data: { labels: data.labels, datasets: datasets },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        interaction: { mode: 'index', intersect: false },
+                        scales: {
+                            x: { grid: { display:false } },
+                            y: { type: 'linear', display: true, position: 'left', grid: {color: '#f0f0f0'} },
+                            y1: { type: 'linear', display: true, position: 'right', grid: {display: false} }
+                        },
+                        plugins: {
+                            title: { display: true, text: `${inst} (${payload.timeframe})` }
                         }
-                        el.innerText = (total > 0 ? "+" : "") + fmt(total);
-                        el.style.color = total >= 0 ? 'var(--green)' : 'var(--red)';
                     }
                 });
-            });
+                CHARTS.push(chart);
+                
+            } else {
+                // Separate Charts
+                const grid = document.createElement('div');
+                grid.className = 'multi-chart-grid';
+                area.appendChild(grid);
+                
+                vars.forEach(v => {
+                    const wrap = document.createElement('div');
+                    wrap.style.position = 'relative';
+                    wrap.style.background = '#fff';
+                    wrap.style.borderRadius = '8px';
+                    wrap.style.border = '1px solid #eee';
+                    wrap.style.padding = '10px';
+                    
+                    const cvs = document.createElement('canvas');
+                    wrap.appendChild(cvs);
+                    grid.appendChild(wrap);
+                    
+                    const ctx = cvs.getContext('2d');
+                    const chart = new Chart(ctx, {
+                        type: 'line',
+                        data: {
+                            labels: data.labels,
+                            datasets: [{
+                                label: v.l,
+                                data: data[v.k],
+                                borderColor: v.c,
+                                backgroundColor: v.c + '22', // Transparent fill
+                                borderWidth: 1.5,
+                                fill: true,
+                                pointRadius: 0,
+                                tension: 0.1
+                            }]
+                        },
+                        options: {
+                            responsive: true,
+                            maintainAspectRatio: false,
+                            interaction: { mode: 'index', intersect: false },
+                            scales: {
+                                x: { grid: { display:false }, ticks: { maxTicksLimit: 10 } },
+                                y: { grid: { color: '#f5f5f5' } }
+                            },
+                            plugins: {
+                                title: { display: true, text: v.l, font: {size: 10} },
+                                legend: { display: false }
+                            }
+                        }
+                    });
+                    CHARTS.push(chart);
+                });
+            }
+            
+        } catch(e) {
+            console.error(e);
+            msg.innerText = "Processing Error";
+        } finally {
+            loader.style.display = 'none';
         }
     }
-
-    function fmt(n) {
-        if(!n) return '0';
-        let abs = Math.abs(n);
-        if(abs>=10000000) return (n/10000000).toFixed(2)+'Cr';
-        if(abs>=100000) return (n/100000).toFixed(2)+'L';
-        if(abs>=1000) return (n/1000).toFixed(1)+'k';
-        return n.toLocaleString();
-    }
 </script>
 </body>
 </html>