Merge pull request #110 from agoenergy/109-graphs-move-figure-display…

…-outside-of-functions

move display of plotly figure

app/ptxboa_functions.py

@@ -7,6 +7,7 @@
 import plotly.express as px
 import plotly.graph_objects as go
 import streamlit as st
+from plotly.subplots import make_subplots
 
 from ptxboa.api import PtxboaAPI
 
@@ -400,9 +401,14 @@ def create_bar_chart_costs(
         settings dictionary, like output from create_sidebar()
     current_selection : str
         bar to highlight with an arrow. must be an element of res_costs.index
+
+    Output
+    ------
+    fig : plotly.graph_objects.Figure
+        Figure object
     """
     if res_costs.empty:  # nodata to plot (FIXME: migth not be required later)
-        return
+        return go.Figure()
 
     fig = px.bar(
         res_costs,
@@ -443,11 +449,24 @@ def create_bar_chart_costs(
     fig.update_layout(
         yaxis_title=settings["output_unit"],
     )
-    st.plotly_chart(fig, use_container_width=True)
+    return fig
 
 
 def create_box_plot(res_costs: pd.DataFrame, settings: dict):
-    # Create a subplot with one row and one column
+    """Create a subplot with one row and one column.
+
+    Parameters
+    ----------
+    res_costs : pd.DataFrame
+        data for plotting
+    settings : dict
+        settings dictionary, like output from create_sidebar()
+
+    Output
+    ------
+    fig : plotly.graph_objects.Figure
+        Figure object
+    """
     fig = go.Figure()
 
     # Specify the row index of the data point you want to highlight
@@ -482,7 +501,7 @@ def create_box_plot(res_costs: pd.DataFrame, settings: dict):
         height=500,
     )
 
-    st.plotly_chart(fig, use_container_width=True)
+    return fig
 
 
 def create_scatter_plot(df_res, settings: dict):
@@ -517,21 +536,28 @@ def content_dashboard(api, res_costs: dict, context_data: dict, settings: pd.Dat
         )
 
     c_1, c_2 = st.columns([2, 1])
-    with c_2:
-        create_infobox(context_data, settings)
 
     with c_1:
         create_world_map(api, settings, res_costs)
 
-    st.divider()
+    with c_2:
+        # create box plot and bar plot:
+        fig1 = create_box_plot(res_costs, settings)
+        filtered_data = res_costs[res_costs.index == settings["region"]]
+        fig2 = create_bar_chart_costs(filtered_data, settings)
+        doublefig = make_subplots(rows=1, cols=2, shared_yaxes=True)
 
-    c_3, c_4 = st.columns(2)
+        for trace in fig1.data:
+            trace.showlegend = False
+            doublefig.add_trace(trace, row=1, col=1)
+        for trace in fig2.data:
+            doublefig.add_trace(trace, row=1, col=2)
 
-    with c_3:
-        create_box_plot(res_costs, settings)
-    with c_4:
-        filtered_data = res_costs[res_costs.index == settings["region"]]
-        create_bar_chart_costs(filtered_data, settings)
+        doublefig.update_layout(barmode="stack")
+        doublefig.update_layout(title_text="Cost distribution and details:")
+        st.plotly_chart(doublefig, use_container_width=True)
+
+        create_infobox(context_data, settings)
 
     st.write("Chosen settings:")
     st.write(settings)
@@ -713,7 +739,10 @@ def display_costs(
                 df_res = df_res.sort_values(["Total"], ascending=True)
         with c2:
             # create graph:
-            create_bar_chart_costs(df_res, settings, current_selection=settings[key])
+            fig = create_bar_chart_costs(
+                df_res, settings, current_selection=settings[key]
+            )
+            st.plotly_chart(fig, use_container_width=True)
 
         with st.expander("**Data**"):
             column_config = config_number_columns(