Upgrade to Python3.10

Author: toddbirchard

.env.example

@@ -1,6 +1,8 @@
-FLASK_ENV=development
+FLASK_ENV=production
+FLASK_DEBUG=False
 SECRET_KEY=randomstringofcharacters
+
 LESS_BIN=/usr/local/bin/lessc
+COMPRESSOR_DEBUG=False
 ASSETS_DEBUG=False
-LESS_RUN_IN_DEBUG=False
-COMPRESSOR_DEBUG=True
+LESS_RUN_IN_DEBUG=False

.flake8

@@ -0,0 +1,4 @@
+[flake8]
+select = E9,F63,F7,F82
+exclude = .git,.github,__pycache__,.pytest_cache,.venv,logs,creds
+max-line-length = 120

Makefile

@@ -1,6 +1,6 @@
 PROJECT_NAME := $(shell basename $CURDIR)
-VIRTUAL_ENVIRONMENT := $(CURDIR)/.venv
-LOCAL_PYTHON := $(VIRTUAL_ENVIRONMENT)/bin/python3
+VIRTUAL_ENV := $(CURDIR)/.venv
+LOCAL_PYTHON := $(VIRTUAL_ENV)/bin/python3
 
 define HELP
 Manage $(PROJECT_NAME). Usage:
@@ -19,63 +19,52 @@ export HELP
 
 .PHONY: run install deploy update format lint clean help
 
-
 all help:
 	@echo "$$HELP"
 
+env: $(VIRTUAL_ENV)
 
-env: $(VIRTUAL_ENVIRONMENT)
-
-
-$(VIRTUAL_ENVIRONMENT):
-	if [ -d $(VIRTUAL_ENVIRONMENT) ]; then \
-		@echo "Creating Python virtual environment..." && \
-		python3 -m venv $(VIRTUAL_ENVIRONMENT) && \
+$(VIRTUAL_ENV):
+	if [ ! -d $(VIRTUAL_ENV) ]; then \
+		echo "Creating Python virtual env in \`${VIRTUAL_ENV}\`"; \
+		python3 -m venv $(VIRTUAL_ENV); \
 	fi
 
-
 .PHONY: run
 run: env
-	$(shell python3 -m wsgi.py)
-
+	$(LOCAL_PYTHON) -m main
 
 .PHONY: install
