Update app.py

app.py

@@ -167,7 +167,8 @@ async def fetch_series(
                 others = [k for k in instruments if not k.endswith('CE') and not k.endswith('PE')]
                 ref_instrument = others[0] if others else instruments[0]
 
-        rpc_name = "get_advanced_chart_data"
+        # Use the new function with breakdown
+        rpc_name = "get_advanced_chart_data_with_breakdown"
         base_params = {
             "p_root": root,
             "p_expiry": expiry,
@@ -260,6 +261,14 @@ async def fetch_series(
         "PS": "last",  # Put Sell → last value
     }
 
+    # Handle optional columns from advanced mode
+    if 'atm_strike' in df.columns:
+        agg_dict['atm_strike'] = 'last'
+    if 'strike_details' in df.columns:
+        agg_dict['strike_details'] = 'last'
+    if 'range_info' in df.columns:
+        agg_dict['range_info'] = 'last'
+
     existing_agg = {k: v for k, v in agg_dict.items() if k in df.columns}
     resampled = df.resample(panda_tf).agg(existing_agg).ffill().fillna(0)
 
@@ -273,6 +282,60 @@ async def fetch_series(
             response_data[var_key] = [round(float(v), 2) for v in resampled[var_key].tolist()]
         # Omit entirely if not requested — JS handles missing keys gracefully
 
+    # Include breakdown data for advanced mode
+    if mode == "advanced":
+        # Add ATM strike for each bar
+        if 'atm_strike' in resampled.columns:
+            response_data['atm_strike'] = [round(float(v), 2) if v else 0 for v in resampled['atm_strike'].tolist()]
+
+        # Add per-bar breakdown data
+        if 'strike_details' in resampled.columns:
+            response_data['strike_details'] = resampled['strike_details'].tolist()
+
+        if 'range_info' in resampled.columns:
+            response_data['range_info'] = resampled['range_info'].tolist()
+
+        # Build comprehensive strike breakdown per minute
+        breakdown_per_minute = []
+        for idx, row in resampled.iterrows():
+            minute_data = {
+                "time": idx.strftime('%H:%M'),
+                "spot_price": round(float(row.get('P', 0)), 2) if row.get('P') else 0,
+                "atm_strike": round(float(row.get('atm_strike', 0)), 2) if row.get('atm_strike') else 0,
+                "cb": round(float(row.get('CB', 0)), 2) if row.get('CB') else 0,
+                "cs": round(float(row.get('CS', 0)), 2) if row.get('CS') else 0,
+                "pb": round(float(row.get('PB', 0)), 2) if row.get('PB') else 0,
+                "ps": round(float(row.get('PS', 0)), 2) if row.get('PS') else 0,
+                "strikes": []
+            }
+
+            # Process strike details if available
+            strike_details = row.get('strike_details')
+            if strike_details and isinstance(strike_details, list):
+                for sd in strike_details:
+                    if isinstance(sd, dict):
+                        minute_data["strikes"].append({
+                            "strike": sd.get('strike', 0),
+                            "type": sd.get('type', ''),
+                            "instrument": sd.get('instrument', ''),
+                            "buy": sd.get('buy', 0),
+                            "sell": sd.get('sell', 0),
+                            "vol": sd.get('vol', 0),
+                            "oi": sd.get('oi', 0),
+                            "ltp": sd.get('ltp', 0),
+                            "call_status": sd.get('call_status'),
+                            "put_status": sd.get('put_status')
+                        })
+
+            breakdown_per_minute.append(minute_data)
+
+        response_data['breakdown_per_minute'] = breakdown_per_minute
+
+        # Add range info if available (just the last one as it's constant)
+        range_info = resampled['range_info'].iloc[-1] if 'range_info' in resampled.columns and len(resampled) > 0 else None
+        if range_info:
+            response_data['atm_range_info'] = range_info
+
     return JSONResponse(response_data)
 
 
@@ -379,7 +442,7 @@ HTML_TEMPLATE = """
             width: 560px; max-width: 95%; max-height: 88vh; display: flex; flex-direction: column;
             box-shadow: 0 20px 50px rgba(0,0,0,0.5);
         }
-        .modal.wide { width: 820px; }
+        .modal.wide { width: 950px; }
         .modal-head { padding: 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; font-weight: 700; }
         .modal-body { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
         .modal-foot { padding: 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: var(--bg-card); }
@@ -458,6 +521,97 @@ HTML_TEMPLATE = """
         .val-pos { color: #3fb950; }
         .val-neg { color: #f85149; }
         .breakdown-scroll { overflow-x: auto; overflow-y: auto; max-height: 55vh; }
+
+        /* STRIKE BREAKDOWN STYLES */
+        .strike-section {
+            margin-top: 10px;
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        .strike-header {
+            background: var(--bg-panel);
+            padding: 8px 12px;
+            font-weight: 700;
+            font-size: 11px;
+            cursor: pointer;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid var(--border);
+        }
+        .strike-header:hover { background: var(--bg-input); }
+        .strike-header .arrow { transition: transform 0.2s; }
+        .strike-header.collapsed .arrow { transform: rotate(-90deg); }
+        .strike-content {
+            max-height: 400px;
+            overflow-y: auto;
+            transition: max-height 0.3s;
+        }
+        .strike-content.collapsed { max-height: 0; overflow: hidden; }
+        .strike-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-family: var(--font-mono);
+            font-size: 10px;
+        }
+        .strike-table th {
+            background: var(--bg-body);
+            padding: 6px 8px;
+            text-align: right;
+            border-bottom: 1px solid var(--border);
+            color: var(--text-secondary);
+            font-weight: 600;
+        }
+        .strike-table th:first-child { text-align: left; }
+        .strike-table td {
+            padding: 5px 8px;
+            text-align: right;
+            border-bottom: 1px solid var(--border);
+        }
+        .strike-table td:first-child { text-align: left; }
+        .strike-table .ce-row { background: rgba(47,129,247,0.05); }
+        .strike-table .pe-row { background: rgba(218,54,51,0.05); }
+        .strike-table .atm-strike { background: rgba(210,153,34,0.15); font-weight: 700; }
+        .strike-table .itm { color: var(--success); }
+        .strike-table .otm { color: var(--text-secondary); }
+
+        .minute-accordion {
+            border: 1px solid var(--border);
+            border-radius: 6px;
+            margin-bottom: 8px;
+            overflow: hidden;
+        }
+        .minute-header {
+            background: var(--bg-panel);
+            padding: 10px 12px;
+            cursor: pointer;
+            display: grid;
+            grid-template-columns: 60px 1fr 1fr 1fr 1fr 1fr;
+            gap: 10px;
+            align-items: center;
+            font-weight: 600;
+            font-size: 11px;
+        }
+        .minute-header:hover { background: var(--bg-input); }
+        .minute-detail {
+            background: var(--bg-card);
+            padding: 12px;
+            display: none;
+            border-top: 1px solid var(--border);
+        }
+        .minute-detail.show { display: block; }
+
+        .range-info-box {
+            background: var(--bg-panel);
+            border: 1px solid var(--accent);
+            border-radius: 6px;
+            padding: 10px 14px;
+            margin-bottom: 12px;
+            font-size: 11px;
+        }
+        .range-info-box .label { color: var(--text-secondary); }
+        .range-info-box .value { color: var(--accent); font-weight: 700; font-family: var(--font-mono); }
     </style>
 </head>
 <body>
@@ -551,7 +705,10 @@ HTML_TEMPLATE = """
                             <label style="color:var(--accent);">ATM (+/-) Strike Range</label>
                             <input type="number" id="cfgAtmRange" value="5" min="1" max="50" style="width:100%;">
                             <div style="font-size:10px; color:var(--text-secondary); margin-top:4px;">
-                                Aggregates all CE/PE within ATM ± this many strikes.
+                                <strong>Corrected Logic:</strong><br>
+                                • For Calls: N ITM (below ATM) + N OTM (ATM and above) = 2N strikes<br>
+                                • For Puts: N ITM (ATM and above) + N OTM (below ATM) = 2N strikes<br>
+                                • Both CE and PE at same strike are always included together.
                             </div>
                         </div>
                     </div>
@@ -616,8 +773,24 @@ HTML_TEMPLATE = """
         </div>
         <div class="modal-body" style="padding:12px;">
             <div style="font-size:11px; color:var(--text-secondary); margin-bottom:8px;" id="bdMeta"></div>
-            <div class="breakdown-scroll">
-                <table class="breakdown-table" id="bdTable"></table>
+            <div id="bdRangeInfo" style="display:none;"></div>
+
+            <!-- TABS -->
+            <div style="display:flex; gap:8px; margin-bottom:12px;">
+                <button id="tabSummary" class="primary" onclick="Breakdown.showTab('summary')">Summary</button>
+                <button id="tabStrikes" onclick="Breakdown.showTab('strikes')">Strike Breakdown</button>
+            </div>
+
+            <!-- SUMMARY TAB -->
+            <div id="bdSummaryTab">
+                <div class="breakdown-scroll">
+                    <table class="breakdown-table" id="bdTable"></table>
+                </div>
+            </div>
+
+            <!-- STRIKES TAB -->
+            <div id="bdStrikesTab" style="display:none;">
+                <div class="breakdown-scroll" id="bdStrikesContent"></div>
             </div>
         </div>
     </div>
@@ -1174,6 +1347,18 @@ const ChartLogic = {
 // BREAKDOWN TABLE
 // ===================================================
 const Breakdown = {
+    currentTab: 'summary',
+
+    showTab(tab) {
+        this.currentTab = tab;
+        document.getElementById('tabSummary').classList.toggle('primary', tab === 'summary');
+        document.getElementById('tabStrikes').classList.toggle('primary', tab === 'strikes');
+        document.getElementById('tabSummary').classList.toggle('', tab !== 'summary');
+        document.getElementById('tabStrikes').classList.toggle('', tab !== 'strikes');
+        document.getElementById('bdSummaryTab').style.display = tab === 'summary' ? 'block' : 'none';
+        document.getElementById('bdStrikesTab').style.display = tab === 'strikes' ? 'block' : 'none';
+    },
+
     open(id) {
         const chart = App.state.charts[id];
         if (!chart || !chart.lastData || !chart.config.series) {
@@ -1184,6 +1369,10 @@ const Breakdown = {
         const data = chart.lastData;
         const cfg = chart.config;
         const series = cfg.series;
+        const isAdvanced = cfg.chartMode === 'advanced';
+
+        // Reset to summary tab
+        this.showTab('summary');
 
         // Determine which raw variables to show in table
         const allVarKeys = ['P', 'CB', 'CS', 'PB', 'PS', 'B', 'S', 'V', 'OI'];
@@ -1193,6 +1382,9 @@ const Breakdown = {
 
         // Build header
         let thead = '<thead><tr><th>Time</th>';
+        if (isAdvanced && data.atm_strike) {
+            thead += '<th>ATM</th>';
+        }
         presentVars.forEach(v => { thead += `<th>${v}</th>`; });
         series.forEach(s => { thead += `<th>${s.label}</th>`; });
         thead += '</tr></thead>';
@@ -1210,6 +1402,12 @@ const Breakdown = {
 
             tbody += `<tr><td>${lbl}</td>`;
 
+            // Add ATM strike column for advanced mode
+            if (isAdvanced && data.atm_strike) {
+                const atm = data.atm_strike[i] || 0;
+                tbody += `<td style="color:var(--warning); font-weight:700;">${atm.toFixed(0)}</td>`;
+            }
+
             // Raw variable values
             presentVars.forEach(k => {
                 const v = vars[k];
@@ -1237,10 +1435,146 @@ const Breakdown = {
         });
         tbody += '</tbody>';
 
-        document.getElementById('bdTitle').innerText = `Breakdown: ${cfg.root} ${cfg.expiry} — ${cfg.chartMode === 'advanced' ? 'ATM ± ' + (cfg.atmRange || 5) : (cfg.instrument || '')}`;
+        document.getElementById('bdTitle').innerText = `Breakdown: ${cfg.root} ${cfg.expiry} — ${isAdvanced ? 'ATM ± ' + (cfg.atmRange || 5) : (cfg.instrument || '')}`;
         document.getElementById('bdMeta').innerText = `Timeframe: ${cfg.timeframe || '1min'} | Range: ${cfg.start} – ${cfg.end} | ${data.labels.length} bars`;
         document.getElementById('bdTable').innerHTML = thead + tbody;
+
+        // Build Strike Breakdown Tab (only for advanced mode with breakdown data)
+        if (isAdvanced && data.breakdown_per_minute) {
+            this.buildStrikeBreakdown(data, cfg);
+            document.getElementById('tabStrikes').style.display = 'inline-block';
+        } else {
+            document.getElementById('tabStrikes').style.display = 'none';
+        }
+
+        // Show range info if available
+        if (isAdvanced && data.atm_range_info) {
+            const info = data.atm_range_info;
+            document.getElementById('bdRangeInfo').innerHTML = `
+                <div class="range-info-box">
+                    <span class="label">ATM Strike:</span> <span class="value">${info.atm_strike || 'N/A'}</span> &nbsp;
+                    <span class="label">Spot Price:</span> <span class="value">${info.spot_price || 'N/A'}</span> &nbsp;
+                    <span class="label">Range:</span> <span class="value">±${info.atm_range || cfg.atmRange || 5}</span> &nbsp;
+                    <span class="label">Total Strikes:</span> <span class="value">${info.total_strikes_in_range || '2N'}</span>
+                </div>
+            `;
+            document.getElementById('bdRangeInfo').style.display = 'block';
+        } else {
+            document.getElementById('bdRangeInfo').style.display = 'none';
+        }
+
         document.getElementById('breakdownModal').style.display = 'flex';
+    },
+
+    buildStrikeBreakdown(data, cfg) {
+        const breakdown = data.breakdown_per_minute;
+        if (!breakdown || !breakdown.length) {
+            document.getElementById('bdStrikesContent').innerHTML = '<div style="padding:20px; text-align:center; color:var(--text-secondary);">No strike breakdown data available</div>';
+            return;
+        }
+
+        let html = '';
+
+        breakdown.forEach((minuteData, idx) => {
+            const strikes = minuteData.strikes || [];
+            if (!strikes.length) return;
+
+            // Group strikes by strike price
+            const strikeGroups = {};
+            strikes.forEach(s => {
+                if (!strikeGroups[s.strike]) {
+                    strikeGroups[s.strike] = { strike: s.strike, ce: null, pe: null };
+                }
+                if (s.type === 'CE') strikeGroups[s.strike].ce = s;
+                else if (s.type === 'PE') strikeGroups[s.strike].pe = s;
+            });
+
+            const sortedStrikes = Object.values(strikeGroups).sort((a, b) => a.strike - b.strike);
+            const atmStrike = minuteData.atm_strike || 0;
+
+            html += `
+                <div class="minute-accordion">
+                    <div class="minute-header" onclick="Breakdown.toggleMinute(this)">
+                        <span style="font-weight:700; color:var(--accent);">${minuteData.time}</span>
+                        <span>ATM: <span style="color:var(--warning);">${atmStrike.toFixed(0)}</span></span>
+                        <span>CB: <span class="val-pos">${minuteData.cb.toFixed(0)}</span></span>
+                        <span>CS: <span class="val-neg">${minuteData.cs.toFixed(0)}</span></span>
+                        <span>PB: <span class="val-pos">${minuteData.pb.toFixed(0)}</span></span>
+                        <span>PS: <span class="val-neg">${minuteData.ps.toFixed(0)}</span></span>
+                    </div>
+                    <div class="minute-detail">
+                        <table class="strike-table">
+                            <thead>
+                                <tr>
+                                    <th>Strike</th>
+                                    <th colspan="4" style="text-align:center; background:rgba(47,129,247,0.2);">CALL (CE)</th>
+                                    <th colspan="4" style="text-align:center; background:rgba(218,54,51,0.2);">PUT (PE)</th>
+                                </tr>
+                                <tr>
+                                    <th></th>
+                                    <th style="background:rgba(47,129,247,0.1);">Buy</th>
+                                    <th style="background:rgba(47,129,247,0.1);">Sell</th>
+                                    <th style="background:rgba(47,129,247,0.1);">LTP</th>
+                                    <th style="background:rgba(47,129,247,0.1);">Status</th>
+                                    <th style="background:rgba(218,54,51,0.1);">Buy</th>
+                                    <th style="background:rgba(218,54,51,0.1);">Sell</th>
+                                    <th style="background:rgba(218,54,51,0.1);">LTP</th>
+                                    <th style="background:rgba(218,54,51,0.1);">Status</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+            `;
+
+            sortedStrikes.forEach(sg => {
+                const isAtm = Math.abs(sg.strike - atmStrike) < 1;
+                const rowClass = isAtm ? 'atm-strike' : '';
+
+                html += `<tr class="${rowClass}">`;
+                html += `<td style="font-weight:${isAtm ? '700' : '400'}; color:${isAtm ? 'var(--warning)' : 'var(--text-primary)'};">${sg.strike.toFixed(0)}</td>`;
+
+                // CE columns
+                if (sg.ce) {
+                    const ceItmClass = sg.ce.call_status === 'ITM' ? 'itm' : 'otm';
+                    html += `
+                        <td class="val-pos">${sg.ce.buy.toFixed(0)}</td>
+                        <td class="val-neg">${sg.ce.sell.toFixed(0)}</td>
+                        <td>${sg.ce.ltp.toFixed(2)}</td>
+                        <td class="${ceItmClass}">${sg.ce.call_status || '-'}</td>
+                    `;
+                } else {
+                    html += `<td>-</td><td>-</td><td>-</td><td>-</td>`;
+                }
+
+                // PE columns
+                if (sg.pe) {
+                    const peItmClass = sg.pe.put_status === 'ITM' ? 'itm' : 'otm';
+                    html += `
+                        <td class="val-pos">${sg.pe.buy.toFixed(0)}</td>
+                        <td class="val-neg">${sg.pe.sell.toFixed(0)}</td>
+                        <td>${sg.pe.ltp.toFixed(2)}</td>
+                        <td class="${peItmClass}">${sg.pe.put_status || '-'}</td>
+                    `;
+                } else {
+                    html += `<td>-</td><td>-</td><td>-</td><td>-</td>`;
+                }
+
+                html += '</tr>';
+            });
+
+            html += `
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            `;
+        });
+
+        document.getElementById('bdStrikesContent').innerHTML = html || '<div style="padding:20px; text-align:center; color:var(--text-secondary);">No strike breakdown data available</div>';
+    },
+
+    toggleMinute(header) {
+        const detail = header.nextElementSibling;
+        detail.classList.toggle('show');
     }
 };