Hugging Face's logo

Spaces:
Alvin3y1
/
test
Sleeping

App Files Community
Alvin3y1 commited on
Commit
8fdc4ae
·
verified ·
1 Parent(s): 3f0765d

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +33 -37
app.py CHANGED
@@ -28,7 +28,7 @@ HTML_PAGE = f"""
28
  <!DOCTYPE html>
29
  <html>
30
  <head>
31
- <title>BTC-USD Integral Analysis</title>
32
  <script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
33
  <style>
34
  body {{ margin: 0; padding: 0; background-color: #0e0e0e; color: #ccc; font-family: sans-serif; overflow: hidden; }}
@@ -39,7 +39,7 @@ HTML_PAGE = f"""
39
  /* Row 1: Price & Pressure % */
40
  #row-top {{ flex: 1; display: flex; width: 100%; border-bottom: 1px solid #333; }}
41
 
42
- /* Row 2: Volume & Integral */
43
  #row-bot {{ flex: 1; display: flex; width: 100%; }}
44
 
45
  /* Columns */
@@ -72,12 +72,11 @@ HTML_PAGE = f"""
72
  <!-- BOTTOM ROW -->
73
  <div id="row-bot">
74
  <div class="col-left">
75
- <!-- Moved Volume Chart Here -->
76
  <div id="vol-chart" class="chart"></div>
77
  </div>
78
  <div class="col-right">
79
- <!-- New Integral Chart Here -->
80
- <div id="integral-chart" class="chart"></div>
81
  </div>
82
  </div>
83
  </div>
@@ -86,14 +85,14 @@ HTML_PAGE = f"""
86
  const priceDiv = document.getElementById('price-chart');
87
  const imbPercentDiv = document.getElementById('imb-percent-chart');
88
  const volDiv = document.getElementById('vol-chart');
89
- const integDiv = document.getElementById('integral-chart');
90
 
91
  const statusDiv = document.getElementById('status');
92
 
93
  let initPrice = false;
94
  let initImbP = false;
95
  let initVol = false;
96
- let initInteg = false;
97
 
98
  const commonConfig = {{ responsive: true, displayModeBar: false }};
99
  const commonLayout = {{
@@ -116,9 +115,9 @@ HTML_PAGE = f"""
116
  return;
117
  }}
118
 
119
- statusDiv.innerHTML = `Mid: <span class="${{data.mid >= data.prev_mid ? 'green' : 'red'}}">$${{data.mid.toLocaleString(undefined, {{minimumFractionDigits: 2}})}}</span> | Integral: ${{data.integral.last_val ? data.integral.last_val.toFixed(0) : 0}}`;
120
 
121
- // 1. PRICE HISTORY (Top Left)
122
  if (!initPrice) {{
123
  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}} }}],
124
  {{ ...commonLayout, title: '<b>Midprice History</b>', xaxis: {{type:'date', gridcolor:'#222'}} }}, commonConfig);
@@ -128,14 +127,14 @@ HTML_PAGE = f"""
128
  {{ ...commonLayout, title: '<b>Midprice History</b>', xaxis: {{type:'date', gridcolor:'#222'}} }}, commonConfig);
129
  }}
130
 
131
- // 2. IMBALANCE % (Top Right)
132
- const layoutImbP = {{ ...commonLayout, title: '<b>Liquidity Pressure (-100% to +100%)</b>', xaxis: {{title: 'Distance ($)', gridcolor:'#222'}}, yaxis: {{range: [-105, 105], gridcolor:'#222', zeroline: true}} }};
133
  const traceImbP = {{ x: data.imbalance_pct.x, y: data.imbalance_pct.y, type: 'scatter', mode: 'lines', fill: 'tozeroy', line: {{color: '#ffeb3b', width: 2}} }};
134
 
135
  if (!initImbP) {{ Plotly.newPlot(imbPercentDiv, [traceImbP], layoutImbP, commonConfig); initImbP = true; }}
