Bố cục thành phần dash-bootstrap

Dash là thư viện mã nguồn mở được phát hành theo giấy phép MIT. Được viết trên Plotly. js và React. js, Dash lý tưởng cho việc xây dựng và triển khai các ứng dụng dữ liệu với UI (giao diện người dùng) tùy chỉnh. Dash đủ đơn giản để bạn có thể liên kết giao diện người dùng với mã của mình trong vòng 10 phút chưa đầy đủ. Ứng dụng Dash được hiển thị trên trình duyệt web, vì vậy nó có thể chạy trên nhiều nền tảng và cả thiết bị di động. Hướng dẫn sử dụng Dash

Cài đặt dấu gạch ngang

Yêu cầu máy cài sẵn Python 3.
In terminal run command after to install Dash.

pip install dash

Với lệnh trên thì ngoài dấu gạch ngang, pip cũng sẽ cài đặt thư viện hỗ trợ vẽ đồ thị đó là Plotly. py.

Và cuối cùng chúng ta cần cài đặt thư viện Pandas bằng lệnh

pip install pandas

Go Pandas

Pandas is a open library library was play on the BSD BSD. Pandas cung cấp các cấu trúc dữ liệu có hiệu suất cao, dễ sử dụng và các công cụ phân tích dữ liệu cho ngôn ngữ lập trình Python

Pandas cung cấp 2 cấu trúc dữ liệu chính là DataFrame và Series. DataFrame là một cấu trúc dữ liệu 2 chiều có thể lưu trữ dữ liệu thuộc các loại khác nhau (bao gồm các ký tự, số nguyên, giá trị dấu phẩy động, phân loại dữ liệu và hơn thế nữa) trong các cột. Mỗi cột trong DataFrame là một chuỗi

Có ba quy ước phổ biến để lưu trữ dữ liệu dưới dạng cột

• • Dữ liệu dạng dài có một hàng cho mỗi quan sát và một cột cho mỗi biến. Điều này phù hợp để lưu trữ và hiển thị dữ liệu đa biến, tức thời với số lượng lớn hơn 2

• • Dữ liệu định dạng rộng có một hàng cho mỗi giá trị của một biến đầu tiên và một cột cho mỗi giá trị của biến thứ hai. Điều này phù hợp để lưu trữ và hiển thị dữ liệu 2D

• • Hỗn hợp dữ liệu dạng dữ liệu là kết hợp của dữ liệu dạng dài và dữ liệu dạng rộng

Bố cục dấu gạch ngang

Ứng dụng Dash bao gồm hai phần. Phần đầu tiên là “bố cục” của ứng dụng và nó mô tả ứng dụng trông như thế nào. Phần thứ hai mô tả khả năng tương tác của ứng dụng, nó là “callbacks”.

“Layout” là 1 cây tập hợp các “thành phần“

Dash cung cấp rất nhiều loại thành phần. Các thành phần HTML của Dash, các thành phần cốt lõi của Dash, Dash DataTable, Dash DAQ, các thành phần Bootstrap của Dash,…

Trong khuôn khổ của bài viết, chúng ta sẽ tìm hiểu các Thành phần HTML của Dash và các Thành phần cốt lõi của Dash

Các thành phần HTML của dấu gạch ngang

Là chức năng cung cấp các kiểu thành phần HTML, dùng để định nghĩa các thẻ HTML cho bố cục

Để sử dụng các Thành phần HTML của Dash, chúng ta cần nhập vào tệp. py as after.

pip install pandas

9

Ví dụ

html_demo. py

import dash
from dash import html

app = dash.Dash(__name__)

app.layout = html.Div(children=[
   html.H1(children='Hello Dash'),
])

if __name__ == '__main__':
   app.run_server(debug=True)

import dash
from dash import html

app = dash.Dash(__name__)

app.layout = html.Div(children=[
   html.H1(children='Hello Dash'),
])

if __name__ == '__main__':
   app.run_server(debug=True)

0 sẽ tạo ra

import dash
from dash import html

app = dash.Dash(__name__)

app.layout = html.Div(children=[
   html.H1(children='Hello Dash'),
])

if __name__ == '__main__':
   app.run_server(debug=True)

1 trên trình duyệt

Cũng giống như các thẻ HTML, chúng ta hoàn toàn có thể thay đổi kiểu của html_component bằng thuộc tính “kiểu“

Ví dụ.

import dash
from dash import html

app = dash.Dash(__name__)

app.layout = html.Div(children=[
   html.H1(children='Hello Dash'),
])

if __name__ == '__main__':
   app.run_server(debug=True)

2

Đoạn mã trên được hiển thị dưới dạng

