ComeçarComece de graça

Paginando uma tabela de estatísticas-chave

A tabela de estatísticas-chave criada na lição anterior foi uma ótima adição ao conjunto de ferramentas analíticas da empresa global de e-commerce. No entanto, ela ficou longa demais!

Vamos corrigir isso usando as opções de paginação integradas do Dash AG Grid. Isso vai melhorar bastante a usabilidade do app e permitir que usuários explorem diferentes partes dos dados conforme precisarem.

Este exercício faz parte do curso

Construindo Dashboards com Dash e Plotly

Ver curso

Instruções do exercício

  • Crie um objeto do Dash AG Grid chamado grid usando a função AgGrid abaixo da linha 21.
  • Ative a paginação para o grid definindo o parâmetro pagination abaixo da linha 25.
  • Limite cada página para mostrar 7 linhas definindo o parâmetro paginationPageSize abaixo da linha 28.

Exercício interativo prático

Experimente este exercício completando este código de exemplo.

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)
Editar e executar o código