Phân trang cho bảng thống kê chính
Bảng thống kê chính bạn tạo ở bài trước là một bổ sung tuyệt vời cho bộ công cụ phân tích của công ty thương mại điện tử toàn cầu. Tuy nhiên, nó quá dài!
Hãy khắc phục bằng các tùy chọn phân trang tích hợp sẵn của Dash AG Grid. Cách này sẽ cải thiện đáng kể khả năng sử dụng của ứng dụng và cho phép người dùng khám phá các phần dữ liệu khác nhau theo nhu cầu.
Bài tập này là một phần của khóa học
Xây dựng Dashboard với Dash và Plotly
Hướng dẫn bài tập
- Tạo một đối tượng Dash AG Grid tên là
gridbằng hàmAgGridbên dưới dòng21. - Bật phân trang cho
gridbằng cách đặt tham sốpaginationbên dưới dòng25. - Giới hạn mỗi trang hiển thị 7 hàng bằng cách đặt tham số
paginationPageSizebên dưới dòng28.
Bài tập tương tác thực hành trực tiếp
Hãy thử làm bài tập này bằng cách hoàn thành đoạn mã mẫu này.
from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
import pandas as pd
from dash_ag_grid import AgGrid
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
key_stats_tb = ecom_sales.groupby(['Country','Major Category', 'Minor Category'])['OrderValue'].agg(['sum', 'count', 'mean']).reset_index().rename(columns={'count':'Sales Volume', 'sum':'Total Sales ($)', 'mean':'Average Order Value ($)'})
money_fmt = {
"function": (
"""params.value.toLocaleString(
'en-US', {style: 'currency', currency: 'USD'})""")}
column_defs = [
{"field": "Major Category"},
{"field": "Total Sales ($)", "valueFormatter": money_fmt},
{"field": "Average Order Value ($)", "valueFormatter": money_fmt},
{"field": "Sales Volume"}
]
# Create a grid
grid = ____(
columnDefs=column_defs,
rowData=key_stats_tb.to_dict("records"),
# Turn on pagination
dashGridOptions={
"____": ____,
# Show 7 rows per page
"____": ____}
)
app = Dash()
app.layout = [
html.Img(src=logo_link, style={'margin':'30px 0px 0px 0px'}),
html.H1('Sales Aggregations'),
html.Div([
html.H2('Key Aggregations'),
grid],
style={'width':'850px', 'height':'750px', 'margin':'0 auto'})
]
if __name__ == '__main__':
app.run(debug=True)