Update app.py

app.py

@@ -1,27 +1,78 @@
-from dash import Dash, Input, Output, callback, dcc, html
+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
 
-app = Dash(__name__)
-app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
+# Initialize the Dash app with Bootstrap theme
+app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
+app.title = "MSCI ETF Sector Weights"
 
-md = """
-# Dash demo
+# 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)
 
-See [The dash examples index](https://dash-example-index.herokuapp.com/) for more examples.
-"""
-
-app.layout = html.Div(
-    children=[
-        dcc.Markdown(children=md, link_target="_blank"),
-        dcc.Dropdown(id="dropdown", options=["red", "green", "blue", "orange"]),
-        dcc.Markdown(id="markdown", children=["## Hello World"]),
-    ]
+# 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
 
-@callback(
-    Output("markdown", "style"),
-    Input("dropdown", "value"),
-)
-def update_markdown_style(color):
-    return {"color": color}
+# Run the app
+if __name__ == '__main__':
+    app.run_server(debug=True)