Skip to content
Learni
Voir tous les tutoriels
Gestion de projet

Comment implémenter un Burndown Chart expert en 2026

22 minEXPERT
TypeScriptAgileScrum
Read in English

Introduction

Le burndown chart est un outil essentiel en gestion de projet Agile pour visualiser la progression d'un sprint. Contrairement aux versions basiques, un burndown expert gère les ajustements de scope, les métriques temps réel et les prévisions. Ce tutoriel vous guide dans l'implémentation d'une solution complète et interactive en TypeScript. Vous apprendrez à calculer les données dynamiquement, à gérer les imprévus et à intégrer des visualisations avancées. Idéal pour les équipes cherchant une précision maximale.

Prérequis

  • Node.js 20+ et TypeScript 5.4+
  • Connaissances avancées de Scrum et métriques Agile
  • Chart.js 4.x et React 18 (optionnel pour l'UI)
  • Accès à une API REST pour données de tâches

Modèle de données TypeScript

types/burndown.ts
export interface Task {
  id: string;
  storyPoints: number;
  status: 'todo' | 'inprogress' | 'done';
  completedAt?: Date;
}

export interface Sprint {
  id: string;
  startDate: Date;
  endDate: Date;
  totalPoints: number;
  tasks: Task[];
}

Ce modèle définit la structure des tâches et sprints. Il permet de suivre les points de story et les dates pour des calculs précis du burndown.

Calcul du burndown

utils/burndownCalculator.ts
import { Sprint, Task } from '../types/burndown';

export function calculateBurndown(sprint: Sprint): { day: string; remaining: number }[] {
  const days: { day: string; remaining: number }[] = [];
  const totalDays = Math.ceil((sprint.endDate.getTime() - sprint.startDate.getTime()) / (1000 * 3600 * 24));
  let remaining = sprint.totalPoints;
  for (let i = 0; i <= totalDays; i++) {
    const currentDate = new Date(sprint.startDate);
    currentDate.setDate(currentDate.getDate() + i);
    const completedPoints = sprint.tasks
      .filter(t => t.completedAt && t.completedAt <= currentDate)
      .reduce((sum, t) => sum + t.storyPoints, 0);
    remaining = sprint.totalPoints - completedPoints;
    days.push({ day: currentDate.toISOString().split('T')[0], remaining });
  }
  return days;
}

Cette fonction calcule le burndown jour par jour en tenant compte des tâches terminées. Elle gère les dates précisément pour éviter les erreurs de scope.

Génération du dataset Chart.js

utils/chartData.ts
import { calculateBurndown } from './burndownCalculator';
import { Sprint } from '../types/burndown';

export function generateChartDataset(sprint: Sprint) {
  const burndownData = calculateBurndown(sprint);
  return {
    labels: burndownData.map(d => d.day),
    datasets: [{
      label: 'Points restants',
      data: burndownData.map(d => d.remaining),
      borderColor: '#3b82f6',
      tension: 0.1
    }]
  };
}

Convertit les calculs en format compatible Chart.js. Assurez-vous d'inclure une ligne idéale pour comparer la vélocité réelle.

Rendu du graphique

components/BurndownChart.tsx
import { Line } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip } from 'chart.js';
import { generateChartDataset } from '../utils/chartData';
import { Sprint } from '../types/burndown';

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip);

export default function BurndownChart({ sprint }: { sprint: Sprint }) {
  const data = generateChartDataset(sprint);
  return <Line data={data} options={{ responsive: true, plugins: { title: { text: 'Burndown Chart' } } }} />;
}

Composant React réutilisable qui affiche le graphique. Il est responsive et extensible pour ajouter des annotations expert.

Intégration API et mise à jour temps réel

api/sprint.ts
import { Sprint } from '../types/burndown';

export async function fetchSprintData(sprintId: string): Promise<Sprint> {
  const res = await fetch(`/api/sprints/${sprintId}`);
  return res.json();
}

export async function updateTaskCompletion(taskId: string, completedAt: Date) {
  await fetch(`/api/tasks/${taskId}`, {
    method: 'PATCH',
    body: JSON.stringify({ completedAt })
  });
}

Permet la synchronisation en temps réel avec une API. Gérez les erreurs réseau et la validation des dates pour la fiabilité.

Bonnes pratiques

  • Toujours recalculer le burndown après chaque mise à jour de tâche
  • Utiliser des dates UTC pour éviter les décalages horaires
  • Ajouter une ligne de tendance idéale pour analyse prédictive
  • Valider les points de story avant intégration
  • Exporter les données en CSV pour audits

Erreurs courantes à éviter

  • Ignorer les tâches incomplètes dans les calculs de vélocité
  • Oublier de gérer les changements de scope mid-sprint
  • Ne pas rafraîchir le graphique après modification API
  • Utiliser des données locales sans persistance

Pour aller plus loin

Intégrez des prévisions ML ou des dashboards multi-sprints. Découvrez nos formations Learni pour approfondir l'Agile avancé.