From 19c4f3d6aa1f44998e9e869b2580458a50f000aa Mon Sep 17 00:00:00 2001
From: ehpersonal38 <103586016+ehpersonal38@users.noreply.github.com>
Date: Sun, 5 Mar 2023 18:55:49 -0500
Subject: [PATCH] Chart fixes / adding to Overview

---
 scripts/overview.php          | 152 +++++++++++++++++++++++++++++++++-
 scripts/todays_detections.php |  14 ++--
 2 files changed, 157 insertions(+), 9 deletions(-)

diff --git a/scripts/overview.php b/scripts/overview.php
index db6f745..1991838 100644
--- a/scripts/overview.php
+++ b/scripts/overview.php
@@ -131,7 +131,7 @@ if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true" && isse
               <?php } ?>
               <form action="" method="GET">
                   <input type="hidden" name="view" value="Species Stats">
-                  <button type="submit" name="species" value="<?php echo $mostrecent['Com_Name'];?>"><?php echo $mostrecent['Com_Name'];?></button></br>
+                  <button type="submit" name="species" value="<?php echo $mostrecent['Com_Name'];?>"><?php echo $mostrecent['Com_Name'];?></button><img style="width: unset !important;display: inline;height: 1em;cursor:pointer" title="View species stats" onclick="generateMiniGraph(this, '<?php echo $comname; ?>')" width=25 src="images/chart.svg"></br>
                   <a href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="_blank"/><i><?php echo $mostrecent['Sci_Name'];?></i></a>
                   <br>Confidence: <?php echo $percent = round((float)round($mostrecent['Confidence'],2) * 100 ) . '%';?><br></div><br>
                   <video style="margin-top:10px" onplay='setLiveStreamVolume(0)' onended='setLiveStreamVolume(1)' onpause='setLiveStreamVolume(1)' controls poster="<?php echo $filename.".png";?>" preload="none" title="<?php echo $filename;?>"><source src="<?php echo $filename;?>"></video></td>
@@ -236,6 +236,8 @@ body::-webkit-scrollbar {
     <button onclick="hideDialog()">Close</button>
   </dialog>
   <script src="static/dialog-polyfill.js"></script>
+  <script src="static/Chart.bundle.js"></script>
+  <script src="static/chartjs-plugin-trendline.min.js"></script>
   <script>
   var dialog = document.querySelector('dialog');
   dialogPolyfill.registerDialog(dialog);
@@ -362,3 +364,151 @@ window.setInterval(function(){
 }, <?php echo $refresh; ?>*1000);
 </script>
 
+<style>
+  .tooltip {
+  background-color: white;
+  border: 1px solid #ccc;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  padding: 10px;
+  transition: opacity 0.2s ease-in-out;
+}
+</style>
+<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);
+
+      console.log(detections)
+
+      // Create a div element for the chart window
+      var chartWindow = document.createElement('div');
+      chartWindow.className = "chartdiv"
+      chartWindow.style.position = 'fixed';
+      chartWindow.style.top = '0%';
+      chartWindow.style.left = '50%';
+      chartWindow.style.width = window.innerWidth < 700 ? '40%' : '20%';
+      chartWindow.style.height = window.innerWidth < 700 ? '25%' : '16%';
+      chartWindow.style.backgroundColor = '#fff';
+      chartWindow.style.zIndex = '9999';
+      chartWindow.style.overflow = 'auto';
+      chartWindow.style.borderRadius = '5px';
+      chartWindow.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
+
+      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
+              }
+            }]
+          }
+        }
+      });
+
+      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);
+      });
+      chartWindow.appendChild(closeButton);
+    }
+  };
+  xhr.send();
+}
+
+// Listen for the scroll event on the window object
+window.addEventListener('scroll', function() {
+  // Get all chart elements
+  var charts = document.querySelectorAll('.chartdiv');
+  
+  // Loop through all chart elements and remove them
+  charts.forEach(function(chart) {
+    chart.parentNode.removeChild(chart);
+  });
+});
+
+</script>
\ No newline at end of file
diff --git a/scripts/todays_detections.php b/scripts/todays_detections.php
index 1de9e96..4251a50 100644
--- a/scripts/todays_detections.php
+++ b/scripts/todays_detections.php
@@ -276,7 +276,7 @@ if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true"  ) {
         <?php if(isset($_GET['display_limit']) && is_numeric($_GET['display_limit'])){ ?>
           <tr class="relative" id="<?php echo $iterations; ?>">
           <td class="relative"><a target="_blank" href="index.php?filename=<?php echo $todaytable['File_Name']; ?>"><img class="copyimage" title="Open in new tab" width=25 src="images/copy.png"></a>
-          <img class="copyimage" style="right:39px;cursor:pointer" title="View species stats" onclick="generateMiniGraph(this, '<?php echo $comname; ?>')" width=25 src="images/chart.svg">
+        
             
           <div class="centered_image_container">
             <?php if(!empty($config["FLICKR_API_KEY"]) && strlen($image[2]) > 0) { ?>
@@ -284,7 +284,7 @@ if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true"  ) {
             <?php } ?>
 
             <?php echo $todaytable['Time'];?><br> 
-          <b><a class="a2" href="https://allaboutbirds.org/guide/<?php echo $comname;?>" target="top"><?php echo $todaytable['Com_Name'];?></a></b><br>
+          <b><a class="a2" href="https://allaboutbirds.org/guide/<?php echo $comname;?>" target="top"><?php echo $todaytable['Com_Name'];?></a></b><img style="height: 1em;cursor:pointer" title="View species stats" onclick="generateMiniGraph(this, '<?php echo $comname; ?>')" width=25 src="images/chart.svg"><br>
           <a class="a2" href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="top"><i><?php echo $todaytable['Sci_Name'];?></i></a><br>
           <b>Confidence:</b> <?php echo round((float)round($todaytable['Confidence'],2) * 100 ) . '%';?><br></div><br>
           <video onplay='setLiveStreamVolume(0)' onended='setLiveStreamVolume(1)' onpause='setLiveStreamVolume(1)' controls poster="<?php echo $filename.".png";?>" preload="none" title="<?php echo $filename;?>"><source preload="none" src="<?php echo $filename;?>"></video>
@@ -299,7 +299,7 @@ if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true"  ) {
             <?php } ?>
           </div>
             <div>
