Update app.py

app.py

@@ -1,78 +1,21 @@
 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
+from dash import dcc, html
 
-# Initialize the Dash app with Bootstrap theme
-app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
-app.title = "MSCI ETF Sector Weights"
+# example for https://community.plotly.com/t/two-graphs-side-by-side/5312
 
-# 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)
+external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
 
-# 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)]
+app = dash.Dash(external_stylesheets=external_stylesheets)
+app.layout = html.Div([
+    html.Div([
+        html.Div([
+            html.H3('Column 1'),
+            dcc.Graph(id='g1', figure={'data': [{'y': [1, 2, 3]}]})
+        ], className="six columns"),
 
-    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)
+        html.Div([
+            html.H3('Column 2'),
+            dcc.Graph(id='g2', figure={'data': [{'y': [1, 2, 3]}]})
+        ], className="six columns"),
+    ], className="does-not-matter-can-be-container")
+])