diff --git a/app/ptxboa_functions.py b/app/ptxboa_functions.py index a4b7c33d..79ef48d2 100644 --- a/app/ptxboa_functions.py +++ b/app/ptxboa_functions.py @@ -232,37 +232,71 @@ def create_sidebar(api: PtxboaAPI): def create_world_map(settings: dict, res_costs: pd.DataFrame): - parameter_to_show_on_map = st.selectbox( - "Select cost component:", res_costs.columns, index=len(res_costs.columns) - 1 - ) + """Create world map.""" + parameter_to_show_on_map = "Total" + + # define title: title_string = ( f"{parameter_to_show_on_map} cost of exporting {settings['chain']} to " f"{settings['country']}" ) - # Create a choropleth world map using Plotly Express + # define color scale: + color_scale = [ + (0, "rgb(60, 194, 204)"), # Starting color at the minimum data value + (1, "rgb(208, 110, 162)"), # Ending color at the maximum data value + ] + + # Create custom hover text: + custom_hover_data = res_costs.apply( + lambda x: f"{x.name}

" + + "
".join( + [ + f"{col}: {x[col]:.1f} {settings['output_unit']}" + for col in res_costs.columns[:-1] + ] + + [ + f"──────────
{res_costs.columns[-1]}: " + f"{x[res_costs.columns[-1]]:.1f} {settings['output_unit']}" + ] + ), + axis=1, + ) + + # Create a choropleth world map: fig = px.choropleth( locations=res_costs.index, # List of country codes or names locationmode="country names", # Use country names as locations color=res_costs[parameter_to_show_on_map], # Color values for the countries - hover_name=res_costs.index, # Names to display on hover - color_continuous_scale="Turbo", # Choose a color scale - title=title_string, + custom_data=[custom_hover_data], # Pass custom data for hover information + color_continuous_scale=color_scale, # Choose a color scale + title=title_string, # set title ) - # Add black borders to the map + # update layout: fig.update_geos( showcountries=True, # Show country borders - showcoastlines=False, # Hide coastlines for a cleaner look - bgcolor="lightgray", # Set background color - countrycolor="white", # Set default border color for other countries - showland=True, - landcolor="white", # Set land color - oceancolor="lightblue", # Set ocean color + showcoastlines=True, # Show coastlines + countrycolor="black", # Set default border color for other countries + countrywidth=0.2, # Set border width + coastlinewidth=0.2, # coastline width + coastlinecolor="black", # coastline color + showland=True, # show land areas + landcolor="#f3f4f5", # Set land color to light gray + oceancolor="#e3e4ea", # Optionally, set ocean color slightly darker gray + showocean=True, # show ocean areas + framewidth=0.2, # width of frame around map + ) + + fig.update_layout( + coloraxis_colorbar={"title": settings["output_unit"]}, # colorbar + height=600, # height of figure + margin={"t": 20, "b": 20, "l": 20, "r": 20}, # reduce margin around figure ) - fig.update_layout(coloraxis_colorbar={"title": settings["output_unit"]}) + # Set the hover template to use the custom data + fig.update_traces(hovertemplate="%{customdata}") # Custom data - # Display the map using st.plotly_chart + # Display the map: st.plotly_chart(fig, use_container_width=True) return @@ -365,11 +399,11 @@ def content_dashboard(api, res_costs: dict, context_data: dict, settings: pd.Dat """ ) - c_1, c_2 = st.columns([1, 2]) - with c_1: + c_1, c_2 = st.columns([2, 1]) + with c_2: create_infobox(context_data, settings) - with c_2: + with c_1: create_world_map(settings, res_costs) st.divider()