File "traitement0018.php"
Full Path: /home/analogde/www/Chart burndown/traitement0018.php
File size: 8.77 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>Interrogation DB</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@latest"></script> <!-- Inclure chartjs-plugin-zoom -->
<style>
/*
html, body {
/*margin: 0;
padding: 0;*/
/*height: 100%;
width: 100%;*/
/* display: flex;
justify-content: center;
align-items: center;
background-color: #f8f9fa; /* Facultatif : couleur de fond */
//
/*
.chart-container {
width: 80%;
height: 500px;
}
*/
#myChart {
width: 100%; /* Largeur du canvas */
height: 40%; /* Hauteur du canvas */
}
</style>
<script>
/**********************************************************/
async function estimation()
{
try {
const response = await fetch("load.php");
const data = await response.json();
const nb_lignes = data.length;
//console.log("Nb lignes " + nb_lignes);
data.reverse();
data.forEach(item => {
if (Array.isArray(item) && item.length > 1)
{
item.splice(1, 1);
}
});
let cumulativeData = [];
let cumulativeSum = 0;
//let labels = [];
//let values = [];
console.log(" ------ " + data);
// Afficher le type de la variable data
console.log("Type de data :", typeof data);
/*
const pipo = [];
// Vérifier si data est un objet
if (typeof data === 'object' && data !== null)
{
// Itérer sur les propriétés de l'objet
for (const key in data)
{
if (data.hasOwnProperty(key))
{
const value = data[key];
console.log(`Clé : ${key}, Valeur : ${value}`);
pipo.push(value);
}
}
}
else
{
console.error("Les données ne sont pas au format objet valide.");
showMessageModal("Les données ne sont pas au format objet valide.");
return;
}
*/
//
let valuesArray = Object.values(data);
// Afficher les valeurs extraites
console.log("Valeurs extraites :", valuesArray);
// Extraire le deuxième élément de chaque sous-tableau
let secondElements = valuesArray.map(item =>
{
if (Array.isArray(item) && item.length > 1)
{
return item[1];
}
return null; // ou une valeur par défaut si le sous-tableau n'a pas de deuxième élément
});
// Afficher les deuxièmes éléments extraits
console.log("Deuxièmes éléments :", secondElements);
// Filtrer les éléments pairs
//data = Object.values(data).filter((item, index) => index % 2 !== 0);
//let array = JSON.parse(data);
// let filteredArray = array.filter(element => element % 2 !== 0);
// console.log(' +++++ ' + filteredArray);
data.forEach(item => {
if (Array.isArray(item) && item.length > 0)
{
cumulativeSum += parseInt(item[item.length - 1], 10);
//labels.push(item[0]);
//values.push(cumulativeSum);
cumulativeData.push([item[0], cumulativeSum]);
}
});
//console.log(" Data cumulative " + cumulativeData);
//console.log(" Somme cumulative " + cumulativeSum);
let x1val = cumulativeData.map(item => item[1]);
let y1val = cumulativeData.map(item => item[0]);
x1val.unshift(0);
y1val.push(0);
return { x1val, y1val };
}
catch (error)
{
console.error("Erreur :", error);
showMessageModal("Une erreur est survenue lors du chargement des données.");
}
}
/**********************************************************/
function load_temps_effectif()
{
return fetch("load_mysql.php")
.then(response => response.json())
.then(data => {
//console.log(data);
return data;
})
.catch(error => {
console.error("Erreur :", error);
showMessageModal("Une erreur est survenue lors du chargement des données.");
});
}
/**********************************************************/
function countValueOneInCells(cells)
{
let count = 0;
for (let i = 0; i < cells.length; i++)
{
if (cells[i].value === "1")
{
count++;
}
}
return count;
}
/**********************************************************/
async function affiche_burndown()
{
const { x1val, y1val } = await estimation();
let data = await load_temps_effectif();
let jsonData = [];
data.forEach((row, rowIndex) =>
{
const cells = row.cells;
const count = countValueOneInCells(cells);
jsonData.push([rowIndex + 1, count]);
});
let countValues = jsonData.map(row => row[1]);
countValues.reverse();
jsonData.forEach((row, index) =>
{
row[1] = countValues[index];
});
let y2val = jsonData.map(row => row[0]);
y2val.reverse();
y2val.push(0);
let x2val_tmp = jsonData.map(row => row[1]);
x2val_tmp.unshift(0);
//console.log("Premières cellules inversées avec 0 ajouté :", JSON.stringify(y2val, null, 2));
//console.log("Deuxièmes cellules avec 0 en première position :", JSON.stringify(x2val, null, 2));
// const x1max = x1val.reduce((sum, value) => sum + value, 0);
// const x2max = x2val.reduce((sum, value) => sum + value, 0);
// console.log("X1 Max " + x1max);
// console.log("X2 Max " + x2max);
/* premiére solution
let x2valStep = [...x2val];
for (let i = 2; i < x2valStep.length; i++)
{
x2valStep[i] += x2valStep[i - 1];
}
*/
// Crée une copie superficielle de x2val : autre formulation
let x2val = x2val_tmp.slice();
console.log(" x2val origine " + x2val);
for (let i = 2; i < x2val.length; i++)
{
x2val[i] = x2val[i] + x2val[i - 1];
}
//console.log(" Sum " + x2valStep);
console.log(" Axe x1 : " + x1val);
console.log(" Axe x2 : " + x2val);
console.log(" Ya : " + y1val);
console.log(" Yn : " + y2val);
//double(x2valStep, x1val, y2val);
double(x1val,x2val, y2val);
}
/**********************************************************/
function double(x1, x2, y)
{
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Estimation temps',
data: x1.map((value, index) => ({ x: value, y: y[index] })),
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
fill: false,
showLine: true
}, {
label: 'Temps passé',
data: x2.map((value, index) => ({ x: value, y: y[index] })),
borderColor: 'rgba(153, 102, 255, 1)',
borderWidth: 1,
fill: false,
showLine: true
}]
},
options: {
scales: {
x: {
type: 'linear',
position: 'bottom'
},
y: {
beginAtZero: true
}
}
}
});
}
/**********************************************************/
//window.onload = displayResult;
affiche_burndown();
</script>
</head>
<body>
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
</body>
</html>