FabulaVotes/static_files/vote_chart.js

109 lines
3 KiB
JavaScript
Raw Normal View History

const limit_ratio = 1.3
const colors = ['#b6b8fc', '#b6f4fc', '#fcb6cc', '#e0fcb6', '#fcdcb6', '#b6fcc8', '#f0b6fc']
async function main() {
let current_url = new URL(document.URL)
current_url.hash = '' // Strip the local part of the URL, for example if we select a Truth
const vote_response = await fetch(current_url.toString()+"/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
}
2024-07-24 18:08:13 +01:00
},
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()