Interaktive Tabelle mit Kennzahlen

Diagramme zur visuellen Darstellung deiner Daten sind großartig, um aggregierte Kennzahlen schnell zu erfassen. Manchmal musst du jedoch mehr Zahlen sehen, als in gängigen Visualisierungsformaten sinnvoll darstellbar ist.

Ein wichtiger Stakeholder im E‑Commerce-Unternehmen, der Leiter der Finanzabteilung, hat von deiner guten Arbeit gehört, braucht aber einige Kennzahlen in Tabellenform statt als Visualisierung. Er hat ein Dashboard angefordert, das einige aggregierte Statistiken tabellarisch zeigt. Er fragt sich jedoch, ob du auch etwas „Dash‑Magie“ einbauen könntest, um es interaktiver zu machen als seine bisherigen Excel-Tabellen?

Diese Übung ist Teil des Kurses

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

Kurs ansehen

Übungsanweisungen

Richte unter Zeile 9 das Objekt money_fmt für die USD-Währungsformatierung mit den passenden function- und style-Parametern ein.
Füge den money_fmt-Formatter unter Zeile 15 in der Spalte 'Total Sales ($)' in column_defs hinzu.

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 ($)'})

# Set up the money object
money_fmt = {
"____": (
  """params.value.toLocaleString(
  'en-US', {style: '____', currency: '____'})""")}

# Add the formatter to the relevant column
column_defs = [
  {"field": "Major Category"},
  {"field": "Total Sales ($)", "____": ____},
  {"field": "Average Order Value ($)"},
  {"field": "Sales Volume"}]

grid = AgGrid(
  columnDefs=column_defs,
  rowData=key_stats_tb.to_dict("records"))

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