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> 
    <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>
</head>
<body>
    <h1>Chart - dev</h1>
    <div id="chart-container">
        <div id="receivedData"></div>
        <div id="displayedData"></div>
        <div id="dbData"></div>
        <p id="dbRowCount">Nombre de lignes dans la base de données : </p>
        <ul id="dataList"></ul>
        <p id="firstRowData">Contenu de la première ligne : </p>
        <p id="sumResult">Somme des jours : </p>
        <div id="chartLabelsContainer">
            <div id="chartLabels"></div>
        </div>
        <div id="chartValuesContainer">
            <div id="chartValues"></div>
        </div>
        <div class="chart-title">Graphique 2 courbes</div>
        <canvas id="myChart"></canvas>
    </div>
    <p id="result"></p>
    <p id="countValue"></p>
    <div id="tableContainer"></div>
    <div id="cellsContainer"></div>

function pipo() {
            fetch("load.php")
                .then(response => {
                    if (!response.ok) {
                        throw new Error("Erreur réseau : " + response.statusText);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log("Données reçues :", data);

const receivedDataElement = $("#receivedData");
                    receivedDataElement.html("<pre>++++++++\n" + JSON.stringify(data, null, 2) + "\n++++++++</pre>");

const rowCountElement = $("#rowCount");
                    rowCountElement.text("Nombre de lignes : " + data.length);

data.reverse();

data.forEach(item => {
                        if (Array.isArray(item) && item.length > 1) {
                            item.splice(1, 1);
                        }
                    });

const displayedDataElement = $("#displayedData");
                    displayedDataElement.html("<pre>Tableau après modifications :\n" + JSON.stringify(data, null, 2) + "</pre>");

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]);
                        }
                    });

return data;
                })
                .catch(error => {
                    console.error("Erreur lors de la récupération des données :", error);
                    showMessageModal("Une erreur est survenue lors du chargement des données.");
                });
        }

async function displayResult() {
            pipo();

let data = await loadFromDB();

const cellsContainer = document.getElementById('cellsContainer');
            let cellsHTML = '<table border="1"><tr><th>Ligne</th><th>Nombre de "value": "1"</th></tr>';
            let jsonData = [];

data.forEach((row, rowIndex) => {
                const cells = row.cells;
                const count = countValueOneInCells(cells);
                cellsHTML += `<tr><td>${rowIndex + 1}</td><td>${count}</td></tr>`;

jsonData.push([rowIndex + 1, count]);
            });

cellsHTML += '</table>';
            cellsContainer.innerHTML = cellsHTML;

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

const tab2 = [0, 22, 31, 4, 9, 14, 5];

let x_seconde_courbe = [...tab2];
            for (let i = 2; i < x_seconde_courbe.length; i++) {
                x_seconde_courbe[i] += x_seconde_courbe[i - 1];
            }

console.log(" ------ " + x_seconde_courbe);
        }

function double(x1, x2, y) {
            const ctx = document.getElementById('myChart').getContext('2d');
            const myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    datasets: [{
                        label: 'Courbe 1',
                        data: x1.map((value, index) => ({ x: value, y: y[index] })),
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1,
                        fill: false,
                        showLine: true
                    }, {
                        label: 'Courbe 2',
                        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>
</body>
</html>