Update figure size

Author: gauthampughazhendhi

src/app.py

@@ -27,15 +27,13 @@
     "left": 0,
     "bottom": 0,
     "width": "20rem",
-    "padding": "2rem 1rem",
     "z-index": 4000000,
     'background-color': 'rgba(255,255,255,.25)'
 
 }
 
 CONTENT_STYLE = {
     "margin-left": "20rem",
-    "margin-right": "2rem",
     "z-index": -1,
 }
 # Structure of app, including selection criteria components
@@ -49,7 +47,7 @@
                 dbc.Row(
                     [
                         # dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
-                        dbc.Col(dbc.NavbarBrand("Tsunami Events Dashboard", className="ms-2")),
+                        dbc.Col(dbc.NavbarBrand("Tsunami Events Dashboard")),
                     ],
                     align="center",
                     className="g-0",
@@ -66,8 +64,9 @@
             ),
         ],
         style = {
-        'margin-left': '15px',
-        'font-weight': "600"}
+            'margin-left': '1.2rem',
+            'font-weight': "600"
+        }
     ),
     color="dark",
     dark=True,
@@ -79,7 +78,7 @@
         style = {'margin-bottom': '0px'}),
         html.Iframe(
             id='map_plot',
-            style={'border-width': '0', 'height': '380px', 'width': '100%'},
+            style={'border-width': '0', 'height': '390px', 'width': '100%'},
             srcDoc=create_map_plot(year_start=1800, year_end=2022, countries=[]))
         ], style = {'padding': '15px', 'padding-bottom': '0px'}
     ),
@@ -92,11 +91,11 @@
         style = {'margin-bottom': '0px'}),
         html.Iframe(
             id = 'scatter_plot',
-            style={'border-width': '0', 'height': '220px','width': '100%'},
+            style={'border-width': '0', 'height': '250px','width': '100%'},
             srcDoc=create_scatter_plot(year_start=1800, year_end=2022, countries=[]) 
         )], style = {'padding': '15px', 'padding-bottom': '0px'}
     ),
-    style = {'padding':0}
+    style = {'padding': 0}
 )
 
 bar_chart_card = dbc.Card(
@@ -105,11 +104,11 @@
         style = {'margin-bottom': '0px'}),
         html.Iframe(
             id = 'bar_plot',
-            style={'border-width': '0', 'height': '220px','width': '100%'},
+            style={'border-width': '0', 'height': '250px','width': '100%'},
             srcDoc=create_bar_plot(year_start=1800, year_end=2022)
         )], style = {'padding': '15px', 'padding-bottom': '0px'}
     ),
-    style = {'padding':0}
+    style = {'padding': 0}
 )
 
 app.layout = dbc.Container([
@@ -149,7 +148,7 @@
         dbc.Col([
             dbc.Row([
                 world_plot_card
-            ], style = {'margin': 'auto', 'width': '800px', 'padding':'0px'}),
+            ], style = {'margin': 'auto', 'width': '820px', 'padding':'0px'}),
             html.Br(),
             dbc.Row([
                 dbc.Col([
@@ -166,7 +165,8 @@
     style = {
         'backgroundColor': 'black',
         'padding': '0px',
-        'height': '100vh'
+        'height': '100vh',
+        "overflow": "hidden"
 })
 
 # App callback for map_plot

src/components/dropdown.py

@@ -23,7 +23,7 @@ def create_bar_plot(year_start, year_end):
         y=alt.Y('tsunami_instance:N', sort = '-x', title = 'Country', axis = alt.Axis(labelExpr="datum.country")),
         color=alt.Color('country:O'),
         tooltip=("country:O", "location_name:O", "tsunami_intensity:Q", "earthquake_magnitude:Q", "year:Q", "month:O")
-        ).properties(width=240, height=160)
+        ).properties(width=250, height=180)
 
     text = chart.mark_text(align="left", baseline="middle", dx = 3).encode(
         text= 'combine:O')

src/components/map_plot.py

@@ -30,7 +30,7 @@ def create_map_plot(year_start, year_end, countries):
                 tooltip=[alt.Tooltip("name:N", title="Country"),
                          alt.Tooltip("count:Q", title="Total Tsunami Hits")])
         .project("naturalEarth1")
-        .properties(width=700, height=350)
+        .properties(width=730, height=350)
     )
 
     tsunami_events["legend"] = "Tsunami Origin"

src/components/scatter_plot.py

@@ -15,7 +15,7 @@ def create_scatter_plot(year_start=1900, year_end=2022, countries=[]):
         color='country',
         tooltip=['year', 'mercalli_intensity', 'country', 'total_deaths']
     ).interactive(
-    ).properties(width=180, height=150)
+    ).properties(width=180, height=175)
     return chart.to_html()