trotFunky/FabulaVotes
1
0
Fork 0
Code Releases Packages Activity

vote_chart: Control the graph ratio switch

Browse source 
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.
This commit is contained in:
trotFunky 2024-07-24 16:56:08 +01:00
parent 8fd8ce8220
commit d0843d600e
1 changed files with 18 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
static_files/vote_chart.js
View file

@ -1,3 +1,4 @@
const limit_ratio = 1.3
async function main() {
const vote_response = await fetch(document.URL+"/votes");
@ -27,18 +28,32 @@ async function main() {
const chart_canvas = document.getElementById("vote_chart")
let chart
let previous_orientation
function create_chart(keys, data) {
let main_axis;
let aspect_ratio;
// TODO: Move to the event, to check and not re-create for no reason.
if (window.innerWidth > window.innerHeight) {
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()
}
@ -69,7 +84,7 @@ async function main() {
create_chart(keys, datasets)
}
const orientation_query = matchMedia("screen and (orientation:portrait)");
const orientation_query = matchMedia(`(aspect-ratio < ${limit_ratio})`);
orientation_query.onchange = update_chart_ratio
create_chart(keys, datasets)