Merge pull request #1062 from hackforla/mattyweb/issue1060

Mattyweb/issue1060

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"

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;
-    }
-}
+  .graph-row {
+    display: flex;
+    color: #ececec;
+    width: 100%;
+  }
+  .half-graph {
+    flex: 1;
+  }
+}