trotFunky
24ab2fc5f2
Now that the truths have anchor links, a user could select one and send the link directly to the truth, or refresh the page to there. However, the local part of the URL would be used by the script to fetch the voting data, which fail as it isn't expected by the server and is, anyway, malformed. Remove the local hash from the URL before requesting the voting data.
108 lines
3 KiB
JavaScript
108 lines
3 KiB
JavaScript
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
|
|
}
|
|
},
|
|
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()
|