ПочатиПочніть безкоштовно

Пагінація таблиці ключових показників

Таблиця ключових показників, створена в попередньому уроці, чудово доповнила аналітичний інструментарій глобальної e-commerce компанії. Однак вона вийшла занадто довгою!

Виправмо це за допомогою вбудованих опцій пагінації Dash AG Grid. Це суттєво підвищить зручність застосунку та дасть змогу користувачам переглядати потрібні розділи даних у зручному для них форматі.

Ця вправа є частиною курсу

Створення дашбордів з Dash і Plotly

Переглянути курс

Інструкції до вправи

  • Створіть об'єкт Dash AG Grid з назвою grid, використавши функцію AgGrid нижче рядка 21.
  • Увімкніть пагінацію для grid, встановивши параметр pagination нижче рядка 25.
  • Обмежте кожну сторінку 7 рядками, встановивши параметр paginationPageSize нижче рядка 28.

Інтерактивна практична вправа

Спробуйте виконати цю вправу, доповнивши цей зразок коду.

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)
Редагувати та запускати код