app.py

import dash
from dash import dcc, html, Input, Output
import dash_bootstrap_components as dbc
import plotly.express as px
import pandas as pd
from ETF_sector_data_prep import sector_df, countries

# Initialize the Dash app with Bootstrap theme
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.title = "MSCI ETF Sector Weights"

# Layout of the app
app.layout = dbc.Container([
    dbc.Row([
        dbc.Col(html.H1("MSCI ETF Sector Weights", className="text-center"), width=12)
    ]),
    dbc.Row([
        dbc.Col(
            dcc.Dropdown(
                id='country-dropdown',
                options=[{'label': country, 'value': country} for country in countries],
                value=['Singapore'],
                multi=True,
                placeholder="Select Country"
            ),
            width=4
        )
    ], className="mb-4"),
    dbc.Row([
        dbc.Col(
            html.Div("Source: Yahoo! Finance", className="text-end"),
            width=12
        )
    ]),
    dbc.Row([
        dbc.Col(
            dcc.Graph(id='sector-bar-plot', style={"height": "800px"}),
            width=12
        )
    ])
], fluid=True)

# Callback for updating the plot
@app.callback(
    Output('sector-bar-plot', 'figure'),
    Input('country-dropdown', 'value')
)
def update_sector_plot(selected_countries):
    if not selected_countries:
        filtered_df = pd.DataFrame(columns=sector_df.columns)
    else:
        filtered_df = sector_df[sector_df['Country'].isin(selected_countries)]

    fig = px.bar(
        filtered_df,
        x="Weight(%)",
        y="Sector_Name",
        color="Country",
        hover_data=['Country', 'Sector_Name', 'Weight(%)'],
        color_discrete_map={
            "Japan": "red",
            "Taiwan": "#00CC96",
            "South Korea": "blue",
            "Hong Kong": "#FBE426",
            "Singapore": "magenta",
            "Australia": "brown",
            "Malaysia": "green",
            "Thailand": "darkblue"
        },
        template="ggplot2",
        barmode='group'
    )
    fig.update_layout(height=800)
    return fig

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