136
  else {{ Plotly.react(imbPercentDiv, [traceImbP], layoutImbP, commonConfig); }}
137
 
138
- // 3. VOLUME BY DISTANCE (Bottom Left - Moved)
139
  const layoutVol = {{ ...commonLayout, title: '<b>Volume by Distance</b>', xaxis: {{title: 'Distance ($)', gridcolor:'#222'}} }};
140
  const tracesVol = [
141
  {{ x: data.imbalance_vol.dist_bids, y: data.imbalance_vol.vol_bids, type: 'scatter', name: 'Bid', line: {{color: '#00e676'}} }},
@@ -144,27 +143,24 @@ HTML_PAGE = f"""
144
  if (!initVol) {{ Plotly.newPlot(volDiv, tracesVol, layoutVol, commonConfig); initVol = true; }}
145
  else {{ Plotly.react(volDiv, tracesVol, layoutVol, commonConfig); }}
146
 
147
- // 4. INTEGRAL OF PRESSURE (Bottom Right - New)
148
- const layoutInteg = {{ ...commonLayout,
149
- title: '<b>Cumulative Pressure (Integration)</b>',
150
  xaxis: {{title: 'Distance ($)', gridcolor:'#222'}},
151
- yaxis: {{gridcolor:'#222', zeroline: true}}
152
  }};
153
 
154
- // Color based on if total is positive or negative
155
- const integColor = (data.integral.last_val >= 0) ? '#e040fb' : '#e040fb';
156
-
157
- const traceInteg = {{
158
- x: data.integral.x,
159
- y: data.integral.y,
160
  type: 'scatter',
161
  mode: 'lines',
162
  fill: 'tozeroy',
163
- line: {{color: integColor, width: 2}}
164
  }};
165
 
166
- if (!initInteg) {{ Plotly.newPlot(integDiv, [traceInteg], layoutInteg, commonConfig); initInteg = true; }}
167
- else {{ Plotly.react(integDiv, [traceInteg], layoutInteg, commonConfig); }}
168
 
169
  }} catch (e) {{ console.error("Fetch error:", e); }}
170
  }}
@@ -247,10 +243,9 @@ async def handle_data(request):
247
  cum_d += q
248
  d_a_x.append(d); d_a_y.append(cum_d)
249
 
250
- # --- Imbalance % & Integration ---
251
  imb_x, imb_y = [], []
252
- integ_x, integ_y = [], []
253
- running_integral = 0
254
 
255
  if d_b_x and d_a_x:
256
  max_dist = min(d_b_x[-1], d_a_x[-1])
@@ -258,7 +253,7 @@ async def handle_data(request):
258
  steps = [i * step_size for i in range(1, 101)]
259
 
260
  for s in steps:
261
- # 1. Calculate Imbalance %
262
  idx_b = bisect.bisect_right(d_b_x, s)
263
  vol_b = d_b_y[idx_b-1] if idx_b > 0 else 0
264
 
@@ -266,24 +261,25 @@ async def handle_data(request):
266
  vol_a = d_a_y[idx_a-1] if idx_a > 0 else 0
267
 
268
  total_vol = vol_b + vol_a
 
 
269
  pct = 0
270
  if total_vol > 0:
271
  pct = ((vol_b - vol_a) / total_vol) * 100
272
-
273
  imb_x.append(s)
274
  imb_y.append(pct)
275
 
276
- # 2. Calculate Integration (Cumulative Sum of Pressure)
277
- running_integral += pct
278
- integ_x.append(s)
279
- integ_y.append(running_integral)
280
 
281
  return web.json_response({
282
  "mid": mid,
283
  "prev_mid": market_state['history'][-2]['p'] if len(market_state['history']) > 1 else mid,
284
  "imbalance_vol": { "dist_bids": d_b_x, "vol_bids": d_b_y, "dist_asks": d_a_x, "vol_asks": d_a_y },
285
- "imbalance_pct": { "x": imb_x, "y": imb_y, "last_val": imb_y[-1] if imb_y else 0 },
286
- "integral": { "x": integ_x, "y": integ_y, "last_val": integ_y[-1] if integ_y else 0 },
287
  "history": market_state['history']
288
  })
289
 
@@ -307,7 +303,7 @@ async def main():
307
  site = web.TCPSite(runner, '0.0.0.0', PORT)
308
  await site.start()
309
 
310
- print(f"🚀 BTC-USD Integral Dashboard: http://localhost:{PORT}")
311
  await asyncio.Event().wait()
312
 
313
  if __name__ == "__main__":
 
28
  <!DOCTYPE html>
29
  <html>
30
  <head>
31
+ <title>BTC-USD Net Liquidity</title>
32
  <script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
33
  <style>
34
  body {{ margin: 0; padding: 0; background-color: #0e0e0e; color: #ccc; font-family: sans-serif; overflow: hidden; }}
 
39
  /* Row 1: Price & Pressure % */
40
  #row-top {{ flex: 1; display: flex; width: 100%; border-bottom: 1px solid #333; }}
41
 
42
+ /* Row 2: Volume & Net Difference */
43
  #row-bot {{ flex: 1; display: flex; width: 100%; }}
44
 
45
  /* Columns */
 
72
  <!-- BOTTOM ROW -->
73
  <div id="row-bot">
74
  <div class="col-left">
 
75
  <div id="vol-chart" class="chart"></div>
76
  </div>
77
  <div class="col-right">
78
+ <!-- Replaced Integral with Net Difference -->
79
+ <div id="diff-chart" class="chart"></div>
80
  </div>
81
  </div>
82
  </div>
 
85
  const priceDiv = document.getElementById('price-chart');
86
  const imbPercentDiv = document.getElementById('imb-percent-chart');
87
  const volDiv = document.getElementById('vol-chart');
88
+ const diffDiv = document.getElementById('diff-chart');
89
 
90
  const statusDiv = document.getElementById('status');
91
 
92
  let initPrice = false;
93
  let initImbP = false;
94
  let initVol = false;
95
+ let initDiff = false;
96
 
97
  const commonConfig = {{ responsive: true, displayModeBar: false }};
98
  const commonLayout = {{
 
115
  return;
116
  }}
117
 
118
+ statusDiv.innerHTML = `Mid: <span class="${{data.mid >= data.prev_mid ? 'green' : 'red'}}">$${{data.mid.toLocaleString(undefined, {{minimumFractionDigits: 2}})}}</span> | Net Diff: ${{data.diff.last_val ? data.diff.last_val.toFixed(4) : 0}}`;
119
 
120
+ // 1. PRICE HISTORY
121
  if (!initPrice) {{
122
  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}} }}],
123
  {{ ...commonLayout, title: '<b>Midprice History</b>', xaxis: {{type:'date', gridcolor:'#222'}} }}, commonConfig);
 
127
  {{ ...commonLayout, title: '<b>Midprice History</b>', xaxis: {{type:'date', gridcolor:'#222'}} }}, commonConfig);
128
  }}
129
 
130
+ // 2. IMBALANCE %
131
+ const layoutImbP = {{ ...commonLayout, title: '<b>Liquidity Pressure (%)</b>', xaxis: {{title: 'Distance ($)', gridcolor:'#222'}}, yaxis: {{range: [-105, 105], gridcolor:'#222', zeroline: true}} }};
132
  const traceImbP = {{ x: data.imbalance_pct.x, y: data.imbalance_pct.y, type: 'scatter', mode: 'lines', fill: 'tozeroy', line: {{color: '#ffeb3b', width: 2}} }};
133
 
134
  if (!initImbP) {{ Plotly.newPlot(imbPercentDiv, [traceImbP], layoutImbP, commonConfig); initImbP = true; }}
135
  else {{ Plotly.react(imbPercentDiv, [traceImbP], layoutImbP, commonConfig); }}
136
 
137
+ // 3. VOLUME BY DISTANCE
138
  const layoutVol = {{ ...commonLayout, title: '<b>Volume by Distance</b>', xaxis: {{title: 'Distance ($)', gridcolor:'#222'}} }};
139
  const tracesVol = [
140
  {{ x: data.imbalance_vol.dist_bids, y: data.imbalance_vol.vol_bids, type: 'scatter', name: 'Bid', line: {{color: '#00e676'}} }},
 
143
  if (!initVol) {{ Plotly.newPlot(volDiv, tracesVol, layoutVol, commonConfig); initVol = true; }}
144
  else {{ Plotly.react(volDiv, tracesVol, layoutVol, commonConfig); }}
145
 
146
+ // 4. NET DIFFERENCE (New Graph)
147
+ const layoutDiff = {{ ...commonLayout,
148
+ title: '<b>Net Liquidity (Bids - Asks)</b>',
149
  xaxis: {{title: 'Distance ($)', gridcolor:'#222'}},
150
+ yaxis: {{title: 'Volume Diff', gridcolor:'#222', zeroline: true}}
151
  }};
152
 
153
+ const traceDiff = {{
154
+ x: data.diff.x,
155
+ y: data.diff.y,
 
 
 
156
  type: 'scatter',
157
  mode: 'lines',
158
  fill: 'tozeroy',
159
+ line: {{color: '#00bcd4', width: 2}} // Cyan line
160
  }};
161
 
162
+ if (!initDiff) {{ Plotly.newPlot(diffDiv, [traceDiff], layoutDiff, commonConfig); initDiff = true; }}
163
+ else {{ Plotly.react(diffDiv, [traceDiff], layoutDiff, commonConfig); }}
164
 
165
  }} catch (e) {{ console.error("Fetch error:", e); }}
166
  }}
 
243
  cum_d += q
244
  d_a_x.append(d); d_a_y.append(cum_d)
245
 
246
+ # --- Imbalance & Net Difference ---
247
  imb_x, imb_y = [], []
248
+ diff_x, diff_y = [], []
 
249
 
250
  if d_b_x and d_a_x:
251
  max_dist = min(d_b_x[-1], d_a_x[-1])
 
253
  steps = [i * step_size for i in range(1, 101)]
254
 
255
  for s in steps:
256
+ # 1. Get Volumes
257
  idx_b = bisect.bisect_right(d_b_x, s)
258
  vol_b = d_b_y[idx_b-1] if idx_b > 0 else 0
259
 
 
261
  vol_a = d_a_y[idx_a-1] if idx_a > 0 else 0
262
 
263
  total_vol = vol_b + vol_a
264
+
265
+ # 2. Imbalance %
266
  pct = 0
267
  if total_vol > 0:
268
  pct = ((vol_b - vol_a) / total_vol) * 100
 
269
  imb_x.append(s)
270
  imb_y.append(pct)
271
 
272
+ # 3. Net Difference (Raw Volume)
273
+ diff = vol_b - vol_a
274
+ diff_x.append(s)
275
+ diff_y.append(diff)
276
 
277
  return web.json_response({
278
  "mid": mid,
279
  "prev_mid": market_state['history'][-2]['p'] if len(market_state['history']) > 1 else mid,
280
  "imbalance_vol": { "dist_bids": d_b_x, "vol_bids": d_b_y, "dist_asks": d_a_x, "vol_asks": d_a_y },
281
+ "imbalance_pct": { "x": imb_x, "y": imb_y },
282
+ "diff": { "x": diff_x, "y": diff_y, "last_val": diff_y[-1] if diff_y else 0 },
283
  "history": market_state['history']
284
  })
285
 
 
303
  site = web.TCPSite(runner, '0.0.0.0', PORT)
304
  await site.start()
305
 
306
+ print(f"🚀 BTC-USD Net Liquidity Dashboard: http://localhost:{PORT}")
307
  await asyncio.Event().wait()
308
 
309
  if __name__ == "__main__":