File "traitement0019.php"

Full Path: /home/analogde/www/Chart burndown/traitement0019.php
File size: 6.31 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!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>
        #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;
                data.reverse();
                data.forEach(item => {
                    if (Array.isArray(item) && item.length > 1) {
                        item.splice(1, 1);
                    }
                });

                let cumulativeData = [];
                let cumulativeSum = 0;

                data.forEach(item => {
                    if (Array.isArray(item) && item.length > 0) {
                        cumulativeSum += parseInt(item[item.length - 1], 10);
                        cumulativeData.push([item[0], 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 => {
                    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);

            let x2val = x2val_tmp.slice();
            for (let i = 2; i < x2val.length; i++) {
                x2val[i] = x2val[i] + x2val[i - 1];
            }

            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
                        }
                    },
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    let label = context.dataset.label || '';
                                    return label;
                                },
                                afterLabel: function(context) {
                                    let xfin = context.raw.x;
                                    let xdeb = context.raw.x;

                                    if (context.dataIndex > 0) {
                                        xdeb = context.dataset.data[context.dataIndex - 1].x;
                                    }

                                    let Xdiff = xfin - xdeb;
                                    return `Différence = ${Xdiff}`;
                                }
                            }
                        }
                    }
                }
            });
        }

        affiche_burndown();
    </script>
</head>
<body>
    <div class="chart-container">
        <canvas id="myChart"></canvas>
    </div>
</body>
</html>