mirror of
https://github.com/d0zingcat/deploy.git
synced 2026-05-13 15:09:33 +00:00
326 lines
9.3 KiB
Python
326 lines
9.3 KiB
Python
import random
|
|
from datetime import datetime, timedelta
|
|
|
|
import pandas as pd
|
|
import plotly.graph_objects as go
|
|
import streamlit as st
|
|
|
|
from frontend.st_utils import initialize_st_page
|
|
|
|
initialize_st_page(
|
|
layout="wide",
|
|
show_readme=False
|
|
)
|
|
|
|
# Custom CSS for enhanced styling
|
|
st.markdown("""
|
|
<style>
|
|
.metric-card {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
padding: 1rem;
|
|
border-radius: 10px;
|
|
color: white;
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
.feature-card {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 15px;
|
|
padding: 1.5rem;
|
|
backdrop-filter: blur(10px);
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: #4CAF50;
|
|
}
|
|
|
|
.pulse {
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { opacity: 1; }
|
|
50% { opacity: 0.7; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
.status-active {
|
|
color: #4CAF50;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.status-inactive {
|
|
color: #ff6b6b;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
""", unsafe_allow_html=True)
|
|
|
|
# Hero Section
|
|
st.markdown("""
|
|
<div style="text-align: center; padding: 2rem 0;">
|
|
<h1 style="font-size: 3rem; margin-bottom: 0.5rem;">🤖 Hummingbot Dashboard</h1>
|
|
<p style="font-size: 1.2rem; color: #888; margin-bottom: 2rem;">
|
|
Your Command Center for Algorithmic Trading Excellence
|
|
</p>
|
|
</div>
|
|
""", unsafe_allow_html=True)
|
|
|
|
# Generate sample data for demonstration
|
|
def generate_sample_data():
|
|
"""Generate sample trading data for visualization"""
|
|
dates = pd.date_range(start=datetime.now() - timedelta(days=30), end=datetime.now(), freq='D')
|
|
|
|
# Sample portfolio performance
|
|
portfolio_values = []
|
|
base_value = 10000
|
|
for i in range(len(dates)):
|
|
change = random.uniform(-0.02, 0.03) # -2% to +3% daily change
|
|
base_value *= (1 + change)
|
|
portfolio_values.append(base_value)
|
|
|
|
return pd.DataFrame({
|
|
'date': dates,
|
|
'portfolio_value': portfolio_values,
|
|
'daily_return': [random.uniform(-0.05, 0.08) for _ in range(len(dates))]
|
|
})
|
|
|
|
# Quick Stats Dashboard
|
|
st.markdown("## 📊 Live Dashboard Overview")
|
|
|
|
# Mock data warning
|
|
st.warning("""
|
|
⚠️ **Demo Data Notice**: The metrics, charts, and statistics shown below are simulated/mocked data for demonstration purposes.
|
|
This showcases how real trading data would be presented in the dashboard once connected to live trading bots.
|
|
""")
|
|
|
|
col1, col2, col3, col4 = st.columns(4)
|
|
|
|
with col1:
|
|
st.markdown("""
|
|
<div class="metric-card">
|
|
<h3>🔄 Active Bots</h3>
|
|
<div class="stat-number pulse">3</div>
|
|
<p>Currently Trading</p>
|
|
</div>
|
|
""", unsafe_allow_html=True)
|
|
|
|
with col2:
|
|
st.markdown("""
|
|
<div class="metric-card">
|
|
<h3>💰 Total Portfolio</h3>
|
|
<div class="stat-number">$12,847</div>
|
|
<p style="color: #4CAF50;">+2.3% Today</p>
|
|
</div>
|
|
""", unsafe_allow_html=True)
|
|
|
|
with col3:
|
|
st.markdown("""
|
|
<div class="metric-card">
|
|
<h3>📈 Win Rate</h3>
|
|
<div class="stat-number">74.2%</div>
|
|
<p>Last 30 Days</p>
|
|
</div>
|
|
""", unsafe_allow_html=True)
|
|
|
|
with col4:
|
|
st.markdown("""
|
|
<div class="metric-card">
|
|
<h3>⚡ Total Trades</h3>
|
|
<div class="stat-number">1,247</div>
|
|
<p>This Month</p>
|
|
</div>
|
|
""", unsafe_allow_html=True)
|
|
|
|
st.divider()
|
|
|
|
# Performance Chart
|
|
col1, col2 = st.columns([2, 1])
|
|
|
|
with col1:
|
|
st.markdown("### 📈 Portfolio Performance (30 Days)")
|
|
|
|
# Generate and display sample performance chart
|
|
df = generate_sample_data()
|
|
|
|
fig = go.Figure()
|
|
fig.add_trace(go.Scatter(
|
|
x=df['date'],
|
|
y=df['portfolio_value'],
|
|
mode='lines+markers',
|
|
line=dict(color='#4CAF50', width=3),
|
|
fill='tonexty',
|
|
fillcolor='rgba(76, 175, 80, 0.1)',
|
|
name='Portfolio Value'
|
|
))
|
|
|
|
fig.update_layout(
|
|
template='plotly_dark',
|
|
height=400,
|
|
showlegend=False,
|
|
margin=dict(l=0, r=0, t=0, b=0),
|
|
xaxis=dict(showgrid=False),
|
|
yaxis=dict(showgrid=True, gridcolor='rgba(255,255,255,0.1)')
|
|
)
|
|
|
|
st.plotly_chart(fig, use_container_width=True)
|
|
|
|
with col2:
|
|
st.markdown("### 🎯 Strategy Status")
|
|
|
|
strategies = [
|
|
{"name": "Market Making", "status": "active", "pnl": "+$342"},
|
|
{"name": "Arbitrage", "status": "active", "pnl": "+$156"},
|
|
{"name": "Grid Trading", "status": "active", "pnl": "+$89"},
|
|
{"name": "DCA Bot", "status": "inactive", "pnl": "+$234"},
|
|
]
|
|
|
|
for strategy in strategies:
|
|
status_class = "status-active" if strategy["status"] == "active" else "status-inactive"
|
|
status_icon = "🟢" if strategy["status"] == "active" else "🔴"
|
|
|
|
st.markdown(f"""
|
|
<div style="background: rgba(255,255,255,0.05); padding: 1rem; border-radius: 8px; margin: 0.5rem 0;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div>
|
|
<strong>{strategy['name']}</strong><br>
|
|
<span class="{status_class}">{status_icon} {strategy['status'].title()}</span>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<span style="color: #4CAF50; font-weight: bold;">{strategy['pnl']}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
""", unsafe_allow_html=True)
|
|
|
|
st.divider()
|
|
|
|
# Feature Showcase
|
|
st.markdown("## 🚀 Platform Features")
|
|
|
|
col1, col2, col3 = st.columns(3)
|
|
|
|
with col1:
|
|
st.markdown("""
|
|
<div class="feature-card">
|
|
<div style="text-align: center; margin-bottom: 1rem;">
|
|
<div style="font-size: 3rem;">🎯</div>
|
|
<h3>Strategy Development</h3>
|
|
</div>
|
|
<ul style="list-style: none; padding: 0;">
|
|
<li>✨ Visual Strategy Builder</li>
|
|
<li>🔧 Advanced Configuration</li>
|
|
<li>📝 Custom Parameters</li>
|
|
<li>🧪 Testing Environment</li>
|
|
</ul>
|
|
</div>
|
|
""", unsafe_allow_html=True)
|
|
|
|
with col2:
|
|
st.markdown("""
|
|
<div class="feature-card">
|
|
<div style="text-align: center; margin-bottom: 1rem;">
|
|
<div style="font-size: 3rem;">📊</div>
|
|
<h3>Analytics & Insights</h3>
|
|
</div>
|
|
<ul style="list-style: none; padding: 0;">
|
|
<li>📈 Real-time Performance</li>
|
|
<li>🔍 Advanced Backtesting</li>
|
|
<li>📋 Detailed Reports</li>
|
|
<li>🎨 Interactive Charts</li>
|
|
</ul>
|
|
</div>
|
|
""", unsafe_allow_html=True)
|
|
|
|
with col3:
|
|
st.markdown("""
|
|
<div class="feature-card">
|
|
<div style="text-align: center; margin-bottom: 1rem;">
|
|
<div style="font-size: 3rem;">⚡</div>
|
|
<h3>Live Trading</h3>
|
|
</div>
|
|
<ul style="list-style: none; padding: 0;">
|
|
<li>🤖 Automated Execution</li>
|
|
<li>📡 Real-time Monitoring</li>
|
|
<li>🛡️ Risk Management</li>
|
|
<li>🔔 Smart Alerts</li>
|
|
</ul>
|
|
</div>
|
|
""", unsafe_allow_html=True)
|
|
|
|
st.divider()
|
|
|
|
# Quick Actions
|
|
st.markdown("## ⚡ Quick Actions")
|
|
|
|
col1, col2, col3, col4 = st.columns(4)
|
|
|
|
with col1:
|
|
if st.button("🚀 Deploy Strategy", use_container_width=True, type="primary"):
|
|
st.switch_page("frontend/pages/orchestration/deploy_v2_with_controllers/app.py")
|
|
|
|
with col2:
|
|
if st.button("📊 View Performance", use_container_width=True):
|
|
st.switch_page("frontend/pages/performance/app.py")
|
|
|
|
with col3:
|
|
if st.button("🔍 Backtesting", use_container_width=True):
|
|
st.switch_page("frontend/pages/backtesting/app.py")
|
|
|
|
with col4:
|
|
if st.button("🗃️ Archived Bots", use_container_width=True):
|
|
st.switch_page("frontend/pages/orchestration/archived_bots/app.py")
|
|
|
|
st.divider()
|
|
|
|
# Community & Resources
|
|
col1, col2 = st.columns([2, 1])
|
|
|
|
with col1:
|
|
st.markdown("### 🎬 Learn & Explore")
|
|
|
|
st.video("https://youtu.be/7eHiMPRBQLQ?si=PAvCq0D5QDZz1h1D")
|
|
|
|
with col2:
|
|
st.markdown("### 💬 Join Our Community")
|
|
|
|
st.markdown("""
|
|
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
padding: 1.5rem; border-radius: 15px; color: white;">
|
|
<h4>🌟 Connect with Traders</h4>
|
|
<p>Join thousands of algorithmic traders sharing strategies and insights!</p>
|
|
<br>
|
|
<a href="https://discord.gg/hummingbot" target="_blank"
|
|
style="background: rgba(255,255,255,0.2); padding: 0.5rem 1rem;
|
|
border-radius: 8px; text-decoration: none; color: white; font-weight: bold;">
|
|
💬 Join Discord
|
|
</a>
|
|
<br><br>
|
|
<a href="https://github.com/hummingbot/dashboard" target="_blank"
|
|
style="background: rgba(255,255,255,0.2); padding: 0.5rem 1rem;
|
|
border-radius: 8px; text-decoration: none; color: white; font-weight: bold;">
|
|
🐛 Report Issues
|
|
</a>
|
|
</div>
|
|
""", unsafe_allow_html=True)
|
|
|
|
# Footer stats
|
|
st.markdown("---")
|
|
col1, col2, col3, col4 = st.columns(4)
|
|
|
|
with col1:
|
|
st.metric("🌍 Global Users", "10,000+")
|
|
|
|
with col2:
|
|
st.metric("💱 Exchanges", "20+")
|
|
|
|
with col3:
|
|
st.metric("🔄 Daily Volume", "$2.5M+")
|
|
|
|
with col4:
|
|
st.metric("⭐ GitHub Stars", "7,800+")
|