File "burndown_008.php"
Full Path: /home/analogde/www/samples/Dev tableau/Improve/burndown_008.php
File size: 7.16 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Burn Down Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.chart-container {
width: 200%; /* Largeur du conteneur, beaucoup plus large que la page */
height: 100vh; /* Hauteur du conteneur */
border: 1px solid #ccc; /* Bordure pour une meilleure visibilité */
position: relative; /* Assure que le conteneur est positionné correctement */
overflow-x: auto; /* Ajoute une barre de défilement horizontale */
}
#burnDownChart {
width: 100%; /* Largeur du canvas */
height: 100%; /* Hauteur du canvas */
}
.data-table, .summary-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.data-table th, .data-table td, .summary-table th, .summary-table td {
border: 1px solid #ccc;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<div class="chart-container">
<canvas id="burnDownChart"></canvas>
</div>
<table class="data-table">
<thead>
<tr>
<th>Jour</th>
<th>Tâches restantes</th>
<th>Pipo</th>
<th>Différence</th>
</tr>
</thead>
<tbody id="data-table-body">
<!-- Les données seront insérées ici par JavaScript -->
</tbody>
</table>
<table class="summary-table">
<thead>
<tr>
<th>Tâches</th>
<th>Nombre de jours (Tâches restantes)</th>
<th>Nombre de jours (Pipo)</th>
</tr>
</thead>
<tbody id="summary-table-body">
<!-- Les données seront insérées ici par JavaScript -->
</tbody>
</table>
<script>
// Données simulées pour le Burn Down Chart
const totalTasks = 20;
// Générer des données de progression aléatoires pour remainingTasks
const remainingTasks = [];
let tasksLeft = totalTasks;
let day = 0;
while (tasksLeft > 0) {
remainingTasks.push(tasksLeft);
// Simuler la complétion des tâches
if (tasksLeft > 0 && Math.random() < 0.05) {
tasksLeft -= 1;
}
day++;
}
// Générer des données de progression aléatoires pour pipoTasks
const pipoTasks = [];
let pipoTasksLeft = totalTasks;
day = 0;
while (pipoTasksLeft > 0) {
pipoTasks.push(pipoTasksLeft);
// Simuler la complétion des tâches
if (pipoTasksLeft > 0 && Math.random() < 0.05) {
pipoTasksLeft -= 1;
}
day++;
}
// Configuration du graphique
const ctx = document.getElementById('burnDownChart').getContext('2d');
const burnDownChart = new Chart(ctx, {
type: 'line',
data: {
labels: Array.from({ length: remainingTasks.length }, (_, i) => i + 1),
datasets: [{
label: 'Tâches restantes',
data: remainingTasks,
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
fill: false,
tension: 0.1
}, {
label: 'Pipo',
data: pipoTasks,
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
fill: false,
tension: 0.1
}]
},
options: {
scales: {
x: {
title: {
display: true,
text: 'Jours'
},
},
y: {
title: {
display: true,
text: 'Tâches restantes'
},
min: 0,
max: totalTasks
}
},
responsive: true,
maintainAspectRatio: false
}
});
// Remplir le tableau avec les données
const tableBody = document.getElementById('data-table-body');
const maxDays = Math.max(remainingTasks.length, pipoTasks.length);
for (let i = 0; i < maxDays; i++) {
const row = document.createElement('tr');
const dayCell = document.createElement('td');
const remainingTasksCell = document.createElement('td');
const pipoTasksCell = document.createElement('td');
const differenceCell = document.createElement('td');
dayCell.textContent = i + 1;
remainingTasksCell.textContent = remainingTasks[i] !== undefined ? remainingTasks[i] : '-';
pipoTasksCell.textContent = pipoTasks[i] !== undefined ? pipoTasks[i] : '-';
// Calculer la différence
const difference = pipoTasks[i] !== undefined && remainingTasks[i] !== undefined
? pipoTasks[i] - remainingTasks[i]
: '-';
differenceCell.textContent = difference;
row.appendChild(dayCell);
row.appendChild(remainingTasksCell);
row.appendChild(pipoTasksCell);
row.appendChild(differenceCell);
tableBody.appendChild(row);
}
// Compter les jours avec le même nombre de tâches restantes et pipo
const remainingTasksCount = {};
const pipoTasksCount = {};
remainingTasks.forEach(tasks => {
remainingTasksCount[tasks] = (remainingTasksCount[tasks] || 0) + 1;
});
pipoTasks.forEach(tasks => {
pipoTasksCount[tasks] = (pipoTasksCount[tasks] || 0) + 1;
});
// Remplir le tableau récapitulatif
const summaryTableBody = document.getElementById('summary-table-body');
const allTasks = new Set([...Object.keys(remainingTasksCount), ...Object.keys(pipoTasksCount)]);
allTasks.forEach(tasks => {
const row = document.createElement('tr');
const tasksCell = document.createElement('td');
const remainingTasksCountCell = document.createElement('td');
const pipoTasksCountCell = document.createElement('td');
tasksCell.textContent = tasks;
remainingTasksCountCell.textContent = remainingTasksCount[tasks] || 0;
pipoTasksCountCell.textContent = pipoTasksCount[tasks] || 0;
row.appendChild(tasksCell);
row.appendChild(remainingTasksCountCell);
row.appendChild(pipoTasksCountCell);
summaryTableBody.appendChild(row);
});
</script>
</body>
</html>