핵심 지표 표에 페이지 매김 적용하기
이전 레슨에서 만든 핵심 지표 표는 글로벌 전자상거래 회사의 분석 도구에 훌륭한 보탬이 되었어요. 하지만 너무 길었습니다!
이제 Dash AG Grid의 기본 제공 페이지 매김 옵션을 사용해 개선해 봅시다. 이렇게 하면 앱의 사용성이 크게 높아지고, 사용자가 필요한 데이터 섹션을 더 쉽게 탐색할 수 있어요.
이 연습은 강의의 일부입니다
Dash와 Plotly로 대시보드 만들기
연습 안내
- 아래 21번째 줄 이후에
AgGrid함수를 사용해grid라는 Dash AG Grid 객체를 만드세요. - 아래 25번째 줄 이후에
pagination매개변수를 설정하여grid에 페이지 매김을 켜세요. - 아래 28번째 줄 이후에
paginationPageSize매개변수를 설정하여 페이지당 7개 행만 표시되도록 제한하세요.
실습형 인터랙티브 연습
이 예제를 이 샘플 코드를 완성하여 풀어보세요.
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)