import dash
from dash import html

app = dash.Dash(__name__)

app.layout = html.Div(children=[
   html.H1(children='Hello Dash'),
])

if __name__ == '__main__':
   app.run_server(debug=True)

3

Có một số khác biệt quan trọng giữa các Thành phần HTML của Dash và các thuộc tính HTML

• Thuộc tính “kiểu” trong HTML là một chuỗi được phân tách bằng dấu chấm phẩy. Trong Dash, bạn cần cung cấp một từ điển
• Các khóa trong từ điển là dạng camelCased. Vì vậy, thay vì “text-align“, trong Dash là “textAlign“
• Thuộc tính “class” trong HTML là “className” trong Dash
• Con of the HTML tag is only default through argument with the keyword “ children“

Hết sức thay vì sử dụng style trực tiếp chúng ta có thể sử dụng tệp CSS để định nghĩa style cho bố cục, chi tiết tham khảo. https. // dấu gạch ngang. âm mưu. com/tài nguyên bên ngoài

Bạn có thể xem tất cả các thành phần có sẵn trong Thư viện thành phần HTML của Dash. https. // dấu gạch ngang. âm mưu. com/dash-html-thành phần

Thành phần cốt lõi của Dash

Bao gồm một tập hợp các thành phần cao cấp hơn như dropdown, checkbox, radio, graph, v. v. Bạn có thể xem tất cả các thành phần có sẵn trong Thư viện thành phần cốt lõi của Dash. https. // dấu gạch ngang. âm mưu. com/dash-core-components

Để sử dụng Dash Core Components, chúng ta cần nhập vào tệp. py as after.

import dash
from dash import html

app = dash.Dash(__name__)

app.layout = html.Div(children=[
   html.H1(children='Hello Dash'),
])

if __name__ == '__main__':
   app.run_server(debug=True)

4

Trong các thành phần cốt lõi thì “Graph” là thành phần quan trọng đối với Trực quan hóa dữ liệu. “Đồ thị” hiển thị trực tiếp số liệu hóa trên trình duyệt bằng cách sử dụng thư viện javascript vẽ đồ thị mã nguồn mở Plotly. js. âm mưu. js hỗ trợ hơn 35 loại biểu đồ và hiển thị biểu đồ ở cả SVG chất lượng vector và WebGL hiệu suất cao. Một lưu ý nhỏ ở đây là Plotly. js only used to render up browser (do Dash thực hiện) còn khi code chúng ta sẽ sử dụng thư viện Plotly. py (được cung cấp sẵn khi cài đặt Dash) chứ không phải mã trực tiếp bằng javascript

Để biết cách sử dụng thành phần “Graph”, chúng ta hãy đến với ví dụ hiển thị dữ liệu csv lên trình duyệt dưới dạng đồ thị đường gấp khúc

csv/graph_sample. csv

DateTime,DATA 1,DATA 2,DATA 3,DATA 4
20211220 101010.000,30,100,124,197
20211220 101010.010,40,110,134,65
20211220 101010.020,50,140,214,149
20211220 101010.030,60,150,169,-98
20211220 101010.040,70,160,204,-173
20211220 101010.050,80,170,164,-108
20211220 101010.060,90,180,148,150
20211220 101010.070,100,190,180,92
20211220 101010.080,110,200,268,94
20211220 101010.090,120,210,164,-139
20211220 101010.100,130,220,254,-132

Đầu tiên chúng ta cần sử dụng pandas để tải tệp csv

pip install pandas

0

Trong biến df ra console, hãy xem thử cấu trúc của nó

pip install pandas

1

Đến đây bạn có thấy hơi quen không?

Bước tiếp theo chúng ta chuyển dữ liệu của cột DateTime từ chuỗi thành ngày giờ để biểu đồ của chúng ta hiển thị chính xác ngày và giờ của dữ liệu

pip install pandas

2

Bây giờ chúng ta tạo một hình vẽ bằng biểu đồ

pip install pandas

3

Truyền hình vào thành phần đồ thị

pip install pandas

4

Hoàn tất chỉnh sửa mã
graph_demo. p

pip install pandas

5

In terminal run command

pip install pandas

0

Sau đó truy cập http. //127. 0. 0. 1. 8050/ to see results

Trong ví dụ trên

• Thư viện Pandas được sử dụng để xử lý dữ liệu đầu vào (đọc csv, chuyển dữ liệu của cột DateTime từ chuỗi thành ngày giờ)
• Plotly Express (nằm trong thư viện Plotly. py) người chịu trách nhiệm quy định các kiểu biểu đồ (đường gấp khúc, phân tán,…), trục x, trục y,… của Graph đầu ra

