import plotly.express as px

# Grammar of Graphics with Plotly
fig = px.scatter(
    data_frame=df,
    x='Return',
    y='Risk',
    color='Sector',
    size='Market_Cap',
    hover_data=['Company'],
    title='Risk-Return Trade-off'
)
fig.show()

import dash
from dash import dcc, html, Input, Output
import plotly.express as px

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1('Portfolio Dashboard'),
    dcc.Dropdown(id='sector-dropdown', options=[...], value='All'),
    dcc.Graph(id='portfolio-chart')
])

@app.callback(
    Output('portfolio-chart', 'figure'),
    Input('sector-dropdown', 'value')
)
def update_chart(selected_sector):
    filtered_df = df if selected_sector == 'All' else df[df['Sector'] == selected_sector]
    fig = px.scatter(filtered_df, x='Return', y='Risk', color='ESG_Score')
    return fig

if __name__ == '__main__':
    app.run_server(debug=True)

        Message
       /      \
   Insights  Insights
     /    \    /    \
    Data  Data  Data  Data

# ===================================================================
# BONUS LESSON 8: ADVANCED DATA VISUALISATION AND STORYTELLING
# ===================================================================

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import plotly.express as px
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import warnings
warnings.filterwarnings('ignore')

# Set style
sns.set_style("whitegrid")
np.random.seed(42)

print("="*70)
print("ADVANCED DATA VISUALISATION AND STORYTELLING FOR FINANCE")
print("="*70)

# ----------------------------------------------------------------
# PART A: GENERATE FINANCIAL DATA
# ----------------------------------------------------------------

print("\n" + "-"*60)
print("PART A: Generating Financial Data for Visualisation")
print("-"*60)

# Stock price simulation (random walk)
n_days = 252
dates = pd.date_range(start='2023-01-01', periods=n_days, freq='B')
price = 100 * np.exp(np.cumsum(np.random.normal(0.0005, 0.015, n_days)))
volume = np.random.gamma(2, 1000, n_days).clip(100, 10000)

# Create OHLC data
df_stock = pd.DataFrame({
    'Date': dates,
    'Open': price * (1 + np.random.normal(0, 0.005, n_days)),
    'High': price * (1 + np.random.normal(0.01, 0.01, n_days)),
    'Low': price * (1 + np.random.normal(-0.01, 0.01, n_days)),
    'Close': price,
    'Volume': volume
})

# Ensure High is max of Open/Close and Low is min
df_stock['High'] = df_stock[['Open', 'High', 'Close']].max(axis=1)
df_stock['Low'] = df_stock[['Open', 'Low', 'Close']].min(axis=1)

print("Generated stock data:")
print(df_stock.head())

# Generate portfolio data
n_assets = 5
asset_returns = np.random.multivariate_normal(
    [0.0005] * n_assets,
    np.random.uniform(0.01, 0.03, (n_assets, n_assets)) * 0.5 + np.diag(np.random.uniform(0.015, 0.03, n_assets)),
    n_days
)
asset_names = ['Tech', 'Finance', 'Healthcare', 'Energy', 'Consumer']
df_returns = pd.DataFrame(asset_returns, columns=asset_names)
df_prices = 100 * (1 + df_returns.cumsum())

# ----------------------------------------------------------------
# PART B: CANDLESTICK CHART (PLOTLY)
# ----------------------------------------------------------------

print("\n" + "-"*60)
print("PART B: Candlestick Chart")
print("-"*60)

# Create candlestick chart
fig = go.Figure(data=[go.Candlestick(
    x=df_stock['Date'],
    open=df_stock['Open'],
    high=df_stock['High'],
    low=df_stock['Low'],
    close=df_stock['Close'],
    name='Stock'
)])

# Add moving average
df_stock['MA_20'] = df_stock['Close'].rolling(20).mean()
fig.add_trace(go.Scatter(
    x=df_stock['Date'],
    y=df_stock['MA_20'],
    line=dict(color='orange', width=2),
    name='MA 20'
))

# Add volume as subplot (secondary y-axis)
fig.add_trace(go.Bar(
    x=df_stock['Date'],
    y=df_stock['Volume'],
    name='Volume',
    yaxis='y2',
    marker_color='lightblue',
    opacity=0.3
))

# Update layout
fig.update_layout(
    title='Stock Price with Candlesticks and Moving Average',
    yaxis_title='Price ($)',
    yaxis2=dict(title='Volume', overlaying='y', side='right'),
    xaxis_title='Date',
    template='plotly_white',
    height=600
)

