Zacznij terazZacznij za darmo

Paginacja tabeli kluczowych statystyk

Tabela kluczowych statystyk utworzona w poprzedniej lekcji była świetnym uzupełnieniem zestawu analitycznego dla globalnej firmy e-commerce. Była jednak stanowczo za długa!

Naprawmy to, korzystając z wbudowanych opcji paginacji w Dash AG Grid. Znacznie poprawi to użyteczność aplikacji i pozwoli użytkownikom swobodnie przeglądać kolejne fragmenty danych.

To ćwiczenie jest częścią kursu

Tworzenie dashboardów z Dash i Plotly

Zobacz kurs

Instrukcje do ćwiczenia

  • Utwórz obiekt Dash AG Grid o nazwie grid, używając funkcji AgGrid poniżej linii 21.
  • Włącz paginację dla obiektu grid, ustawiając parametr pagination poniżej linii 25.
  • Ogranicz każdą stronę do 7 wierszy, ustawiając parametr paginationPageSize poniżej linii 28.

Interaktywne ćwiczenie praktyczne

Spróbuj tego ćwiczenia, uzupełniając ten przykładowy kod.

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)
Edytuj i uruchom kod