trotFunky
d0843d600e
The media query used to switch the ratio of the graph would only fire when switching from landscape to portrait, or the other way around. This makes controlling the point where the graph switches to vertical is only possible at this exact point. Introduce a limit aspect-ratio that controls the change and use it for the MediaQuery as well. Make sure we don't delete/recreate the chart for no reason as well.
93 lines
2.4 KiB
JavaScript
93 lines
2.4 KiB
JavaScript
const limit_ratio = 1.3
|
|
|
|
async function main() {
|
|
const vote_response = await fetch(document.URL+"/votes");
|
|
if (!vote_response.ok) {
|
|
return;
|
|
}
|
|
|
|
const keys = ["Vérité 1", "Vérité 2", "Vérité 3", "Vérité 4", "Vérité 5", "Vérité 6", "Vérité 7"]
|
|
let datasets = []
|
|
|
|
try {
|
|
const vote_data = (await vote_response.json()).votes;
|
|
for (let player in vote_data) {
|
|
datasets.push({
|
|
parsing: true,
|
|
label: player,
|
|
data: vote_data[player],
|
|
})
|
|
}
|
|
} 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)
|
|
|
|
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
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
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()
|