Mettre en forme un tableau d’indicateurs clés

Le responsable du service financier a adoré le tableau d’indicateurs clés que vous avez créé précédemment. Toutefois, grand amateur d’Excel, il a demandé quelques mises en forme supplémentaires du tableau.

Concrètement, il a demandé :

Tout le contenu des cellules doit être aligné à gauche.
L’arrière-plan des cellules doit être noir avec un texte blanc.

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

Appliquez un style à toutes les cellules en utilisant le paramètre cellStyle dans defaultColDef sous la ligne 23.
Mettez les cellules en alignement à gauche avec la propriété textAlign sous la ligne 25.
Donnez aux cellules un arrière-plan noir et un texte blanc en utilisant les propriétés backgroundColor et color sous la ligne 27.

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

money_fmt = {"function": ("params.value.toLocaleString('en-US', {style: 'currency', currency: 'USD'})")}
column_defs = [
  {"field": "Country"},
  {"field": "Major Category"},
  {"field": "Minor Category"},
  {"field": "Total Sales ($)", "valueFormatter": money_fmt},
  {"field": "Average Order Value ($)", "valueFormatter": money_fmt},
  {"field": "Sales Volume"},
]

grid = AgGrid(
  columnDefs=column_defs,
  rowData=key_stats_tb.to_dict("records"),
  defaultColDef={
    # Apply styling to all cells
    "____": {
      # Style content aligned left
      "____": "____",
      # Style background color and text color
      "____": "____",
      "____": "____"}}
)

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