Tiny File Manager

Back Back Up Advanced Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Burn Down Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .chart-container {
            width: 200%; /* Largeur du conteneur, beaucoup plus large que la page */
            height: 100vh; /* Hauteur du conteneur */
            border: 1px solid #ccc; /* Bordure pour une meilleure visibilité */
            position: relative; /* Assure que le conteneur est positionné correctement */
            overflow-x: auto; /* Ajoute une barre de défilement horizontale */
        }
        #burnDownChart {
            width: 100%; /* Largeur du canvas */
            height: 100%; /* Hauteur du canvas */
        }
        .data-table, .summary-table, .count-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        .data-table th, .data-table td, .summary-table th, .summary-table td, .count-table th, .count-table td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="chart-container">
        <canvas id="burnDownChart"></canvas>
    </div>
    <table class="data-table">
        <thead>
            <tr>
                <th>Jour</th>
                <th>Tâches restantes</th>
                <th>Pipo</th>
                <th>Différence</th>
            </tr>
        </thead>
        <tbody id="data-table-body">
            
        </tbody>
    </table>
    <table class="summary-table">
        <thead>
            <tr>
                <th>Tâches</th>
                <th>Nombre de jours (Tâches restantes)</th>
                <th>Nombre de jours (Pipo)</th>
            </tr>
        </thead>
        <tbody id="summary-table-body">
            
        </tbody>
    </table>
    <table class="count-table">
        <thead>
            <tr>
                <th>Valeur</th>
                <th>Nombre de cellules (Tâches restantes)</th>
                <th>Nombre de cellules (Pipo)</th>
            </tr>
        </thead>
        <tbody id="count-table-body">
            
        </tbody>
    </table>
    <script>
        // Données simulées pour le Burn Down Chart
        const totalTasks = 20;

// Générer des données de progression aléatoires pour remainingTasks
        const remainingTasks = [];
        let tasksLeft = totalTasks;
        let day = 0;
        while (tasksLeft > 0) {
            remainingTasks.push(tasksLeft);
            // Simuler la complétion des tâches
            if (tasksLeft > 0 && Math.random() < 0.05) {
                tasksLeft -= 1;
            }
            day++;
        }

// Afficher le contenu de remainingTasks
        console.log("Tâches restantes:", remainingTasks);

// Générer des données de progression aléatoires pour pipoTasks
        const pipoTasks = [];
        let pipoTasksLeft = totalTasks;
        day = 0;
        while (pipoTasksLeft > 0) {
            pipoTasks.push(pipoTasksLeft);
            // Simuler la complétion des tâches
            if (pipoTasksLeft > 0 && Math.random() < 0.05) {
                pipoTasksLeft -= 1;
            }
            day++;
        }

// Afficher le contenu de pipoTasks
        console.log("Pipo:", pipoTasks);

// Configuration du graphique
        const ctx = document.getElementById('burnDownChart').getContext('2d');
        const burnDownChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: Array.from({ length: remainingTasks.length }, (_, i) => i + 1),
                datasets: [{
                    label: 'Tâches restantes',
                    data: remainingTasks,
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1,
                    fill: false,
                    tension: 0.1
                }, {
                    label: 'Pipo',
                    data: pipoTasks,
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1,
                    fill: false,
                    tension: 0.1
                }]
            },
            options: {
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Jours'
                        },
                    },
                    y: {
                        title: {
                            display: true,
                            text: 'Tâches restantes'
                        },
                        min: 0,
                        max: totalTasks
                    }
                },
                responsive: true,
                maintainAspectRatio: false
            }
        });

// Remplir le tableau avec les données
        const tableBody = document.getElementById('data-table-body');
        const maxDays = Math.max(remainingTasks.length, pipoTasks.length);
        for (let i = 0; i < maxDays; i++) {
            const row = document.createElement('tr');
            const dayCell = document.createElement('td');
            const remainingTasksCell = document.createElement('td');
            const pipoTasksCell = document.createElement('td');
            const differenceCell = document.createElement('td');

dayCell.textContent = i + 1;
            remainingTasksCell.textContent = remainingTasks[i] !== undefined ? remainingTasks[i] : '-';
            pipoTasksCell.textContent = pipoTasks[i] !== undefined ? pipoTasks[i] : '-';

// Calculer la différence
            const difference = pipoTasks[i] !== undefined && remainingTasks[i] !== undefined
                ? pipoTasks[i] - remainingTasks[i]
                : '-';
            differenceCell.textContent = difference;

row.appendChild(dayCell);
            row.appendChild(remainingTasksCell);
            row.appendChild(pipoTasksCell);
            row.appendChild(differenceCell);

tableBody.appendChild(row);
        }

// Compter les jours avec le même nombre de tâches restantes et pipo
        const remainingTasksCount = {};
        const pipoTasksCount = {};

remainingTasks.forEach(tasks => {
            remainingTasksCount[tasks] = (remainingTasksCount[tasks] || 0) + 1;
        });

pipoTasks.forEach(tasks => {
            pipoTasksCount[tasks] = (pipoTasksCount[tasks] || 0) + 1;
        });

// Remplir le tableau récapitulatif
        const summaryTableBody = document.getElementById('summary-table-body');
        const allTasks = new Set([...Object.keys(remainingTasksCount), ...Object.keys(pipoTasksCount)]);

allTasks.forEach(tasks => {
            const row = document.createElement('tr');
            const tasksCell = document.createElement('td');
            const remainingTasksCountCell = document.createElement('td');
            const pipoTasksCountCell = document.createElement('td');

tasksCell.textContent = tasks;
            remainingTasksCountCell.textContent = remainingTasksCount[tasks] || 0;
            pipoTasksCountCell.textContent = pipoTasksCount[tasks] || 0;

row.appendChild(tasksCell);
            row.appendChild(remainingTasksCountCell);
            row.appendChild(pipoTasksCountCell);

summaryTableBody.appendChild(row);
        });

// Remplir le tableau de comptage des cellules
        const countTableBody = document.getElementById('count-table-body');
        const allValues = new Set([...Object.keys(remainingTasksCount), ...Object.keys(pipoTasksCount)]);

allValues.forEach(value => {
            const row = document.createElement('tr');
            const valueCell = document.createElement('td');
            const remainingTasksCountCell = document.createElement('td');
            const pipoTasksCountCell = document.createElement('td');

valueCell.textContent = value;
            remainingTasksCountCell.textContent = remainingTasksCount[value] || 0;
            pipoTasksCountCell.textContent = pipoTasksCount[value] || 0;

row.appendChild(valueCell);
            row.appendChild(remainingTasksCountCell);
            row.appendChild(pipoTasksCountCell);

countTableBody.appendChild(row);
        });
    </script>
</body>
</html>