Tiny File Manager

Back Back Up Advanced Editor

<!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>

/**********************************************************/

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.");
    }
}

/**********************************************************/

/**********************************************************/

/**********************************************************/

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>

<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>