From 70650d7c553f98188e497b7ec4e26251283e56c7 Mon Sep 17 00:00:00 2001 From: Antoine M Date: Tue, 13 Feb 2024 19:13:18 +0100 Subject: [PATCH] adding js layer for stat dashboard --- resources/js/stats-dashboard.js | 213 ++++++++++++++++++++++++++++++++ 1 file changed, 213 insertions(+) create mode 100644 resources/js/stats-dashboard.js diff --git a/resources/js/stats-dashboard.js b/resources/js/stats-dashboard.js new file mode 100644 index 0000000..8b279fd --- /dev/null +++ b/resources/js/stats-dashboard.js @@ -0,0 +1,213 @@ +import Chart from 'chart.js/auto'; +import ChartDataLabels from 'chartjs-plugin-datalabels'; + +function buildDataChart(level) { + const scoreDistribution = level.querySelectorAll( + '.game_stats__scores-distribution .score-data' + ); + const scoreDistributionDataset = []; + + for (const score of scoreDistribution) { + scoreDistributionDataset.push({ + label: '# of Votes', + score: score.getAttribute('score') + 'points', + count: score.getAttribute('count'), + }); + } + + console.log('score', scoreDistribution); + console.log(scoreDistributionDataset); + + const colorPalettes = [ + ['#1d4ed8', '#3b82f6', '#60a5fa', '#93c5fd', '#c3dafe'], + ['#1d4ed8', '#3c67dc', '#5b81e0', '#7a9be3', '#99b5e7'], + ['#1223C2', '#030E8E', '#3D49C7', '#6D77D0'], + ['#1d4ed8', '#3b82f6', '#60a5fa', '#93c5fd', '#c3dafe'], + ['#1240a1', '#2e6ee0', '#548bf7', '#81aefd', '#a9d2ff'], + ['#0a37a8', '#2d65d4', '#5794ff', '#7dbdff', '#a3dcff'], + ['#1a3d9c', '#4271d9', '#75a7ff', '#9fc5ff', '#c6e2ff'], + ['#084ba6', '#3a79d6', '#6ba5ff', '#96c3ff', '#badbff'], + ['#1137a3', '#3267d6', '#5fa3ff', '#8fc1ff', '#b5e0ff'], + ]; + + const dataTruc = { + labels: ['Red', 'Blue', 'Yellow'], + datasets: [ + { + label: 'My First Dataset', + data: [300, 50, 100], + backgroundColor: [ + 'rgb(255, 99, 132)', + 'rgb(54, 162, 235)', + 'rgb(255, 205, 86)', + ], + hoverOffset: 4, + }, + ], + }; + const data = { + labels: ['Red', 'Blue', 'Yellow'], + datasets: [ + { + label: 'My First Dataset', + data: [300, 50, 100], + backgroundColor: [ + 'rgb(255, 99, 132)', + 'rgb(54, 162, 235)', + 'rgb(255, 205, 86)', + ], + hoverOffset: 4, + }, + ], + }; + + new Chart( + document.getElementById('graphic-score-repartition'), + { + type: 'doughnut', + options: { + animation: true, + layout: { + padding: { + right: 50, + }, + }, + plugins: { + legend: { + position: 'bottom', + }, + tooltip: { + enabled: false, + }, + }, + }, + data: { + labels: scoreDistributionDataset.map( + (scoreData) => scoreData.score + ), + datasets: [ + { + label: scoreDistributionDataset.map( + (scoreData) => scoreData.count + ), + backgroundColor: colorPalettes[4], + data: scoreDistributionDataset.map( + (scoreData) => scoreData.score + ), + hoverOffset: 14, + }, + ], + }, + } + ); +} +function buildDataChart2(level) { + const scoreDistribution = level.querySelectorAll( + '.game_stats__scores-distribution .score-data' + ); + const scoreDistributionDataset = []; + + for (const score of scoreDistribution) { + scoreDistributionDataset.push({ + score: score.getAttribute('score') + ' pts', + count: score.getAttribute('count'), + }); + } + // const data = [ + // { team: 'Red Jaguars', score: 8 }, + // { team: 'Blue Barracudas', score: 23 }, + // { team: 'Green Monkeys', score: 3 }, + // { team: 'Orange Iguanas', score: 15 }, + // { team: 'Purple Parrots', score: 7 }, + // { team: 'Silver Snakes', score: 1 }, + // ]; + // console.log('dta', data); + const colorPalettes = [ + ['#1d4ed8', '#3b82f6', '#60a5fa', '#93c5fd', '#c3dafe'], + ['#1d4ed8', '#3c67dc', '#5b81e0', '#7a9be3', '#99b5e7'], + ['#1223C2', '#030E8E', '#3D49C7', '#6D77D0'], + ['#1d4ed8', '#3b82f6', '#60a5fa', '#93c5fd', '#c3dafe'], + ['#1240a1', '#2e6ee0', '#548bf7', '#81aefd', '#a9d2ff'], + ['#0a37a8', '#2d65d4', '#5794ff', '#7dbdff', '#a3dcff'], + ['#1a3d9c', '#4271d9', '#75a7ff', '#9fc5ff', '#c6e2ff'], + ['#084ba6', '#3a79d6', '#6ba5ff', '#96c3ff', '#badbff'], + ['#1137a3', '#3267d6', '#5fa3ff', '#8fc1ff', '#b5e0ff'], + ]; + + console.log('score', scoreDistributionDataset); + new Chart( + document.getElementById('graphic-score-repartition'), + { + type: 'pie', + data: { + labels: scoreDistributionDataset.map( + (row) => row.score + ), + datasets: [ + { + backgroundColor: colorPalettes[4], + label: 'Nombres de joueurs', + data: scoreDistributionDataset.map( + (row) => row.count + ), + hoverOffset: 50, + }, + ], + }, + plugins: [ChartDataLabels], + options: { + plugins: { + legend: { + display: false, + position: 'bottom', + }, + + title: { + display: false, + text: 'Custom Chart Title', + }, + datalabels: { + color: '#fff', + anchor: 'center', + font: { + size: 20, + }, + formatter: (value, context) => { + return context.chart.data.labels[ + context.dataIndex + ]; + }, + + // align: 'center', + // offset: 10, + // borderWidth: 2, + // borderColor: '#fff', + // borderRadius: 25, + }, + }, + }, + } + ); +} + +window.addEventListener('DOMContentLoaded', (event) => { + const levels = document.querySelectorAll('.game_stats'); + levels.forEach((level) => { + buildDataChart2(level); + function updatePercentage(percentage) { + const overlay = document.querySelector( + '.donut-chart__overlay' + ); + const text = document.querySelector( + '.donut-chart__percentage' + ); + overlay.style.transform = `rotate(${ + (percentage / 100) * 360 + }deg)`; + text.textContent = `${percentage}%`; + } + + // Exemple : mettre à jour le pourcentage à 75% + updatePercentage(75); + }); +});