Update app.py

app.py

@@ -2,14 +2,17 @@ import pandas as pd
 import requests
 import uvicorn
 import json
+import numpy as np
 from datetime import datetime, timedelta
 from fastapi import FastAPI, Body
 from fastapi.responses import HTMLResponse, JSONResponse
-from typing import List, Dict, Any
+from fastapi.staticfiles import StaticFiles
+from typing import List, Dict, Any, Optional
 
 # ==========================================
-# 1. CONFIGURATION
+# 1. CONFIGURATION (SUPABASE HISTORY DB)
 # ==========================================
+# Using the HIST keys provided in upstox4.txt
 SB_URL = "https://tuyhtqxfvjndbyjazosi.supabase.co"
 SB_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InR1eWh0cXhmdmpuZGJ5amF6b3NpIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTc2ODE0NjAyMiwiZXhwIjoyMDgzNzIyMDIyfQ.YsmGS67vL5TghB5OOi6pmsPL6rrgx7SNpARHmQ9b5cw"
 
@@ -23,637 +26,832 @@ HEADERS = {
 app = FastAPI()
 
 # ==========================================
-# 2. HELPER FUNCTIONS
+# 2. BACKEND LOGIC
 # ==========================================
-def sb_get(endpoint: str, params: dict = None):
+
+def fetch_supabase(endpoint: str, params: dict = {}):
     try:
         url = f"{SB_URL}/rest/v1{endpoint}"
-        r = requests.get(url, headers=HEADERS, params=params)
-        r.raise_for_status()
+        # Convert params to query string
+        query = "&".join([f"{k}={v}" for k, v in params.items()])
+        if query:
+            url += f"?{query}"
+        
+        r = requests.get(url, headers=HEADERS)
+        if r.status_code >= 400:
+            print(f"Error fetching {url}: {r.text}")
+            return []
         return r.json()
     except Exception as e:
-        print(f"DB Error: {e}")
+        print(f"Exception: {e}")
         return []
 
-# ==========================================
-# 3. API ROUTES
-# ==========================================
+def process_slots(slot_array):
+    """
+    Takes a 6-element list [v1, v2, null, v3, ...].
+    Returns the median of non-null values.
+    """
+    if not isinstance(slot_array, list):
+        return np.nan
+    valid = [x for x in slot_array if x is not None]
+    if not valid:
+        return np.nan
+    return np.median(valid)
+
 @app.get("/")
 def home():
-    return HTMLResponse(HTML_TEMPLATE)
+    return HTMLResponse(html_content)
 
 @app.get("/api/dates")
 def get_dates():
-    # Get unique dates
-    data = sb_get("/history_buckets_upstox", {"select": "minute", "order": "minute.desc", "limit": "2000"})
-    dates = set(row['minute'].split('T')[0] for row in data)
-    return JSONResponse(sorted(list(dates), reverse=True))
+    # Get distinct dates (based on minute column)
+    # Since we can't do complex SQL distinct easily on timestamp::date in standard PostgREST without RPC,
+    # we will fetch the last 1000 records id, minute and extract unique dates in python. 
+    # Optimization: Create a separate table for dates in production, but here we scan.
+    
+    # We fetch only the 'minute' column, order by desc, limit 5000 (approx 3-4 days of data)
+    data = fetch_supabase("/history_buckets_upstox", {
+        "select": "minute",
+        "order": "minute.desc",
+        "limit": "5000"
+    })
+    
+    dates = set()
+    for row in data:
+        if row.get('minute'):
+            dt_str = row['minute'].split('T')[0]
+            dates.add(dt_str)
+            
+    return sorted(list(dates), reverse=True)
 
 @app.get("/api/roots")
 def get_roots(date: str):
-    start, end = f"{date}T00:00:00", f"{date}T23:59:59"
-    data = sb_get(f"/history_buckets_upstox?select=root&minute=gte.{start}&minute=lte.{end}")
-    roots = sorted(list(set(row['root'] for row in data)))
-    return JSONResponse(roots)
+    # Fetch roots present for this date
+    # start_dt = date T 00:00:00, end_dt = date T 23:59:59
+    data = fetch_supabase("/history_buckets_upstox", {
+        "select": "root,exchange", # Assuming exchange might be implicit in root or logic
+        "minute": f"gte.{date}T00:00:00&minute=lte.{date}T23:59:59",
+        "limit": "2000" # Sample enough rows to get distinct roots
+    })
+    
+    unique_roots = set()
+    for row in data:
+        r = row.get('root')
+        if r: unique_roots.add(r)
+        
+    return sorted(list(unique_roots))
+
+@app.get("/api/expiries")
+def get_expiries(date: str, root: str):
+    data = fetch_supabase("/history_buckets_upstox", {
+        "select": "expiry",
+        "minute": f"gte.{date}T00:00:00&minute=lte.{date}T23:59:59",
+        "root": f"eq.{root}",
+        "limit": "1000"
+    })
+    exps = set()
+    for row in data:
+        exps.add(row['expiry'])
+    
+    # Sort: Put 'MARKET' first, then dates
+    sl = sorted(list(exps))
+    if "MARKET" in sl:
+        sl.remove("MARKET")
+        sl.insert(0, "MARKET")
+    return sl
 
 @app.get("/api/instruments")
-def get_instruments(date: str, root: str):
-    """Fetch all available instruments (Spot, Fut, Options) for a specific root on a date"""
-    start, end = f"{date}T00:00:00", f"{date}T23:59:59"
+def get_instruments(date: str, root: str, expiry: str):
+    # Fetch one row to get the keys from the 'data' JSONB
+    data = fetch_supabase("/history_buckets_upstox", {
+        "select": "data",
+        "minute": f"gte.{date}T00:00:00&minute=lte.{date}T23:59:59",
+        "root": f"eq.{root}",
+        "expiry": f"eq.{expiry}",
+        "limit": "1"
+    })
     
-    # 1. Get Expiries to find buckets
-    exp_data = sb_get(f"/history_buckets_upstox?select=expiry&root=eq.{root}&minute=gte.{start}&minute=lte.{end}")
-    expiries = set(row['expiry'] for row in exp_data)
+    if not data or not data[0].get('data'):
+        return []
     
-    all_insts = set()
-    # 2. Sample data from each expiry bucket
-    for exp in expiries:
-        res = sb_get(f"/history_buckets_upstox?select=data&root=eq.{root}&expiry=eq.{exp}&minute=gte.{start}&minute=lte.{end}&limit=1")
-        if res and len(res) > 0:
-            keys = res[0]['data'].keys()
-            all_insts.update(keys)
-            
-    return JSONResponse(sorted(list(all_insts)))
-
-@app.post("/api/fetch_bulk")
-def fetch_bulk_data(
-    date: str = Body(...),
-    requests_list: List[Dict[str, Any]] = Body(...), # List of { root: "NIFTY", instruments: ["NIFTY", "NIFTYFUT"] }
-    timeframe: str = Body(...), 
-    start_time: str = Body(...),
-    end_time: str = Body(...)
-):
+    # Keys in 'data' are the instrument symbols (e.g., NIFTY24JAN..., Nifty 50)
+    keys = list(data[0]['data'].keys())
+    return sorted(keys)
+
+@app.post("/api/plot-data")
+def get_plot_data(payload: dict = Body(...)):
     """
-    Fetches data for multiple roots in one go.
-    requests_list: [ {root: 'NIFTY', instruments: [...]}, {root: 'BANKNIFTY', instruments: [...]} ]
+    Payload: {
+        date: "2025-01-27",
+        root: "NSE:NIFTY",
+        expiry: "27JAN",
+        time_start: "09:15",
+        time_end: "15:30",
+        timeframe: "1min",
+        datasets: [
+            { instrument: "NIFTY24JAN...", formula: "b - s", label: "Net Flow" },
+            { instrument: "Nifty 50", formula: "p", label: "Spot Price" }
+        ]
+    }
     """
-    t_start = f"{date}T{start_time}:00"
-    t_end = f"{date}T{end_time}:59"
+    date = payload.get("date")
+    root = payload.get("root")
+    expiry = payload.get("expiry")
+    tf = payload.get("timeframe", "1min")
+    datasets_config = payload.get("datasets", [])
     
-    combined_raw_map = {}
+    if not datasets_config:
+        return JSONResponse({"error": "No datasets configured"})
+
+    # 1. Fetch Data from Supabase
+    # We fetch all rows for this Day/Root/Expiry
+    # Filtering by time_start/end in DB is better for performance
+    t_start = f"{date}T{payload.get('time_start', '00:00')}:00"
+    t_end = f"{date}T{payload.get('time_end', '23:59')}:59"
+    
+    db_rows = fetch_supabase("/history_buckets_upstox", {
+        "select": "minute,data",
+        "root": f"eq.{root}",
+        "expiry": f"eq.{expiry}",
+        "minute": f"gte.{t_start}&minute=lte.{t_end}",
+        "order": "minute.asc"
+    })
+    
+    if not db_rows:
+        return JSONResponse({"labels": [], "datasets": []})
 
-    # Iterate over roots to fetch data (Supabase doesn't support complex OR filtering easily on GET, so we loop roots)
-    # Since typically user plots 1-3 roots, this is fast enough.
-    for req in requests_list:
-        root = req['root']
-        target_insts = req['instruments']
-        
-        url = f"/history_buckets_upstox?select=minute,data&root=eq.{root}&minute=gte.{t_start}&minute=lte.{t_end}&order=minute.asc"
-        rows = sb_get(url)
+    # 2. Convert to DataFrame
+    # Structure: timestamp | instr_key | variable | value
+    # We need to expand the 6-slot arrays into 10s intervals
+    
+    records = []
+    
+    # Identify which instruments we actually need to process to save time
+    needed_instruments = set([d['instrument'] for d in datasets_config])
+
+    for row in db_rows:
+        base_ts = pd.to_datetime(row['minute'])
+        row_data = row.get('data', {})
         
-        for row in rows:
-            try:
-                base_ts = datetime.fromisoformat(row['minute'])
-                bucket_data = row['data']
+        for instr, metrics in row_data.items():
+            if instr not in needed_instruments:
+                continue
+                
+            # metrics = {p: [..], b: [..], ...}
+            # Iterate 6 slots
+            for i in range(6):
+                offset_ts = base_ts + timedelta(seconds=i*10)
+                
+                # Extract values for this slot
+                rec = {
+                    "ts": offset_ts,
+                    "instrument": instr
+                }
+                
+                has_data = False
+                for var_name in ['p', 'b', 's', 'v', 'o']:
+                    val_array = metrics.get(var_name)
+                    val = None
+                    if isinstance(val_array, list) and len(val_array) > i:
+                        val = val_array[i]
+                    
+                    if val is not None:
+                        has_data = True
+                        rec[var_name] = val
+                    else:
+                        rec[var_name] = np.nan
                 
-                for inst in target_insts:
-                    if inst in bucket_data:
-                        if inst not in combined_raw_map: combined_raw_map[inst] = []
-                        
-                        d = bucket_data[inst]
-                        # 6 slots logic
-                        p, b = d.get('p', []), d.get('b', [])
-                        s, v = d.get('s', []), d.get('v', [])
-                        o = d.get('o', [])
-                        
-                        for i in range(6):
-                            if i >= len(p) or p[i] is None: continue
-                            
-                            combined_raw_map[inst].append({
-                                "ts": base_ts + timedelta(seconds=i*10),
-                                "price": float(p[i]),
-                                "buy_qty": float(b[i]) if i < len(b) and b[i] else 0.0,
-                                "sell_qty": float(s[i]) if i < len(s) and s[i] else 0.0,
-                                "volume": float(v[i]) if i < len(v) and v[i] else 0.0,
-                                "oi": float(o[i]) if i < len(o) and o[i] else 0.0
-                            })
-            except: continue
-
-    # Resample
-    tf_map = {"1min": "1T", "3min": "3T", "5min": "5T", "15min": "15T", "30min": "30T", "1hour": "1H"}
-    panda_tf = tf_map.get(timeframe, "1T")
+                if has_data:
+                    records.append(rec)
+
+    if not records:
+        return JSONResponse({"labels": [], "datasets": []})
+
+    df = pd.DataFrame(records)
+    df.set_index('ts', inplace=True)
     
-    response_data = {}
+    # 3. Resample and Aggregate
+    # We need to group by instrument, then resample
     
-    for inst, records in combined_raw_map.items():
-        if not records: continue
-        df = pd.DataFrame(records)
-        df.set_index('ts', inplace=True)
-        res = df.resample(panda_tf).median().dropna()
-        
-        response_data[inst] = {
-            "labels": res.index.strftime('%H:%M').tolist(),
-            "P": res['price'].tolist(),
-            "B": res['buy_qty'].tolist(),
-            "S": res['sell_qty'].tolist(),
-            "V": res['volume'].tolist(),
-            "OI": res['oi'].tolist()
-        }
+    # Map for aggregation methods
+    agg_map = {
+        'p': 'median', # Price: Median
+        'b': 'sum',    # Buy Qty: Sum (Accumulate flow over timeframe)
+        's': 'sum',    # Sell Qty: Sum
+        'v': 'sum',    # Volume: Sum
+        'o': 'last'    # OI: Last seen value (Snapshot)
+    }
+    
+    # Ensure all columns exist
+    for col in agg_map.keys():
+        if col not in df.columns:
+            df[col] = np.nan
+
+    grouped = df.groupby('instrument')
+    
+    # Resample Timeframe (e.g. '1min' -> '1T')
+    tf_map = {'1min': '1T', '3min': '3T', '5min': '5T', '15min': '15T', '30min': '30T', '60min': '60T'}
+    pandas_tf = tf_map.get(tf, '1T')
+
+    resampled_dfs = {}
+    
+    for instr, group_df in grouped:
+        # Resample logic
+        res = group_df.resample(pandas_tf).agg(agg_map)
+        resampled_dfs[instr] = res
+
+    # 4. Calculate Formulas and Prepare Chart Data
+    
+    # Find common time index (union of all)
+    all_indices = pd.Index([])
+    for d in resampled_dfs.values():
+        all_indices = all_indices.union(d.index)
+    
+    all_indices = all_indices.sort_values()
+    
+    final_datasets = []
+    
+    for conf in datasets_config:
+        instr = conf['instrument']
+        formula = conf['formula'] # e.g. "b - s" or "p"
+        label = conf.get('label', instr)
+        color = conf.get('color', '#000000')
+        y_axis = conf.get('yAxisID', 'y')
+        type_chart = conf.get('type', 'line')
+        
+        if instr not in resampled_dfs:
+            continue
+            
+        rdf = resampled_dfs[instr].reindex(all_indices)
+        
+        # Evaluate Formula safely
+        # Variables available: p, b, s, v, o
+        try:
+            # Create local context for eval
+            ctx = {
+                'p': rdf['p'].fillna(0),
+                'b': rdf['b'].fillna(0),
+                's': rdf['s'].fillna(0),
+                'v': rdf['v'].fillna(0),
+                'o': rdf['o'].fillna(method='ffill').fillna(0), # OI should ffill
+                'np': np
+            }
+            
+            # Simple sanitization
+            allowed_chars = set("pbsvo0123456789+-*/(). ")
+            if not set(formula).issubset(allowed_chars):
+                 # Fallback if complex chars, simpler logic
+                 pass
+
+            result_series = eval(formula, {"__builtins__": None}, ctx)
+            
+            # Replace nan with None for JSON
+            data_values = result_series.where(pd.notnull(result_series), None).tolist()
+            
+            ds = {
+                "label": label,
+                "data": data_values,
+                "borderColor": color,
+                "backgroundColor": color,
+                "type": type_chart,
+                "yAxisID": y_axis,
+                "pointRadius": 1,
+                "borderWidth": 2,
+                "fill": False,
+                "tension": 0.1 # Slight curve
+            }
+            final_datasets.append(ds)
+            
+        except Exception as e:
+            print(f"Formula Error ({formula}): {e}")
+            continue
+
+    # Format Labels (Time)
+    labels = [t.strftime('%H:%M') for t in all_indices]
+    
+    return JSONResponse({
+        "labels": labels,
+        "datasets": final_datasets
+    })
 
-    return JSONResponse(response_data)
 
 # ==========================================
-# 4. FRONTEND
+# 3. FRONTEND (HTML/JS)
 # ==========================================
 
-HTML_TEMPLATE = """
+html_content = """
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>DepthChain PRO V2</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=Manrope:wght@400;600;700;800&display=swap" rel="stylesheet">
+    <title>DepthChain Historical</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
-        :root { 
-            --bg: #f3f4f6; --panel: #ffffff; --border: #e5e7eb; 
-            --text-main: #111827; --text-sub: #6b7280; 
-            --accent: #2563eb; --accent-hover: #1d4ed8;
-            --danger: #ef4444; --success: #22c55e;
-            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        :root {
+            --bg: #ffffff;
+            --panel: #f8f9fa;
+            --border: #e9ecef;
+            --text: #212529;
+            --primary: #0d6efd;
+            --accent: #6610f2;
+            --success: #198754;
+            --danger: #dc3545;
+            --shadow: 0 4px 12px rgba(0,0,0,0.05);
         }
         * { box-sizing: border-box; }
-        body { margin: 0; background: var(--bg); color: var(--text-main); font-family: 'Manrope', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
+        body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 0; }
         
-        /* SCROLLBAR */
-        ::-webkit-scrollbar { width: 8px; height: 8px; }
-        ::-webkit-scrollbar-track { background: transparent; }
-        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
-        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
-
         /* HEADER */
-        .header { height: 65px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 25px; justify-content: space-between; flex-shrink: 0; z-index: 20; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
-        .logo { font-family: 'JetBrains Mono'; font-weight: 800; font-size: 20px; letter-spacing: -1px; color: var(--text-main); }
-        .logo span { color: var(--accent); }
+        .top-bar {
+            position: sticky; top: 0; z-index: 100;
+            background: #fff; border-bottom: 1px solid var(--border);
+            padding: 10px 20px; display: flex; gap: 15px; align-items: center; flex-wrap: wrap;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+        }
+        .control-group { display: flex; flex-direction: column; gap: 4px; }
+        .control-group label { font-size: 11px; font-weight: 700; color: #6c757d; text-transform: uppercase; }
+        .select-input { padding: 8px; border: 1px solid #ced4da; border-radius: 4px; font-size: 13px; min-width: 120px; outline:none; }
+        .select-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25); }
         
-        .controls { display: flex; gap: 15px; align-items: center; }
-        .c-item { display: flex; flex-direction: column; gap: 4px; }
-        .lbl { font-size: 10px; font-weight: 700; color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.5px; }
-        .inp { background: #fff; border: 1px solid var(--border); color: var(--text-main); padding: 8px 12px; border-radius: 6px; font-family: 'JetBrains Mono'; font-size: 13px; outline: none; transition: 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
-        .inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
+        .btn { padding: 8px 16px; border: none; border-radius: 4px; font-weight: 600; font-size: 13px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 6px; }
+        .btn-primary { background: var(--primary); color: white; }
+        .btn-primary:hover { background: #0b5ed7; }
+        .btn-outline { background: white; border: 1px solid #ced4da; color: var(--text); }
+        .btn-outline:hover { background: #f8f9fa; }
         
-        .btn { background: var(--accent); color: white; border: none; padding: 10px 24px; border-radius: 6px; font-weight: 700; cursor: pointer; font-size: 13px; transition: 0.2s; display: flex; align-items: center; gap: 6px; }
-        .btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
-        .btn.outline { background: white; border: 1px solid var(--border); color: var(--text-sub); }
-        .btn.outline:hover { border-color: var(--accent); color: var(--accent); }
-
-        /* MAIN GRID */
-        .grid-area { flex: 1; padding: 25px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); gap: 20px; align-content: start; }
+        /* MAIN LAYOUT */
+        .container { padding: 20px; max-width: 1600px; margin: 0 auto; }
+        .charts-wrapper { display: flex; flex-direction: column; gap: 20px; }
         
         /* CHART CARD */
-        .card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; height: 500px; position: relative; overflow: hidden; box-shadow: var(--shadow); transition: transform 0.2s; }
-        .card:hover { border-color: #cbd5e1; }
+        .chart-card {
+            background: white; border: 1px solid var(--border); border-radius: 8px;
+            padding: 15px; box-shadow: var(--shadow); position: relative;
+            transition: transform 0.2s;
+        }
+        .chart-header {
+            display: flex; justify-content: space-between; align-items: center;
+            margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #f1f3f5;
+        }
+        .chart-title { font-weight: 700; font-size: 14px; color: var(--text); display: flex; gap: 10px; align-items: center; }
+        .chart-meta { font-size: 12px; color: #868e96; font-family: 'JetBrains Mono'; background: #f8f9fa; padding: 2px 6px; border-radius: 4px; }
+        .chart-actions { display: flex; gap: 5px; }
+        .icon-btn { padding: 6px; border-radius: 4px; cursor: pointer; color: #adb5bd; transition: 0.2s; background: transparent; border:none; }
+        .icon-btn:hover { color: var(--primary); background: #e9ecef; }
+        .icon-btn.delete:hover { color: var(--danger); }
         
-        .card-head { padding: 12px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: #f9fafb; }
-        .card-title { font-size: 13px; font-weight: 800; color: var(--text-main); display: flex; align-items: center; gap: 10px; }
-        .root-tag { background: #e0e7ff; color: #3730a3; padding: 2px 8px; border-radius: 4px; font-size: 11px; }
+        .chart-body { height: 60vh; position: relative; width: 100%; }
         
-        .card-actions { display: flex; gap: 10px; }
-        .icon-btn { cursor: pointer; color: var(--text-sub); font-size: 16px; padding: 4px; border-radius: 4px; transition:0.2s; }
-        .icon-btn:hover { background: #e5e7eb; color: var(--text-main); }
-        .icon-btn.del:hover { background: #fee2e2; color: var(--danger); }
-
-        .card-body { flex: 1; position: relative; padding: 15px; background: #fff; }
-
         /* MODAL */
-        .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 100; display: none; justify-content: center; align-items: center; }
-        .modal { background: #fff; width: 900px; max-width: 95%; height: 85vh; border-radius: 16px; display: flex; flex-direction: column; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); animation: popIn 0.2s ease-out; }
+        .modal-overlay {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px);
+            z-index: 1000; display: none; justify-content: center; align-items: center;
+        }
+        .modal {
+            background: white; width: 600px; max-width: 90%;
+            border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            display: flex; flex-direction: column; overflow: hidden;
+            animation: popIn 0.2s ease-out;
+        }
         @keyframes popIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
         
-        .modal-header { padding: 20px 30px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
-        .modal-title { font-size: 18px; font-weight: 800; color: var(--text-main); }
-        
-        .modal-body { flex: 1; padding: 30px; overflow-y: auto; background: #f9fafb; }
-        .modal-footer { padding: 20px 30px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: #fff; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
-
-        /* Config Forms */
-        .cfg-section { background: #fff; padding: 20px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 20px; }
-        .cfg-label { font-size: 12px; font-weight: 700; color: var(--text-sub); margin-bottom: 8px; display: block; }
+        .modal-header { padding: 15px 20px; background: #f8f9fa; border-bottom: 1px solid var(--border); font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
+        .modal-body { padding: 20px; overflow-y: auto; max-height: 70vh; }
+        .modal-footer { padding: 15px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: #f8f9fa; }
         
-        .series-list { display: flex; flex-direction: column; gap: 10px; }
-        .series-row { display: grid; grid-template-columns: 40px 1fr 2fr 100px 100px 40px; gap: 15px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
-        .series-row:hover { border-color: var(--accent); }
+        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
+        .form-full { margin-bottom: 15px; }
+        .inp-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; color: #495057; }
+        .inp-text { width: 100%; padding: 10px; border: 1px solid #ced4da; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
         
-        .color-inp { width: 100%; height: 35px; border: none; padding: 0; cursor: pointer; background: none; }
-        .modal-inp { width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; font-family:'JetBrains Mono'; }
+        .dataset-list { margin-top: 15px; border: 1px solid var(--border); border-radius: 4px; }
+        .dataset-item { padding: 10px; border-bottom: 1px solid #f1f3f5; display: flex; gap: 10px; align-items: center; background: #fff; }
+        .dataset-item:last-child { border-bottom: none; }
+        .color-picker { width: 30px; height: 30px; padding: 0; border: none; cursor: pointer; }
         
-        .add-line-btn { width: 100%; padding: 12px; border: 2px dashed #d1d5db; border-radius: 8px; color: var(--text-sub); font-weight: 700; cursor: pointer; text-align: center; margin-top: 10px; transition: 0.2s; }
-        .add-line-btn:hover { border-color: var(--accent); color: var(--accent); background: #eff6ff; }
+        .no-data { text-align: center; padding: 40px; color: #adb5bd; font-weight: 500; font-size: 14px; border: 2px dashed #dee2e6; border-radius: 8px; }
 
         /* Loader */
-        .loader-ov { position: fixed; inset: 0; background: rgba(255,255,255,0.8); z-index: 200; display: none; justify-content: center; align-items: center; font-weight: 800; color: var(--text-main); font-size: 14px; gap: 10px; }
-        .spinner { width: 20px; height: 20px; border: 3px solid #e5e7eb; border-top-color: var(--accent); border-radius: 50%; animation: spin 1s infinite linear; }
-        @keyframes spin { to { transform: rotate(360deg); } }
-
+        .loader-line { height: 3px; width: 100%; background: #e9ecef; position: fixed; top: 0; left: 0; z-index: 200; display:none; }
+        .loader-sub { height: 100%; background: var(--primary); animation: load 1s infinite; width: 30%; }
+        @keyframes load { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }
     </style>
 </head>
 <body>
 
-<div class="loader-ov" id="loader"><div class="spinner"></div> PROCESSING DATA...</div>
+<div class="loader-line" id="loader"><div class="loader-sub"></div></div>
 
-<!-- HEADER -->
-<div class="header">
-    <div class="logo">DepthChain <span>PRO</span></div>
-    <div class="controls">
-        <div class="c-item">
-            <span class="lbl">1. Date</span>
-            <select id="gDate" class="inp" onchange="loadGlobal()" style="width:140px;"></select>
-        </div>
-        <div class="c-item">
-            <span class="lbl">2. Timeframe</span>
-            <select id="gTF" class="inp" style="width:100px;">
-                <option value="1min">1 Min</option>
-                <option value="3min">3 Min</option>
-                <option value="5min">5 Min</option>
-                <option value="15min">15 Min</option>
-                <option value="30min">30 Min</option>
-                <option value="1hour">1 Hour</option>
-            </select>
-        </div>
-        <div class="c-item">
-            <span class="lbl">Start</span>
-            <input type="time" id="gStart" class="inp" value="09:15" style="width:100px;">
-        </div>
-        <div class="c-item">
-            <span class="lbl">End</span>
-            <input type="time" id="gEnd" class="inp" value="15:30" style="width:100px;">
-        </div>
-        <div style="width:1px; height:30px; background:#e5e7eb; margin:0 10px;"></div>
-        <button class="btn" onclick="plotAll()">PLOT ALL CHARTS</button>
-        <button class="btn outline" onclick="addChart()">+ CHART</button>
+<!-- TOP BAR -->
+<div class="top-bar">
+    <div class="control-group">
+        <label>Date</label>
+        <select id="globalDate" class="select-input" onchange="onDateChange()"></select>
     </div>
+    
+    <div style="flex:1;"></div>
+    
+    <button class="btn btn-outline" onclick="addChart()">
+        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 5v14m-7-7h14"></path></svg>
+        Add Chart
+    </button>
 </div>
 
-<!-- GRID -->
-<div class="grid-area" id="grid"></div>
+<!-- MAIN AREA -->
+<div class="container">
+    <div id="chartsContainer" class="charts-wrapper">
+        <div class="no-data" id="emptyState">
+            No charts added. Click "Add Chart" to begin.
+        </div>
+    </div>
+</div>
 
-<!-- CONFIG MODAL -->
-<div class="modal-overlay" id="cfgModal">
+<!-- CHART CONFIG MODAL -->
+<div class="modal-overlay" id="configModal">
     <div class="modal">
         <div class="modal-header">
-            <div class="modal-title">CONFIGURE CHART <span id="cfgId" style="color:var(--accent)"></span></div>
-            <div class="icon-btn" onclick="closeModal()">✕</div>
+            <span id="modalTitle">Configure Chart</span>
+            <button class="icon-btn" onclick="closeModal()">✕</button>
         </div>
         <div class="modal-body">
+            <input type="hidden" id="editChartId">
             
-            <!-- Root Selection -->
-            <div class="cfg-section">
-                <span class="cfg-label">1. SELECT ROOT SYMBOL FOR THIS CHART</span>
-                <select id="cfgRoot" class="modal-inp" onchange="onRootChange()">
-                    <!-- Populated dynamically -->
-                </select>
+            <!-- Global Config for this Chart -->
+            <div class="form-row">
+                <div class="control-group">
+                    <label class="inp-label">Root Symbol</label>
+                    <select id="cfgRoot" class="select-input" style="width:100%" onchange="loadExpiries()"></select>
+                </div>
+                <div class="control-group">
+                    <label class="inp-label">Expiry</label>
+                    <select id="cfgExpiry" class="select-input" style="width:100%" onchange="loadInstruments()"></select>
+                </div>
             </div>
 
-            <!-- Series Config -->
-            <div class="cfg-section">
-                <span class="cfg-label">2. DATA SERIES CONFIGURATION</span>
-                <div style="display:grid; grid-template-columns: 40px 1fr 2fr 100px 100px 40px; gap:15px; padding:0 10px; margin-bottom:5px; font-size:11px; font-weight:800; color:#9ca3af;">
-                    <div>COLOR</div>
-                    <div>VARIABLE</div>
-                    <div>INSTRUMENT</div>
-                    <div>AXIS</div>
-                    <div>LABEL</div>
-                    <div></div>
+            <div class="form-row">
+                <div class="control-group">
+                    <label class="inp-label">Timeframe</label>
+                    <select id="cfgTF" class="select-input" style="width:100%">
+                        <option value="1min">1 Minute</option>
+                        <option value="3min">3 Minute</option>
+                        <option value="5min">5 Minute</option>
+                        <option value="15min">15 Minute</option>
+                        <option value="30min">30 Minute</option>
+                        <option value="60min">1 Hour</option>
+                    </select>
+                </div>
+                <div class="control-group">
+                    <label class="inp-label">Axis Scaling</label>
+                    <select id="cfgScale" class="select-input" style="width:100%">
+                        <option value="shared">Shared Scale (Left)</option>
+                        <option value="separate">Separate Scales (L/R)</option>
+                    </select>
                 </div>
-                <div id="seriesContainer" class="series-list"></div>
-                <div class="add-line-btn" onclick="addSeriesRow()">+ ADD ANOTHER LINE</div>
             </div>
 
+            <div style="margin-top:20px; border-top:1px solid #eee; padding-top:10px;">
+                <label class="inp-label" style="display:flex; justify-content:space-between;">
+                    DATA SERIES 
+                    <button class="btn btn-outline" style="padding:2px 8px; font-size:10px;" onclick="addDatasetRow()">+ Add Line</button>
+                </label>
+                <div id="datasetContainer" class="dataset-list"></div>
+                <small style="color:#999; display:block; margin-top:5px;">
+                    Vars: <b>p</b> (Price), <b>b</b> (Buy), <b>s</b> (Sell), <b>v</b> (Vol), <b>o</b> (OI). <br>
+                    Math: +, -, *, /, (). Example: <code>b - s</code> or <code>(b+s)/2</code>
+                </small>
+            </div>
         </div>
         <div class="modal-footer">
-            <button class="btn outline" onclick="closeModal()">CANCEL</button>
-            <button class="btn" onclick="saveConfig()">SAVE & PLOT</button>
+            <button class="btn btn-outline" onclick="closeModal()">Cancel</button>
+            <button class="btn btn-primary" onclick="saveChartConfig()">Save & Plot</button>
         </div>
     </div>
 </div>
 
 <script>
-    // --- STATE ---
-    let AVAILABLE_ROOTS = []; 
-    let CURRENT_INSTRUMENTS = []; // Instruments for the currently edited chart's root
-    let CHARTS = []; // { id, root, series: [{color, var, inst, axis, label}] }
-    let DATA_CACHE = {};
-    let CHART_INSTANCES = {};
-    let EDIT_ID = null; // ID of chart currently being edited
-
-    // --- DEFAULTS ---
-    const DEFAULTS = [
-        { var: '$P', label: 'Price', color: '#fbbf24', axis: 'left' },
-        { var: '$B', label: 'Buy Qty', color: '#3b82f6', axis: 'right' },
-        { var: '$S', label: 'Sell Qty', color: '#ef4444', axis: 'right' }
-    ];
+    // STATE
+    let DATES = [];
+    let CHART_REGISTRY = {}; // id -> { chartObj, config }
+    
+    // CACHE FOR DROPDOWNS
+    let CACHE_ROOTS = [];
+    let CACHE_EXPS = [];
+    let CACHE_INSTRS = [];
 
+    // INIT
     window.onload = async () => {
-        const r = await fetch('/api/dates');
-        const d = await r.json();
-        document.getElementById('gDate').innerHTML = d.map(x=>`<option>${x}</option>`).join('');
-        
-        if(d.length > 0) await loadGlobal();
-        
-        // Init with 2 empty charts
-        addChart(); 
-        addChart();
+        await loadDates();
     };
 
-    async function loadGlobal() {
-        const d = document.getElementById('gDate').value;
-        const res = await fetch(`/api/roots?date=${d}`);
-        AVAILABLE_ROOTS = await res.json();
+    // API CALLS
+    async function api(endpoint, params={}) {
+        const u = new URL('/api/' + endpoint, window.location.origin);
+        Object.keys(params).forEach(key => u.searchParams.append(key, params[key]));
+        const r = await fetch(u);
+        return r.json();
     }
 
-    // --- CHART MANAGEMENT ---
-    function addChart() {
-        const id = Date.now();
-        // Default to first available root
-        const defRoot = AVAILABLE_ROOTS[0] || "NIFTY";
-        
-        CHARTS.push({
-            id: id,
-            root: defRoot,
-            series: [
-                { ...DEFAULTS[0], inst: defRoot }, // Price of Spot
-                { ...DEFAULTS[1], inst: defRoot },
-                { ...DEFAULTS[2], inst: defRoot }
-            ]
-        });
-        renderGrid();
+    async function loadDates() {
+        DATES = await api('dates');
+        const sel = document.getElementById('globalDate');
+        sel.innerHTML = DATES.map(d => `<option value="${d}">${d}</option>`).join('');
+        // Trigger generic update if charts exist (none initially)
     }
 
-    function removeChart(id) {
-        if(confirm("Delete this chart?")) {
-            CHARTS = CHARTS.filter(c => c.id !== id);
-            renderGrid();
-        }
+    function onDateChange() {
+        // Reload all charts with new date
+        const dt = document.getElementById('globalDate').value;
+        Object.keys(CHART_REGISTRY).forEach(id => {
+            const config = CHART_REGISTRY[id].config;
+            config.date = dt;
+            fetchAndRender(id);
+        });
     }
 
-    function renderGrid() {
-        const g = document.getElementById('grid');
-        g.innerHTML = '';
-        CHARTS.forEach((c, idx) => {
-            const html = `
-            <div class="card">
-                <div class="card-head">
-                    <div class="card-title">
-                        <span>CHART ${idx+1}</span>
-                        <span class="root-tag">${c.root}</span>
-                    </div>
-                    <div class="card-actions">
-                        <span class="icon-btn" onclick="openConfig(${c.id})">⚙️ CONFIGURE</span>
-                        <span class="icon-btn del" onclick="removeChart(${c.id})">✕</span>
-                    </div>
+    // CHART MANAGEMENT
+    function addChart() {
+        document.getElementById('emptyState').style.display = 'none';
+        const id = 'chart_' + Date.now();
+        
+        const div = document.createElement('div');
+        div.className = 'chart-card';
+        div.id = `card_${id}`;
+        div.innerHTML = `
+            <div class="chart-header">
+                <div class="chart-title">
+                    <span id="title_${id}">New Chart</span>
+                    <span class="chart-meta" id="meta_${id}">--</span>
                 </div>
-                <div class="card-body">
-                    <canvas id="cvs-${c.id}"></canvas>
+                <div class="chart-actions">
+                    <button class="icon-btn" onclick="editChart('${id}')" title="Configure">⚙️</button>
+                    <button class="icon-btn" onclick="refreshChart('${id}')" title="Refresh">↻</button>
+                    <button class="icon-btn delete" onclick="removeChart('${id}')" title="Remove">🗑</button>
                 </div>
-            </div>`;
-            g.insertAdjacentHTML('beforeend', html);
-            
-            // If data exists, re-render canvas
-            if(Object.keys(DATA_CACHE).length > 0) renderCanvas(c);
+            </div>
+            <div class="chart-body">
+                <canvas id="${id}"></canvas>
+            </div>
+        `;
+        document.getElementById('chartsContainer').appendChild(div);
+
+        // Init ChartJS
+        const ctx = document.getElementById(id).getContext('2d');
+        const chart = new Chart(ctx, {
+            type: 'line',
+            data: { labels: [], datasets: [] },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                interaction: { mode: 'index', intersect: false },
+                scales: {
+                    x: { grid: { display: false } },
+                    y: { display: true, position: 'left' }
+                },
+                plugins: {
+                    legend: { position: 'top', align: 'end' }
+                }
+            }
         });
+
+        // Default Config
+        CHART_REGISTRY[id] = {
+            chart: chart,
+            config: {
+                date: document.getElementById('globalDate').value,
+                root: '',
+                expiry: '',
+                timeframe: '1min',
+                scale: 'shared',
+                datasets: []
+            }
+        };
+
+        // Open Config Immediately
+        editChart(id);
+    }
+
+    function removeChart(id) {
+        if(CHART_REGISTRY[id]) {
+            CHART_REGISTRY[id].chart.destroy();
+            delete CHART_REGISTRY[id];
+        }
+        document.getElementById(`card_${id}`).remove();
+        if(Object.keys(CHART_REGISTRY).length === 0) {
+            document.getElementById('emptyState').style.display = 'block';
+        }
     }
 
-    // --- CONFIG MODAL LOGIC ---
-    async function openConfig(id) {
-        EDIT_ID = id;
-        const chart = CHARTS.find(c => c.id === id);
-        document.getElementById('cfgId').innerText = id;
+    // CONFIG MODAL LOGIC
+    async function editChart(id) {
+        const conf = CHART_REGISTRY[id].config;
+        document.getElementById('editChartId').value = id;
+        document.getElementById('modalTitle').innerText = `Configure Chart`;
         
-        // 1. Populate Roots
-        const rootSel = document.getElementById('cfgRoot');
-        rootSel.innerHTML = AVAILABLE_ROOTS.map(r => `<option ${r===chart.root?'selected':''}>${r}</option>`).join('');
+        // Load Roots for current date
+        const date = document.getElementById('globalDate').value;
+        const roots = await api('roots', { date: date });
+        CACHE_ROOTS = roots;
         
-        // 2. Fetch Instruments for this root
-        await fetchInstrumentsForRoot(chart.root);
+        const rSel = document.getElementById('cfgRoot');
+        rSel.innerHTML = roots.map(r => `<option value="${r}">${r}</option>`).join('');
+        if(conf.root && roots.includes(conf.root)) rSel.value = conf.root;
+        else if(roots.length > 0) rSel.value = roots[0];
+
+        // Trigger cascade
+        await loadExpiries(conf.expiry); // Pass prev expiry to try preserve it
         
-        // 3. Render Series
-        renderSeriesRows(chart.series);
+        document.getElementById('cfgTF').value = conf.timeframe;
+        document.getElementById('cfgScale').value = conf.scale;
         
-        document.getElementById('cfgModal').style.display = 'flex';
-    }
-
-    async function onRootChange() {
-        const newRoot = document.getElementById('cfgRoot').value;
-        await fetchInstrumentsForRoot(newRoot);
-        // Refresh instrument dropdowns in existing rows
-        // We preserve selection if possible, else default to root
-        const rows = document.querySelectorAll('.series-row');
-        rows.forEach(r => {
-            const sel = r.querySelector('.inst-drop');
-            const oldVal = sel.value;
-            sel.innerHTML = CURRENT_INSTRUMENTS.map(i => `<option>${i}</option>`).join('');
-            if(CURRENT_INSTRUMENTS.includes(oldVal)) sel.value = oldVal;
-            else sel.value = newRoot;
-        });
-    }
+        // Render Dataset Rows
+        const dsCont = document.getElementById('datasetContainer');
+        dsCont.innerHTML = '';
+        if(conf.datasets.length > 0) {
+            conf.datasets.forEach(ds => addDatasetRow(ds));
+        } else {
+            addDatasetRow(); // Add one empty
+        }
 
-    async function fetchInstrumentsForRoot(root) {
-        const d = document.getElementById('gDate').value;
-        const res = await fetch(`/api/instruments?date=${d}&root=${root}`);
-        CURRENT_INSTRUMENTS = await res.json();
+        document.getElementById('configModal').style.display = 'flex';
     }
 
-    function renderSeriesRows(series) {
-        const cont = document.getElementById('seriesContainer');
-        cont.innerHTML = '';
-        
-        const instOptions = CURRENT_INSTRUMENTS.map(i => `<option>${i}</option>`).join('');
-
-        series.forEach((s, idx) => {
-            const row = `
-            <div class="series-row" data-idx="${idx}">
-                <input type="color" class="color-inp val-color" value="${s.color}">
-                <select class="modal-inp val-var">
-                    <option value="$P" ${s.var==='$P'?'selected':''}>Price</option>
-                    <option value="$B" ${s.var==='$B'?'selected':''}>Buy Qty</option>
-                    <option value="$S" ${s.var==='$S'?'selected':''}>Sell Qty</option>
-                    <option value="$V" ${s.var==='$V'?'selected':''}>Volume</option>
-                    <option value="$OI" ${s.var==='$OI'?'selected':''}>OI</option>
-                </select>
-                <select class="modal-inp inst-drop val-inst">
-                    ${instOptions.replace(`>${s.inst}<`, ` selected>${s.inst}<`)} 
-                    <!-- Fallback if s.inst not in list, pre-select if matched -->
-                </select>
-                <select class="modal-inp val-axis">
-                    <option value="left" ${s.axis==='left'?'selected':''}>Left Axis</option>
-                    <option value="right" ${s.axis==='right'?'selected':''}>Right Axis</option>
-                </select>
-                <input type="text" class="modal-inp val-label" value="${s.label}">
-                <div class="icon-btn del" onclick="this.parentElement.remove()">✕</div>
-            </div>`;
-            cont.insertAdjacentHTML('beforeend', row);
-        });
-    }
+    async function loadExpiries(preserveVal=null) {
+        const date = document.getElementById('globalDate').value;
+        const root = document.getElementById('cfgRoot').value;
+        if(!root) return;
 
-    function addSeriesRow() {
-        const cont = document.getElementById('seriesContainer');
-        // Auto-select instrument from last row
-        const lastRow = cont.lastElementChild;
-        let defInst = CURRENT_INSTRUMENTS[0];
-        if(lastRow) defInst = lastRow.querySelector('.val-inst').value;
-
-        const row = `
-            <div class="series-row">
-                <input type="color" class="color-inp val-color" value="#000000">
-                <select class="modal-inp val-var">
-                    <option value="$P">Price</option>
-                    <option value="$B" selected>Buy Qty</option>
-                    <option value="$S">Sell Qty</option>
-                    <option value="$V">Volume</option>
-                    <option value="$OI">OI</option>
-                </select>
-                <select class="modal-inp inst-drop val-inst">
-                    ${CURRENT_INSTRUMENTS.map(i => `<option ${i===defInst?'selected':''}>${i}</option>`).join('')}
-                </select>
-                <select class="modal-inp val-axis">
-                    <option value="left">Left Axis</option>
-                    <option value="right" selected>Right Axis</option>
-                </select>
-                <input type="text" class="modal-inp val-label" value="New Line">
-                <div class="icon-btn del" onclick="this.parentElement.remove()">✕</div>
-            </div>`;
-        cont.insertAdjacentHTML('beforeend', row);
+        const exps = await api('expiries', { date, root });
+        CACHE_EXPS = exps;
+        
+        const eSel = document.getElementById('cfgExpiry');
+        eSel.innerHTML = exps.map(e => `<option value="${e}">${e}</option>`).join('');
+        
+        if(preserveVal && exps.includes(preserveVal)) eSel.value = preserveVal;
+        
+        await loadInstruments();
     }
 
-    function closeModal() { document.getElementById('cfgModal').style.display = 'none'; }
+    async function loadInstruments() {
+        const date = document.getElementById('globalDate').value;
+        const root = document.getElementById('cfgRoot').value;
+        const expiry = document.getElementById('cfgExpiry').value;
+        if(!root || !expiry) return;
 
-    function saveConfig() {
-        const chart = CHARTS.find(c => c.id === EDIT_ID);
-        chart.root = document.getElementById('cfgRoot').value;
+        const instrs = await api('instruments', { date, root, expiry });
+        CACHE_INSTRS = instrs;
         
-        const newSeries = [];
-        document.querySelectorAll('.series-row').forEach(r => {
-            newSeries.push({
-                color: r.querySelector('.val-color').value,
-                var: r.querySelector('.val-var').value,
-                inst: r.querySelector('.val-inst').value,
-                axis: r.querySelector('.val-axis').value,
-                label: r.querySelector('.val-label').value,
-            });
+        // Update all instrument dropdowns in dataset list
+        document.querySelectorAll('.instr-select').forEach(sel => {
+            const curVal = sel.value;
+            sel.innerHTML = instrs.map(i => `<option value="${i}">${i}</option>`).join('');
+            if(curVal && instrs.includes(curVal)) sel.value = curVal;
         });
-        chart.series = newSeries;
-        closeModal();
-        renderGrid(); // Refresh UI
-        plotAll(); // Fetch new data
     }
 
-    // --- PLOTTING ENGINE ---
-    async function plotAll() {
-        const l = document.getElementById('loader');
-        l.style.display = 'flex';
+    function addDatasetRow(data=null) {
+        const div = document.createElement('div');
+        div.className = 'dataset-item';
         
-        // 1. Gather all unique instruments required across all charts
-        // The backend `fetch_bulk` now takes {root, instruments[]} structure
+        const instOpts = CACHE_INSTRS.map(i => `<option value="${i}">${i}</option>`).join('');
         
-        const requestMap = {}; // { "NIFTY": Set(insts), "BANKNIFTY": Set(insts) }
+        div.innerHTML = `
+            <select class="select-input instr-select" style="flex:2;">${instOpts}</select>
+            <input type="text" class="inp-text form-input" style="flex:1;" placeholder="Formula (e.g. b-s)" value="${data ? data.formula : 'p'}">
+            <input type="text" class="inp-text label-input" style="flex:1;" placeholder="Legend" value="${data ? data.label : ''}">
+            <select class="select-input type-select" style="width:70px;">
+                <option value="line" ${data && data.type=='line'?'selected':''}>Line</option>
+                <option value="bar" ${data && data.type=='bar'?'selected':''}>Bar</option>
+            </select>
+            <input type="color" class="color-picker" value="${data ? data.color : getRandomColor()}">
+            <button class="icon-btn delete" onclick="this.parentElement.remove()">✕</button>
+        `;
         
-        CHARTS.forEach(c => {
-            if(!requestMap[c.root]) requestMap[c.root] = new Set();
-            c.series.forEach(s => requestMap[c.root].add(s.inst));
-        });
+        // Set selected value for instrument
+        if(data && data.instrument) div.querySelector('.instr-select').value = data.instrument;
         
-        const requestsList = Object.keys(requestMap).map(root => ({
-            root: root,
-            instruments: Array.from(requestMap[root])
-        }));
-
-        if(requestsList.length === 0) { l.style.display='none'; return; }
+        document.getElementById('datasetContainer').appendChild(div);
+    }
 
-        const payload = {
-            date: document.getElementById('gDate').value,
-            requests_list: requestsList,
-            timeframe: document.getElementById('gTF').value,
-            start_time: document.getElementById('gStart').value,
-            end_time: document.getElementById('gEnd').value
-        };
+    function closeModal() {
+        document.getElementById('configModal').style.display = 'none';
+    }
 
-        try {
-            const res = await fetch('/api/fetch_bulk', {
-                method:'POST', headers:{'Content-Type':'application/json'},
-                body: JSON.stringify(payload)
-            });
-            DATA_CACHE = await res.json();
+    async function saveChartConfig() {
+        const id = document.getElementById('editChartId').value;
+        const root = document.getElementById('cfgRoot').value;
+        const expiry = document.getElementById('cfgExpiry').value;
+        const tf = document.getElementById('cfgTF').value;
+        const scale = document.getElementById('cfgScale').value;
+        
+        const datasets = [];
+        const rows = document.querySelectorAll('.dataset-item');
+        
+        rows.forEach((r, idx) => {
+            const instr = r.querySelector('.instr-select').value;
+            const form = r.querySelector('.form-input').value;
+            const lbl = r.querySelector('.label-input').value;
+            const clr = r.querySelector('.color-picker').value;
+            const typ = r.querySelector('.type-select').value;
             
-            // Render all canvases
-            CHARTS.forEach(c => renderCanvas(c));
+            // Axis logic
+            let yAxis = 'y'; // default shared
+            if(scale === 'separate') {
+                yAxis = 'y' + idx; // y0, y1, y2...
+            }
+            
+            datasets.push({
+                instrument: instr,
+                formula: form,
+                label: lbl || instr,
+                color: clr,
+                type: typ,
+                yAxisID: yAxis
+            });
+        });
 
-        } catch(e) { console.error(e); alert("Failed to fetch data"); }
-        l.style.display = 'none';
+        // Update Config
+        const conf = CHART_REGISTRY[id].config;
+        conf.root = root;
+        conf.expiry = expiry;
+        conf.timeframe = tf;
+        conf.scale = scale;
+        conf.datasets = datasets;
+        
+        // Update Chart Scales Config
+        const chart = CHART_REGISTRY[id].chart;
+        chart.options.scales = { x: { display: true } }; // Reset
+        
+        if(scale === 'shared') {
+            chart.options.scales['y'] = { display: true, position: 'left' };
+        } else {
+            datasets.forEach((d, i) => {
+                chart.options.scales[d.yAxisID] = {
+                    display: true,
+                    position: i % 2 === 0 ? 'left' : 'right',
+                    grid: { drawOnChartArea: i === 0 } // Only first grid
+                };
+            });
+        }
+        
+        closeModal();
+        
+        // Update UI Text
+        document.getElementById(`title_${id}`).innerText = `${root} (${expiry})`;
+        document.getElementById(`meta_${id}`).innerText = tf.toUpperCase();
+        
+        // Fetch
+        fetchAndRender(id);
     }
 
-    function renderCanvas(chart) {
-        const ctx = document.getElementById(`cvs-${chart.id}`);
-        if(!ctx) return;
+    async function fetchAndRender(id) {
+        const conf = CHART_REGISTRY[id].config;
+        if(conf.datasets.length === 0) return;
         
-        if(CHART_INSTANCES[chart.id]) CHART_INSTANCES[chart.id].destroy();
+        document.getElementById('loader').style.display = 'block';
         
-        const datasets = [];
-        let labels = [];
-
-        chart.series.forEach(s => {
-            const raw = DATA_CACHE[s.inst];
-            if(!raw) return;
+        try {
+            const payload = {
+                date: document.getElementById('globalDate').value,
+                root: conf.root,
+                expiry: conf.expiry,
+                timeframe: conf.timeframe,
+                datasets: conf.datasets
+            };
             
-            if(labels.length === 0) labels = raw.labels;
-
-            let data = [];
-            if(s.var === '$P') data = raw.P;
-            if(s.var === '$B') data = raw.B;
-            if(s.var === '$S') data = raw.S;
-            if(s.var === '$V') data = raw.V;
-            if(s.var === '$OI') data = raw.OI;
-
-            datasets.push({
-                label: s.label + ` (${s.inst})`,
-                data: data,
-                borderColor: s.color,
-                backgroundColor: s.color,
-                borderWidth: 2,
-                pointRadius: 0,
-                pointHoverRadius: 4,
-                tension: 0.1,
-                yAxisID: s.axis // Explicit mapping
+            const r = await fetch('/api/plot-data', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify(payload)
             });
-        });
+            
+            const data = await r.json();
+            
+            const chart = CHART_REGISTRY[id].chart;
+            chart.data.labels = data.labels;
+            chart.data.datasets = data.datasets;
+            chart.update();
+            
+        } catch(e) {
+            console.error(e);
+            alert("Error fetching data");
+        } finally {
+            document.getElementById('loader').style.display = 'none';
+        }
+    }
 
-        // Determine if we need Right Axis
-        const hasRight = datasets.some(d => d.yAxisID === 'right');
+    function refreshChart(id) {
+        fetchAndRender(id);
+    }
 
-        CHART_INSTANCES[chart.id] = new Chart(ctx, {
-            type: 'line',
-            data: { labels, datasets },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                interaction: { mode: 'index', intersect: false },
-                scales: {
-                    x: { 
-                        grid: { display:false }, 
-                        ticks: { maxTicksLimit: 10, color:'#6b7280' } 
-                    },
-                    left: {
-                        type: 'linear', display: true, position: 'left',
-                        grid: { color: '#f3f4f6' },
-                        title: { display: false }
-                    },
-                    right: {
-                        type: 'linear', display: hasRight, position: 'right',
-                        grid: { display: false }
-                    }
-                },
-                plugins: {
-                    legend: { labels: { usePointStyle:true, font:{size:11} } },
-                    tooltip: { 
-                        backgroundColor: 'rgba(255,255,255,0.9)', 
-                        titleColor: '#000', 
-                        bodyColor: '#000', 
-                        borderColor: '#e5e7eb', 
-                        borderWidth: 1 
-                    }
-                }
-            }
-        });
+    function getRandomColor() {
+        const letters = '0123456789ABCDEF';
+        let color = '#';
+        for (let i = 0; i < 6; i++) {
+            color += letters[Math.floor(Math.random() * 16)];
+        }
+        return color;
     }
 
 </script>