Spaces:

Alvin3y1
/

test

Sleeping

App Files Files Community

Alvin3y1 commited on 14 days ago

Commit

75f59d6

verified ·

1 Parent(s): 8aefbf1

Update app.py

Browse files

Files changed (1) hide show

app.py +96 -97

app.py CHANGED Viewed

@@ -28,52 +28,55 @@ HTML_PAGE = f"""
 <!DOCTYPE html>
 <html>
 <head>
-    <title>BTC-USD Wall Sharpness</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; }}
         #container {{ display: flex; flex-direction: column; height: 100vh; width: 100vw; }}
         .row {{ flex: 1; display: flex; width: 100%; border-bottom: 1px solid #333; }}
-        .col-left {{ width: 50%; border-right: 1px solid #333; position: relative; }}
-        .col-right {{ width: 50%; position: relative; }}
-        .col-full {{ width: 100%; position: relative; }}
         .chart {{ width: 100%; height: 100%; }}
-        #status {{ position: absolute; top: 10px; left: 60px; z-index: 100; font-size: 14px; background: rgba(0,0,0,0.8); padding: 8px 12px; border-radius: 4px; pointer-events: none; border: 1px solid #333; box-shadow: 0 0 10px rgba(0,0,0,0.5); }}
         .green {{ color: #00e676; }}
         .red {{ color: #ff1744; }}
-        .white {{ color: #fff; font-weight: bold; }}
     </style>
 </head>
 <body>
     <div id="status">Connecting...</div>
     <div id="container">
-        <!-- ROW 1: Price & Pressure % -->
         <div class="row">
-            <div class="col-left">
                 <div id="price-chart" class="chart"></div>
             </div>
-            <div class="col-right">
                 <div id="imb-percent-chart" class="chart"></div>
             </div>
         </div>
-        <!-- ROW 2: Volume & Net Diff -->
         <div class="row">
-            <div class="col-left">
                 <div id="vol-chart" class="chart"></div>
             </div>
-            <div class="col-right">
-                <div id="diff-chart" class="chart"></div>
-            </div>
-        </div>
-        <!-- ROW 3: Integration -->
-        <div class="row">
-            <div class="col-full">
-                <div id="integral-chart" class="chart"></div>
             </div>
         </div>
     </div>
@@ -82,11 +85,11 @@ HTML_PAGE = f"""
         const priceDiv = document.getElementById('price-chart');
         const imbPercentDiv = document.getElementById('imb-percent-chart');
         const volDiv = document.getElementById('vol-chart');
-        const diffDiv = document.getElementById('diff-chart');
-        const intDiv = document.getElementById('integral-chart');
         const statusDiv = document.getElementById('status');
