170 lines
4.8 KiB
JavaScript
170 lines
4.8 KiB
JavaScript
import Chart from 'chart.js/auto';
|
|
import ChartDataLabels from 'chartjs-plugin-datalabels';
|
|
|
|
function buildLevelDataCharts(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 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,
|
|
},
|
|
},
|
|
},
|
|
}
|
|
);
|
|
}
|
|
function buildRatingsDataChart() {
|
|
const ratingDistribution = document.querySelectorAll(
|
|
'.rating_stats .rating-data'
|
|
);
|
|
const ratingDistributionDataset = [];
|
|
|
|
for (const rating of ratingDistribution) {
|
|
ratingDistributionDataset.push({
|
|
rating: rating.getAttribute('rating'),
|
|
count: rating.getAttribute('count'),
|
|
});
|
|
}
|
|
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-rating-repartition'),
|
|
{
|
|
type: 'pie',
|
|
data: {
|
|
labels: ratingDistributionDataset.map(
|
|
(row) => row.rating
|
|
),
|
|
datasets: [
|
|
{
|
|
backgroundColor: colorPalettes[4],
|
|
label: 'Nombres de joueurs',
|
|
data: ratingDistributionDataset.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) => {
|
|
buildLevelDataCharts(level);
|
|
});
|
|
buildRatingsDataChart();
|
|
});
|