Spaces:

Alvin3y1
/

test

Paused

App Files Files Community

Alvin3y1 commited on Dec 8, 2025

Commit

c43af34

verified ·

1 Parent(s): 75f3b2f

Update app.py

Browse files

Files changed (1) hide show

app.py +136 -125

app.py CHANGED Viewed

@@ -2,6 +2,7 @@ import asyncio
 import json
 import logging
 import time
 from aiohttp import web
 import websockets
@@ -27,15 +28,27 @@ HTML_PAGE = f"""
 <!DOCTYPE html>
 <html>
 <head>
-    <title>BTC-USD 3-Way Analysis</title>
     <script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
     <style>
         body {{ margin: 0; padding: 0; background-color: #0e0e0e; color: #ccc; font-family: sans-serif; overflow: hidden; }}
-        /* Layout: 50% Depth, 25% Distance, 25% History */
-        #depth-chart {{ width: 100vw; height: 50vh; }}
-        #imbalance-chart {{ width: 100vw; height: 25vh; border-top: 1px solid #333; }}
-        #price-chart {{ width: 100vw; height: 25vh; border-top: 1px solid #333; }}
         #status {{ position: absolute; top: 10px; left: 60px; z-index: 10; font-size: 14px; background: rgba(0,0,0,0.7); padding: 5px 10px; border-radius: 4px; pointer-events: none; border: 1px solid #333; }}
         .green {{ color: #00e676; }}
@@ -45,18 +58,29 @@ HTML_PAGE = f"""
 <body>
     <div id="status">Connecting...</div>
-    <div id="depth-chart"></div>
-    <div id="imbalance-chart"></div>
-    <div id="price-chart"></div>
     <script>
         const depthDiv = document.getElementById('depth-chart');
-        const imbDiv = document.getElementById('imbalance-chart');
         const priceDiv = document.getElementById('price-chart');
         const statusDiv = document.getElementById('status');
         let initDepth = false;
-        let initImb = false;
         let initPrice = false;
         const commonConfig = {{ responsive: true, displayModeBar: false }};
@@ -64,8 +88,10 @@ HTML_PAGE = f"""
             paper_bgcolor: '#0e0e0e',
             plot_bgcolor: '#0e0e0e',
             font: {{ color: '#aaa' }},
-            margin: {{ t: 25, b: 25, l: 50, r: 20 }},
-            showlegend: false
         }};
         async function updateCharts() {{
@@ -78,75 +104,72 @@ HTML_PAGE = f"""
                     return;
                 }}
-                // --- Update Status Header ---
-                statusDiv.innerHTML = `Mid: <span class="${{data.mid >= data.prev_mid ? 'green' : 'red'}}">$${{data.mid.toLocaleString(undefined, {{minimumFractionDigits: 2}})}}</span> | Bids: ${{data.bids_count}} | Asks: ${{data.asks_count}}`;
-                // ============================================================
-                // 1. DEPTH CHART (Standard Price Levels)
-                // ============================================================
-                const traceBids = {{
-                    x: data.depth.bids_x, y: data.depth.bids_y,
-                    fill: 'tozeroy', type: 'scatter', mode: 'lines',
-                    name: 'Bids', line: {{color: '#00e676', width: 2}}
-                }};
-                const traceAsks = {{
-                    x: data.depth.asks_x, y: data.depth.asks_y,
-                    fill: 'tozeroy', type: 'scatter', mode: 'lines',
-                    name: 'Asks', line: {{color: '#ff1744', width: 2}}
-                }};
-                const layoutDepth = {{ ...commonLayout,
-                    title: 'Orderbook Depth (Price Levels)',
-                    xaxis: {{ gridcolor: '#222' }},
-                    yaxis: {{ title: 'Volume', gridcolor: '#222' }}
-                }};
-                if (!initDepth) {{ Plotly.newPlot(depthDiv, [traceBids, traceAsks], layoutDepth, commonConfig); initDepth = true; }}
-                else {{ Plotly.react(depthDiv, [traceBids, traceAsks], layoutDepth, commonConfig); }}
-                // ============================================================
-                // 2. IMBALANCE CHART (Cumulative Volume by Distance)
-                // ============================================================
-                const traceImbBids = {{
-                    x: data.imbalance.dist_bids, y: data.imbalance.vol_bids,
-                    type: 'scatter', mode: 'lines', name: 'Bid Strength',
-                    line: {{color: '#00e676', width: 2, dash: 'solid'}}
-                }};
-                const traceImbAsks = {{
-                    x: data.imbalance.dist_asks, y: data.imbalance.vol_asks,
-                    type: 'scatter', mode: 'lines', name: 'Ask Strength',
-                    line: {{color: '#ff1744', width: 2, dash: 'solid'}}
                 }};