Gọi lại dấu gạch ngang

chức năng gọi lại. Các chức năng được Dash tự động gọi bất cứ khi nào thuộc tính của thành phần đầu vào thay đổi, để cập nhật một số thuộc tính trong thành phần khác (đầu ra)

Để hiểu về Callback chúng ta hãy đến với ví dụ về bộ lọc dữ liệu theo ngày, với đầu vào lấy từ thành phần dcc. Ngày PickerPhạm vi.
csv/callbacks_sample. csv

pip install pandas

1

callbacks_demo. py

pip install pandas

2

Trong Dash, các đầu vào và đầu ra của ứng dụng của chúng chỉ đơn giản là các thuộc tính của một thành phần cụ thể. Trong ví dụ này, đầu vào của chúng là thuộc tính “start_date” và “end_date” của thành phần có ID “date-picker-range“. Đầu ra của chúng ta là thuộc tính “figure” của thành phần có ID là “scatter-graph“

Bất cứ khi nào bất kỳ thuộc tính đầu vào nào thay đổi, chức năng có khai báo trang trí @callback sẽ được gọi tự động. Dash cung cấp cho hàm gọi lại giá trị mới này của thuộc tính đầu vào làm đối số (trong ví dụ về hàm update_figure có 2 argument là start_date, end_date), và Dash cập nhật property của output component với bất kỳ giá trị nào được function trả về (trong ví dụ trên function update_figure trả về scatter_fig).

Trong terminal chạy lệnh

import dash
from dash import html

app = dash.Dash(__name__)

app.layout = html.Div(children=[
   html.H1(children='Hello Dash'),
])

if __name__ == '__main__':
   app.run_server(debug=True)

5 và truy cập vào http. //127. 0. 0. 1. 8050/ để xem kết quả.

Sau khi thay đổi end_date

Tối ưu hóa và chức năng bổ sung

Ở phần này chúng ta lấy mã ở phần Callbacks để tối ưu hóa và bổ sung chức năng cho nó

Read n DATA

Hiện tại chúng ta đang đặt lượng dữ liệu ban đầu là 4

pip install pandas

3

Giả sử chúng ta có lượng dữ liệu bất kỳ DATA 1, DATA 2,…, DATA n thì với đoạn mã trên chúng ta chỉ có thể đọc và hiển thị được 4 dữ liệu mà thôi.
Để đọc và hiển thị lên biểu đồ n DATA, chúng ta cần chỉnh sửa mã lại một chút.

pip install pandas

4

Đọc cấu hình từ tiêu đề của CSV

Tiêu đề đánh giá của CSV as after

pip install pandas

5

Chúng ta sẽ bổ sung chức năng đọc cấu hình từ tiêu đề trên

• Đọc cấu hình của cột DateTime để đặt định dạng ngày giờ (hiện tại phần cứng được đặt trong mã).
• Đọc cấu hình minFilter, maxFilter của các cột DATA để lọc bỏ những dữ liệu có giá trị nhỏ hơn minFilter và lớn hơn maxFilter của cột DATA đó

First add file utils. py chứa các chức năng phổ biến

pip install pandas

6

At the code phase on

• Hàm convert_py_datetime_format used to convert format type yyyyMMdd HH. mm. ss. fff to format of Python
• Hàm extract_csv_col_config sẽ nhận vào tên của cột chứa cấu hình và trả về tên cột đã cắt bỏ phần chuỗi cấu hình cùng với mảng chứa cấu hình của cột đó. Ví dụ

  import dash
  from dash import html
  
  app = dash.Dash(__name__)
  
  app.layout = html.Div(children=[
     html.H1(children='Hello Dash'),
  ])
  
  if __name__ == '__main__':
     app.run_server(debug=True)
  

  6 sẽ trả về

  import dash
  from dash import html
  
  app = dash.Dash(__name__)
  
  app.layout = html.Div(children=[
     html.H1(children='Hello Dash'),
  ])
  
  if __name__ == '__main__':
     app.run_server(debug=True)
  

  7 và mảng

  import dash
  from dash import html
  
  app = dash.Dash(__name__)
  
  app.layout = html.Div(children=[
     html.H1(children='Hello Dash'),
  ])
  
  if __name__ == '__main__':
     app.run_server(debug=True)
  

  8

Tiếp theo thêm chức năng process_csv_variable vào ứng dụng. py

pip install pandas

7

Hàm process_csv_variable sẽ nhận vào DataFrame, đọc cấu hình từ tên cột, xử lý dữ liệu dựa trên cấu hình và sẽ trả về DataFrame sau khi xử lý