Remplacez le st.bar_chart() de la séance 2 par trois graphiques Plotly Express. Chaque graphique doit être intégré dans votre dashboard existant.

1. Bar chart horizontal — Top 5 régions

Créez un bar chart horizontal des 5 régions avec le CA le plus élevé :

• Tri décroissant (la région avec le CA le plus haut en haut)
• Couleur dégradée avec color_continuous_scale="Blues"
• Labels lisibles (labels={"chiffre_affaires": "CA (€)", "region": "Région"})

# Indices
df_top5 = df.sort_values("chiffre_affaires", ascending=False).head(5)
fig = px.bar(df_top5, x=..., y=..., orientation="h", ...)

2. Line chart — Évolution mensuelle du CA

Créez un line chart de l'évolution mensuelle :

• Markers visibles (markers=True)
• Axe X avec dates formatées (tickformat="%b %Y")
• Axe Y commençant à zéro (rangemode="tozero")

# Indice
df["mois"] = pd.to_datetime(df["mois"])

3. Donut chart — Répartition par catégorie

Créez un donut chart de la répartition du CA par catégorie :

• Trou central (hole=0.4)
• Titre explicite

Critères de validation pour chaque graphique :

• Gestion de df.empty avec message st.info()
• Labels lisibles (pas de noms de colonnes techniques)
• use_container_width=True
• Intégré dans le layout existant avec st.columns()

Testez vos graphiques face aux données problématiques.

1. Dataset vide ou réduit

• Filtrez vos données pour obtenir un DataFrame vide (filtre très restrictif)
• Vérifiez que chaque graphique affiche un message st.info() au lieu de planter
• Testez avec un seul point de données et vérifiez que les graphiques restent lisibles

2. Conversion des dates

• Appliquez pd.to_datetime() sur la colonne de mois du line chart
• Comparez l'affichage avant et après la conversion :
  • Sans conversion : les mois sont traités comme des catégories (espacement régulier même si des mois manquent)
  • Avec conversion : les mois sont traités comme des dates (espacement proportionnel au temps)
• Ajoutez fig.update_xaxes(dtick="M1", tickformat="%b %Y") et observez le résultat

3. Axe Y et rangemode

• Affichez un bar chart sans rangemode="tozero"
• Ajoutez fig.update_yaxes(rangemode="tozero")
• Comparez visuellement : l'axe commence-t-il à zéro ? La différence visuelle entre les barres change-t-elle ?

Critères de validation :

• Aucun crash avec un DataFrame vide
• Dates correctement formatées sur l'axe X
• Axe Y commençant à zéro sur les bar charts

Quand l'utilisateur clique sur une barre d'un bar chart, un tableau détaillé s'affiche en dessous pour la région sélectionnée.

Étapes

1. Créez un bar chart du CA par région avec on_select="rerun" :

event = st.plotly_chart(fig, use_container_width=True, on_select="rerun")

1. Récupérez la région sélectionnée depuis l'objet event :

if event and event.selection.points:
    selected_region = event.selection.points[0]["x"]

1. Chargez et affichez les données détaillées pour cette région dans un st.dataframe() :

if selected_region:
    df_detail = pd.DataFrame(repo.get_ventes(region=selected_region))
    st.subheader(f"Détail pour {selected_region}")
    st.dataframe(df_detail, use_container_width=True)

Critères de validation :

• Le clic sur une barre déclenche un re-run
• Le tableau détaillé s'affiche sous le graphique
• Un message informatif s'affiche si aucune barre n'est sélectionnée