Créer un dashboard KPI en temps réel pour votre entreprise

Vos KPIs sont éparpillés entre trois tableurs, deux outils SaaS et la tête de votre directeur commercial ? Il est temps de centraliser tout ça dans un dashboard en temps réel.

Pourquoi un dashboard sur mesure ?

Les outils comme Google Data Studio ou Metabase couvrent 80% des besoins. Mais quand vos données viennent de sources hétérogènes (CRM, facturation, API internes, tableurs), un dashboard sur mesure devient la seule option viable.

Les limites des outils no-code

Connecteurs limités : votre ERP maison ou votre API interne n'a pas de connecteur natif
Temps réel impossible : la plupart des outils no-code rafraîchissent toutes les heures au mieux
Logique métier complexe : calculer un taux de conversion multi-étapes avec des règles spécifiques
Personnalisation visuelle : vos équipes veulent un affichage précis qui correspond à leur workflow

Architecture type

Un dashboard KPI repose sur trois couches :

┌──────────────────────────┐
│   Frontend (React/Next)  │  ← Affichage temps réel
├──────────────────────────┤
│   API Backend (Elysia)   │  ← Agrégation & cache
├──────────────────────────┤
│   Sources de données     │  ← PostgreSQL, APIs, CSV
└──────────────────────────┘

1. Collecte des données

La première étape est de centraliser vos données dans une base unique :

typescript// Exemple : synchronisation CRM → PostgreSQL
async function syncCRMLeads() {
  const leads = await fetch("https://api.crm.com/leads", {
    headers: { Authorization: `Bearer ${CRM_TOKEN}` },
  }).then((r) => r.json());

  for (const lead of leads) {
    await db.query(
      `INSERT INTO leads (id, name, email, status, created_at)
       VALUES ($1, $2, $3, $4, $5)
       ON CONFLICT (id) DO UPDATE SET status = $4`,
      [lead.id, lead.name, lead.email, lead.status, lead.created_at]
    );
  }
}

2. API d'agrégation

L'API calcule les métriques et les met en cache :

typescript// Endpoint KPI avec cache Redis
app.get("/api/kpi/overview", async () => {
  const cached = await redis.get("kpi:overview");
  if (cached) return JSON.parse(cached);

  const [revenue, leads, conversion] = await Promise.all([
    db.query("SELECT SUM(amount) FROM invoices WHERE month = CURRENT_MONTH"),
    db.query("SELECT COUNT(*) FROM leads WHERE created_at > NOW() - INTERVAL '30 days'"),
    db.query("SELECT COUNT(*) FILTER (WHERE status = 'won') * 100.0 / COUNT(*) FROM leads"),
  ]);

  const result = {
    revenue: revenue.rows[0].sum,
    newLeads: leads.rows[0].count,
    conversionRate: conversion.rows[0].rate,
    updatedAt: new Date().toISOString(),
  };

  await redis.set("kpi:overview", JSON.stringify(result), "EX", 60);
  return result;
});

3. Frontend temps réel

Le frontend se rafraîchit automatiquement :

typescript// Hook React pour KPI auto-refresh
function useKPI(endpoint: string, refreshMs = 30000) {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetch = async () => {
      const res = await fetch(`/api/kpi/${endpoint}`);
      setData(await res.json());
    };

    fetchData();
    const interval = setInterval(fetchData, refreshMs);
    return () => clearInterval(interval);
  }, [endpoint, refreshMs]);

  return data;
}

Les KPIs essentiels par type d'entreprise

E-commerce

KPI	Calcul	Fréquence
Chiffre d'affaires	Somme des ventes	Temps réel
Taux de conversion	Commandes / Visiteurs	Horaire
Panier moyen	CA / Nombre commandes	Journalier
Taux d'abandon panier	Paniers abandonnés / Paniers créés	Horaire

SaaS B2B

KPI	Calcul	Fréquence
MRR	Somme abonnements actifs	Journalier
Churn rate	Résiliations / Clients début mois	Mensuel
CAC	Dépenses marketing / Nouveaux clients	Mensuel
LTV	Revenue moyen × Durée moyenne	Mensuel

Services / Agence

KPI	Calcul	Fréquence
Taux d'occupation	Heures facturées / Heures dispo	Hebdo
Marge par projet	(Facturé - Coûts) / Facturé	Par projet
Pipeline commercial	Somme opportunités pondérées	Temps réel
Délai moyen de livraison	Moyenne (date fin - date début)	Mensuel

Stack technique recommandée

Pour un dashboard performant et maintenable :

Frontend : React + Next.js (SSR pour le SEO des pages publiques)
Graphiques : Recharts ou Tremor (composants React prêts à l'emploi)
Backend : Elysia / FastAPI (léger, rapide)
Base : PostgreSQL (agrégations natives performantes)
Cache : Redis (TTL sur les métriques)
Temps réel : Server-Sent Events (plus simple que WebSocket pour du dashboard)

Un dashboard sur mesure coûte plus cher qu'un outil no-code au départ, mais il se rentabilise rapidement quand vos besoins dépassent les limites des solutions standard — et surtout, il évolue avec votre business.

Par où commencer ?

Listez vos KPIs : quels chiffres consultez-vous chaque jour ?
Identifiez les sources : où vivent ces données aujourd'hui ?
Priorisez : commencez par 3-5 KPIs, pas 50
Itérez : un premier dashboard utile en 2 semaines, des améliorations continues ensuite