# Show (in notebook, would use fig.show())
# For this script, save as HTML
fig.write_html('candlestick_chart.html')
print("Candlestick chart saved as 'candlestick_chart.html'")

# ----------------------------------------------------------------
# PART C: PORTFOLIO RISK-REWARD SCATTER PLOT
# ----------------------------------------------------------------

print("\n" + "-"*60)
print("PART C: Portfolio Risk-Reward Scatter Plot")
print("-"*60)

# Calculate returns and risk for each asset
asset_returns_mean = df_returns.mean() * 252  # annualised
asset_returns_std = df_returns.std() * np.sqrt(252)

# Create a DataFrame for visualisation
df_assets = pd.DataFrame({
    'Asset': asset_names,
    'Return': asset_returns_mean,
    'Risk': asset_returns_std,
    'Sharpe': asset_returns_mean / asset_returns_std
})

# Plotly scatter
fig = px.scatter(
    df_assets,
    x='Risk',
    y='Return',
    text='Asset',
    size='Sharpe',
    color='Sharpe',
    color_continuous_scale='RdYlGn',
    title='Risk-Return Trade-off by Asset Class',
    labels={'Risk': 'Annualised Volatility', 'Return': 'Annualised Return'},
    hover_data={'Sharpe': ':.3f'}
)
fig.update_traces(textposition='top center')
fig.write_html('risk_reward_scatter.html')
print("Risk-reward scatter plot saved as 'risk_reward_scatter.html'")

# ----------------------------------------------------------------
# PART D: CORRELATION HEATMAP
# ----------------------------------------------------------------

print("\n" + "-"*60)
print("PART D: Correlation Heatmap")
print("-"*60)

corr = df_returns.corr()

fig = go.Figure(data=go.Heatmap(
    z=corr.values,
    x=corr.columns,
    y=corr.columns,
    colorscale='RdBu_r',
    zmin=-1,
    zmax=1,
    text=corr.values.round(2),
    texttemplate='%{text}',
    textfont={"size": 12}
))

fig.update_layout(
    title='Asset Return Correlation Matrix',
    xaxis_title='Asset',
    yaxis_title='Asset',
    height=500,
    width=600
)
fig.write_html('correlation_heatmap.html')
print("Correlation heatmap saved as 'correlation_heatmap.html'")

# ----------------------------------------------------------------
# PART E: TIME-SERIES WITH ANNOTATIONS (STORYTELLING)
# ----------------------------------------------------------------

print("\n" + "-"*60)
print("PART E: Time-Series with Annotations")
print("-"*60)

# Simulate a market index with events
index = 1000 * np.exp(np.cumsum(np.random.normal(0.0002, 0.01, n_days)))

# Add some events
event_dates = ['2023-03-15', '2023-06-30', '2023-09-15', '2023-12-20']
event_labels = ['Fed Rate Hike', 'Earnings Season', 'Inflation Report', 'Year-End Rally']

# Create Plotly figure
fig = go.Figure()
fig.add_trace(go.Scatter(
    x=df_stock['Date'],
    y=index,
    mode='lines',
    name='Market Index',
    line=dict(color='navy', width=2)
))

# Add shaded recession (example)
fig.add_vrect(
    x0="2023-06-15", x1="2023-08-15",
    fillcolor="lightgray", opacity=0.3,
    layer="below", line_width=0,
    annotation_text="Market Correction",
    annotation_position="top left"
)

# Add annotations for events
for date, label in zip(event_dates, event_labels):
    # Find the closest date in the index
    idx = df_stock['Date'].searchsorted(pd.to_datetime(date))
    if idx < len(df_stock):
        y_val = index[idx]
        fig.add_annotation(
            x=date,
            y=y_val,
            text=label,
            showarrow=True,
            arrowhead=2,
            ax=0,
            ay=-40,
            font=dict(size=10)
        )

fig.update_layout(
    title='Market Index with Key Events Annotated',
    xaxis_title='Date',
    yaxis_title='Index Level',
    template='plotly_white',
    height=500
)
fig.write_html('time_series_annotated.html')
print("Annotated time-series saved as 'time_series_annotated.html'")

# ----------------------------------------------------------------
# PART F: INTERACTIVE DASHBOARD (CONCEPTUAL)
# ----------------------------------------------------------------

print("\n" + "-"*60)
print("PART F: Interactive Dashboard Concept")
print("-"*60)