-                const layoutImb = {{ ...commonLayout,
-                    title: 'Liquidity Comparison (Distance from Mid)',
-                    xaxis: {{ title: 'Distance ($)', gridcolor: '#222' }},
-                    yaxis: {{ title: 'Cum Volume', gridcolor: '#222' }},
-                    hovermode: 'x unified'
-                }};
-                if (!initImb) {{ Plotly.newPlot(imbDiv, [traceImbBids, traceImbAsks], layoutImb, commonConfig); initImb = true; }}
-                else {{ Plotly.react(imbDiv, [traceImbBids, traceImbAsks], layoutImb, commonConfig); }}
-                // ============================================================
-                // 3. PRICE HISTORY CHART
-                // ============================================================
                 const timeData = data.history.map(d => new Date(d.t * 1000));
                 const priceData = data.history.map(d => d.p);
-                const traceHistory = {{
-                    x: timeData, y: priceData,
-                    type: 'scatter', mode: 'lines', name: 'Midprice',
-                    line: {{ color: '#29b6f6', width: 2 }}
-                }};
-                const layoutPrice = {{ ...commonLayout,
-                    title: 'Midprice History',
-                    xaxis: {{ gridcolor: '#222', type: 'date' }},
-                    yaxis: {{ gridcolor: '#222', tickformat: '.1f' }}
-                }};
-                if (!initPrice) {{ Plotly.newPlot(priceDiv, [traceHistory], layoutPrice, commonConfig); initPrice = true; }}
-                else {{ Plotly.react(priceDiv, [traceHistory], layoutPrice, commonConfig); }}
             }} catch (e) {{ console.error("Fetch error:", e); }}
         }}
