adding js layer for stat dashboard

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);
+  });
+});