Antoine/lhoist-stay-safe__backend-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding js layer for stat dashboard

Browse Source
This commit is contained in:
Antoine M 2024-02-13 19:13:18 +01:00
parent 5af51603c8
commit 70650d7c55
1 changed files with 213 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

213
resources/js/stats-dashboard.js Normal file
View File

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