Spaces:

Alvin3y1
/

test

Paused

App Files Files Community

Alvin3y1 commited on Dec 8, 2025

Commit

a6d8311

verified ·

1 Parent(s): 13ec341

Update app.py

Browse files

Files changed (1) hide show

app.py +165 -158

app.py CHANGED Viewed

@@ -6,11 +6,9 @@ from aiohttp import web
 import websockets
 # --- Configuration ---
-# Kraken V1 requires 'XBT/USD', not 'BTC/USD'
-SYMBOL_KRAKEN = "XBT/USD"
 PORT = 7860
-HISTORY_LENGTH = 300
-DEPTH_LIMIT = 500
 # --- Logging ---
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
@@ -24,38 +22,51 @@ market_state = {
     "ready": False
 }
-# --- HTML Frontend ---
 HTML_PAGE = f"""
 <!DOCTYPE html>
 <html>
 <head>
-    <title>BTC-USD Live Analytics</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; }}
         #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.8); padding: 5px 10px; border-radius: 4px; pointer-events: none; border: 1px solid #444; }}
         .green {{ color: #00e676; }}
         .red {{ color: #ff1744; }}
     </style>
 </head>
 <body>
-    <div id="status">Waiting for stream...</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, initRatio = false, initPrice = false;
         async function updateCharts() {{
             try {{
@@ -63,24 +74,16 @@ HTML_PAGE = f"""
                 const data = await res.json();
                 if (data.error) {{
-                    statusDiv.innerHTML = "Initializing Kraken Stream...";
                     return;
                 }}
-                // --- Header Stats ---
-                const currentRatio = data.ratios[data.ratios.length -1] || 1;
-                const ratioColor = currentRatio > 1 ? 'red' : 'green';
-                const ratioText = currentRatio > 1 ? 'Bearish (Sell Wall)' : 'Bullish (Buy Support)';
-                statusDiv.innerHTML = `
-                    <b>BTC/USD</b> |
-                    Price: <span class="${{data.mid >= data.prev_mid ? 'green' : 'red'}}">$${{data.mid.toLocaleString(undefined, {{minimumFractionDigits: 1}})}}</span> |
-                    Imbalance: <span class="${{ratioColor}}">${{currentRatio.toFixed(2)}}x (${{ratioText}})</span>
-                `;
-                const config = {{ responsive: true, displayModeBar: false }};
-                // --- 1. DEPTH CHART ---
                 const traceBids = {{
                     x: data.depth.bids_x, y: data.depth.bids_y,
                     fill: 'tozeroy', type: 'scatter', mode: 'lines',
@@ -91,114 +94,98 @@ HTML_PAGE = f"""
                     fill: 'tozeroy', type: 'scatter', mode: 'lines',
                     name: 'Asks', line: {{color: '#ff1744', width: 2}}
                 }};
-                const layoutDepth = {{
-                    autosize: true, paper_bgcolor: '#0e0e0e', plot_bgcolor: '#0e0e0e',
-                    font: {{ color: '#aaa' }}, showlegend: false,
-                    margin: {{ t: 30, b: 20, l: 50, r: 20 }},
-                    xaxis: {{ showgrid: true, gridcolor: '#222' }},
-                    yaxis: {{ title: 'Cumulative Vol', gridcolor: '#222' }}
                 }};
-                if (!initDepth) {{ Plotly.newPlot(depthDiv, [traceBids, traceAsks], layoutDepth, config); initDepth = true; }}
-                else {{ Plotly.react(depthDiv, [traceBids, traceAsks], layoutDepth, config); }}
-                // --- 2. RATIO CHART ---
-                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 = {{
-                    autosize: true, paper_bgcolor: '#0e0e0e', plot_bgcolor: '#0e0e0e',
-                    font: {{ color: '#aaa', size: 10 }},
-                    margin: {{ t: 10, b: 20, l: 50, r: 20 }},
-                    xaxis: {{ title: 'Depth Steps', gridcolor: '#222' }},
-                    yaxis: {{ title: 'Imbalance Ratio', gridcolor: '#222' }},
-                    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; Plotly.react(ratioDiv, [traceRatio], layoutRatio, config); }}
-                // --- 3. PRICE CHART ---
                 const traceHistory = {{
-                    x: data.history.map(d => new Date(d.t * 1000)),
-                    y: data.history.map(d => d.p),
-                    type: 'scatter', mode: 'lines',
-                    name: 'Price', line: {{ color: '#29b6f6', width: 2 }}
                 }};
-                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: '.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(e); }}
         }}
-        setInterval(updateCharts, 1000);
     </script>
 </body>
 </html>
 """
 async def kraken_worker():
-    """Connects to Standard Kraken V1 API (More Reliable)"""
     global market_state
     while True:
         try:
-            # Note: Using V1 Endpoint
-            async with websockets.connect("wss://ws.kraken.com") as ws:
-                logging.info(f"🔌 Connected to Kraken V1 ({SYMBOL_KRAKEN})")
-                # V1 Subscribe Message
-                sub_msg = {
-                    "event": "subscribe",
-                    "pair": [SYMBOL_KRAKEN],
-                    "subscription": {"name": "book", "depth": 1000}
-                }
-                await ws.send(json.dumps(sub_msg))
                 async for message in ws:
-                    data = json.loads(message)
-                    # V1 sends lists for data, dicts for events.
-                    # [CHANNEL_ID, DATA_DICT, CHANNEL_NAME, PAIR]
-                    if isinstance(data, list):
-                        payload = data[1]
-                        # Snapshot or Update?
-                        # Snapshot has keys "bs" (bids snapshot) and "as" (asks snapshot)
-                        if "bs" in payload or "as" in payload:
-                            # logging.info("Received Snapshot")
-                            for bid in payload.get("bs", []):
-                                price, qty = float(bid[0]), float(bid[1])
-                                market_state['bids'][price] = qty
-                            for ask in payload.get("as", []):
-                                price, qty = float(ask[0]), float(ask[1])
-                                market_state['asks'][price] = qty
-                        # Updates have keys "b" (bids) or "a" (asks)
-                        else:
-                            for bid in payload.get("b", []):
-                                price, qty = float(bid[0]), float(bid[1])
-                                if qty == 0: market_state['bids'].pop(price, None)
-                                else: market_state['bids'][price] = qty
-                            for ask in payload.get("a", []):
-                                price, qty = float(ask[0]), float(ask[1])
-                                if qty == 0: market_state['asks'].pop(price, None)
-                                else: market_state['asks'][price] = qty
-                        # --- Calculation Trigger ---
                         if market_state['bids'] and market_state['asks']:
                             best_bid = max(market_state['bids'].keys())
                             best_ask = min(market_state['asks'].keys())
@@ -207,21 +194,14 @@ async def kraken_worker():
                             market_state['ready'] = True
                             now = time.time()
-                            # Throttle history update to ~200ms
-                            if not market_state['history'] or (now - market_state['history'][-1]['t'] > 0.2):
                                 market_state['history'].append({'t': now, 'p': mid})
                                 if len(market_state['history']) > HISTORY_LENGTH:
                                     market_state['history'].pop(0)
-                    elif isinstance(data, dict):
-                        if data.get("event") == "heartbeat":
-                            continue
-                        if data.get("event") == "systemStatus":
-                            logging.info(f"System Status: {data.get('status')}")
         except Exception as e:
-            logging.warning(f"⚠️ Connection error: {e}. Retrying in 5s...")
-            await asyncio.sleep(5)
 async def handle_index(request):
     return web.Response(text=HTML_PAGE, content_type='text/html')
@@ -230,53 +210,80 @@ async def handle_data(request):
     if not market_state['ready']:
         return web.json_response({"error": "Initializing..."})
-    # 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])
-    # Slice
-    sorted_bids = sorted_bids[:DEPTH_LIMIT]
-    sorted_asks = sorted_asks[:DEPTH_LIMIT]
-    # Cumulative Calc
-    b_y_raw = []
     cum = 0
-    for _, q in sorted_bids:
         cum += q
-        b_y_raw.append(cum)
-    a_y_raw = []
     cum = 0
-    for _, q in sorted_asks:
         cum += q
-        a_y_raw.append(cum)
-    # Ratio Calc
-    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]
-        ratio = ask_vol / bid_vol if bid_vol > 0 else 1
-        ratios.append(ratio)
-    # Visual Prep
-    b_x = [p for p, q in sorted_bids]
-    # Reverse bids for Plotly
-    b_x.reverse()
-    b_y_visual = b_y_raw[:]
-    b_y_visual.reverse()
-    a_x = [p for p, q in sorted_asks]
     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, "bids_y": b_y_visual,
-            "asks_x": a_x, "asks_y": a_y_raw
         },
