LoslegenKostenlos loslegen

Paginating a key stats table

The key stats table created in the previous lesson was a great addition to the analytical toolkit of the global e-commerce company. However, it was far too long!

Let's fix that using Dash AG Grid's built-in pagination options. This will greatly enhance the usability of the app and allow users to explore different sections of the data as they require.

Diese Übung ist Teil des Kurses

Building Dashboards with Dash and Plotly

Kurs anzeigen

Anleitung zur Übung

  • Create a Dash AG Grid object called grid using the AgGrid function below line 21.
  • Turn on pagination for the grid by setting the pagination parameter below line 25.
  • Limit each page to show 7 rows by setting the paginationPageSize parameter below line 28.

Interaktive Übung

Vervollständige den Beispielcode, um diese Übung erfolgreich abzuschließen.

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)
Code bearbeiten und ausführen