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>
        function loadFromDB()
        {
            return fetch("load_mysql.php")
                .then(response => response.json())
                .then(data => {
                    console.log("plouf");
                    return data;
                })
                .catch(error => {
                    console.error("Erreur :", error);
                    showMessageModal("Une erreur est survenue lors du chargement des données.");
                });
        }

async function displayResult()
        {
            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>`;

// Ajouter les informations au tableau JSON sous forme de tableau imbriqué
                jsonData.push([rowIndex + 1, count]);
            });

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

// Inverser uniquement la colonne des valeurs de count
            let countValues = jsonData.map(row => row[1]);
            countValues.reverse();
            jsonData.forEach((row, index) => {
                row[1] = countValues[index];
            });

// Créer un tableau contenant uniquement les premières cellules
            let firstCells = jsonData.map(row => row[0]);

// Inverser l'ordre des premières cellules
            firstCells.reverse();

// Insérer un 0 à la fin de firstCells
            firstCells.push(0);

// Créer un tableau contenant uniquement les deuxièmes cellules
            let secondCells = jsonData.map(row => row[1]);

// Insérer un 0 en première position de secondCells
            secondCells.unshift(0);

// Afficher les tableaux JSON dans la console
            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));

// Calculer la somme des éléments de secondCells
            const maxXValue = secondCells.reduce((sum, value) => sum + value, 0);

console.log("Max " + maxXValue);

// Copier secondCells et appliquer le traitement
            let processedSecondCells = [...secondCells];
            for (let i = 2; i < processedSecondCells.length; i++) {
                processedSecondCells[i] += processedSecondCells[i - 1];
            }

console.log(" Sum " + processedSecondCells);

const { chartLabels, chartValues } = await blabla();

console.log("Labels " + chartLabels);
            console.log("Values " + chartValues);

// Créer le graphique
            //createChart(firstCells, processedSecondCells, maxXValue, chartLabels, chartValues);

//zoulou( chartLabels, processedSecondCells );

// Premier tableau de valeurs pour l'axe X
            const tab1 = [0, 6, 37, 46, 57, 81, 98];

// Deuxième tableau de valeurs pour l'axe X
            const tab2 = [5, 10, 25, 30, 45, 60, 75];

plot(tab1, tab2);
        }

function zoulou( chartDataEstimation, chartDataTempsPasse )
        {

console.log(" 111111 " + chartDataEstimation);
            console.log(" 222222 " + chartDataTempsPasse);

const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [
                    {
                        label: 'Estimation',
                        data: chartDataEstimation,
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1,
                        fill: false,
                        showLine: true
                    },
                    {
                        label: 'Temps passé',
                        data: chartDataTempsPasse,
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 1,
                        fill: false,
                        showLine: true
                    }
                ]
            },
            options: {
                scales: {
                    x: {
                        type: 'linear',
                        position: 'bottom',
                        min: 0,
                        max: 100,
                        title: {
                            display: true,
                            text: 'Nombre de jours'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        min: 1,
                        max: 6,
                        title: {
                            display: true,
                            text: 'Nombre de tâches'
                        }
                    }
                }
            }
        });

}

function plot(tab1,tab2)
        {

// Premier tableau de valeurs pour l'axe X
            //const tab1 = [0, 6, 37, 46, 57, 81, 98];

// Deuxième tableau de valeurs pour l'axe X
            //const tab2 = [5, 10, 25, 30, 45, 60, 75];

// Valeurs pour l'axe Y
            const labels = [1, 2, 3, 4, 5, 6];

// Configuration du graphique
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: labels,
        datasets: [
            {
                label: 'Première courbe',
                data: tab1.map((_, index) => ({ x: tab1[index], y: labels[index] })),
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1,
                fill: false,
                showLine: true // Pour ne pas afficher la ligne entre les points
            },
            {
                label: 'Deuxième courbe',
                data: tab2.map((_, index) => ({ x: tab2[index], y: labels[index] })),
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1,
                fill: false,
                showLine: true // Pour ne pas afficher la ligne entre les points
            }
        ]
    },
    options: {
        scales: {
            x: {
                beginAtZero: true,
                type: 'linear', // Pour traiter les valeurs de l'axe X comme des nombres
                position: 'bottom'
            },
            y: {
                beginAtZero: true,
                type: 'linear', // Pour traiter les valeurs de l'axe Y comme des nombres
                position: 'left'
            }
        }
    }
});

}

async function blabla()
        {
            const response = await fetch("load.php");
            if (!response.ok) {
                throw new Error("Erreur réseau : " + response.status);
            }
            const data = await response.json();
            console.log("Données reçues :", data);

// Inverser le tableau JSON
            data.reverse();

// Supprimer l'élément d'indice 1 dans chaque sous-tableau
            data.forEach(item => {
                if (Array.isArray(item) && item.length > 1) {
                    item.splice(1, 1);
                }
            });

// Initialiser un nouveau tableau pour les résultats cumulés
            let cumulativeData = [];
            let cumulativeSum = 0;

// Préparer les données pour le graphique
            let labels = [];
            let values = [];

// Parcourir le tableau JSON et calculer les sommes cumulées
            data.forEach(item => {
                if (Array.isArray(item) && item.length > 0) {
                    // Convertir la valeur en entier et ajouter à la somme cumulée
                    cumulativeSum += parseInt(item[item.length - 1], 10);
                    // Ajouter les données pour le graphique
                    labels.push(item[0]); // Supposons que le premier élément est le label
                    values.push(cumulativeSum);
                    // Ajouter le sous-tableau modifié au nouveau tableau
                    cumulativeData.push([item[0], cumulativeSum]);
                }
            });

// Préparer les données pour le graphique à partir de cumulativeData
            let chartLabels = cumulativeData.map(item => item[1]);
            let chartValues = cumulativeData.map(item => item[0]);

// Insérer un 0 au début de chartLabels
            chartLabels.unshift(0);

// Insérer un 0 à la fin de chartValues
            chartValues.push(0);

return { chartLabels, chartValues };
        }

function createChart(firstCells, processedSecondCells, maxXValue, chartLabels, chartValues)
        {
            const ctx = document.getElementById('myChart').getContext('2d');
            new Chart(ctx, {
                type: 'line', // Vous pouvez changer le type de graphique ici (ex: 'bar', 'line', 'pie', etc.)
                data: {
                    labels: processedSecondCells, // Abscisses
                    datasets: [{
                        label: 'Valeurs',
                        data: firstCells, // Ordonnées
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1,
                        fill: false
                    }]
                },
                options: {
                    scales: {
                        x: {
                            type: 'linear',
                            min: 0,
                            max: maxXValue,
                            beginAtZero: true

},
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

window.onload = displayResult;
    </script>
</head>
<body>
    <h1>Chart - dev</h1>