-        "ratios": ratios,
         "history": market_state['history']
     })
@@ -284,14 +291,14 @@ 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"🚀 Live at http://localhost:{PORT}")
     await asyncio.Event().wait()
 if __name__ == "__main__":

 import websockets
 # --- Configuration ---
+SYMBOL_KRAKEN = "BTC/USD"
 PORT = 7860
+HISTORY_LENGTH = 300
 # --- Logging ---
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
     "ready": False
 }
+# --- HTML Frontend (Plotly.js) ---
 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; }}
         .red {{ color: #ff1744; }}
     </style>
 </head>
 <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 }};
+        const commonLayout = {{
+            paper_bgcolor: '#0e0e0e',
+            plot_bgcolor: '#0e0e0e',
+            font: {{ color: '#aaa' }},
+            margin: {{ t: 25, b: 25, l: 50, r: 20 }},
+            showlegend: false
+        }};
         async function updateCharts() {{
             try {{
                 const data = await res.json();
                 if (data.error) {{
+                    statusDiv.innerHTML = "Waiting for data...";
                     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',
                     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); }}
         }}
+        setInterval(updateCharts, 500);
     </script>
 </body>
 </html>
 """
 async def kraken_worker():
     global market_state
     while True:
         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}
+                }))
                 async for message in ws:
+                    payload = json.loads(message)
+                    channel = payload.get("channel")
+                    data_entries = payload.get("data", [])
+                    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['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):
     return web.Response(text=HTML_PAGE, content_type='text/html')
     if not market_state['ready']:
         return web.json_response({"error": "Initializing..."})
+    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
+    for p, q in raw_asks:
         cum += q
+        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']
     })
     app = web.Application()
     app.router.add_get('/', handle_index)
     app.router.add_get('/data', handle_data)
+    app.on_startup.append(lambda a: a.__setitem__('t', 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 3-Way Dashboard: http://localhost:{PORT}")
     await asyncio.Event().wait()
 if __name__ == "__main__":