-install:
-	if [ ! -d "./.venv" ]; then python3 -m venv $(VIRTUAL_ENVIRONMENT); fi
-	$(shell . .venv/bin/activate)
-	$(LOCAL_PYTHON) -m pip install --upgrade pip setuptools wheel
-	$(LOCAL_PYTHON) -m pip install -r requirements.txt
-
+install: env
+	$(LOCAL_PYTHON) -m pip install --upgrade pip setuptools wheel && \
+	$(LOCAL_PYTHON) -m pip install -r requirements.txt && \
+	npm i -g less && \
+	echo Installed dependencies in \`${VIRTUAL_ENV}\`;
 
 .PHONY: deploy
 deploy:
-	make clean
-	make install
+	make install && \
 	make run
 
-
 .PHONY: test
 test: env
 	$(LOCAL_PYTHON) -m \
-		coverage run -m pytest -v \
-		--disable-pytest-warnings \
-		&& coverage html --title='Coverage Report' -d .reports \
-		&& open .reports/index.html
-
+		coverage run -m pytest -vv \
+		--disable-pytest-warnings && \
+		coverage html --title='Coverage Report' -d .reports && \
+		open .reports/index.html
 
 .PHONY: update
-update:
-	if [ ! -d "./.venv" ]; then python3 -m venv $(VIRTUAL_ENVIRONMENT); fi
-	$(LOCAL_PYTHON) -m pip install --upgrade pip setuptools wheel
-	poetry update
-	poetry export -f requirements.txt --output requirements.txt --without-hashes
-
+update: env
+	$(LOCAL_PYTHON) -m pip install --upgrade pip setuptools wheel && \
+	poetry update && \
+	poetry export -f requirements.txt --output requirements.txt --without-hashes && \
+	echo Installed dependencies in \`${VIRTUAL_ENV}\`;
 
 .PHONY: format
 format: env
-	isort --multi-line=3 .
-	black .
-
+	$(LOCAL_PYTHON) -m isort --multi-line=3 . && \
+	$(LOCAL_PYTHON) -m black .
 
 .PHONY: lint
 lint: env
@@ -85,19 +74,20 @@ lint: env
 			--show-source \
 			--statistics
 
-
 .PHONY: clean
 clean:
-	find . -name '*.pyc' -delete
-	find . -name '__pycache__' -delete
-	find . -name 'poetry.lock' -delete
-	find . -name 'Pipefile.lock' -delete
-	find . -name '*.log' -delete
-	find . -name '.coverage' -delete
-	find . -wholename 'logs/*.json' -delete
-	find . -wholename '*/.pytest_cache' -delete
-	find . -wholename '**/.pytest_cache' -delete
-	find . -wholename './logs/*.json' -delete
-	find . -wholename '.webassets-cache/*' -delete
-	find . -wholename './logs' -delete
-	find . -wholename './.reports' -delete
+	find . -name '.coverage' -delete && \
+	find . -name '*.pyc' -delete \
+	find . -name '__pycache__' -delete \
+	find . -name 'poetry.lock' -delete \
+	find . -name '*.log' -delete \
+	find . -name '.DS_Store' -delete \
+	find . -wholename '**/*.pyc' -delete && \
+	find . -wholename '**/*.html' -delete && \
+	find . -type d -wholename '__pycache__' -exec rm -rf {} + && \
+	find . -type d -wholename '.venv' -exec rm -rf {} + && \
+	find . -type d -wholename '.pytest_cache' -exec rm -rf {} + && \
+	find . -type d -wholename '**/.pytest_cache' -exec rm -rf {} + && \
+	find . -type d -wholename '**/*.log' -exec rm -rf {} + && \
+	find . -type d -wholename './.reports/*' -exec rm -rf {} + && \
+	find . -type d -wholename '**/.webassets-cache' -exec rm -rf {} +

README.md

@@ -1,11 +1,11 @@
 # Plotly Dash Flask Tutorial
 
-![Python](https://img.shields.io/badge/Python-^3.9-blue.svg?logo=python&longCache=true&logoColor=white&colorB=5e81ac&style=flat-square&colorA=4c566a)
-![Flask](https://img.shields.io/badge/Flask^2.0.0-blue.svg?longCache=true&logo=flask&style=flat-square&logoColor=white&colorB=5e81ac&colorA=4c566a)
+![Python](https://img.shields.io/badge/Python-^3.10-blue.svg?logo=python&longCache=true&logoColor=white&colorB=5e81ac&style=flat-square&colorA=4c566a)
+![Flask](https://img.shields.io/badge/Flask^2.2.5-blue.svg?longCache=true&logo=flask&style=flat-square&logoColor=white&colorB=5e81ac&colorA=4c566a)
 ![Flask-Assets](https://img.shields.io/badge/Flask--Assets-v2.0-blue.svg?longCache=true&logo=flask&style=flat-square&logoColor=white&colorB=5e81ac&colorA=4c566a)
-![Pandas](https://img.shields.io/badge/Pandas-v^1.4.0-blue.svg?longCache=true&logo=python&longCache=true&style=flat-square&logoColor=white&colorB=5e81ac&colorA=4c566a)
-![Dash](https://img.shields.io/badge/Dash-v^2.0.0-blue.svg?longCache=true&logo=python&longCache=true&style=flat-square&logoColor=white&colorB=5e81ac&colorA=4c566a)
-![Plotly](https://img.shields.io/badge/Plotly-v^5.8.0-blue.svg?longCache=true&logo=python&longCache=true&style=flat-square&logoColor=white&colorB=5e81ac&colorA=4c566a)
+![Pandas](https://img.shields.io/badge/Pandas-v^2.1.0-blue.svg?longCache=true&logo=python&longCache=true&style=flat-square&logoColor=white&colorB=5e81ac&colorA=4c566a)
+![Dash](https://img.shields.io/badge/Dash-v^2.13.0-blue.svg?longCache=true&logo=python&longCache=true&style=flat-square&logoColor=white&colorB=5e81ac&colorA=4c566a)
+![Plotly](https://img.shields.io/badge/Plotly-v^5.16.1-blue.svg?longCache=true&logo=python&longCache=true&style=flat-square&logoColor=white&colorB=5e81ac&colorA=4c566a)
 ![GitHub Last Commit](https://img.shields.io/github/last-commit/google/skia.svg?style=flat-square&colorA=4c566a&colorB=a3be8c)
 [![GitHub Issues](https://img.shields.io/github/issues/toddbirchard/plotlydash-flask-tutorial.svg?style=flat-square&colorA=4c566a&colorB=ebcb8b)](https://github.com/toddbirchard/plotlydash-flask-tutorial/issues)
 [![GitHub Stars](https://img.shields.io/github/stars/toddbirchard/plotlydash-flask-tutorial.svg?style=flat-square&colorB=ebcb8b&colorA=4c566a)](https://github.com/toddbirchard/plotlydash-flask-tutorial/stargazers)
@@ -18,7 +18,7 @@ Make Plotly Dash part of your Flask Application by following this example.
 * **Tutorial**: https://hackersandslackers.com/plotly-dash-with-flask/
 * **Demo**: https://plotlydashflask.hackersandslackers.app/
 
-# Getting Started
+## Getting Started
 
 Get set up locally in two steps:
 
@@ -33,7 +33,6 @@ Replace the values in **.env.example** with your values and rename this file to
 * `LESS_RUN_IN_DEBUG` *(optional)*: Debug LESS while in `development`.
 * `COMPRESSOR_DEBUG` *(optional)*: Debug asset compression while in `development`.
 
-
 *Remember never to commit secrets saved in .env files to Github.*
 
 ### Installation
@@ -44,7 +43,7 @@ Get up and running with `make deploy`:
 $ git clone https://github.com/hackersandslackers/plotlydash-flask-tutorial.git
 $ cd dashboard-flask-tutorial
 $ make deploy
-``` 
+```
 
 -----
 

config.py

@@ -1,18 +1,16 @@
 """Flask config."""
 from os import environ, path
 
-from dotenv import load_dotenv
-
 BASE_DIR = path.abspath(path.dirname(__file__))
-load_dotenv(path.join(BASE_DIR, ".env"))
 
 
 class Config:
     """Flask configuration variables."""
 
     # General Config
-    FLASK_APP = "wsgi.py"
-    FLASK_ENV = environ.get("FLASK_ENV")
+    ENVIRONMENT = environ.get("ENVIRONMENT")
+    FLASK_APP = "main.py"
+    FLASK_DEBUG = environ.get("FLASK_DEBUG")
     SECRET_KEY = environ.get("SECRET_KEY")
 
     # Assets

data/311-calls.csv renamed to data/calls.csv

@@ -4,4 +4,4 @@
 app = init_app()
 
 if __name__ == "__main__":
-    app.run(host="0.0.0.0")
+    app.run(host="0.0.0.0", port=8083, debug=True, load_dotenv=True)

wsgi.py renamed to main.py

@@ -19,6 +19,6 @@ def compile_static_assets(assets):
         extra={"rel": "stylesheet/less"},
     )
     assets.register("less_all", less_bundle)
-    if app.config["FLASK_ENV"] == "development":
+    if app.config["ENVIRONMENT"] == "development":
         less_bundle.build()
     return assets

plotly_flask_tutorial/assets.py

@@ -1,17 +1,22 @@
 """Instantiate a Dash app."""
 import dash
-from dash import dash_table
-from dash import dcc
-from dash import html
+from dash import dcc, html
+from dash.dash_table import DataTable
+from flask import Flask
+from pandas import DataFrame
 
 from .data import create_dataframe
 from .layout import html_layout
 
 
-def init_dashboard(server):
-    """Create a Plotly Dash dashboard."""
-    dash_app = dash.Dash(
-        server=server,
+def init_dashboard(app: Flask):
+    """
+    Create a Plotly Dash dashboard within a running Flask app.
+
+    :param Flask app: Top-level Flask application.
+    """
+    dash_module = dash.Dash(
+        server=app,
         routes_pathname_prefix="/dashapp/",
         external_stylesheets=[
             "/static/dist/css/styles.css",
@@ -23,10 +28,10 @@ def init_dashboard(server):
     df = create_dataframe()
 
     # Custom HTML layout
-    dash_app.index_string = html_layout
+    dash_module.index_string = html_layout
 
     # Create Layout
-    dash_app.layout = html.Div(
+    dash_module.layout = html.Div(
         children=[
             dcc.Graph(
                 id="histogram-graph",
@@ -51,12 +56,18 @@ def init_dashboard(server):
         ],
         id="dash-container",
     )
-    return dash_app.server
+    return dash_module.server
+
+
+def create_data_table(df: DataFrame) -> DataTable:
+    """
+    Create Dash DataTable object from Pandas DataFrame.
 
+    :param DataFrame df: Pandas DataFrame from which to build a Dash table.
 
-def create_data_table(df):
-    """Create Dash datatable from Pandas DataFrame."""
-    table = dash_table.DataTable(
+    :returns: DataTable
+    """
+    table = DataTable(
         id="database-table",
         columns=[{"name": i, "id": i} for i in df.columns],
         data=df.to_dict("records"),

plotly_flask_tutorial/dashboard/__init__.py

@@ -1,11 +1,12 @@
 """Prepare data for Plotly Dash."""
 import numpy as np
 import pandas as pd
+from pandas import DataFrame
 
 
-def create_dataframe():
+def create_dataframe() -> DataFrame:
     """Create Pandas DataFrame from local CSV."""
-    df = pd.read_csv("data/311-calls.csv", parse_dates=["created"])
+    df = pd.read_csv("data/calls.csv", parse_dates=["created"])
     df["created"] = df["created"].dt.date
     df.drop(columns=["incident_zip"], inplace=True)
     num_complaints = df["complaint_type"].value_counts()

plotly_flask_tutorial/dashboard/data.py

@@ -13,7 +13,7 @@
             <header>
               <div class="nav-wrapper">
                 <a href="/">
-                    <img src="/static/img/logo.png" class="logo" />
+                    <img src="/static/img/logo@2x.png" class="logo" />
                     <h1>Plotly Dash Flask Tutorial</h1>
                   </a>
                 <nav>

plotly_flask_tutorial/dashboard/layout.py

@@ -1,15 +1,16 @@
 """Routes for parent Flask app."""
 from flask import current_app as app
-from flask import render_template
+from flask import render_template, request
 
 
 @app.route("/")
 def home():
-    """Landing page."""
+    """Home page of Flask Application."""
     return render_template(
         "index.jinja2",
         title="Plotly Dash Flask Tutorial",
         description="Embed Plotly Dash into your Flask applications.",
         template="home-template",
         body="This is a homepage served with Flask.",
+        base_url=request.base_url,
     )