From 6f125ce3032bdb67abbe08078de8ad00881e4c68 Mon Sep 17 00:00:00 2001
From: Alexandre <44178713+alexbelgium@users.noreply.github.com>
Date: Sun, 12 Oct 2025 01:24:50 +0200
Subject: [PATCH] External generateMiniGraph

Removed the generateMiniGraph function and its associated AJAX call for fetching detections. This change may affect how mini graphs are displayed on the page.
---
 scripts/todays_detections.php | 120 +---------------------------------
 1 file changed, 1 insertion(+), 119 deletions(-)

diff --git a/scripts/todays_detections.php b/scripts/todays_detections.php
index 02192be..1e58a78 100644
--- a/scripts/todays_detections.php
+++ b/scripts/todays_detections.php
@@ -553,126 +553,8 @@ window.addEventListener("load", function(){
 </style>
 
 <script src="static/custom-audio-player.js"></script>
+<script src="static/generateMiniGraph.js"></script>
 <script>
-function generateMiniGraph(elem, comname) {
-  // Make an AJAX call to fetch the number of detections for the bird species
-  var xhr = new XMLHttpRequest();
-  xhr.open('GET', '/todays_detections.php?comname=' + comname);
-  xhr.onload = function() {
-    if (xhr.status === 200) {
-      var detections = JSON.parse(xhr.responseText);
-
-      // Create a div element for the chart window
-      if (typeof(window.chartWindow) != 'undefined') {
-        document.body.removeChild(window.chartWindow);
-        window.chartWindow = undefined;
-      }
-      var chartWindow = document.createElement('div');
-      chartWindow.className = "chartdiv"
-      document.body.appendChild(chartWindow);
-
-
-            // Create a canvas element for the chart
-      var canvas = document.createElement('canvas');
-      canvas.width = chartWindow.offsetWidth;
-      canvas.height = chartWindow.offsetHeight;
-      chartWindow.appendChild(canvas);
-
-      // Create a new Chart.js chart
-      var ctx = canvas.getContext('2d');
-      var chart = new Chart(ctx, {
-        type: 'line',
-        data: {
-          labels: detections.map(item => item.date),
-          datasets: [{
-            label: 'Detections',
-            data: detections.map(item => item.count),
-            backgroundColor: '#9fe29b',
-            borderColor: '#77c487',
-            borderWidth: 1,
-            lineTension: 0.3, // Add smoothing to the line
-            pointRadius: 1, // Make the data points smaller
-            pointHitRadius: 10, // Increase the area around data points for mouse events
-
-          trendlineLinear: {
-            style: "rgba(55, 99, 64, 0.5)",
-            lineStyle: "solid",
-            width: 1.5
-          }
-
-          }]
-        },
-        options: {
-          layout: {
-            padding: {
-              right: 10
-            }
-          },
-          title: {
-            display: true,
-            text: 'Detections Over 30d'
-          },
-          legend: {
-            display: false
-          },
-          scales: {
-            xAxes: [{
-              display: false,
-              gridLines: {
-                display: false // Hide the gridlines on the x-axis
-              },
-              ticks: {
-                autoSkip: true,
-                maxTicksLimit: 2
-              }
-            }],
-            yAxes: [{
-              gridLines: {
-                display: false // Hide the gridlines on the y-axis
-              },
-              ticks: {
-                beginAtZero: true,
-                precision: 0,
-                stepSize: 1
-              }
-            }]
-          }
-        }
-      });
-
-      // Position the chart window to the right of the button
-      var buttonRect = elem.getBoundingClientRect();
-      var chartRect = chartWindow.getBoundingClientRect();
-      if (window.innerWidth < 700) {
-        chartWindow.style.left = 'calc(75% - ' + (chartRect.width / 2) + 'px)';
-      } else {
-        chartWindow.style.left = (buttonRect.right + 10) + 'px';
-      }
-
-      // Calculate the top position of the chart to center it with the button
-      var buttonCenter = buttonRect.top + (buttonRect.height / 2);
-      var chartHeight = chartWindow.offsetHeight;
-      var chartTop = buttonCenter - (chartHeight / 2);
-      chartWindow.style.top = chartTop + 'px';
-
-      // Add a close button to the chart window
-      var closeButton = document.createElement('button');
-      closeButton.id = "chartcb";
-      closeButton.innerText = 'X';
-      closeButton.style.position = 'absolute';
-      closeButton.style.top = '5px';
-      closeButton.style.right = '5px';
-      closeButton.addEventListener('click', function() {
-        document.body.removeChild(chartWindow);
-        window.chartWindow = undefined;
-      });
-      chartWindow.appendChild(closeButton);
-      window.chartWindow = chartWindow;
-    }
-  };
-  xhr.send();
-}
-
 // Listen for the scroll event on the window object
 window.addEventListener('scroll', function() {
   // Get all chart elements