Inizia subitoInizia gratis

Tabella interattiva delle statistiche chiave

Usare i grafici per mostrare i dati è un ottimo modo per vedere a colpo d’occhio i valori aggregati. Tuttavia, a volte serve anche visualizzare più numeri di quanti sia possibile inserire nei formati di visualizzazione più comuni.

Un referente chiave nell’azienda di e-commerce, il responsabile del reparto finanza, ha sentito parlare del tuo ottimo lavoro ma ha bisogno di vedere alcune cifre in formato tabellare, non solo visivo. Ha richiesto un dashboard che mostri alcune statistiche aggregate in una tabella. Inoltre, si chiede se tu possa aggiungere un po’ di “magia di Dash” per renderlo più interattivo rispetto ai suoi attuali fogli Excel.

Questo esercizio fa parte del corso

Creare dashboard con Dash e Plotly

Visualizza corso

Istruzioni dell'esercizio

  • Imposta l’oggetto money_fmt per la formattazione in USD sotto la riga 9 usando i parametri di funzione e stile appropriati.
  • Aggiungi il formatter money_fmt alla colonna 'Total Sales ($)' in column_defs sotto la riga 15.

esercizio interattivo pratico

Prova questo esercizio completando questo codice di esempio.

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)
Modifica ed esegui il codice