Skip to content

Commit c951e31

Browse files
toddbirchardtoddbirchard
committed
Improved table styles.
2 parents 3895755 + 5805414 commit c951e31

File tree

14 files changed

+134
-79
lines changed

14 files changed

+134
-79
lines changed

‎.gitignore‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ __pycache__/
1717
.Python
1818
build/
1919
develop-eggs/
20-
dist/
2120
downloads/
2221
eggs/
2322
.eggs/
@@ -132,4 +131,5 @@ dmypy.json
132131
.pyre/
133132

134133
# etc
135-
.idea
134+
.idea
135+
.DS_Store

‎README.md‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,31 +12,36 @@
1212
[![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)
1313
[![GitHub Forks](https://img.shields.io/github/forks/toddbirchard/plotlydash-flask-tutorial.svg?style=flat-square&colorA=4c566a&colorB=ebcb8b)](https://github.com/toddbirchard/plotlydash-flask-tutorial/network)
1414

15-
![Plot Dash Tutorial](https://storage.googleapis.com/hackersandslackers-cdn/2018/12/Dash@2x.jpg)
15+
![Plotly Dash Tutorial](https://storage.googleapis.com/hackersandslackers-cdn/2018/12/Dash@2x.jpg)
1616

17-
Source code for the accompanying tutorial found here: https://hackersandslackers.com/plotly-dash-with-flask/
17+
Live demo: https://plotlydashflask.hackersandslackers.app/
1818

19-
## Getting Started
19+
Tutorial: https://hackersandslackers.com/plotly-dash-with-flask/
2020

21-
Installation is recommended with [Pipenv](https://pipenv-fork.readthedocs.io/en/latest/):
21+
## Installation
22+
23+
**Installation via `requirements.txt`**:
2224

2325
```shell
2426
$ git clone https://github.com/toddbirchard/plotlydash-flask-tutorial.git
2527
$ cd plotlydash-flask-tutorial
26-
$ pipenv shell
27-
$ pipenv update
28+
$ python3 -m venv myenv
29+
$ source myenv/bin/activate
30+
$ pip3 install -r requirements.txt
2831
$ flask run
2932
```
3033

31-
Alternatively, try installing via `requirements.txt`:
34+
**Installation via [Pipenv](https://pipenv-fork.readthedocs.io/en/latest/)**:
3235

3336
```shell
3437
$ git clone https://github.com/toddbirchard/plotlydash-flask-tutorial.git
3538
$ cd plotlydash-flask-tutorial
36-
$ python3 -m pip install -r requirements.txt
39+
$ pipenv shell
40+
$ pipenv update
3741
$ flask run
3842
```
3943

44+
4045
-----
4146

4247
**Hackers and Slackers** tutorials are free of charge. If you found this tutorial helpful, a [small donation](https://www.buymeacoffee.com/hackersslackers) would be greatly appreciated to keep us in business. All proceeds go towards coffee, and all coffee goes towards more content.

‎application/__init__.py‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
11
"""Initialize Flask app."""
22
from flask import Flask
3+
from flask_assets import Environment
34

45

56
def create_app():
67
"""Construct core Flask application with embedded Dash app."""
78
app = Flask(__name__, instance_relative_config=False)
89
app.config.from_object('config.Config')
10+
assets = Environment()
11+
assets.init_app(app)
912

1013
with app.app_context():
11-
# Import Flask routes
12-
from application import routes
14+
# Import parts of our core Flask app
15+
from . import routes
16+
from .assets import compile_static_assets
1317

1418
# Import Dash application
15-
from application.plotlydash.dashboard import create_dashboard
19+
from .plotlydash.dashboard import create_dashboard
1620
app = create_dashboard(app)
1721

18-
# Compile CSS
19-
if app.config['FLASK_ENV'] == 'development':
20-
from application.assets import compile_assets
21-
compile_assets(app)
22+
# Compile static assets
23+
compile_static_assets(assets)
2224

2325
return app

‎application/assets.py‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
1-
"""Compile stylesheets abd static assets."""
2-
from flask_assets import Environment, Bundle
1+
"""Compile static assets."""
2+
from flask import current_app as app
3+
from flask_assets import Bundle
34

45

5-
def compile_assets(app):
6-
"""Compile stylesheets if `app` is running in development mode."""
7-
assets = Environment(app)
8-
Environment.auto_build = True
9-
Environment.debug = False
10-
less_bundle = Bundle(
11-
'less/*.less',
12-
filters='less,cssmin',
13-
output='dist/css/styles.css',
14-
extra={'rel': 'stylesheet/less'}
15-
)
6+
def compile_static_assets(assets):
7+
"""
8+
Compile stylesheets if in development mode.
9+
10+
:param assets: Flask-Assets Environment
11+
:type assets: Environment
12+
"""
13+
assets.auto_build = True
14+
assets.debug = False
15+
less_bundle = Bundle('less/*.less',
16+
filters='less,cssmin',
17+
output='dist/css/styles.css',
18+
extra={'rel': 'stylesheet/less'})
1619
assets.register('less_all', less_bundle)
17-
less_bundle.build(force=True)
20+
if app.config['FLASK_ENV'] == 'development':
21+
less_bundle.build()
22+
return assets

‎application/plotlydash/dashboard.py‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,16 @@ def create_dashboard(server):
1212
"""Create a Plotly Dash dashboard."""
1313
dash_app = dash.Dash(server=server,
1414
routes_pathname_prefix='/dashapp/',
15-
external_stylesheets=['/static/dist/css/styles.css',
16-
'https://fonts.googleapis.com/css?family=Lato']
15+
external_stylesheets=[
16+
'/static/dist/css/styles.css',
17+
'https://fonts.googleapis.com/css?family=Lato'
18+
]
1719
)
1820

1921
# Prepare a DataFrame
2022
df = pd.read_csv('data/311-calls.csv', parse_dates=['created'])
23+
df['created'] = df['created'].dt.date
24+
df.drop(columns=['incident_zip'], inplace=True)
2125
num_complaints = df['complaint_type'].value_counts()
2226
to_remove = num_complaints[num_complaints <= 30].index
2327
df.replace(to_remove, np.nan, inplace=True)
@@ -41,12 +45,12 @@ def create_dashboard(server):
4145
],
4246
'layout': {
4347
'title': 'NYC 311 Calls category.',
44-
'height': 600,
48+
'height': 500,
4549
'padding': 150
4650
}
4751
}),
48-
create_data_table(df)
49-
],
52+
create_data_table(df)
53+
],
5054
id='dash-container'
5155
)
5256
return dash_app.server

‎application/plotlydash/layout.py‎

Lines changed: 31 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,31 @@
1-
html_layout = '''<!DOCTYPE html>
2-
<html>
3-
<head>
4-
{%metas%}
5-
<title>{%title%}</title>
6-
{%favicon%}
7-
{%css%}
8-
</head>
9-
<body class="dash-template">
10-
<header>
11-
<div class="nav-wrapper">
12-
<a href="/">
13-
<img src="/static/img/logo.png" class="logo" />
14-
<h1>Plotly Dash Flask Tutorial</h1>
15-
</a>
16-
<nav>
17-
</nav>
18-
</div>
19-
</header>
20-
{%app_entry%}
21-
<footer>
22-
{%config%}
23-
{%scripts%}
24-
{%renderer%}
25-
</footer>
26-
</body>
27-
</html>'''
1+
"""Plotly Dash HTML layout override."""
2+
3+
html_layout = '''
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
{%metas%}
8+
<title>{%title%}</title>
9+
{%favicon%}
10+
{%css%}
11+
</head>
12+
<body class="dash-template">
13+
<header>
14+
<div class="nav-wrapper">
15+
<a href="/">
16+
<img src="/static/img/logo.png" class="logo" />
17+
<h1>Plotly Dash Flask Tutorial</h1>
18+
</a>
19+
<nav>
20+
</nav>
21+
</div>
22+
</header>
23+
{%app_entry%}
24+
<footer>
25+
{%config%}
26+
{%scripts%}
27+
{%renderer%}
28+
</footer>
29+
</body>
30+
</html>
31+
'''

‎application/routes.py‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ def home():
88
"""Landing page."""
99
return render_template(
1010
'index.jinja2',
11-
title='Plotly Dash & Flask Tutorial',
11+
title='Plotly Dash Flask Tutorial',
12+
description='Embed Plotly Dash into your Flask applications.',
1213
template='home-template',
1314
body="This is a homepage served with Flask."
1415
)

‎application/static/dist/css/styles.css‎

Lines changed: 5 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎application/static/less/header.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ header {
22
position: relative;
33
width: 100%;
44
padding: 30px 0 !important;
5-
background: white!important;
5+
background: white !important;
66
box-shadow: 0 0 5px #bec6cf;
77
font-family: 'Lato', sans-serif;
88

‎application/static/less/home.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
margin: 50px auto;
1111
padding: 60px;
1212
background: white;
13-
box-shadow: 0 0 5px rgba(65,67,144,0.15);
13+
box-shadow: 0 0 5px rgba(65, 67, 144, 0.15);
1414
text-align: center;
1515
@media (max-width: 800px) {
1616
max-width: 78%;

0 commit comments

Comments
 (0)