-        let initPrice=0, initImbP=0, initVol=0, initDiff=0, initInt=0;
         const commonConfig = {{ responsive: true, displayModeBar: false }};
         const commonLayout = {{
@@ -104,51 +107,56 @@ HTML_PAGE = f"""
                 const res = await fetch('/data');
                 const data = await res.json();
-                if (data.error) {{ statusDiv.innerHTML = "Waiting for data..."; return; }}
-                // --- SHARPNESS DISPLAY LOGIC ---
-                let slope = data.sharpness;
-                let slopeColor = '#aaa';
-                let slopeText = 'Neutral';
-                // Thresholds for sharpness (adjust as needed)
-                if (slope > 0.5) {{ slopeColor = '#00e676'; slopeText = 'Sharp BUY Wall'; }}
-                else if (slope < -0.5) {{ slopeColor = '#ff1744'; slopeText = 'Sharp SELL Wall'; }}
-                else if (slope > 0) {{ slopeColor = '#81c784'; slopeText = 'Leaning Buy'; }}
-                else {{ slopeColor = '#e57373'; slopeText = 'Leaning Sell'; }}
-                statusDiv.innerHTML = `
-                    Mid: <span class="${{data.mid >= data.prev_mid ? 'green' : 'red'}}">$${{data.mid.toLocaleString(undefined, {{minimumFractionDigits: 0}})}}</span> |
-                    Wall Sharpness: <span style="color:${{slopeColor}}; font-weight:bold;">${{slope.toFixed(2)}} (${{slopeText}})</span> |
-                    Trend: ${{data.integral.last_val.toFixed(0)}}
-                `;
-                // 1. PRICE
-                if (!initPrice) {{ Plotly.newPlot(priceDiv, [{{ x: data.history.map(d=>new Date(d.t*1000)), y: data.history.map(d=>d.p), type:'scatter', mode:'lines', line:{{color:'#29b6f6'}} }}], {{...commonLayout, title:'Midprice'}}, commonConfig); initPrice=1; }}
-                else {{ Plotly.react(priceDiv, [{{ x: data.history.map(d=>new Date(d.t*1000)), y: data.history.map(d=>d.p), type:'scatter', mode:'lines', line:{{color:'#29b6f6'}} }}], {{...commonLayout, title:'Midprice'}}, commonConfig); }}
-                // 2. PRESSURE % (With annotation for sharpness?)
-                if (!initImbP) {{ Plotly.newPlot(imbPercentDiv, [{{ x: data.imbalance_pct.x, y: data.imbalance_pct.y, type:'scatter', mode:'lines', fill:'tozeroy', line:{{color:'#ffeb3b'}} }}], {{...commonLayout, title:'Pressure %', yaxis:{{range:[-105,105], gridcolor:'#222'}}}}, commonConfig); initImbP=1; }}
-                else {{ Plotly.react(imbPercentDiv, [{{ x: data.imbalance_pct.x, y: data.imbalance_pct.y, type:'scatter', mode:'lines', fill:'tozeroy', line:{{color:'#ffeb3b'}} }}], {{...commonLayout, title:'Pressure %', yaxis:{{range:[-105,105], gridcolor:'#222'}}}}, commonConfig); }}
-                // 3. VOLUME
-                if (!initVol) {{ Plotly.newPlot(volDiv, [
-                    {{ x: data.imbalance_vol.dist_bids, y: data.imbalance_vol.vol_bids, type:'scatter', line:{{color:'#00e676'}} }},
-                    {{ x: data.imbalance_vol.dist_asks, y: data.imbalance_vol.vol_asks, type:'scatter', line:{{color:'#ff1744'}} }}
-                ], {{...commonLayout, title:'Volume'}}, commonConfig); initVol=1; }}
-                else {{ Plotly.react(volDiv, [
-                    {{ x: data.imbalance_vol.dist_bids, y: data.imbalance_vol.vol_bids, type:'scatter', line:{{color:'#00e676'}} }},
-                    {{ x: data.imbalance_vol.dist_asks, y: data.imbalance_vol.vol_asks, type:'scatter', line:{{color:'#ff1744'}} }}
-                ], {{...commonLayout, title:'Volume'}}, commonConfig); }}
-                // 4. NET DIFF
-                if (!initDiff) {{ Plotly.newPlot(diffDiv, [{{ x: data.diff.x, y: data.diff.y, type:'scatter', mode:'lines', fill:'tozeroy', line:{{color:'#00bcd4'}} }}], {{...commonLayout, title:'Net Diff'}}, commonConfig); initDiff=1; }}
-                else {{ Plotly.react(diffDiv, [{{ x: data.diff.x, y: data.diff.y, type:'scatter', mode:'lines', fill:'tozeroy', line:{{color:'#00bcd4'}} }}], {{...commonLayout, title:'Net Diff'}}, commonConfig); }}
-                // 5. INTEGRAL
-                let intColor = data.integral.last_val >= 0 ? '#e040fb' : '#e040fb';
-                if (!initInt) {{ Plotly.newPlot(intDiv, [{{ x: data.integral.x, y: data.integral.y, type:'scatter', mode:'lines', fill:'tozeroy', line:{{color:intColor}} }}], {{...commonLayout, title:'Integral Trend'}}, commonConfig); initInt=1; }}
-                else {{ Plotly.react(intDiv, [{{ x: data.integral.x, y: data.integral.y, type:'scatter', mode:'lines', fill:'tozeroy', line:{{color:intColor}} }}], {{...commonLayout, title:'Integral Trend'}}, commonConfig); }}
             }} catch (e) {{ console.error("Fetch error:", e); }}
         }}
@@ -212,11 +220,11 @@ async def handle_data(request):
     mid = market_state['current_mid']
-    # --- Prepare 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]
-    # Volumes by distance
     dist_bids = [(mid - p, q) for p, q in raw_bids if mid - p >= 0]
     d_b_x, d_b_y = [], []
     cum_d = 0
@@ -233,18 +241,18 @@ async def handle_data(request):
     # --- Calculations ---
     imb_x, imb_y = [], []
-    diff_x, diff_y = [], []
-    int_x, int_y = [], []
-    running_int = 0
-    sharpness = 0
     if d_b_x and d_a_x:
         max_dist = min(d_b_x[-1], d_a_x[-1])
         step_size = max_dist / 100
         steps = [i * step_size for i in range(1, 101)]
         for i, s in enumerate(steps):
-            # 1. Volume Lookups
             idx_b = bisect.bisect_right(d_b_x, s)
             vol_b = d_b_y[idx_b-1] if idx_b > 0 else 0
@@ -254,37 +262,28 @@ async def handle_data(request):
             # 2. Imbalance %
             total_vol = vol_b + vol_a
             pct = ((vol_b - vol_a) / total_vol) * 100 if total_vol > 0 else 0
             imb_x.append(s)
             imb_y.append(pct)
-            # 3. Net Diff
-            diff = vol_b - vol_a
-            diff_x.append(s)
-            diff_y.append(diff)
-            # 4. Integral
-            running_int += diff
-            int_x.append(s)
-            int_y.append(running_int)
-        # --- SHARPNESS CALCULATION ---
-        # We take the pressure at the 5th step (approx 5% into the book)
-        # Sharpness = Pressure / Distance
-        target_idx = 4 # 5th element
-        if len(imb_x) > target_idx:
-            # e.g., Pressure is 50% at $10 distance -> Sharpness = 5.0
-            # Dividing by distance normalizes it.
-            if imb_x[target_idx] > 0:
-                sharpness = imb_y[target_idx] / imb_x[target_idx]
     return web.json_response({
         "mid": mid,
         "prev_mid": market_state['history'][-2]['p'] if len(market_state['history']) > 1 else mid,
-        "sharpness": sharpness,
         "imbalance_vol": { "dist_bids": d_b_x, "vol_bids": d_b_y, "dist_asks": d_a_x, "vol_asks": d_a_y },
         "imbalance_pct": { "x": imb_x, "y": imb_y },
-        "diff": { "x": diff_x, "y": diff_y },
-        "integral": { "x": int_x, "y": int_y, "last_val": int_y[-1] if int_y else 0 },
         "history": market_state['history']
     })
@@ -308,7 +307,7 @@ async def main():
     site = web.TCPSite(runner, '0.0.0.0', PORT)
     await site.start()
-    print(f"🚀 BTC-USD Dashboard with Sharpness: http://localhost:{PORT}")
     await asyncio.Event().wait()
 if __name__ == "__main__":

 <!DOCTYPE html>
 <html>
 <head>
+    <title>BTC-USD Gradient 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 - 2 Rows x 2 Columns */
         #container {{ display: flex; flex-direction: column; height: 100vh; width: 100vw; }}
+        /* Rows */
         .row {{ flex: 1; display: flex; width: 100%; border-bottom: 1px solid #333; }}
+        /* Columns */
+        .col {{ width: 50%; height: 100%; border-right: 1px solid #333; position: relative; }}
+        .col:last-child {{ border-right: none; }}
+        /* Charts fill their containers */
         .chart {{ width: 100%; height: 100%; }}
+        /* Status Badge */
+        #status {{ position: absolute; top: 10px; left: 60px; z-index: 100; 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="container">
+        <!-- ROW 1 -->
         <div class="row">
+            <div class="col">
+                <!-- Top Left: Price -->
                 <div id="price-chart" class="chart"></div>
             </div>
+            <div class="col">
+                <!-- Top Right: Pressure % -->
                 <div id="imb-percent-chart" class="chart"></div>
             </div>
         </div>
+        <!-- ROW 2 -->
         <div class="row">
+            <div class="col">
+                <!-- Bottom Left: Volume -->
                 <div id="vol-chart" class="chart"></div>
             </div>
+            <div class="col">
+                <!-- Bottom Right: Differentiation (Gradient) -->
+                <div id="deriv-chart" class="chart"></div>
             </div>
         </div>
     </div>
         const priceDiv = document.getElementById('price-chart');
         const imbPercentDiv = document.getElementById('imb-percent-chart');
         const volDiv = document.getElementById('vol-chart');
+        const derivDiv = document.getElementById('deriv-chart');
         const statusDiv = document.getElementById('status');
+        let initPrice = false, initImbP = false, initVol = false, initDeriv = false;
         const commonConfig = {{ responsive: true, displayModeBar: false }};
         const commonLayout = {{
                 const res = await fetch('/data');
                 const data = await res.json();
+                if (data.error) {{
+                    statusDiv.innerHTML = "Waiting for data...";
+                    return;
+                }}
+                statusDiv.innerHTML = `Mid: <span class="${{data.mid >= data.prev_mid ? 'green' : 'red'}}">$${{data.mid.toLocaleString(undefined, {{minimumFractionDigits: 2}})}}</span> | Max Grad: ${{data.deriv.max_val ? data.deriv.max_val.toFixed(2) : 0}}`;
+                // 1. PRICE HISTORY
+                if (!initPrice) {{
+                    Plotly.newPlot(priceDiv, [{{ x: data.history.map(d=>new Date(d.t*1000)), y: data.history.map(d=>d.p), type: 'scatter', mode:'lines', line: {{color: '#29b6f6', width: 2}} }}],
+                    {{ ...commonLayout, title: '<b>Midprice</b>', xaxis: {{type:'date', gridcolor:'#222'}} }}, commonConfig);
+                    initPrice = true;
+                }} else {{
+                    Plotly.react(priceDiv, [{{ x: data.history.map(d=>new Date(d.t*1000)), y: data.history.map(d=>d.p), type: 'scatter', mode:'lines', line: {{color: '#29b6f6', width: 2}} }}],
+                    {{ ...commonLayout, title: '<b>Midprice</b>', xaxis: {{type:'date', gridcolor:'#222'}} }}, commonConfig);
+                }}
+                // 2. IMBALANCE %
+                const layoutImbP = {{ ...commonLayout, title: '<b>Pressure % (-100 to 100)</b>', yaxis: {{range: [-105, 105], gridcolor:'#222'}} }};
+                if (!initImbP) {{ Plotly.newPlot(imbPercentDiv, [{{ x: data.imbalance_pct.x, y: data.imbalance_pct.y, type: 'scatter', mode: 'lines', fill: 'tozeroy', line: {{color: '#ffeb3b'}} }}], layoutImbP, commonConfig); initImbP = true; }}
+                else {{ Plotly.react(imbPercentDiv, [{{ x: data.imbalance_pct.x, y: data.imbalance_pct.y, type: 'scatter', mode: 'lines', fill: 'tozeroy', line: {{color: '#ffeb3b'}} }}], layoutImbP, commonConfig); }}
+                // 3. VOLUME BY DISTANCE
+                const layoutVol = {{ ...commonLayout, title: '<b>Volume by Distance</b>' }};
+                const tracesVol = [
+                    {{ x: data.imbalance_vol.dist_bids, y: data.imbalance_vol.vol_bids, type: 'scatter', name: 'Bid', line: {{color: '#00e676'}} }},
+                    {{ x: data.imbalance_vol.dist_asks, y: data.imbalance_vol.vol_asks, type: 'scatter', name: 'Ask', line: {{color: '#ff1744'}} }}
+                ];
+                if (!initVol) {{ Plotly.newPlot(volDiv, tracesVol, layoutVol, commonConfig); initVol = true; }}
+                else {{ Plotly.react(volDiv, tracesVol, layoutVol, commonConfig); }}
+                // 4. DIFFERENTIATION (Gradient)
+                // This shows the rate of change of pressure. Large spikes = walls.
+                const layoutDeriv = {{ ...commonLayout,
+                    title: '<b>Pressure Gradient (Rate of Change)</b>',
+                    xaxis: {{title: 'Distance ($)', gridcolor:'#222'}},
+                    yaxis: {{title: 'Δ% / Step', gridcolor:'#222'}}
+                }};
+                const traceDeriv = {{
+                    x: data.deriv.x,
+                    y: data.deriv.y,
+                    type: 'scatter',
+                    mode: 'lines',
+                    fill: 'tozeroy',
+                    line: {{color: '#e040fb', width: 1.5}} // Purple line
+                }};
+                if (!initDeriv) {{ Plotly.newPlot(derivDiv, [traceDeriv], layoutDeriv, commonConfig); initDeriv = true; }}
+                else {{ Plotly.react(derivDiv, [traceDeriv], layoutDeriv, commonConfig); }}
             }} catch (e) {{ console.error("Fetch error:", e); }}
         }}
     mid = market_state['current_mid']
+    # --- 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]
+    # --- Distance Data ---
     dist_bids = [(mid - p, q) for p, q in raw_bids if mid - p >= 0]
     d_b_x, d_b_y = [], []
     cum_d = 0
     # --- Calculations ---
     imb_x, imb_y = [], []
+    deriv_x, deriv_y = [], []
     if d_b_x and d_a_x:
         max_dist = min(d_b_x[-1], d_a_x[-1])
+        # Use 100 uniform steps for smooth differentiation
         step_size = max_dist / 100
         steps = [i * step_size for i in range(1, 101)]
+        last_pct = 0
         for i, s in enumerate(steps):
+            # 1. Get Volumes
             idx_b = bisect.bisect_right(d_b_x, s)
             vol_b = d_b_y[idx_b-1] if idx_b > 0 else 0
             # 2. Imbalance %
             total_vol = vol_b + vol_a
             pct = ((vol_b - vol_a) / total_vol) * 100 if total_vol > 0 else 0
             imb_x.append(s)
             imb_y.append(pct)
+            # 3. Differentiation (Rate of Change)
+            # Change in percentage per step
+            if i > 0:
+                change = pct - last_pct
+                deriv_x.append(s)
+                deriv_y.append(change)
+            last_pct = pct
+    # Find max gradient for display
+    max_grad = max(deriv_y) if deriv_y else 0
     return web.json_response({
         "mid": mid,
         "prev_mid": market_state['history'][-2]['p'] if len(market_state['history']) > 1 else mid,
         "imbalance_vol": { "dist_bids": d_b_x, "vol_bids": d_b_y, "dist_asks": d_a_x, "vol_asks": d_a_y },
         "imbalance_pct": { "x": imb_x, "y": imb_y },
+        "deriv": { "x": deriv_x, "y": deriv_y, "max_val": max_grad },
         "history": market_state['history']
     })
     site = web.TCPSite(runner, '0.0.0.0', PORT)
     await site.start()
+    print(f"🚀 BTC-USD Gradient Dashboard: http://localhost:{PORT}")
     await asyncio.Event().wait()
 if __name__ == "__main__":