File "traitement0016.php"
Full Path: /home/analogde/www/DOSSIER/Json/traitement0016.php
File size: 7.87 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>
.chart-title {
text-align: center;
margin-bottom: 20px;
font-size: 1.5em;
font-weight: bold;
}
#chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
#myChart {
width: 100%;
max-width: 600px;
}
</style>
<script>
/**********************************************************/
async function pipo()
{
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 = [];
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 xval = cumulativeData.map(item => item[1]);
let yval = cumulativeData.map(item => item[0]);
xval.unshift(0);
yval.push(0);
return { xval, yval };
}
catch (error)
{
console.error("Erreur :", error);
showMessageModal("Une erreur est survenue lors du chargement des données.");
}
}
/**********************************************************/
function loadFromDB()
{
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 displayResult()
{
const { xval, yval } = await pipo();
//console.log(" Extraction xval " + xval );
//console.log(" Extraction yval " + yval );
const extraction = xval;
//console.log(" Extraction " + extraction );
let data = await loadFromDB();
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 firstCells = jsonData.map(row => row[0]);
firstCells.reverse();
firstCells.push(0);
let secondCells = jsonData.map(row => row[1]);
secondCells.unshift(0);
console.log("Premières cellules inversées avec 0 ajouté :", JSON.stringify(firstCells, null, 2));
console.log("Deuxièmes cellules avec 0 en première position :", JSON.stringify(secondCells, null, 2));
const maxXValue = secondCells.reduce((sum, value) => sum + value, 0);
console.log("Max " + maxXValue);
let processedSecondCells = [...secondCells];
for (let i = 2; i < processedSecondCells.length; i++) {
processedSecondCells[i] += processedSecondCells[i - 1];
}
console.log(" Sum " + processedSecondCells);
console.log(" Axe x1 : " + processedSecondCells);
console.log(" Axe x2 : " + extraction);
console.log(" Y : " + firstCells);
double(processedSecondCells , extraction, firstCells);
}
/**********************************************************/
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;
</script>
</head>
<body>
<div id="chart-container">
<div class="chart-title">Graphique 2 courbes</div>
<div id="displayedData"></div>
<ul id="dataList"></ul>
<p id="sumResult">Somme des jours : </p>
<div id="chartLabelsContainer">
<div id="chartLabels"></div>
</div>
<div id="chartValuesContainer">
<div id="chartValues"></div>
<canvas id="myChart"></canvas>
</div>
<p id="result"></p>
<p id="countValue"></p>
<div id="tableContainer"></div>
<div id="cellsContainer"></div>
</body>
</html>