主要統計テーブルのページネーション
前のレッスンで作成した主要統計テーブルは、グローバルEC企業の分析ツールとしてとても有用でした。しかし、長すぎました！
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)