Spaces:

Alvin3y1
/

test

Sleeping

App Files Files Community

Alvin3y1 commited on 13 days ago

Commit

c955262

verified ·

1 Parent(s): a5396a6

Update app.py

Browse files

Files changed (1) hide show

app.py +117 -96

app.py CHANGED Viewed

@@ -6,20 +6,19 @@ from aiohttp import web
 import websockets
 # --- Configuration ---
-SYMBOL_DISPLAY = "BTC-USD"
 SYMBOL_KRAKEN = "BTC/USD"
 PORT = 7860
 # --- Logging ---
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
 # --- In-Memory State ---
-# We store the orderbook in dictionaries: price -> quantity
-# This allows O(1) updates when Kraken sends changes.
 market_state = {
     "bids": {},
     "asks": {},
-    "price": 0.0,
     "ready": False
 }
@@ -28,26 +27,34 @@ HTML_PAGE = f"""
 <!DOCTYPE html>
 <html>
 <head>
-    <title>BTC-USD Depth Chart</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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }}
-        #chart {{ width: 100vw; height: 100vh; }}
-        #status {{ position: absolute; top: 10px; left: 60px; z-index: 10; font-size: 14px; background: rgba(0,0,0,0.5); padding: 5px; border-radius: 4px; pointer-events: none;}}
         .green {{ color: #00e676; }}
         .red {{ color: #ff1744; }}
     </style>
 </head>
 <body>
     <div id="status">Connecting...</div>
-    <div id="chart"></div>
     <script>
-        const chartDiv = document.getElementById('chart');
         const statusDiv = document.getElementById('status');
-        let initialized = false;
-        async function updateChart() {{
             try {{
                 const res = await fetch('/data');
                 const data = await res.json();
@@ -57,11 +64,13 @@ HTML_PAGE = f"""
                     return;
                 }}
-                statusDiv.innerHTML = `Price: <span class="${{data.price >= data.prev_price ? 'green' : 'red'}}">$${{data.price.toLocaleString()}}</span> | Bids: ${{data.bids_count}} | Asks: ${{data.asks_count}}`;
                 const traceBids = {{
-                    x: data.bids.x,
-                    y: data.bids.y,
                     fill: 'tozeroy',
                     type: 'scatter',
                     mode: 'lines',
@@ -70,8 +79,8 @@ HTML_PAGE = f"""
                 }};
                 const traceAsks = {{
-                    x: data.asks.x,
-                    y: data.asks.y,
                     fill: 'tozeroy',
                     type: 'scatter',
                     mode: 'lines',
@@ -79,50 +88,74 @@ HTML_PAGE = f"""
                     line: {{color: '#ff1744', width: 2}}
                 }};
-                const layout = {{
-                    title: '<b>BTC/USD Depth</b>',
                     paper_bgcolor: '#0e0e0e',
                     plot_bgcolor: '#0e0e0e',
                     font: {{ color: '#aaa' }},
                     showlegend: false,
-                    xaxis: {{
-                        title: 'Price (USD)',
-                        gridcolor: '#333',
-                        tickformat: '.0f'
-                    }},
-                    yaxis: {{
-                        title: 'Volume (BTC)',
-                        gridcolor: '#333'
-                    }},
-                    margin: {{ t: 40, b: 40, l: 50, r: 20 }},
-                    hovermode: 'x unified'
                 }};
                 const config = {{ responsive: true, displayModeBar: false }};
-                if (!initialized) {{
-                    Plotly.newPlot(chartDiv, [traceBids, traceAsks], layout, config);
-                    initialized = true;
                 }} else {{
-                    Plotly.react(chartDiv, [traceBids, traceAsks], layout, config);
                 }}
             }} catch (e) {{
                 console.error("Fetch error:", e);
-                statusDiv.innerText = "Connection lost. Retrying...";
             }}
         }}
