krz/omaha-metro-blotter

Archive of police activity and ALPR surveillance across the Omaha metro.

clone: git clone https://gitbay.org/krz/omaha-metro-blotter.git

441d7dc25c04da4c3b747af04c21868745e7029e

verified · cmc

author: Christian Cleberg <hello@cleberg.net> · 2024-01-24T17:22:32Z

replace bar graph with table and update CSS

 app.py            | 32 ++++++++++++++------------------
 assets/styles.css |  7 ++++---
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/app.py b/app.py
index 15a0a44..eb751a5 100644
--- a/app.py
+++ b/app.py
@@ -1,10 +1,10 @@
-from dash import Dash, html, dcc, callback, Output, Input
+from dash import Dash, html, dcc, callback, Output, Input, dash_table
 import plotly.express as px
 import pandas as pd
 import sqlite3
 
 # Connect to database and query all incidents
-connection = sqlite3.connect("../raw_data/ingress.db")
+connection = sqlite3.connect("./raw_data/ingress.db")
 cursor = connection.cursor()
 query = "SELECT * FROM incidents;"
 df = pd.read_sql_query(query, connection).sort_values(by="description")
@@ -18,36 +18,32 @@ app.layout = html.Div(children = [
     html.H1(children="Omaha Police Invidents", style={"textAlign":"center"}),
     html.Div([
         html.H2(children="Totals per Category and Year", style={"textAlign":"center"}),
-        dcc.Dropdown(df.sort_values("description").description.unique(), "INJURY", id="bar-dropdown"),
-        dcc.Dropdown(df.sort_values("year").year.unique(), "2023", id="bar-year-dropdown"),
-        dcc.Graph(id="bar-graph")
-    ]),
-    html.Div([
+        dcc.Dropdown(df.sort_values("description").description.unique(), "INJURY", id="dropdown"),
+        dcc.Dropdown(df.sort_values("year").year.unique(), "2023", id="year-dropdown"),
+        html.Hr(),
+        dash_table.DataTable(data=df.to_dict("records"), page_size=5, id="table"),
         html.H2(children="Map of Incidents per Category and Year", style={"textAlign":"center"}),
-        dcc.Dropdown(df.sort_values("description").description.unique(), "INJURY", id="map-dropdown"),
-        dcc.Dropdown(df.sort_values("year").year.unique(), "2023", id="map-year-dropdown"),
         dcc.Graph(id="map-graph")
     ])
 ])
 
-# Create bar graph
+# Create table
 @callback(
-    Output("bar-graph", "figure"),
-    Input("bar-dropdown", "value"),
-    Input("bar-year-dropdown", "value")
+    Output("table", "data"),
+    Input("dropdown", "value"),
+    Input("year-dropdown", "value")
 )
-def update_bar_graph(description, year):
+def update_table(description, year):
     dff = df[df.year == year]
-    dff = dff.value_counts(subset=["description"])
     dff = dff.reset_index()
     dff = dff[dff.description == description]
-    return px.bar(dff, x="description", y="count")
+    return dff.to_dict("records")
 
 # Create map
 @callback(
     Output("map-graph", "figure"),
-    Input("map-dropdown", "value"),
-    Input("map-year-dropdown", "value")
+    Input("dropdown", "value"),
+    Input("year-dropdown", "value")
 )
 def update_map(description, year):
     dff = df[df.year == year]
diff --git a/assets/styles.css b/assets/styles.css
index dd887e6..d014936 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -1,8 +1,9 @@
 body {
     font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
-}
-
-#_dash-app-content {
     max-width: 80vw;
     margin: 2rem auto;
+}
+
+hr {
+    margin: 1rem auto;
 }
\ No newline at end of file