@@ -163,7 +186,6 @@ async def kraken_worker():
         try:
             async with websockets.connect("wss://ws.kraken.com/v2") as ws:
                 logging.info(f"🔌 Connected to Kraken ({SYMBOL_KRAKEN})")
                 await ws.send(json.dumps({
                     "method": "subscribe",
                     "params": {"channel": "book", "symbol": [SYMBOL_KRAKEN], "depth": 500}
@@ -180,7 +202,6 @@ async def kraken_worker():
                                 q, p = float(bid['qty']), float(bid['price'])
                                 if q == 0: market_state['bids'].pop(p, None)
                                 else: market_state['bids'][p] = q
                             for ask in item.get('asks', []):
                                 q, p = float(ask['qty']), float(ask['price'])
                                 if q == 0: market_state['asks'].pop(p, None)
@@ -213,26 +234,17 @@ async def handle_data(request):
     mid = market_state['current_mid']
     # --- Prepare Raw Data ---
-    # Sort Bids: High to Low (Closest to mid first)
-    raw_bids = sorted(market_state['bids'].items(), key=lambda x: -x[0])
-    # Sort Asks: Low to High (Closest to mid first)
-    raw_asks = sorted(market_state['asks'].items(), key=lambda x: x[0])
-    # Limit depth for processing speed
-    LIMIT = 300
-    raw_bids = raw_bids[:LIMIT]
-    raw_asks = raw_asks[:LIMIT]
-    # --- 1. Standard Depth Data (Price on X) ---
     b_x, b_y = [], []
     cum = 0
     for p, q in raw_bids:
         cum += q
         b_x.append(p)
         b_y.append(cum)
-    # Reverse bids for visual chart (left to right)
-    b_x.reverse()
-    b_y.reverse()
     a_x, a_y = [], []
     cum = 0
@@ -241,70 +253,69 @@ async def handle_data(request):
         a_x.append(p)
         a_y.append(cum)
-    # --- 2. Imbalance Data (Distance on X) ---
-    # Logic: Calculate absolute distance from Mid, sort by distance, then cumulate.
-    # Process Bids by Distance
-    # (Distance, Quantity)
-    dist_bids_list = []
-    for p, q in raw_bids: # Already sorted closest to mid
-        d = mid - p
-        if d >= 0: dist_bids_list.append((d, q))
     d_b_x, d_b_y = [], []
     cum_d = 0
-    for d, q in dist_bids_list:
         cum_d += q
         d_b_x.append(d)
         d_b_y.append(cum_d)
-    # Process Asks by Distance
-    dist_asks_list = []
-    for p, q in raw_asks: # Already sorted closest to mid
-        d = p - mid
-        if d >= 0: dist_asks_list.append((d, q))
     d_a_x, d_a_y = [], []
     cum_d = 0
-    for d, q in dist_asks_list:
         cum_d += q
         d_a_x.append(d)
         d_a_y.append(cum_d)
     return web.json_response({
         "mid": mid,
         "prev_mid": market_state['history'][-2]['p'] if len(market_state['history']) > 1 else mid,
-        "bids_count": len(market_state['bids']),
-        "asks_count": len(market_state['asks']),
-        # Data for Top Chart
         "depth": { "bids_x": b_x, "bids_y": b_y, "asks_x": a_x, "asks_y": a_y },
-        # Data for Middle Chart (Distance)
-        "imbalance": {
-            "dist_bids": d_b_x, "vol_bids": d_b_y,
-            "dist_asks": d_a_x, "vol_asks": d_a_y
-        },
-        # Data for Bottom Chart
         "history": market_state['history']
     })
 async def start_background(app):
-    """Correct way to start background task in aiohttp"""
     app['kraken_task'] = asyncio.create_task(kraken_worker())
 async def cleanup_background(app):
-    """Correct way to cleanup background task"""
     app['kraken_task'].cancel()
-    try:
-        await app['kraken_task']
-    except asyncio.CancelledError:
-        pass
 async def main():
     app = web.Application()
     app.router.add_get('/', handle_index)
     app.router.add_get('/data', handle_data)
-    # Register startup and cleanup handlers safely
     app.on_startup.append(start_background)
     app.on_cleanup.append(cleanup_background)
@@ -313,7 +324,7 @@ async def main():
     site = web.TCPSite(runner, '0.0.0.0', PORT)
     await site.start()
-    print(f"🚀 BTC-USD 3-Way Dashboard: http://localhost:{PORT}")
     await asyncio.Event().wait()
 if __name__ == "__main__":

 import json
 import logging
 import time
+import bisect
 from aiohttp import web
 import websockets
 <!DOCTYPE html>
 <html>
 <head>
+    <title>BTC-USD 4-Way Analysis</title>
     <script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
     <style>
         body {{ margin: 0; padding: 0; background-color: #0e0e0e; color: #ccc; font-family: sans-serif; overflow: hidden; }}
+        /* Layout Grid */
+        #container {{ display: flex; flex-direction: column; height: 100vh; width: 100vw; }}
+        /* Row 1: Depth (50%) */
+        #row-top {{ flex: 2; width: 100%; border-bottom: 1px solid #333; }}
+        /* Row 2: Split Middle (25%) */
+        #row-mid {{ flex: 1; display: flex; width: 100%; border-bottom: 1px solid #333; }}
+        #imbalance-vol {{ width: 50%; border-right: 1px solid #333; }}
+        #imbalance-ratio {{ width: 50%; }}
+        /* Row 3: History (25%) */
+        #row-bot {{ flex: 1; width: 100%; }}
+        /* Charts fill their containers */
+        .chart {{ width: 100%; height: 100%; }}
         #status {{ position: absolute; top: 10px; left: 60px; z-index: 10; font-size: 14px; background: rgba(0,0,0,0.7); padding: 5px 10px; border-radius: 4px; pointer-events: none; border: 1px solid #333; }}
         .green {{ color: #00e676; }}
 <body>
     <div id="status">Connecting...</div>
+    <div id="container">
+        <div id="row-top">
+            <div id="depth-chart" class="chart"></div>
+        </div>
+        <div id="row-mid">
+            <div id="imbalance-vol" class="chart"></div>
+            <div id="imbalance-ratio" class="chart"></div>
+        </div>
+        <div id="row-bot">
+            <div id="price-chart" class="chart"></div>
+        </div>
+    </div>
     <script>
         const depthDiv = document.getElementById('depth-chart');
+        const volDiv = document.getElementById('imbalance-vol');
+        const ratioDiv = document.getElementById('imbalance-ratio');
         const priceDiv = document.getElementById('price-chart');
         const statusDiv = document.getElementById('status');
         let initDepth = false;
+        let initVol = false;
+        let initRatio = false;
         let initPrice = false;
         const commonConfig = {{ responsive: true, displayModeBar: false }};
             paper_bgcolor: '#0e0e0e',
             plot_bgcolor: '#0e0e0e',
             font: {{ color: '#aaa' }},
+            margin: {{ t: 30, b: 30, l: 50, r: 20 }},
+            showlegend: false,
+            xaxis: {{ gridcolor: '#222' }},
+            yaxis: {{ gridcolor: '#222' }}
         }};
         async function updateCharts() {{
                     return;
                 }}
+                statusDiv.innerHTML = `Mid: <span class="${{data.mid >= data.prev_mid ? 'green' : 'red'}}">$${{data.mid.toLocaleString(undefined, {{minimumFractionDigits: 2}})}}</span> | Ratio: ${{data.ratio.last_val ? data.ratio.last_val.toFixed(2) : '-'}}`;
+                // 1. DEPTH CHART
+                if (!initDepth) {{
+                    Plotly.newPlot(depthDiv, [
+                        {{ x: data.depth.bids_x, y: data.depth.bids_y, fill: 'tozeroy', type: 'scatter', name: 'Bids', line: {{color: '#00e676'}} }},
+                        {{ x: data.depth.asks_x, y: data.depth.asks_y, fill: 'tozeroy', type: 'scatter', name: 'Asks', line: {{color: '#ff1744'}} }}
+                    ], {{ ...commonLayout, title: 'Orderbook Depth' }}, commonConfig);
+                    initDepth = true;
+                }} else {{
+                    Plotly.react(depthDiv, [
+                        {{ x: data.depth.bids_x, y: data.depth.bids_y, fill: 'tozeroy', type: 'scatter', name: 'Bids', line: {{color: '#00e676'}} }},
+                        {{ x: data.depth.asks_x, y: data.depth.asks_y, fill: 'tozeroy', type: 'scatter', name: 'Asks', line: {{color: '#ff1744'}} }}
+                    ], {{ ...commonLayout, title: 'Orderbook Depth' }}, commonConfig);
+                }}
+                // 2. IMBALANCE VOL
+                const layoutVol = {{ ...commonLayout, title: 'Liquidity (Volume vs Distance)', xaxis: {{title: 'Distance ($)', gridcolor:'#222'}} }};
+                if (!initVol) {{
+                    Plotly.newPlot(volDiv, [
+                        {{ x: data.imbalance.dist_bids, y: data.imbalance.vol_bids, type: 'scatter', name: 'Bid Vol', line: {{color: '#00e676'}} }},
+                        {{ x: data.imbalance.dist_asks, y: data.imbalance.vol_asks, type: 'scatter', name: 'Ask Vol', line: {{color: '#ff1744'}} }}
+                    ], layoutVol, commonConfig);
+                    initVol = true;
+                }} else {{
+                    Plotly.react(volDiv, [
+                        {{ x: data.imbalance.dist_bids, y: data.imbalance.vol_bids, type: 'scatter', name: 'Bid Vol', line: {{color: '#00e676'}} }},
+                        {{ x: data.imbalance.dist_asks, y: data.imbalance.vol_asks, type: 'scatter', name: 'Ask Vol', line: {{color: '#ff1744'}} }}
+                    ], layoutVol, commonConfig);
+                }}
+                // 3. IMBALANCE RATIO
+                const layoutRatio = {{ ...commonLayout,
+                    title: 'Buy/Sell Ratio (Bid/Ask)',
+                    xaxis: {{title: 'Distance ($)', gridcolor:'#222'}},
+                    shapes: [{{ type: 'line', x0: 0, x1: 1, xref: 'paper', y0: 1, y1: 1, line: {{color: '#666', width: 1, dash:'dot'}} }}]
                 }};
+                // Color the line based on if it's mostly bullish or bearish?
+                // We'll just use a neutral color or gradient. Let's use Cyan.
+                if (!initRatio) {{
+                    Plotly.newPlot(ratioDiv, [
+                        {{ x: data.ratio.x, y: data.ratio.y, type: 'scatter', name: 'Ratio', line: {{color: '#00bcd4', width:2}} }}
+                    ], layoutRatio, commonConfig);
+                    initRatio = true;
+                }} else {{
+                    Plotly.react(ratioDiv, [
+                        {{ x: data.ratio.x, y: data.ratio.y, type: 'scatter', name: 'Ratio', line: {{color: '#00bcd4', width:2}} }}
+                    ], layoutRatio, commonConfig);
+                }}
+                // 4. HISTORY
                 const timeData = data.history.map(d => new Date(d.t * 1000));
                 const priceData = data.history.map(d => d.p);
+                const layoutHist = {{ ...commonLayout, title: 'Midprice History', xaxis: {{type:'date', gridcolor:'#222'}} }};
+                if (!initPrice) {{
+                    Plotly.newPlot(priceDiv, [
+                        {{ x: timeData, y: priceData, type: 'scatter', name: 'Mid', line: {{color: '#29b6f6'}} }}
+                    ], layoutHist, commonConfig);
+                    initPrice = true;
+                }} else {{
+                    Plotly.react(priceDiv, [
+                        {{ x: timeData, y: priceData, type: 'scatter', name: 'Mid', line: {{color: '#29b6f6'}} }}
+                    ], layoutHist, commonConfig);
+                }}
             }} catch (e) {{ console.error("Fetch error:", e); }}
         }}
         try:
             async with websockets.connect("wss://ws.kraken.com/v2") as ws:
                 logging.info(f"🔌 Connected to Kraken ({SYMBOL_KRAKEN})")
                 await ws.send(json.dumps({
                     "method": "subscribe",
                     "params": {"channel": "book", "symbol": [SYMBOL_KRAKEN], "depth": 500}
                                 q, p = float(bid['qty']), float(bid['price'])
                                 if q == 0: market_state['bids'].pop(p, None)
                                 else: market_state['bids'][p] = q
                             for ask in item.get('asks', []):
                                 q, p = float(ask['qty']), float(ask['price'])
                                 if q == 0: market_state['asks'].pop(p, None)
     mid = market_state['current_mid']
     # --- Prepare Raw Data ---
+    raw_bids = sorted(market_state['bids'].items(), key=lambda x: -x[0])[:300]
+    raw_asks = sorted(market_state['asks'].items(), key=lambda x: x[0])[:300]
+    # --- 1. Depth (Price) ---
     b_x, b_y = [], []
     cum = 0
     for p, q in raw_bids:
         cum += q
         b_x.append(p)
         b_y.append(cum)
+    b_x.reverse(); b_y.reverse()
     a_x, a_y = [], []
     cum = 0
         a_x.append(p)
         a_y.append(cum)
+    # --- 2. Distance Arrays ---
+    dist_bids = [(mid - p, q) for p, q in raw_bids if mid - p >= 0]
     d_b_x, d_b_y = [], []
     cum_d = 0
+    for d, q in dist_bids:
         cum_d += q
         d_b_x.append(d)
         d_b_y.append(cum_d)
+    dist_asks = [(p - mid, q) for p, q in raw_asks if p - mid >= 0]
     d_a_x, d_a_y = [], []
     cum_d = 0
+    for d, q in dist_asks:
         cum_d += q
         d_a_x.append(d)
         d_a_y.append(cum_d)
+    # --- 3. Ratio Calculation (Interp) ---
+    # We need a common distance grid to compute Ratio = B_vol / A_vol
+    r_x, r_y = [], []
+    if d_b_x and d_a_x:
+        max_dist = min(d_b_x[-1], d_a_x[-1])
+        # Generate 100 steps
+        step_size = max_dist / 100
+        steps = [i * step_size for i in range(1, 101)]
+        for s in steps:
+            # Find B vol at distance s
+            idx_b = bisect.bisect_right(d_b_x, s)
+            vol_b = d_b_y[idx_b-1] if idx_b > 0 else 0
+            # Find A vol at distance s
+            idx_a = bisect.bisect_right(d_a_x, s)
+            vol_a = d_a_y[idx_a-1] if idx_a > 0 else 0
+            if vol_a > 0:
+                ratio = vol_b / vol_a
+                # Cap extreme ratios for display sanity
+                if ratio > 5: ratio = 5
+                r_x.append(s)
+                r_y.append(ratio)
     return web.json_response({
         "mid": mid,
         "prev_mid": market_state['history'][-2]['p'] if len(market_state['history']) > 1 else mid,
         "depth": { "bids_x": b_x, "bids_y": b_y, "asks_x": a_x, "asks_y": a_y },
+        "imbalance": { "dist_bids": d_b_x, "vol_bids": d_b_y, "dist_asks": d_a_x, "vol_asks": d_a_y },
+        "ratio": { "x": r_x, "y": r_y, "last_val": r_y[-1] if r_y else 0 },
         "history": market_state['history']
     })
 async def start_background(app):
     app['kraken_task'] = asyncio.create_task(kraken_worker())
 async def cleanup_background(app):
     app['kraken_task'].cancel()
+    try: await app['kraken_task']
+    except asyncio.CancelledError: pass
 async def main():
     app = web.Application()
     app.router.add_get('/', handle_index)
     app.router.add_get('/data', handle_data)
     app.on_startup.append(start_background)
     app.on_cleanup.append(cleanup_background)
     site = web.TCPSite(runner, '0.0.0.0', PORT)
     await site.start()
+    print(f"🚀 BTC-USD 4-Way Dashboard: http://localhost:{PORT}")
     await asyncio.Event().wait()
 if __name__ == "__main__":