Trading Dashboard

🔥 Vibe Prompt

"Build a Streamlit trading dashboard: real-time stock chart, technical indicators, strategy signals, risk metrics, and trade log."

Streamlit Dashboard

import streamlit as st
import yfinance as yf
import pandas as pd
import plotly.graph_objects as go

st.set_page_config(page_title='Quant Trading Dashboard', layout='wide')
st.title('📈 Quant Trading Dashboard')

# Sidebar
with st.sidebar:
    ticker = st.text_input('Stock Ticker', '2330.TW')
    period = st.selectbox('Period', ['1mo', '3mo', '6mo', '1y', '2y'], index=3)
    
    if st.button('Update'):
        data = yf.download(ticker, period=period)
        
        # Calculate indicators
        data['MA20'] = data['Close'].rolling(20).mean()
        data['MA60'] = data['Close'].rolling(60).mean()
        
        # Candlestick chart
        fig = go.Figure(data=[go.Candlestick(
            x=data.index,
            open=data['Open'],
            high=data['High'],
            low=data['Low'],
            close=data['Close'],
            name='Price'
        )])
        
        fig.add_trace(go.Scatter(x=data.index, y=data['MA20'], name='MA20'))
        fig.add_trace(go.Scatter(x=data.index, y=data['MA60'], name='MA60'))
        
        st.plotly_chart(fig, use_container_width=True)
        
        # Key metrics
        col1, col2, col3, col4 = st.columns(4)
        latest = data.iloc[-1]
        col1.metric('Current Price', f"${latest['Close']:.2f}")
        col2.metric('MA20', f"${latest['MA20']:.2f}")
        col3.metric('Volume', f"{latest['Volume']:,.0f}")
        
        # Signal
        if latest['Close'] > latest['MA20']:
            st.success('🟢 Bullish Signal (Price > MA20)')
        else:
            st.error('🔴 Bearish Signal (Price < MA20)')

Real-time Features

• Auto-refresh every 5 minutes
• Multiple stock watchlist
• Strategy signal alerts
• Trade log with entry/exit
• Performance chart

Practice Exercise

💡 Vibe Practice: Ask AI to extend the dashboard with:

• Real-time price alerts via Telegram/Line
• Multi-strategy comparison view
• Backtest results display
• Portfolio tracking
• Dark mode UI

Chapter Summary

• Understand core concepts and principles
• Master implementation methods and techniques
• Familiar with common issues and solutions
• Able to apply in real projects

Further Reading

• Official documentation and API references
• Open source examples on GitHub
• Technical books and online courses
• Community discussions and tech blogs

Implementation Example

Basic Example

# This section provides a complete implementation example

Steps

1. Setup: Configure development environment
2. Data: Prepare required data
3. Implementation: Build core functionality
4. Testing: Verify correctness
5. Optimization: Improve performance

Common Errors

| Error Type | Cause | Solution | |------------|-------|----------| | Compilation | Syntax | Check code syntax | | Runtime | Environment | Verify dependencies installed | | Logic | Algorithm | Step-by-step debugging | | Performance | Efficiency | Use profilers |

Code Example

import sys

def main():
    print("Hello, World!")

if __name__ == "__main__":
    main()

References

• Official documentation
• API reference
• Open source examples
• Community discussions