diff --git a/server/dash/dashboards/types_map.py b/server/dash/dashboards/types_map.py index 82a295be7..bf47a16f4 100644 --- a/server/dash/dashboards/types_map.py +++ b/server/dash/dashboards/types_map.py @@ -43,18 +43,19 @@ def populate_options(): clearable=False, value="Illegal Dumping", placeholder="Select a type", + searchable=False, options=populate_options(), ), - dcc.Graph(id="choropleth", config=CONFIG_OPTIONS), + dcc.Graph(id="choropleth", config=CONFIG_OPTIONS, className="hidden-graph"), ]) @app.callback( Output("choropleth", "figure"), + Output("choropleth", "className"), [Input("types", "value")] ) def display_choropleth(selected_value): - print(selected_value) fig = px.choropleth( report_df.query(f"type_name == '{selected_value}'"), geojson=nc_geojson, @@ -67,10 +68,22 @@ def display_choropleth(selected_value): height=1000, ) # show only the relevant map - fig.update_geos(fitbounds="locations", visible=False) + fig.update_geos( + fitbounds="locations", + visible=False, + ) # crops/zooms it fig.update_layout( - margin={"r": 0, "t": 0, "l": 0, "b": 0} + margin={"r": 0, "t": 0, "l": 0, "b": 0}, + ) + # move the scale to bottom left + fig.update_coloraxes( + # showscale=False + colorbar_x=0.25, + colorbar_y=0.25, + colorbar_ypad=15, + colorbar_lenmode="fraction", + colorbar_len=0.25, ) apply_figure_style(fig) - return fig + return fig, "visible-graph" diff --git a/server/dash/static/reports.css b/server/dash/static/reports.css index 907f6283e..0af8bef12 100644 --- a/server/dash/static/reports.css +++ b/server/dash/static/reports.css @@ -1,60 +1,63 @@ body { - color: #ECECEC; - background-color: #0F181F; - font-family: 'Robota, Gill Sans', 'Gill Sans MT', sans-serif; - font-size: 11pt; - font-weight: 300; + color: #ececec; + background-color: #0f181f; + font-family: 'Robota, Gill Sans', 'Gill Sans MT', sans-serif; + font-size: 11pt; + font-weight: 300; } h1 { - font-size: 1.8em; - font-weight: 300; - text-align: center; + font-size: 1.8em; + font-weight: 300; + text-align: center; +} +.hidden-graph { + visibility: hidden; } .dash-dropdown { - margin: 20pt; - color: #0F181F; + margin: 20pt; + color: #0f181f; } .dash-links a { - color: white; - padding: 5px; + color: white; + padding: 5px; } ._dash-loading { - display: none; + display: none; } ._dash-reloading { - color: yellow; + color: yellow; } .stats-label { - padding: 10px; - margin: 20px; - min-width: 15%; - text-align: center; - border: #666666 1px solid; - border-radius: 3pt; + padding: 10px; + margin: 20px; + min-width: 15%; + text-align: center; + border: #666666 1px solid; + border-radius: 3pt; } .stats-label h2 { - font-size: 2em; - margin-bottom: 3pt; - margin-top: 3pt; + font-size: 2em; + margin-bottom: 3pt; + margin-top: 3pt; } .stats-label label { - color: #999999; + color: #999999; } .dash-graph { - color: #ECECEC; - width: 100%; + color: #ececec; + width: 100%; } .graph-row { - color: #ECECEC; - width: 100%; + color: #ececec; + width: 100%; } @media only screen and (min-width: 768px) { - .graph-row { - display: flex; - color: #ECECEC; - width: 100%; - } - .half-graph { - flex: 1; - } -} \ No newline at end of file + .graph-row { + display: flex; + color: #ececec; + width: 100%; + } + .half-graph { + flex: 1; + } +}