Tableau interactif des indicateurs clés

Utiliser des graphiques pour visualiser vos données est idéal pour voir des chiffres agrégés d’un coup d’œil. Mais parfois, vous avez aussi besoin d’afficher plus de valeurs que ce que les formats de visualisation classiques permettent.

Un interlocuteur clé de l’entreprise e-commerce, le directeur financier, a entendu parler de votre excellent travail, mais préfère consulter certains chiffres sous forme de tableau plutôt que de graphique. Il a demandé un tableau de bord présentant des statistiques agrégées sous forme tabulaire. Cependant, il se demande si vous pourriez y ajouter un peu de « magie Dash » pour le rendre plus interactif que ses feuilles de calcul Excel actuelles.

Cet exercice fait partie du cours

<cours>Créer des tableaux de bord avec Dash et Plotly</cours>

Voir le cours

Instructions de l’exercice

Configurez l’objet money_fmt pour le formatage en dollars américains 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