Spaces:

Alvin3y1
/

test

Sleeping

App Files Files Community

Alvin3y1 commited on 14 days ago

Commit

5a89d96

verified ·

1 Parent(s): c955262

Update app.py

Browse files

Files changed (1) hide show

app.py +141 -97

app.py CHANGED Viewed

@@ -8,7 +8,8 @@ import websockets
 # --- Configuration ---
 SYMBOL_KRAKEN = "BTC/USD"
 PORT = 7860
-HISTORY_LENGTH = 300  # Number of data points to keep for the price graph
 # --- Logging ---
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
@@ -17,41 +18,46 @@ logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
 market_state = {
     "bids": {},
     "asks": {},
-    "history": [], # List of {'t': timestamp, 'p': price}
     "current_mid": 0.0,
     "ready": False
 }
-# --- HTML Frontend (Plotly.js) ---
 HTML_PAGE = f"""
 <!DOCTYPE html>
 <html>
 <head>
-    <title>BTC-USD Advanced View</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: Depth Chart on top, Price Chart on bottom */
-        #depth-chart {{ width: 100vw; height: 65vh; }}
-        #price-chart {{ width: 100vw; height: 35vh; border-top: 1px solid #333; }}
-        #status {{ position: absolute; top: 10px; left: 60px; z-index: 10; font-size: 14px; background: rgba(0,0,0,0.6); padding: 5px 10px; border-radius: 4px; pointer-events: none;}}
         .green {{ color: #00e676; }}
         .red {{ color: #ff1744; }}
     </style>
 </head>
 <body>
     <div id="status">Connecting...</div>
     <div id="depth-chart"></div>
     <div id="price-chart"></div>
     <script>
         const depthDiv = document.getElementById('depth-chart');
         const priceDiv = document.getElementById('price-chart');
         const statusDiv = document.getElementById('status');
         let initDepth = false;
         let initPrice = false;
         async function updateCharts() {{
@@ -64,8 +70,17 @@ HTML_PAGE = f"""
                     return;
                 }}
