File "RUN10.php"
Full Path: /home/analogde/www/burndown/RUN10.php
File size: 6.68 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Burndown chart : Génération aléatoire des jours - (REV 10 - 20_03_2025)</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
table {
width: 50%;
border-collapse: collapse;
margin: 20px 0;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: center;
}
.sum-display {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Burndown chart : Génération aléatoire des jours - (REV 10 - 20_03_2025)</h1>
<!-- Premier tableau et graphique -->
<h2>Tableau des Coordonnées - Estimation</h2>
<table id="coordinatesTableEstimation">
<thead>
<tr>
<th>Y (Tâches)</th>
<th>Temps estimé (jours)</th>
<th>X (jours)</th>
</tr>
</thead>
<tbody id="coordinatesBodyEstimation">
<!-- Les coordonnées seront insérées ici -->
</tbody>
</table>
<div id="sumDisplayEstimation" class="sum-display">Nombre de jours (Estimation) = </div>
<!-- Second tableau et graphique -->
<h2>Tableau des Coordonnées - Temps passé</h2>
<table id="coordinatesTableTempsPasse">
<thead>
<tr>
<th>Y (Tâches)</th>
<th>Temps réel (jours)</th>
<th>X (jours)</th>
</tr>
</thead>
<tbody id="coordinatesBodyTempsPasse">
<!-- Les coordonnées seront insérées ici -->
</tbody>
</table>
<div id="sumDisplayTempsPasse" class="sum-display">Nombre de jours (Temps passé) = </div>
<canvas id="myChart" width="800" height="400"></canvas>
<script>
// Fonction pour générer un nombre aléatoire entre min et max
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Fonction pour générer les données et afficher le tableau
function generateDataAndTable(tableBodyId, sumDisplayId, color, isEstimation) {
const tempsEstimeValues = [0, ...Array.from({ length: 99 }, () => getRandomNumber(1, 35))];
const yValues = Array.from({ length: 100 }, (_, i) => 100 - i);
const dataPoints = tempsEstimeValues.map((tempsEstime, i) => ({ tempsEstime, y: yValues[i] }));
const xValues = [0];
for (let i = 1; i < tempsEstimeValues.length; i++) {
xValues.push(xValues[i - 1] + tempsEstimeValues[i]);
}
const sumTempsEstime = tempsEstimeValues.reduce((sum, tempsEstime) => sum + tempsEstime, 0);
const coordinatesBody = document.getElementById(tableBodyId);
dataPoints.forEach((point, i) => {
const row = document.createElement('tr');
if (isEstimation) {
row.innerHTML = `<td>${point.y}</td><td>${point.tempsEstime}</td><td>${xValues[i]}</td>`;
} else {
row.innerHTML = `<td>${point.y}</td><td>${point.tempsEstime}</td><td>${xValues[i]}</td>`;
}
coordinatesBody.appendChild(row);
});
const sumDisplay = document.getElementById(sumDisplayId);
sumDisplay.textContent += sumTempsEstime;
const chartData = xValues.map((x, i) => ({ x, y: yValues[i], diff: i === 0 ? 0 : x - xValues[i - 1], plan: tempsEstimeValues[i] }));
return { chartData, sumTempsEstime, color };
}
// Générer les données et afficher les tableaux
const { chartData: chartDataEstimation, sumTempsEstime: sumTempsEstimeEstimation, color: colorEstimation } = generateDataAndTable('coordinatesBodyEstimation', 'sumDisplayEstimation', 'rgba(75, 192, 192, 1)', true);
const { chartData: chartDataTempsPasse, sumTempsEstime: sumTempsEstimeTempsPasse, color: colorTempsPasse } = generateDataAndTable('coordinatesBodyTempsPasse', 'sumDisplayTempsPasse', 'rgba(255, 99, 132, 1)', false);
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: 'Estimation',
data: chartDataEstimation,
borderColor: colorEstimation,
borderWidth: 1,
fill: false,
showLine: true
},
{
label: 'Temps passé',
data: chartDataTempsPasse,
borderColor: colorTempsPasse,
borderWidth: 1,
fill: false,
showLine: true
}
]
},
options: {
scales: {
x: {
type: 'linear',
position: 'bottom',
min: 0,
max: Math.max(sumTempsEstimeEstimation, sumTempsEstimeTempsPasse),
title: {
display: true,
text: 'Nombre de jours'
}
},
y: {
beginAtZero: true,
min: 1,
max: 100,
title: {
display: true,
text: 'Nombre de tâches'
}
}
},
plugins: {
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
label += context.raw.y;
if (context.datasetIndex === 0) {
label += ` (Plan: ${context.raw.plan})`;
} else {
label += ` (Diff: ${context.raw.diff})`;
}
return label;
}
}
}
}
}
});
</script>
</body>
</html>