add graphique

pong/static/burger.js

@@ -8,6 +8,8 @@ document.addEventListener('DOMContentLoaded', () => {
     const tournoiList = document.getElementById('tournoi-list');
     const blockchainList = document.getElementById('blockchain-list');
 
+    const logo = document.querySelector('.logo');
+
     menuButton.addEventListener('click', toggleMenu);
 
     function toggleMenu() {
@@ -200,7 +202,7 @@ document.addEventListener('DOMContentLoaded', () => {
             const nameCell = rows[i].getElementsByTagName('td')[1];
             if (nameCell) {
                 const nameValue = nameCell.textContent || nameCell.innerText;
-                    if (nameValue.toLowerCase().indexof(searchValue) > -1 ) {
+                if (nameValue.toLowerCase().indexOf(searchValue) > -1 ) {
                     rows[i].style.display = '';
                 } else {
                     rows[i].style.display = 'none';
@@ -241,4 +243,154 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         }
     }
+
+    document.getElementById('generate-player-chart').addEventListener('click', generatePlayerChart);
+    document.getElementById('generate-match-chart').addEventListener('click', generateMatchLinePlot);
+
+    function generatePlayerChart() {
+
+        if (document.getElementById('player-chart').style.display === 'block'){
+            document.getElementById('player-chart').style.display = 'none';
+            return ;
+        }
+
+        if (logo.style.display === 'block'){
+            logo.style.display = 'none';
+        }
+        const rows = document.querySelectorAll('#player-list tbody tr');
+        const playerNames = [];
+        const totalMatches = [];
+        const totalWins = [];
+
+        rows.forEach(row => {
+            const cells = row.getElementsByTagName('td');
+            playerNames.push(cells[1].innerText);
+            totalMatches.push(parseInt(cells[2].innerText));
+            totalWins.push(parseInt(cells[3].innerText));
+        });
+
+        const ctx = document.getElementById('player-chart').getContext('2d');
+        document.getElementById('player-chart').style.display = 'block';
+        new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: playerNames,
+                datasets: [
+                    { label: 'Total Matches', data: totalMatches, backgroundColor: 'rgba(75, 192, 192, 0.6)' },
+                    { label: 'Total Wins', data: totalWins, backgroundColor: 'rgba(54, 162, 235, 0.6)' },
+                ]
+            },
+            options: {
+                scales: {
+                    x: {
+                        ticks: {
+                            color: '#00ffff' 
+                        }
+                    },
+                    y: {
+                        beginAtZero: true,
+                        ticks: {
+                            color: '#00ffff'
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    function generateMatchLinePlot() {
+
+        if (document.getElementById('match-chart').style.display === 'block'){
+            document.getElementById('match-chart').style.display = 'none';
+            return ;
+        }
+
+        const rows = document.querySelectorAll('#match-list tbody tr');
+        const playerWins = {};
+        const dates = [];
+    
+        rows.forEach(row => {
+            const cells = row.getElementsByTagName('td');
+            const winner = cells[5].innerText;
+            const date = cells[9].innerText;
+    
+            if (!dates.includes(date)) {
+                dates.push(date);
+            }
+    
+            if (!playerWins[winner]) {
+                playerWins[winner] = [];
+            }
+    
+            let existingEntry = playerWins[winner].find(entry => entry.date === date);
+
+            if (existingEntry) {
+                existingEntry.wins += 1;
+            }
+
+            else {
+                let lastWinCount = playerWins[winner].length > 0 ? playerWins[winner][playerWins[winner].length - 1].wins : 0;
+                playerWins[winner].push({ date: date, wins: lastWinCount + 1 });
+            }
+        });
+    
+        const datasets = Object.keys(playerWins).map(player => {
+            return {
+                label: player,
+                data: playerWins[player].map(entry => ({ x: entry.date, y: entry.wins })),
+                fill: false,
+                borderColor: getRandomColor(),
+                tension: 0.1
+            };
+        });
+    
+        const ctx = document.getElementById('match-chart').getContext('2d');
+        document.getElementById('match-chart').style.display = 'block';
+        new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: dates.sort(),  
+                datasets: datasets
+            },
+            options: {
+                scales: {
+                    x: {
+                        type: 'time',
+                        time: {
+                            parser: 'YYYY-MM-DD', 
+                            unit: 'day',
+                            tooltipFormat: 'll'
+                        },
+                        title: {
+                            display: true,
+                            text: 'Date'
+                        },
+                        ticks: {
+                            color: '#00ffff' 
+                        }
+                    },
+                    y: {
+                        beginAtZero: true,
+                        title: {
+                            display: true,
+                            text: 'Nombre de Victoires Cumulées'
+                        },
+                        ticks: {
+                            color: '#00ffff' 
+                        }
+                    }
+                }
+            }
+        });
+    }
+    
+    function getRandomColor() {
+        const letters = '0123456789ABCDEF';
+        let color = '#';
+        for (let i = 0; i < 6; i++) {
+            color += letters[Math.floor(Math.random() * 16)];
+        }
+        return color;
+    }
+
 });

pong/static/index.html

@@ -141,6 +141,8 @@
             <tbody>
 			</tbody>
         </table>
+        <button id="generate-match-chart">Générer le graphique</button>
+        <canvas id="match-chart" style="display:none;"></canvas>
     </div>
 
     <div id="player-list" class="content-list" style="display: none;">
@@ -167,6 +169,8 @@
             <tbody>
 	        </tbody>
         </table>
+        <button id="generate-player-chart">Générer le graphique</button>
+        <canvas id="player-chart" style="display:none;"></canvas>
     </div>
 
     <div id="tournoi-list" class="content-list" style="display: none;">
@@ -186,6 +190,10 @@
         </table>
     </div>
     
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js"></script>
+
     <script src="{% static 'game.js' %}"></script>
     <script src="{% static 'burger.js' %}"></script>
     <script src="{% static 'language.js' %}"></script>

pong/static/styles.css

@@ -11,7 +11,7 @@ html {
     align-items: center;
     justify-content: center;
     height: 100%;
-    overflow: hidden;
+    overflow: auto;
 }
 
 
@@ -255,6 +255,7 @@ button:hover {
     position: relative;
     z-index: 10;
     max-width: 80%;
+    overflow: auto;
 }
 
 
@@ -440,3 +441,9 @@ body {
     font-family: Arial, sans-serif;
     font-size: 16px;
 }
+
+canvas {
+    max-width: 100%;
+    height: auto;
+    margin-top: 20px;
+}