CommencezCommencez gratuitement

Styliser un tableau de statistiques clés

La direction des finances a adoré le tableau de statistiques clés que vous avez créé. Toutefois, grand adepte d'Excel, le directeur a demandé d'ajouter du formatage au tableau.

Plus précisément, il souhaite :

  • que tout le contenu des cellules soit aligné à gauche ;
  • que l'arrière-plan des cellules soit noir avec un texte blanc.

Cette activité fait partie du cours

Créer des tableaux de bord avec Dash et Plotly

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 avec 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