Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c951e31

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /