From d0843d600e0d62e40887711883f112e86a8aa5a4 Mon Sep 17 00:00:00 2001
From: trotFunky <trotfunky.perso+git@gmail.com>
Date: Wed, 24 Jul 2024 16:56:08 +0100
Subject: [PATCH] vote_chart: Control the graph ratio switch

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.
---
 static_files/vote_chart.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/static_files/vote_chart.js b/static_files/vote_chart.js
index 5bc5e54..fe93e11 100644
--- a/static_files/vote_chart.js
+++ b/static_files/vote_chart.js
@@ -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)