Use common generateMiniGraph

scripts/species_tools.php

@@ -269,6 +269,7 @@ $result = $db->query($sql);
   </table>
 </div>
 <script src="static/Chart.bundle.js"></script>
+<script src="static/generateMiniGraph.js"></script>
 <script>
 const scriptsBase = 'scripts/';
 const sfThresh = <?php echo json_encode($sf_thresh, JSON_UNESCAPED_UNICODE); ?>;
@@ -339,116 +340,6 @@ function addDiskCounts() {
   });
 }
 
-function generateMiniGraph(elem, comname, days = 30) {
-  var xhr = new XMLHttpRequest();
-  xhr.open('GET', '/todays_detections.php?comname=' + encodeURIComponent(comname) + '&days=' + days);
-  xhr.onload = function() {
-    if (xhr.status === 200) {
-      var detections = JSON.parse(xhr.responseText);
-
-      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);
-
-      var canvas = document.createElement('canvas');
-      canvas.width = chartWindow.offsetWidth;
-      canvas.height = chartWindow.offsetHeight - 40;
-      chartWindow.appendChild(canvas);
-
-      var ctx = canvas.getContext('2d');
-      var chart = new Chart(ctx, {
-        type: 'line',
-        data: {
-          labels: detections.map(function(item){ return item.date; }),
-          datasets: [{
-            label: 'Detections',
-            data: detections.map(function(item){ return item.count; }),
-            backgroundColor: '#9fe29b',
-            borderColor: '#77c487',
-            borderWidth: 1,
-            lineTension: 0.3,
-            pointRadius: 1,
-            pointHitRadius: 10,
-            trendlineLinear: {
-              style: 'rgba(55, 99, 64, 0.5)',
-              lineStyle: 'solid',
-              width: 1.5
-            }
-          }]
-        },
-        options: {
-          layout: { padding: { right: 10 } },
-          title: { display: true, text: 'Detections Over ' + days + 'd' },
-          legend: { display: false },
-          scales: {
-            xAxes: [{
-              display: true,
-              gridLines: { display: true },
-              ticks: {
-                autoSkip: true,
-                maxTicksLimit: 6,
-                callback: function(value) { return value.substring(5); }
-              }
-            }],
-            yAxes: [{
-              gridLines: { display: false },
-              ticks: { beginAtZero: true, precision: 0, maxTicksLimit: 5 }
-            }]
-          }
-        }
-      });
-
-      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';
-      }
-
-      var buttonCenter = buttonRect.top + (buttonRect.height / 2);
-      var chartHeight = chartWindow.offsetHeight;
-      var chartTop = buttonCenter - (chartHeight / 2);
-      chartWindow.style.top = chartTop + 'px';
-
-      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);
-
-      var selector = document.createElement('select');
-      [30, 180, 360, 720, 1080].forEach(function(opt) {
-        var option = document.createElement('option');
-        option.value = opt;
-        option.text = opt + 'd';
-        if (opt === days) option.selected = true;
-        selector.appendChild(option);
-      });
-      selector.addEventListener('change', function() {
-        generateMiniGraph(elem, comname, parseInt(this.value));
-      });
-      selector.style.position = 'absolute';
-      selector.style.bottom = '5px';
-      selector.style.left = '5px';
-      chartWindow.appendChild(selector);
-
-      window.chartWindow = chartWindow;
-    }
-  };
-  xhr.send();
-}
-
 window.addEventListener('scroll', function() {
   var charts = document.querySelectorAll('.chartdiv');
   charts.forEach(function(chart) {