print("""
Interactive Dashboard Components:

1. KPIs:
   - Total Portfolio Value: $1.2B
   - YTD Return: 8.5%
   - Volatility: 12.3%
   - Sharpe Ratio: 1.2

2. Time-Series Chart:
   - Portfolio performance vs benchmark (S&P 500)
   - Filter by date range (slider)

3. Sector Allocation:
   - Donut chart showing sector weights
   - Drill-down to individual holdings

4. Risk Metrics:
   - VaR (95%, 99%) - daily, 10-day
   - Expected Shortfall
   - Stress test results

5. ESG Dashboard:
   - Overall ESG score
   - Carbon footprint
   - Controversies count

6. Scenario Analysis:
   - What-if sliders for interest rates, GDP growth, oil prices
   - Impact on portfolio value

7. Alerts:
   - Recent news sentiment
   - Risk threshold breaches
   - Upcoming corporate events

Technology Stack:
  - Frontend: Dash (Plotly) or Streamlit
  - Backend: Python data processing (Pandas, NumPy)
  - Data: Real-time APIs (Bloomberg, Reuters) or batch ETL
  - Hosting: Cloud (AWS, Azure) or on-premise
""")

# ----------------------------------------------------------------
# PART G: STORYTELLING WITH FINANCIAL DATA
# ----------------------------------------------------------------

print("\n" + "-"*60)
print("PART G: Storytelling with Financial Data")
print("-"*60)

print("""
Storytelling Framework for Finance:

1. Context Setting:
   - "The market has experienced significant volatility over the past year."
   - "Central banks are shifting policy, impacting asset prices."

2. Data Discovery:
   - "We analysed 50,000+ transactions across 10,000 customers."
   - "Our analysis reveals a 15% increase in delinquencies in the last quarter."

3. Visual Evidence:
   - "As shown in this chart, the increase is concentrated in the 30-45 age group."
   - "The correlation between credit score and default is strong (r = -0.75)."

4. Insight Generation:
   - "This suggests that rising rates are disproportionately affecting younger borrowers."
   - "We can mitigate risk by adjusting underwriting criteria for this segment."

5. Recommendation & Action:
   - "We propose tightening LTV requirements for younger applicants."
   - "Implement a targeted communication campaign to offer refinancing options."

6. Call to Action:
   - "Adopt the proposed changes by Q3."
   - "Monitor the segment monthly and report to the Risk Committee."

Example Story:
   "In 2023, our consumer loan portfolio grew by 18%, but we observed a troubling trend: 
   delinquency rates among millennials rose by 22%. Analysis of macroeconomic factors shows 
   that rising rents and student debt are straining this cohort. Using predictive models, 
   we identified that credit card utilisation above 70% is a key early warning signal. 
   We recommend implementing a real-time alert system that triggers when customers 
   exceed this threshold, allowing proactive outreach. This could reduce delinquencies 
   by an estimated 15% and save $5M annually."
""")

# ----------------------------------------------------------------
# PART H: BEST PRACTICES SUMMARY
# ----------------------------------------------------------------

print("\n" + "-"*60)
print("PART H: Data Visualisation Best Practices")
print("-"*60)

best_practices = {
    "Colour": {
        "Guideline": "Use colour purposefully; avoid over-saturation.",
        "Do": "Use blue for stable trends, red for negative, green for positive.",
        "Don't": "Use rainbow colormaps; use colour-blind-friendly palettes."
    },
    "Labels": {
        "Guideline": "Label axes and data points clearly; use titles.",
        "Do": "Include units, percentages, and currency symbols.",
        "Don't": "Leave axes unlabelled or use cryptic abbreviations."
    },
    "Annotations": {
        "Guideline": "Add context with annotations and callouts.",
        "Do": "Highlight key events, outliers, and thresholds.",
        "Don't": "Clutter the chart with excessive text."
    },
    "Scales": {
        "Guideline": "Use appropriate scales; avoid truncation.",
        "Do": "Start y-axis at zero for bar charts; use logarithmic for exponential data.",
        "Don't": "Manipulate scales to exaggerate differences."
    },
    "Interactivity": {
        "Guideline": "Enable exploration with tooltips, zoom, and filtering.",
        "Do": "Use hover tooltips to show detailed values.",
        "Don't": "Overcomplicate with too many interactive elements."
    },
    "Consistency": {
        "Guideline": "Maintain consistent design across dashboards.",
        "Do": "Use a uniform colour palette, font, and layout.",
        "Don't": "Mix different styles in the same report."
    }
}

for category, details in best_practices.items():
    print(f"\n{category}:")
    print(f"  Guideline: {details['Guideline']}")
    print(f"  Do: {details['Do']}")
    print(f"  Don't: {details['Don't']}")

print("\n" + "="*70)
print("END OF BONUS LESSON 8")
print("="*70)