Créer un Widget Tableau de Bord avec Python dans Grist
Pourquoi créer un widget tableau de bord ?
Les widgets personnalisés vous permettent de créer des visualisations sur mesure qui ne sont pas disponibles nativement dans Grist. Un tableau de bord bien conçu offre :
- Une vue d'ensemble instantanée de vos KPIs
- Des mises à jour en temps réel
- Des visualisations adaptées à votre métier
- Un partage facile avec votre équipe
Structure de base d'un widget
Le fichier Python
Un widget personnalisé dans Grist est un fichier Python qui définit une classe héritant de Widget. Voici la structure minimale :
from grist import Widget
class MonDashboard(Widget):
def __init__(self):
super().__init__()
def render(self):
# Récupérer les données
data = self.get_data()
# Calculer les statistiques
total = len(data)
# Retourner le HTML
return f"""
Mon Tableau de Bord
Total : {total} éléments
"""Widget 1 : Tableau de bord de ventes
Le code complet
from grist import Widget
import statistics
class DashboardVentes(Widget):
def __init__(self):
super().__init__()
def render(self):
# Récupérer toutes les données
ventes = self.get_data()
# Extraire les montants
montants = [v.Montant for v in ventes if v.Montant]
if not montants:
return "Aucune donnée de vente"
# Calculer les statistiques
total = sum(montants)
moyenne = statistics.mean(montants)
mediane = statistics.median(montants)
nb_ventes = len(montants)
# Trouver la meilleure vente
meilleure = max(ventes, key=lambda v: v.Montant or 0)
return f"""
📊 Tableau de Bord des Ventes
{total:,.0f} €
Total des ventes
{nb_ventes}
Nombre de ventes
{moyenne:,.0f} €
Panier moyen
{meilleure.Montant:,.0f} €
Meilleure vente
📈 Détails
Médiane : {mediane:,.0f} €
Meilleure vente : {meilleure.Client or 'N/A'} - {meilleure.Montant:,.0f} €
"""Résultat visuel
Ce widget affiche :
- 4 cartes colorées avec les KPIs principaux
- Une section détails avec la médiane et la meilleure vente
- Un design responsive et moderne
Widget 2 : Graphique en barres simple
Visualiser des données par catégorie
from grist import Widget
from collections import Counter
class GraphiqueCategories(Widget):
def render(self):
data = self.get_data()
# Compter par catégorie
categories = Counter([d.Categorie for d in data if d.Categorie])
if not categories:
return "Aucune donnée"
# Trouver le max pour l'échelle
max_val = max(categories.values())
# Générer les barres
barres = ""
couleurs = ['#4CAF50', '#2196F3', '#FF9800', '#9C27B0', '#F44336', '#00BCD4']
for i, (cat, val) in enumerate(categories.most_common()):
couleur = couleurs[i % len(couleurs)]
largeur = (val / max_val) * 100
barres += f"""
{cat}
{val}
"""
return f"""
📊 Répartition par catégorie
{barres}
"""Widget 3 : Indicateurs de performance (KPIs)
Suivi d'objectifs
from grist import Widget
class KPIsObjectifs(Widget):
def render(self):
data = self.get_data()
# Calculer les métriques
total_ventes = sum([d.Montant for d in data if d.Montant])
objectif = 100000 # Objectif : 100k€
progression = (total_ventes / objectif) * 100
# Déterminer la couleur selon la progression
if progression >= 100:
couleur = '#4CAF50'
emoji = '🎉'
elif progression >= 75:
couleur = '#FF9800'
emoji = '💪'
else:
couleur = '#F44336'
emoji = '⚠️'
return f"""
{emoji} Objectif de ventes
{progression:.1f}%
0 €
{total_ventes:,.0f} € / {objectif:,.0f} €
{objectif:,.0f} €
{'Objectif atteint ! 🎊' if progression >= 100 else f'Il reste {objectif - total_ventes:,.0f} €'}
"""Widget 4 : Tableau récapitulatif stylisé
Afficher les dernières transactions
from grist import Widget
class DernieresTransactions(Widget):
def render(self):
data = self.get_data()
# Trier par date décroissante et prendre les 5 dernières
recentes = sorted(data, key=lambda x: x.Date or '', reverse=True)[:5]
lignes = ""
for t in recentes:
montant_class = 'positive' if (t.Montant or 0) > 0 else 'negative'
lignes += f"""
{t.Date or 'N/A'}
{t.Client or 'N/A'}
{(t.Montant or 0):,.0f} €
{t.Statut or 'En attente'}
"""
return f"""
🕐 Dernières transactions
{lignes}
Date
Client
Montant
Statut
"""Comment installer un widget personnalisé
Étape 1 : Créer le fichier
- Créez un fichier
mon_widget.pyavec votre code - Enregistrez-le sur votre ordinateur
Étape 2 : L'importer dans Grist
- Dans Grist, cliquez sur Add Widget
- Sélectionnez Custom
- Cliquez sur Upload et choisissez votre fichier
- Le widget s'affiche immédiatement !
Étape 3 : Le configurer
- Choisissez la source de données (table)
- Ajustez la taille du widget
- Positionnez-le dans votre page
Bonnes pratiques
Performance
- Limitez le nombre de données traitées (utilisez
[:100]pour les grandes tables) - Évitez les calculs complexes dans
render() - Mettez en cache les résultats si possible
Design
- Utilisez des couleurs cohérentes avec votre charte
- Privilégiez la lisibilité (contraste, taille de police)
- Testez sur différentes tailles d'écran
Sécurité
- Ne faites jamais confiance aux données utilisateur
- Échappez les valeurs affichées (évitez les injections HTML)
- Ne stockez pas de données sensibles dans le widget
Ressources complémentaires
Besoin d'aide ?
Créer des widgets sur mesure demande de l'expertise. Je peux vous aider à :
- Concevoir des tableaux de bord adaptés à votre métier
- Créer des visualisations complexes
- Optimiser les performances de vos widgets