-            <b><a class="a2" <?php if($_GET['kiosk'] == false){?>href="https://allaboutbirds.org/guide/<?php echo $comname;?>"<?php } else {echo "style='color:blue;'";} ?> target="top"><?php echo $todaytable['Com_Name'];?></a></b><br>
+            <b><a class="a2" <?php if($_GET['kiosk'] == false){?>href="https://allaboutbirds.org/guide/<?php echo $comname;?>"<?php } else {echo "style='color:blue;'";} ?> target="top"><?php echo $todaytable['Com_Name'];?></a></b> <img style="height: 1em;cursor:pointer;float:unset;display:inline" title="View species stats" onclick="generateMiniGraph(this, '<?php echo $comname; ?>')" width=25 src="images/chart.svg"><br>
             <a class="a2" <?php if($_GET['kiosk'] == false){?>href="https://wikipedia.org/wiki/<?php echo $sciname;?>"<?php } else {echo "style='color:blue;'";} ?> target="top"><i><?php echo $todaytable['Sci_Name'];?></i></a><br></td>
         </div></div>
           <td><b>Confidence:</b> <?php echo round((float)round($todaytable['Confidence'],2) * 100 ) . '%';?><br></td>
@@ -376,6 +376,7 @@ die();
   <script src="static/dialog-polyfill.js"></script>
   <script src="static/Chart.bundle.js"></script>
   <script src="static/chartjs-plugin-trendline.min.js"></script>
+  
   <script>
   var dialog = document.querySelector('dialog');
   dialogPolyfill.registerDialog(dialog);
@@ -652,10 +653,10 @@ function generateMiniGraph(elem, comname) {
         }
       });
 
-      // Position the chart window to the left of the button
+      // Position the chart window to the right of the button
       var buttonRect = elem.getBoundingClientRect();
       var chartRect = chartWindow.getBoundingClientRect();
-      chartWindow.style.left = (buttonRect.left - chartRect.width - 10) + 'px';
+      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);
@@ -663,7 +664,6 @@ function generateMiniGraph(elem, comname) {
       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";
@@ -680,8 +680,6 @@ function generateMiniGraph(elem, comname) {
   xhr.send();
 }
 
-// TODO: add more margin to the right of the inside of the chart, add cursor icon to hover on the chart icon
-
 // Listen for the scroll event on the window object
 window.addEventListener('scroll', function() {
   // Get all chart elements