Khóa học
Xây dựng Dashboard với Dash và Plotly
4 giờ
17K
Dash là một framework Python để xây dựng ứng dụng web. Nó được xây dựng trên Flask, Plotly.js, React và React Js. Dash cho phép bạn tạo bảng điều khiển chỉ với Python. Dash là mã nguồn mở và các ứng dụng của nó chạy trên trình duyệt web. Trong hướng dẫn này, chúng tôi giới thiệu các kiến thức nền tảng về Dash và giả định rằng bạn đã có kinh nghiệm với Plotly.
Cài đặt Dash
Để bắt đầu sử dụng Dash, chúng ta cần cài đặt một số gói.
- Phần lõi backend của Dash.
- Front-end Dash
- Các thành phần HTML của Dash
- Các thành phần cốt lõi của Dash
- Plotly
pip install dash==0.21.1
pip install dash-renderer==0.13.0
pip install dash-html-components==0.11.0
pip install dash-core-components==0.23.0
pip install plotly --upgradeBố cục ứng dụng Dash
Một ứng dụng Dash thường gồm hai phần. Phần đầu là bố cục, mô tả giao diện ứng dụng, và phần thứ hai mô tả tính tương tác của ứng dụng. Dash cung cấp các lớp HTML cho phép chúng ta tạo nội dung HTML bằng Python. Để sử dụng các lớp này, bạn cần import dash_core_components và dash_html_components. Bạn cũng có thể tạo các thành phần tùy chỉnh bằng Javascript và React Js.
Để bắt đầu, chúng ta sẽ tạo tệp tên là app.py bằng trình soạn thảo ưa thích, rồi import các gói này.
import dash
import dash_core_components as dcc
import dash_html_components as html
Tương tự như Flask, chúng ta khởi tạo Dash bằng cách gọi lớp Dash của dash. Sau đó có thể tạo bố cục cho ứng dụng. Ta dùng lớp Div từ dash_html_components để tạo một HTML Div. Tiếp theo dùng các thành phần HTML để tạo các thẻ như H1, H2, v.v. dash_html_components có đầy đủ các thẻ HTML. Để tạo biểu đồ trên bố cục, ta dùng lớp Graph từ dash_core_components. Graph hiển thị trực quan hóa dữ liệu tương tác bằng plotly.js. Lớp Graph nhận một đối tượng figure với data cần vẽ và chi tiết layout. Dash cũng cho phép bạn tạo kiểu như đổi màu nền và màu chữ. Bạn có thể đổi nền bằng thuộc tính style và truyền vào một đối tượng với màu mong muốn. Ở đây, chúng tôi định nghĩa một từ điển màu với màu nền và màu chữ muốn dùng. Tương tự, ta có thể đổi nền của layout dùng thuộc tính plot_bgcolor.
Trong HTML, thuộc tính style được chỉ định bằng dấu chấm phẩy; còn trong Dash, ta cung cấp một dictionary. Các khóa trong dictionary dùng camelCase, ví dụ text-align là textAlign. Thay vì dùng classes như trong HTML, trong Dash dùng className.
app = dash.Dash()
colors = {
'background': '#111111',
'text': '#7FDBFF'
}
app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
html.H1(
children='Hello Dash',
style={
'textAlign': 'center',
'color': colors['text']
}
),
html.Div(children='Dash: A web application framework for Python.', style={
'textAlign': 'center',
'color': colors['text']
}),
dcc.Graph(
id='Graph1',
figure={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
],
'layout': {
'plot_bgcolor': colors['background'],
'paper_bgcolor': colors['background'],
'font': {
'color': colors['text']
}
}
}
)
])
Để xem trực quan hóa, ta cần chạy web server giống như trong Flask. Hãy nhớ Dash được xây dựng trên Flask. Ta cũng đặt debug là true để không phải tải lại server mỗi khi thay đổi.
if __name__ == '__main__':
app.run_server(debug=True)Tiếp theo, mở terminal và khởi động server bằng cách gõ: python app.py
Thao tác này sẽ khởi động một web server mới tại http://127.0.0.1:8050/. Truy cập và xem dashboard vừa tạo.
Tạo biểu đồ phân tán (Scatter)
Để vẽ biểu đồ phân tán, ta import các thành phần dash như trước. Ta cũng cần import graph_objs của Plotly để vẽ scatter. Như đã đề cập, ta dùng lớp Div và thành phần Graph từ Dash để thực hiện. Thành phần Graph nhận một đối tượng figure gồm dữ liệu và mô tả layout. Ta vẽ scatter bằng thuộc tính scatter của graph_objs. Để đảm bảo đó là biểu đồ phân tán, ta truyền thuộc tính mode và đặt là markers. Nếu không, đồ thị sẽ có các đường nối.
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
app = dash.Dash()
df = pd.read_csv(
'https://gist.githubusercontent.com/chriddyp/' +
'5d1ea79569ed194d432e56108a04d188/raw/' +
'a9f9e8076b837d541398e999dcbac2b2826a81f8/'+
'gdp-life-exp-2007.csv')
app.layout = html.Div([
dcc.Graph(
id='life-exp-vs-gdp',
figure={
'data': [
go.Scatter(
x=df[df['continent'] == i]['gdp per capita'],
y=df[df['continent'] == i]['life expectancy'],
text=df[df['continent'] == i]['country'],
mode='markers',
opacity=0.8,
marker={
'size': 15,
'line': {'width': 0.5, 'color': 'white'}
},
name=i
) for i in df.continent.unique()
],
'layout': go.Layout(
xaxis={'type': 'log', 'title': 'GDP Per Capita'},
yaxis={'title': 'Life Expectancy'},
margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
legend={'x': 0, 'y': 1},
hovermode='closest'
)
}
)
])
if __name__ == '__main__':
app.run_server()
Markdown
Đôi khi bạn cần đưa nhiều văn bản vào dashboard. Bạn có thể làm điều này bằng thuộc tính Mardown của dash_core_components như dưới đây.
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
markdown_text = '''
### Dash and Markdown
A lot of text
'''
app.layout = html.Div([
dcc.Markdown(children=markdown_text)
])
if __name__ == '__main__':
app.run_server()Các thành phần cốt lõi
Tiếp theo, hãy xem một số dash_core_components bạn sẽ gặp khi dùng Dash. Bạn có thể tạo một menu thả xuống như bên dưới. Thực hiện bằng cách gọi Dropdown từ dash_core_components và truyền options là danh sách các dictionary. Bạn có thể đặt giá trị mặc định bằng thuộc tính values và truyền vào tùy chọn mặc định.
dcc.Dropdown(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': u'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value='MTL'
)Tạo menu thả xuống nhiều lựa chọn tương tự như trên. Điểm khác là bạn đặt thuộc tính multi thành true vì mặc định là False. Sau đó chỉ định các mục muốn được chọn sẵn bằng thuộc tính values.
html.Label('Multi-Select Dropdown'),
dcc.Dropdown(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': u'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value=['MTL', 'SF'],
multi=True
)Bạn có thể tạo nút radio bằng thuộc tính RadioItems. Sau đó truyền options là danh sách các dictionary. Bạn cũng có thể đặt giá trị mặc định bằng thuộc tính values.
html.Label('Radio Items'),
dcc.RadioItems(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': u'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value='MTL'
)Để tạo hộp kiểm, bạn gọi thuộc tính Checklist từ dash_core_components. Options và giá trị mặc định truyền vào như trên.
html.Label('Checkboxes'),
dcc.Checklist(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': u'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
values=['MTL', 'SF']
)Chắc chắn bạn sẽ cần ô nhập liệu trong ứng dụng. Để tạo, bạn dùng thuộc tính Input. Dùng thẻ Html Label để tạo nhãn cho ô Input. Với thuộc tính values bạn có thể chỉ định văn bản sẵn trong ô; còn để chỉ định kiểu, dùng type và cho biết đó là văn bản, số, v.v.
html.Label('Text Box'),
dcc.Input(value='MTL', type='text')
Gọi trợ giúp
Vì các thành phần Dash là khai báo, gọi lệnh help trên bất kỳ thành phần nào sẽ hiển thị trợ giúp cho thành phần đó.
help(dcc.Input)
Tính tương tác
Bây giờ hãy xem cách làm cho ứng dụng Dash tương tác. Để làm điều này, chúng ta cần import Input và Output từ dash.dependencies. Đừng nhầm chúng với HTML Input vì chúng khác nhau. HTML Input được import từ dash core components. Bên dưới, chúng ta tạo một ô nhập văn bản và liên kết nó với một callback để mỗi khi bạn gõ gì đó vào ô, nó sẽ cập nhật my-div theo thời gian thực. Để kích hoạt việc này, Dash cung cấp decorator @app cho phép liên kết một hàm callback với my-div và ô nhập HTML. Lưu ý rằng ta dùng decorator trước khi khai báo hàm update_output_div.
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash()
app.layout = html.Div([
dcc.Input(id='my-id', value='Dash App', type='text'),
html.Div(id='my-div')
])
@app.callback(
Output(component_id='my-div', component_property='children'),
[Input(component_id='my-id', component_property='value')]
)
def update_output_div(input_value):
return 'You\'ve entered "{}"'.format(input_value)
if __name__ == '__main__':
app.run_server()Xác thực
Dash cung cấp xác thực qua một gói riêng có tên dash-auth. Nó hỗ trợ hai chế độ xác thực: HTTP Basic Auth và Plotly OAuth. Với Basic Auth, bạn hardcode một tập tên người dùng và mật khẩu trong ứng dụng. Cách này có một số hạn chế như người dùng không thể đăng xuất khỏi ứng dụng, không thể tạo tài khoản hoặc đổi mật khẩu, và bạn chịu trách nhiệm lưu trữ an toàn tên người dùng và mật khẩu trong mã. Plotly OAuth cung cấp xác thực thông qua tài khoản Plotly trực tuyến của bạn và không miễn phí.
Để thiết lập Basic Auth, làm như sau. Trước tiên, cài đặt các gói cần thiết.
pip install dash==0.21.1
pip install dash-auth==1.0.0Sau đó thiết lập các cặp tên người dùng và mật khẩu bạn muốn dùng trong ứng dụng.
VALID_USERNAME_PASSWORD_PAIRS = [
['hello', 'world']
]Tiện ích dash_auth.BasicAuth từ Dash sẽ xử lý xác thực cho bạn sau khi các cặp mật khẩu được đặt. Tất cả những gì cần làm là truyền các cặp mật khẩu và tên ứng dụng của bạn vào dash_auth.BasicAuth.
app = dash.Dash('auth')
auth = dash_auth.BasicAuth(
app,
VALID_USERNAME_PASSWORD_PAIRS
)
Triển khai Dashboard trên Heroku
Triển khai dashboard của bạn trên Heroku khá dễ nhưng cần vài bước.
Trước tiên, tạo một thư mục chứa toàn bộ tệp dự án. Trên Ubuntu, bạn có thể dùng lệnh mkdir.
$ mkdir my_dash_app
$ cd my_dash_appTiếp theo, khởi tạo thư mục với git và virtualenv. Git dùng để quản lý phiên bản, còn virtualenv giúp tạo môi trường ảo để chứa các phụ thuộc Python. Sau khi tạo môi trường, kích hoạt nó bằng lệnh source.
$ git init
$ virtualenv venv
$ source venv/bin/activateTiếp theo, cài đặt tất cả các gói cần cho ứng dụng Dash:
$ pip install dash
$ pip install dash-renderer
$ pip install dash-core-components
$ pip install dash-html-components
$ pip install plotlyĐể phục vụ ứng dụng Dash, chúng ta cần một web server Python. Không dùng server phát triển của Flask trong môi trường production. Ta dùng web server Gunicorn cho mục đích này. Cài đặt như sau:
$ pip install gunicornTiếp theo, chúng ta cần tạo một vài tệp trong thư mục:
- app.py, nơi chúng ta viết mã cho ứng dụng dash.
- .gitignore để đảm bảo các tệp không cần thiết không bị đẩy lên production
- requirements.txt chứa tất cả phụ thuộc Python và phiên bản của chúng.
- Procfile để triển khai.
Thêm nội dung sau vào app.py. Đây chỉ là ví dụ, bạn có thể dùng dashboard Dash của riêng bạn.
import os
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
server = app.server
app.layout = html.Div([
html.H2('Hello World'),
dcc.Dropdown(
id='dropdown',
options=[{'label': i, 'value': i} for i in ['LA', 'NYC', 'MTL']],
value='LA'
),
html.Div(id='display-value')
])
@app.callback(dash.dependencies.Output('display-value', 'children'),
[dash.dependencies.Input('dropdown', 'value')])
def display_value(value):
return 'You have selected "{}"'.format(value)
if __name__ == '__main__':
app.run_server(debug=True)Cần nhắc lại rằng cốt lõi của ứng dụng Dash cũng là một ứng dụng Flask. Cho mục đích triển khai, chúng ta cần truy cập instance ứng dụng Flask. Dash cho phép làm điều này bằng
app.serverapp = dash.Dash(__name__)
server = app.serverThêm các tệp bạn không muốn đẩy lên production vào .gitignore. Một tệp .gitignore cho Python tốt có sẵn trên Github
Bây giờ hãy chỉ định thông tin triển khai trong Procfile. Ta dùng biến web để chỉ định server là gunicorn. Ta cũng chỉ định chi tiết ứng dụng bằng biến app. app đề cập tới tên tệp app.py và server đề cập tới biến server bên trong tệp đó.
web: gunicorn app:serverChúng ta cũng cần ghi các phụ thuộc Python vào tệp requirements. Heroku sẽ cài đặt chúng trong quá trình triển khai.
pip freeze > requirements.txtCác bước tiếp theo giả định rằng bạn đã có tài khoản Heroku và đã cài Heroku CLI. Nếu chưa, hãy truy cập https://www.heroku.com để thiết lập.
Bước tiếp theo là tạo một ứng dụng Heroku trên terminal và thêm tất cả gói của ứng dụng. Sau khi commit thay đổi, đẩy ứng dụng của bạn lên heroku master. Kết quả của lệnh này sẽ có liên kết tới ứng dụng Dash đang chạy trên Heroku.
$ heroku create your-app-name
$ git add .
$ git commit -m 'Your-commit-message'
$ git push heroku masterBài viết này đóng vai trò giới thiệu việc xây dựng dashboard thuần Python bằng Dash của Plotly. Để tìm hiểu thêm về Dash, hãy truy cập tài liệu chính thức.
Nếu bạn quan tâm học thêm về Python, hãy xem Hướng dẫn Python cho người mới bắt đầu và khóa Intermediate Python for Data Science.
Chủ đề
