trotFunky
07d8cf42d7
Fetch the amount of truths for the week and the player count to find the total possible votes. Use this to remove the hardocded value in the check. Update the check to fail if there was an error as well. Now that the truth count is calculated, send it to the javascript to build the graph labels automatically as well.
106 lines
2.9 KiB
JavaScript
106 lines
2.9 KiB
JavaScript
const limit_ratio = 1.3
|
|
const colors = ['#b6b8fc', '#b6f4fc', '#fcb6cc', '#e0fcb6', '#fcdcb6', '#b6fcc8', '#f0b6fc']
|
|
async function main() {
|
|
const vote_response = await fetch(document.URL+"/votes");
|
|
if (!vote_response.ok) {
|
|
return;
|
|
}
|
|
|
|
let keys = []
|
|
let datasets = []
|
|
try {
|
|
const vote_data = (await vote_response.json());
|
|
for (let player in vote_data.votes) {
|
|
datasets.push({
|
|
parsing: true,
|
|
label: player,
|
|
data: vote_data.votes[player],
|
|
})
|
|
}
|
|
for (let i = 1; i <= vote_data.truth_count; i++) {
|
|
keys.push("Vérité " + i)
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to parse vote data : \n\t" + error.message);
|
|
return;
|
|
}
|
|
|
|
|
|
// Sort by label to maintain the same graph order, as it goes through a hash map in the backend.
|
|
datasets.sort((a, b) => a.label > b.label)
|
|
for (let i = 0; i < datasets.length; i++) {
|
|
datasets[i].backgroundColor = colors[i % colors.length]
|
|
}
|
|
|
|
const chart_canvas = document.getElementById("vote_chart")
|
|
let chart
|
|
let previous_orientation
|
|
function create_chart(keys, data) {
|
|
let main_axis;
|
|
let aspect_ratio;
|
|
let orientation
|
|
|
|
if (window.innerWidth / window.innerHeight > limit_ratio) {
|
|
orientation = "landscape"
|
|
main_axis = 'x'
|
|
aspect_ratio = 2
|
|
} else {
|
|
orientation = "portrait"
|
|
main_axis = 'y'
|
|
aspect_ratio = 0.5
|
|
}
|
|
|
|
// Don't re-create the chart for no reason.
|
|
if (orientation === previous_orientation) {
|
|
console.log("bijour")
|
|
return;
|
|
} else {
|
|
console.log("badour")
|
|
}
|
|
|
|
previous_orientation = orientation
|
|
|
|
if ( chart ) {
|
|
chart.destroy()
|
|
}
|
|
|
|
chart = new Chart(chart_canvas, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: keys,
|
|
datasets: data,
|
|
},
|
|
options: {
|
|
aspectRatio: aspect_ratio,
|
|
indexAxis: main_axis,
|
|
grouped: true,
|
|
scales: {
|
|
x: {
|
|
stacked: true
|
|
},
|
|
y: {
|
|
stacked: true
|
|
}
|
|
},
|
|
plugins: {
|
|
title: {
|
|
display: true,
|
|
position: 'bottom',
|
|
text: 'Répartition des suppositions'
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
function update_chart_ratio(_) {
|
|
create_chart(keys, datasets)
|
|
}
|
|
|
|
const orientation_query = matchMedia(`(aspect-ratio < ${limit_ratio})`);
|
|
orientation_query.onchange = update_chart_ratio
|
|
|
|
create_chart(keys, datasets)
|
|
}
|
|
|
|
main().then()
|