CommencezCommencez gratuitement

Tableau interactif des statistiques clés

Utiliser des graphiques pour présenter vos données est un excellent moyen de voir des chiffres agrégés d'un coup d'œil. Mais parfois, vous devez aussi consulter plus de nombres qu'il n'est possible d'en afficher dans des visualisations classiques.

Un intervenant clé de l'entreprise de commerce électronique, le directeur du service des finances, a entendu parler de votre excellent travail, mais il a besoin de voir certains chiffres sous forme de tableau plutôt qu'en format visuel. Il a demandé un tableau de bord présentant certaines statistiques agrégées en format tabulaire. Toutefois, il se demande si vous pourriez aussi ajouter un peu de « magie Dash » pour le rendre plus interactif que ses feuilles de calcul Excel actuelles.

Cette activité fait partie du cours

Créer des tableaux de bord avec Dash et Plotly

Voir le cours

Instructions de l’exercice

  • Configurez l'objet money_fmt pour le formatage en USD sous la ligne 9 en utilisant les paramètres de fonction et de style appropriés.
  • Ajoutez le formateur money_fmt à la colonne 'Total Sales ($)' dans column_defs sous la ligne 15.

Exercice interactif pratique

Essayez cet exercice en complétant ce code d’exemple.

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)
Modifier et exécuter le code