Eine Kennzahlen-Tabelle seitenweise anzeigen

Die in der vorherigen Lektion erstellte Kennzahlen-Tabelle war eine super Ergänzung zum Analysewerkzeug der globalen E‑Commerce‑Firma. Sie war jedoch viel zu lang!

Lass uns das mit den integrierten Paginierungsoptionen von Dash AG Grid beheben. Das verbessert die Bedienbarkeit der App deutlich und ermöglicht es Nutzerinnen und Nutzern, gezielt verschiedene Abschnitte der Daten zu erkunden.

Diese Übung ist Teil des Kurses

<Kurs>Dashboards mit Dash und Plotly erstellen</Kurs>

Kurs ansehen

Übungsanweisungen

Erstelle unterhalb von Zeile 21 mit der Funktion AgGrid ein Dash‑AG‑Grid‑Objekt namens grid.
Aktiviere für grid die Paginierung, indem du unterhalb von Zeile 25 den Parameter pagination setzt.
Beschränke jede Seite auf 7 Zeilen, indem du unterhalb von Zeile 28 den Parameter paginationPageSize setzt.

Interaktive praktische Übung

Versuche dich an dieser Übung, indem du diesen Beispielcode vervollständigst.

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