-        // Poll every 500ms
-        setInterval(updateChart, 500);
-        updateChart();
     </script>
 </body>
 </html>
 """
 async def kraken_worker():
-    """Connects to Kraken WS and maintains the orderbook in memory."""
     global market_state
     while True:
@@ -130,7 +163,7 @@ async def kraken_worker():
             async with websockets.connect("wss://ws.kraken.com/v2") as ws:
                 logging.info(f"🔌 Connected to Kraken ({SYMBOL_KRAKEN})")
-                # Subscribe
                 msg = {
                     "method": "subscribe",
                     "params": {
@@ -140,16 +173,6 @@ async def kraken_worker():
                     }
                 }
                 await ws.send(json.dumps(msg))
-                # Also subscribe to ticker for the last traded price
-                msg_ticker = {
-                    "method": "subscribe",
-                    "params": {
-                        "channel": "ticker",
-                        "symbol": [SYMBOL_KRAKEN]
-                    }
-                }
-                await ws.send(json.dumps(msg_ticker))
                 async for message in ws:
                     payload = json.loads(message)
@@ -160,75 +183,70 @@ async def kraken_worker():
                         logging.error(f"Kraken Error: {payload}")
                         continue
-                    if channel == "ticker":
-                        # Update Last Price
-                        for item in data_entries:
-                            if 'last' in item:
-                                market_state['price'] = float(item['last'])
-                    elif channel == "book":
                         # Update Orderbook
                         for item in data_entries:
-                            # Update Bids
                             for bid in item.get('bids', []):
-                                price = float(bid['price'])
                                 qty = float(bid['qty'])
-                                if qty == 0:
-                                    market_state['bids'].pop(price, None)
-                                else:
-                                    market_state['bids'][price] = qty
-                            # Update Asks
                             for ask in item.get('asks', []):
-                                price = float(ask['price'])
                                 qty = float(ask['qty'])
-                                if qty == 0:
-                                    market_state['asks'].pop(price, None)
-                                else:
-                                    market_state['asks'][price] = qty
-                        market_state['ready'] = True
         except Exception as e:
             logging.warning(f"⚠️ Kraken Connection lost: {e}. Reconnecting in 3s...")
             await asyncio.sleep(3)
 async def handle_index(request):
-    """Serve the HTML page."""
     return web.Response(text=HTML_PAGE, content_type='text/html')
 async def handle_data(request):
-    """Return the calculated cumulative volume arrays for Plotly."""
     if not market_state['ready']:
         return web.json_response({"error": "Initializing..."})
-    # Prepare data snapshots (Thread-safe enough for this use case due to GIL/asyncio)
-    bids = market_state['bids'].copy()
-    asks = market_state['asks'].copy()
-    current_price = market_state['price']
-    # Sort Bids: High -> Low
-    sorted_bids = sorted(bids.items(), key=lambda x: -x[0])
-    # Sort Asks: Low -> High
-    sorted_asks = sorted(asks.items(), key=lambda x: x[0])
-    # Slice to keep chart performant (e.g., closest 300 orders)
-    DEPTH = 400
-    sorted_bids = sorted_bids[:DEPTH]
-    sorted_asks = sorted_asks[:DEPTH]
-    # Calculate Cumulative Volume for Bids
     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 the chart line to draw outwards from center
     b_x.reverse()
     b_y.reverse()
-    # Calculate Cumulative Volume for Asks
     a_x, a_y = [], []
     cum = 0
     for p, q in sorted_asks:
@@ -237,11 +255,15 @@ async def handle_data(request):
         a_y.append(cum)
     return web.json_response({
-        "price": current_price,
-        "bids": {"x": b_x, "y": b_y},
-        "asks": {"x": a_x, "y": a_y},
-        "bids_count": len(bids),
-        "asks_count": len(asks)
     })
 async def start_background_tasks(app):
@@ -265,15 +287,14 @@ async def main():
     await site.start()
     print("="*50)
-    print(f"🚀 BTC-USD Orderbook Chart Running")
     print(f"👉 Open: http://localhost:{PORT}")
     print("="*50)
-    # Keep alive
     await asyncio.Event().wait()
 if __name__ == "__main__":
     try:
         asyncio.run(main())
     except KeyboardInterrupt:
-        print("\nStopping server...")

 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')
 # --- In-Memory State ---
 market_state = {
     "bids": {},
     "asks": {},
+    "history": [], # List of {'t': timestamp, 'p': price}
+    "current_mid": 0.0,
     "ready": False
 }
 <!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() {{
             try {{
                 const res = await fetch('/data');
                 const data = await res.json();
                     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 = {{
+                    x: data.depth.bids_x,
+                    y: data.depth.bids_y,
                     fill: 'tozeroy',
                     type: 'scatter',
                     mode: 'lines',
                 }};
                 const traceAsks = {{
+                    x: data.depth.asks_x,
+                    y: data.depth.asks_y,
                     fill: 'tozeroy',
                     type: 'scatter',
                     mode: 'lines',
                     line: {{color: '#ff1744', width: 2}}
                 }};
+                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;
                 }} else {{
+                    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);
+                const traceHistory = {{
+                    x: timeData,
+                    y: priceData,
+                    type: 'scatter',
+                    mode: 'lines',
+                    name: 'Midprice',
+                    line: {{ color: '#29b6f6', width: 2 }}
+                }};
+                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) {{
+                    Plotly.newPlot(priceDiv, [traceHistory], layoutPrice, config);
+                    initPrice = true;
+                }} else {{
+                    Plotly.react(priceDiv, [traceHistory], layoutPrice, config);
                 }}
             }} 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:
             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": {
                     }
                 }
                 await ws.send(json.dumps(msg))
                 async for message in ws:
                     payload = json.loads(message)
                         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())
+                            mid = (best_bid + best_ask) / 2
+                            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):
     return web.Response(text=HTML_PAGE, content_type='text/html')
 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:
         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):
     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