Improved Dash demo, updated naming conventions.

Author: toddbirchard

Pipfile

@@ -6,12 +6,10 @@ verify_ssl = true
 [dev-packages]
 lesscpy = "*"
 cssmin = "*"
-jsmin = "*"
 
 [packages]
 Flask = "*"
 Flask_assets = "*"
-Pathlib = "*"
 Dash = "*"
 Dash_Table = "*"
 Dash_core_components = "*"

Pipfile.lock

@@ -15,8 +15,8 @@ def create_app():
         app.register_blueprint(routes.main_bp)
 
         # Import Dash application
-        from application.dash_application.dash_example import Add_Dash
-        app = Add_Dash(app)
+        from application.plotlydash.dashboard import create_dashboard
+        app = create_dashboard(app)
 
         # Compile assets
         from application.assets import compile_assets

application/__init__.py

@@ -10,11 +10,6 @@ def compile_assets(app):
                          filters='less,cssmin',
                          output='dist/css/styles.css',
                          extra={'rel': 'stylesheet/less'})
-    js_bundle = Bundle('js/*.js',
-                       filters='jsmin',
-                       output='dist/js/main.js')
     assets.register('less_all', less_bundle)
-    assets.register('js_all', js_bundle)
     if app.config['FLASK_ENV'] == 'development':
         less_bundle.build(force=True)
-        js_bundle.build()

application/assets.py

@@ -0,0 +1,72 @@
+"""Create a Dash app within a Flask app."""
+from pathlib import Path
+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']
+    external_scripts = ['/static/dist/js/includes/jquery.min.js',
+                        '/static/dist/js/main.js']
+    dash_app = dash.Dash(server=server,
+                         external_stylesheets=external_stylesheets,
+                         external_scripts=external_scripts,
+                         routes_pathname_prefix='/dashapp/')
+
+    # Prepare a DataFrame
+    df = pd.read_csv('data/311-calls.csv')
+    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
+    dash_app.index_string = html_layout
+
+    # Create Dash Layout comprised of Data Tables
+    dash_app.layout = html.Div(
+        children=[dcc.Graph(
+        id='histogram-graph',
+        figure={
+            'data': [
+                {
+                    'x': df['complaint_type'],
+                    'text': df['complaint_type'],
+                    'customdata': df['unique_key'],
+                    'name': '311 Calls by region.',
+                    'type': 'histogram'
+                }
+            ],
+            'layout': {
+                'title': 'NYC 311 Calls category.',
+                'height': 600,
+                'padding': 150
+            }
+        }
+    ),
+        create_data_table(df)],
+        id='dash-container'
+      )
+
+    return dash_app.server
+
+
+def create_data_table(df):
+    """Create table from Pandas DataFrame."""
+    table_preview = 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

application/dash_application/dash_example.py

@@ -14,7 +14,6 @@
                                     <h1>Plotly Dash Flask Tutorial</h1>
                                   </a>
                                 <nav>
-                                  <a href="/dashapp/"><i class="fas fa-chart-line"></i> Embdedded Plotly Dash</a>
                                 </nav>
                             </div>
                             </header>

application/plotlydash/dashboard.py

@@ -19,8 +19,8 @@ header {
     }
 
     .logo {
-      width: 50px;
       display: inline-block;
+      width: 40px;
     }
 
     a {