Minor cleanup.

Author: toddbirchard

application/__init__.py

@@ -1,24 +1,21 @@
-"""Initialize app."""
+"""Initialize Flask app."""
 from flask import Flask
 
 
 def create_app():
-    """Construct the core application."""
-    app = Flask(__name__,
-                instance_relative_config=False)
+    """Construct core Flask application with embedded Dash app."""
+    app = Flask(__name__, instance_relative_config=False)
     app.config.from_object('config.Config')
 
     with app.app_context():
-
-        # Import main Blueprint
+        # Import Flask routes
         from application import routes
-        app.register_blueprint(routes.main_bp)
 
         # Import Dash application
         from application.plotlydash.dashboard import create_dashboard
         app = create_dashboard(app)
 
-        # Compile assets
+        # Compile CSS
         from application.assets import compile_assets
         compile_assets(app)
 

application/assets.py

@@ -2,7 +2,7 @@
 
 
 def compile_assets(app):
-    """Configure authorization asset bundles."""
+    """Compile stylesheets if `app` is running in development mode."""
     assets = Environment(app)
     Environment.auto_build = True
     Environment.debug = False

application/plotlydash/dashboard.py

@@ -1,34 +1,31 @@
-"""Create a Dash app within a Flask app."""
+"""Instantiate a Dash app."""
+import numpy as np
+import pandas as pd
 import dash
 import dash_table
 import dash_html_components as html
 import dash_core_components as dcc
-import plotly.graph_objects as go
-import pandas as pd
-import numpy as np
 from .layout import html_layout
 
 
 def create_dashboard(server):
-    """Create a Dash app."""
-    external_stylesheets = ['/static/dist/css/styles.css',
-                            'https://fonts.googleapis.com/css?family=Lato',
-                            'https://use.fontawesome.com/releases/v5.8.1/css/all.css']
+    """Create a Plotly Dash dashboard."""
     dash_app = dash.Dash(server=server,
-                         external_stylesheets=external_stylesheets,
-                         external_scripts=external_scripts,
-                         routes_pathname_prefix='/dashapp/')
+                         routes_pathname_prefix='/dashapp/',
+                         external_stylesheets=['/static/dist/css/styles.css',
+                                               'https://fonts.googleapis.com/css?family=Lato']
+                         )
 
     # Prepare a DataFrame
-    df = pd.read_csv('data/311-calls.csv')
+    df = pd.read_csv('data/311-calls.csv', parse_dates=['created_date'])
     num_complaints = df['complaint_type'].value_counts()
     to_remove = num_complaints[num_complaints <= 20].index
     df.replace(to_remove, np.nan, inplace=True)
 
-    # Override the underlying HTML template
+    # Custom HTML layout
     dash_app.index_string = html_layout
 
-    # Create Dash Layout comprised of Data Tables
+    # Create Layout
     dash_app.layout = html.Div(
         children=[dcc.Graph(
             id='histogram-graph',
@@ -52,18 +49,17 @@ def create_dashboard(server):
             ],
         id='dash-container'
     )
-
     return dash_app.server
 
 
 def create_data_table(df):
-    """Create table from Pandas DataFrame."""
-    table_preview = dash_table.DataTable(
+    """Create Dash datatable from Pandas DataFrame."""
+    table = dash_table.DataTable(
         id='database-table',
         columns=[{"name": i, "id": i} for i in df.columns],
         data=df.to_dict('records'),
         sort_action="native",
         sort_mode='native',
         page_size=300
     )
-    return table_preview
+    return table

application/routes.py

@@ -1,14 +1,9 @@
 """Core Flask app routes."""
-from flask import Blueprint, render_template
+from flask import render_template
 from flask import current_app as app
 
 
-main_bp = Blueprint('main_bp', __name__,
-                    template_folder='templates',
-                    static_folder='static')
-
-
-@main_bp.route('/')
+@app.route('/')
 def home():
     """Landing page."""
     return render_template('index.jinja2',

application/static/dist/css/styles.css

@@ -4,8 +4,7 @@ html {
   margin: 0;
   padding: 0;
   background: #e7ecf7 !important;
-  background: #edf4f7;
-  font-family: 'Lato';
+  font-family: 'Lato', sans-serif;
 }
 
 .row .col {

application/static/dist/js/includes/jquery.min.js

@@ -4,7 +4,7 @@ header {
   padding: 30px 0 !important;
   background: white!important;
   box-shadow: 0 0 5px #bec6cf;
-  font-family: 'Lato',sans-serif;
+  font-family: 'Lato', sans-serif;
 
   .nav-wrapper {
     display: flex;

application/static/dist/js/main.js

@@ -1,21 +1,21 @@
 .home-template {
   .container {
-    width: 1000px;
-    margin: 50px auto;
+    margin: 0 !important;
   }
 
   .card {
-    width: 900px;
+    width: 800px;
     max-width: 93%;
     height: fit-content;
-    margin: 40px auto 0;
-    padding: 50px;
+    margin: 50px auto;
+    padding: 60px;
     background: white;
-    box-shadow: 0 0 5px rgba(65, 67, 144, 0.15);
+    box-shadow: 0 0 5px rgba(65,67,144,0.15);
     text-align: center;
     @media (max-width: 800px) {
+      max-width: 78%;
       width: unset;
-      padding: 40px 0;
+      padding: 40px;
     }
 
     .logo {
@@ -24,7 +24,7 @@
     }
 
     .site-title {
-      margin: 20px 0 3px;
+      margin: 10px 0 3px;
       color: #5f6988;
       font-family: proxima-nova, sans-serif;
       font-size: 2.3em;
@@ -51,6 +51,10 @@
       font-size: 1.1em;
       font-weight: 600;
 
+      &:hover {
+        opacity: .7;
+      }
+
       i {
         margin-left: 6px;
         font-size: .9em;