File "burndown_0015.php"
Full Path: /home/analogde/www/samples/Dev tableau/Improve/burndown_0015.php
File size: 6.56 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 */
}
.count-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.count-table th, .count-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="count-table">
<thead>
<tr>
<th>Valeur</th>
<th>Estimation</th>
<th>Temps passé</th>
<th>Ratio</th>
</tr>
</thead>
<tbody id="count-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++;
}
// Afficher le contenu de remainingTasks
console.log("Tâches restantes:", remainingTasks);
// 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++;
}
// Afficher le contenu de pipoTasks
console.log("Pipo:", pipoTasks);
// 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: 'Temps passé',
data: remainingTasks,
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
fill: false,
tension: 0.1
}, {
label: 'Estimation',
data: pipoTasks,
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
fill: false,
tension: 0.1
}]
},
options: {
scales: {
x: {
title: {
display: true,
text: 'Jours'
},
},
y: {
title: {
display: true,
text: 'Tâches '
},
min: 0,
max: totalTasks
}
},
responsive: true,
maintainAspectRatio: false
}
});
// Compter les jours avec le même nombre de tâches restantes et pipo
const remainingTasksCount = {};
const pipoTasksCount = {};
// Trouver la valeur maximale dans les deux tableaux
const maxValue = Math.max(...remainingTasks, ...pipoTasks);
// Compter les occurrences en partant de la valeur maximale et en décrémentant
for (let value = maxValue; value >= 1; value--) {
remainingTasksCount[value] = remainingTasks.filter(task => task === value).length;
pipoTasksCount[value] = pipoTasks.filter(task => task === value).length;
}
// Remplir le tableau de comptage des cellules
const countTableBody = document.getElementById('count-table-body');
for (let value = maxValue; value >= 1; value--) {
const row = document.createElement('tr');
const valueCell = document.createElement('td');
const pipoTasksCountCell = document.createElement('td');
const remainingTasksCountCell = document.createElement('td');
const ratioCell = document.createElement('td');
valueCell.textContent = value;
pipoTasksCountCell.textContent = pipoTasksCount[value] || 0;
remainingTasksCountCell.textContent = remainingTasksCount[value] || 0;
// Calculer le ratio
const ratio = remainingTasksCount[value] / pipoTasksCount[value];
ratioCell.textContent = isFinite(ratio) ? ratio.toFixed(2) : 'N/A';
row.appendChild(valueCell);
row.appendChild(pipoTasksCountCell);
row.appendChild(remainingTasksCountCell);
row.appendChild(ratioCell);
countTableBody.appendChild(row);
}
// Additionner les valeurs de la colonne "Estimation" et afficher le résultat dans la console
const estimationColumnCells = document.querySelectorAll('.count-table tbody td:nth-child(2)');
let sum = 0;
estimationColumnCells.forEach(cell => {
const value = parseFloat(cell.textContent);
if (!isNaN(value)) {
sum += value;
}
});
console.log("Somme des valeurs de la colonne 'Estimation':", sum);
</script>
</body>
</html>