Inizia subitoInizia gratis

Paginare una tabella di statistiche chiave

La tabella delle statistiche chiave creata nella lezione precedente è stata un'ottima aggiunta alla cassetta degli attrezzi analitica dell'azienda di e-commerce globale. Tuttavia, era davvero troppo lunga!

Rispondiamo al problema usando le opzioni di paginazione integrate di Dash AG Grid. Migliorerai di molto l'usabilità dell'app e permetterai agli utenti di esplorare sezioni diverse dei dati in base alle loro esigenze.

Questo esercizio fa parte del corso

Creare dashboard con Dash e Plotly

Visualizza corso

Istruzioni dell'esercizio

  • Crea un oggetto Dash AG Grid chiamato grid usando la funzione AgGrid sotto la riga 21.
  • Attiva la paginazione per grid impostando il parametro pagination sotto la riga 25.
  • Limita ciascuna pagina a 7 righe impostando il parametro paginationPageSize sotto la riga 28.

esercizio interattivo pratico

Prova questo esercizio completando questo codice di esempio.

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)
Modifica ed esegui il codice