LoslegenKostenlos loslegen

Interactive key stats table

Using graphs to display your data visually is a great way to visually see aggregated figures. Yet sometimes, you also need to see more numbers than is feasible to display in common visualization formats.

A key stakeholder in the e-commerce company, the finance department head, has heard of your great work but is someone who needs to see some figures in tabular rather than visual format. He has requested a dashboard displaying some aggregated stats in a tabular format. However, he wonders if you could also include some 'Dash magic' to make it a bit more interactive than his existing Excel spreadsheets?

Diese Übung ist Teil des Kurses

Building Dashboards with Dash and Plotly

Kurs anzeigen

Anleitung zur Übung

  • Set up the money_fmt object for USD currency formatting below line 9 using the appropriate function and style parameters.
  • Add the money_fmt formatter to the 'Total Sales ($)' column in the column_defs below line 15.

Interaktive Ü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