-                // --- Update Status Header ---
-                statusDiv.innerHTML = `Midprice: <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 ---
                 const traceBids = {{
@@ -89,19 +104,16 @@ HTML_PAGE = f"""
                 }};
                 const layoutDepth = {{
-                    title: '',
                     autosize: true,
                     paper_bgcolor: '#0e0e0e',
                     plot_bgcolor: '#0e0e0e',
                     font: {{ color: '#aaa' }},
                     showlegend: false,
                     margin: {{ t: 30, b: 30, l: 50, r: 20 }},
-                    xaxis: {{ title: 'Price Level', gridcolor: '#222' }},
-                    yaxis: {{ title: 'Volume', gridcolor: '#222' }}
                 }};
-                const config = {{ responsive: true, displayModeBar: false }};
                 if (!initDepth) {{
                     Plotly.newPlot(depthDiv, [traceBids, traceAsks], layoutDepth, config);
                     initDepth = true;
@@ -109,8 +121,53 @@ HTML_PAGE = f"""
                     Plotly.react(depthDiv, [traceBids, traceAsks], layoutDepth, config);
                 }}
-                // --- 2. PRICE HISTORY CHART ---
-                // Extract timestamps and prices
                 const timeData = data.history.map(d => new Date(d.t * 1000));
                 const priceData = data.history.map(d => d.p);
@@ -124,15 +181,13 @@ HTML_PAGE = f"""
                 }};
                 const layoutPrice = {{
-                    title: '',
                     autosize: true,
                     paper_bgcolor: '#0e0e0e',
                     plot_bgcolor: '#0e0e0e',
-                    font: {{ color: '#aaa' }},
-                    showlegend: false,
                     margin: {{ t: 10, b: 30, l: 50, r: 20 }},
                     xaxis: {{ gridcolor: '#222', type: 'date' }},
-                    yaxis: {{ gridcolor: '#222', tickformat: '.1f', title: 'Mid Price' }}
                 }};
                 if (!initPrice) {{
@@ -143,19 +198,17 @@ HTML_PAGE = f"""
                 }}
             }} catch (e) {{
-                console.error("Fetch error:", e);
             }}
         }}
-        // Poll every 250ms for smoother animation
-        setInterval(updateCharts, 250);
     </script>
 </body>
 </html>
 """
 async def kraken_worker():
-    """Connects to Kraken WS and maintains orderbook + price history."""
     global market_state
     while True:
@@ -163,42 +216,30 @@ async def kraken_worker():
             async with websockets.connect("wss://ws.kraken.com/v2") as ws:
                 logging.info(f"🔌 Connected to Kraken ({SYMBOL_KRAKEN})")
-                # Subscribe to book only (we can derive price from book)
-                msg = {
                     "method": "subscribe",
-                    "params": {
-                        "channel": "book",
-                        "symbol": [SYMBOL_KRAKEN],
-                        "depth": 500
-                    }
-                }
-                await ws.send(json.dumps(msg))
                 async for message in ws:
                     payload = json.loads(message)
                     channel = payload.get("channel")
                     data_entries = payload.get("data", [])
-                    if payload.get("type") == "error":
-                        logging.error(f"Kraken Error: {payload}")
-                        continue
                     if channel == "book":
-                        # Update Orderbook
                         for item in data_entries:
                             for bid in item.get('bids', []):
-                                qty = float(bid['qty'])
-                                price = float(bid['price'])
-                                if qty == 0: market_state['bids'].pop(price, None)
-                                else: market_state['bids'][price] = qty
                             for ask in item.get('asks', []):
-                                qty = float(ask['qty'])
-                                price = float(ask['price'])
-                                if qty == 0: market_state['asks'].pop(price, None)
-                                else: market_state['asks'][price] = qty
-                        # Calculate Midprice
                         if market_state['bids'] and market_state['asks']:
                             best_bid = max(market_state['bids'].keys())
                             best_ask = min(market_state['asks'].keys())
@@ -206,17 +247,14 @@ async def kraken_worker():
                             market_state['current_mid'] = mid
                             market_state['ready'] = True
-                            # Update History (Throttled slightly to avoid duplicate timestamps)
                             now = time.time()
-                            # Only add if history is empty or last point was > 0.1s ago
-                            if not market_state['history'] or (now - market_state['history'][-1]['t'] > 0.1):
                                 market_state['history'].append({'t': now, 'p': mid})
-                                # Trim history
                                 if len(market_state['history']) > HISTORY_LENGTH:
                                     market_state['history'].pop(0)
         except Exception as e:
-            logging.warning(f"⚠️ Kraken Connection lost: {e}. Reconnecting in 3s...")
             await asyncio.sleep(3)
 async def handle_index(request):
@@ -226,75 +264,81 @@ async def handle_data(request):
     if not market_state['ready']:
         return web.json_response({"error": "Initializing..."})
-    # Prepare Depth Data
-    # 1. Sort
-    sorted_bids = sorted(market_state['bids'].items(), key=lambda x: -x[0])
-    sorted_asks = sorted(market_state['asks'].items(), key=lambda x: x[0])
-    # 2. Slice (Optimization)
-    DEPTH_limit = 300
-    sorted_bids = sorted_bids[:DEPTH_limit]
-    sorted_asks = sorted_asks[:DEPTH_limit]
-    # 3. Cumulative Sums
-    b_x, b_y = [], []
     cum = 0
-    for p, q in sorted_bids:
         cum += q
-        b_x.append(p)
-        b_y.append(cum)
-    # Reverse bids for chart visualization (center outwards)
-    b_x.reverse()
-    b_y.reverse()
-    a_x, a_y = [], []
     cum = 0
-    for p, q in sorted_asks:
         cum += q
-        a_x.append(p)
-        a_y.append(cum)
     return web.json_response({
         "mid": market_state['current_mid'],
         "prev_mid": market_state['history'][-2]['p'] if len(market_state['history']) > 1 else market_state['current_mid'],
-        "bids_count": len(market_state['bids']),
-        "asks_count": len(market_state['asks']),
         "depth": {
-            "bids_x": b_x, "bids_y": b_y,
-            "asks_x": a_x, "asks_y": a_y
         },
         "history": market_state['history']
     })
-async def start_background_tasks(app):
-    app['kraken_task'] = asyncio.create_task(kraken_worker())
-async def cleanup_background_tasks(app):
-    app['kraken_task'].cancel()
-    await app['kraken_task']
 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_tasks)
-    app.on_cleanup.append(cleanup_background_tasks)
     runner = web.AppRunner(app)
     await runner.setup()
     site = web.TCPSite(runner, '0.0.0.0', PORT)
     await site.start()
-    print("="*50)
-    print(f"🚀 BTC-USD Dashboard Running")
-    print(f"👉 Open: http://localhost:{PORT}")
-    print("="*50)
     await asyncio.Event().wait()
 if __name__ == "__main__":
-    try:
-        asyncio.run(main())
-    except KeyboardInterrupt:
-        pass

 # --- Configuration ---
 SYMBOL_KRAKEN = "BTC/USD"
 PORT = 7860
+HISTORY_LENGTH = 300
+DEPTH_LIMIT = 400  # How many order book levels to process
 # --- Logging ---
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
 market_state = {
     "bids": {},
     "asks": {},
+    "history": [],
     "current_mid": 0.0,
     "ready": False
 }
+# --- HTML Frontend ---
 HTML_PAGE = f"""
 <!DOCTYPE html>
 <html>
 <head>
+    <title>BTC-USD Tri-View</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% Ratio, 25% Price */
+        #depth-chart {{ width: 100vw; height: 50vh; }}
+        #ratio-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; }}
         .red {{ color: #ff1744; }}
+        .blue {{ color: #29b6f6; }}
     </style>
 </head>
 <body>
     <div id="status">Connecting...</div>
     <div id="depth-chart"></div>
+    <div id="ratio-chart"></div>
     <div id="price-chart"></div>
     <script>
         const depthDiv = document.getElementById('depth-chart');
+        const ratioDiv = document.getElementById('ratio-chart');
         const priceDiv = document.getElementById('price-chart');
         const statusDiv = document.getElementById('status');
         let initDepth = false;
+        let initRatio = false;
         let initPrice = false;
         async function updateCharts() {{
                     return;
                 }}
+                // --- Header ---
+                // Calculate current imbalance ratio (end of the curve)
+                const currentRatio = data.ratios[data.ratios.length -1] || 1;
+                const ratioColor = currentRatio > 1 ? 'red' : 'green';
+                statusDiv.innerHTML = `
+                    Mid: <span class="${{data.mid >= data.prev_mid ? 'green' : 'red'}}">$${{data.mid.toLocaleString(undefined, {{minimumFractionDigits: 0}})}}</span> |
+                    Imbalance: <span class="${{ratioColor}}">${{currentRatio.toFixed(2)}}x</span>
+                `;
+                const config = {{ responsive: true, displayModeBar: false }};
                 // --- 1. DEPTH CHART ---
                 const traceBids = {{
                 }};
                 const layoutDepth = {{
                     autosize: true,
                     paper_bgcolor: '#0e0e0e',
                     plot_bgcolor: '#0e0e0e',
                     font: {{ color: '#aaa' }},
                     showlegend: false,
                     margin: {{ t: 30, b: 30, l: 50, r: 20 }},
+                    xaxis: {{ title: '', gridcolor: '#222' }},
+                    yaxis: {{ title: 'Cum Vol', gridcolor: '#222' }}
                 }};
                 if (!initDepth) {{
                     Plotly.newPlot(depthDiv, [traceBids, traceAsks], layoutDepth, config);
                     initDepth = true;
                     Plotly.react(depthDiv, [traceBids, traceAsks], layoutDepth, config);
                 }}
+                // --- 2. RATIO CHART (Imbalance) ---
+                // X axis is simply the "Depth Step" (1 to 300)
+                const steps = Array.from({{length: data.ratios.length}}, (_, i) => i + 1);
+                const traceRatio = {{
+                    x: steps,
+                    y: data.ratios,
+                    type: 'scatter',
+                    mode: 'lines',
+                    name: 'Ask/Bid Ratio',
+                    line: {{ color: '#fb8c00', width: 2 }},
+                    fill: 'tozeroy'
+                }};
+                const layoutRatio = {{
+                    title: '',
+                    autosize: true,
+                    paper_bgcolor: '#0e0e0e',
+                    plot_bgcolor: '#0e0e0e',
+                    font: {{ color: '#aaa', size: 10 }},
+                    margin: {{ t: 10, b: 20, l: 50, r: 20 }},
+                    xaxis: {{ title: 'Order Depth (Steps away from price)', gridcolor: '#222' }},
+                    yaxis: {{
+                        title: 'Ask/Bid Ratio',
+                        gridcolor: '#222',
+                        zeroline: true,
+                        zerolinecolor: '#fff',
+                        zerolinewidth: 1
+                    }},
+                    # Draw a line at 1.0
+                    shapes: [{{
+                        type: 'line',
+                        x0: 0, x1: data.ratios.length,
+                        y0: 1, y1: 1,
+                        line: {{ color: 'white', width: 1, dash: 'dot' }}
+                    }}]
+                }};
+                if (!initRatio) {{
+                    Plotly.newPlot(ratioDiv, [traceRatio], layoutRatio, config);
+                    initRatio = true;
+                }} else {{
+                    layoutRatio.shapes[0].x1 = data.ratios.length; // Update line length
+                    Plotly.react(ratioDiv, [traceRatio], layoutRatio, config);
+                }}
+                // --- 3. PRICE CHART ---
                 const timeData = data.history.map(d => new Date(d.t * 1000));
                 const priceData = data.history.map(d => d.p);
                 }};
                 const layoutPrice = {{
                     autosize: true,
                     paper_bgcolor: '#0e0e0e',
                     plot_bgcolor: '#0e0e0e',
+                    font: {{ color: '#aaa', size: 10 }},
                     margin: {{ t: 10, b: 30, l: 50, r: 20 }},
                     xaxis: {{ gridcolor: '#222', type: 'date' }},
+                    yaxis: {{ gridcolor: '#222', tickformat: '.0f', title: 'Price' }}
                 }};
                 if (!initPrice) {{
                 }}
             }} catch (e) {{
+                console.error(e);
             }}
         }}
+        setInterval(updateCharts, 500);
     </script>
 </body>
 </html>
 """
 async def kraken_worker():
     global market_state
     while True:
             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}
+                }))
                 async for message in ws:
                     payload = json.loads(message)
                     channel = payload.get("channel")
                     data_entries = payload.get("data", [])
+                    if payload.get("type") == "error": continue
                     if channel == "book":
                         for item in data_entries:
                             for bid in item.get('bids', []):
+                                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)
+                                else: market_state['asks'][p] = q
                         if market_state['bids'] and market_state['asks']:
                             best_bid = max(market_state['bids'].keys())
                             best_ask = min(market_state['asks'].keys())
                             market_state['current_mid'] = mid
                             market_state['ready'] = True
                             now = time.time()
+                            if not market_state['history'] or (now - market_state['history'][-1]['t'] > 0.5):
                                 market_state['history'].append({'t': now, 'p': mid})
                                 if len(market_state['history']) > HISTORY_LENGTH:
                                     market_state['history'].pop(0)
         except Exception as e:
+            logging.warning(f"⚠️ Reconnecting... {e}")
             await asyncio.sleep(3)
 async def handle_index(request):
     if not market_state['ready']:
         return web.json_response({"error": "Initializing..."})
+    # 1. Sort Data
+    sorted_bids = sorted(market_state['bids'].items(), key=lambda x: -x[0]) # Descending (Best Bid first)
+    sorted_asks = sorted(market_state['asks'].items(), key=lambda x: x[0])  # Ascending (Best Ask first)
+    # 2. Slice to limit
+    sorted_bids = sorted_bids[:DEPTH_LIMIT]
+    sorted_asks = sorted_asks[:DEPTH_LIMIT]
+    # 3. Calculate Cumulative Volumes & Ratios
+    # We must calculate ratios BEFORE reversing the bids for the visual chart
+    b_y_raw = [] # Cumulative volume for bids (Best -> Worst)
+    a_y_raw = [] # Cumulative volume for asks (Best -> Worst)
     cum = 0
+    for _, q in sorted_bids:
         cum += q
+        b_y_raw.append(cum)
     cum = 0
+    for _, q in sorted_asks:
         cum += q
+        a_y_raw.append(cum)
+    # Calculate Ratio: Cumulative Ask Vol / Cumulative Bid Vol
+    # Logic: Index 0 is the "spread", Index 100 is "deep in the book"
+    ratios = []
+    calc_len = min(len(b_y_raw), len(a_y_raw))
+    for i in range(calc_len):
+        bid_vol = b_y_raw[i]
+        ask_vol = a_y_raw[i]
+        if bid_vol == 0: ratio = 1 # Prevent Div/0
+        else: ratio = ask_vol / bid_vol
+        ratios.append(ratio)
+    # 4. Prepare Visual Arrays for Depth Chart
+    # For the depth chart, Bids need to be reversed (Low -> High Price) so they connect to Asks in the middle
+    b_x_visual = [p for p, q in sorted_bids]
+    b_y_visual = b_y_raw[:] # Copy
+    # Reverse for Plotly "Mountain" effect
+    b_x_visual.reverse()
+    b_y_visual.reverse()
+    a_x_visual = [p for p, q in sorted_asks]
+    a_y_visual = a_y_raw # Asks are already Best -> Worst (Low -> High Price), which is correct for Right side of chart
     return web.json_response({
         "mid": market_state['current_mid'],
         "prev_mid": market_state['history'][-2]['p'] if len(market_state['history']) > 1 else market_state['current_mid'],
         "depth": {
+            "bids_x": b_x_visual, "bids_y": b_y_visual,
+            "asks_x": a_x_visual, "asks_y": a_y_visual
         },
+        "ratios": ratios,
         "history": market_state['history']
     })
 async def main():
     app = web.Application()
     app.router.add_get('/', handle_index)
     app.router.add_get('/data', handle_data)
+    app.on_startup.append(lambda a: a.setdefault('task', asyncio.create_task(kraken_worker())))
     runner = web.AppRunner(app)
     await runner.setup()
     site = web.TCPSite(runner, '0.0.0.0', PORT)
     await site.start()
+    print(f"🚀 BTC-USD Tri-View Running at http://localhost:{PORT}")
     await asyncio.Event().wait()
 if __name__ == "__main__":
+    try: asyncio.run(main())
+    except KeyboardInterrupt: pass