From 0c1f359ef02820617d67c4a7a2561055b068151b Mon Sep 17 00:00:00 2001
From: Brian Huisman <bhuisman@greywyvern.com>
Date: Mon, 6 Nov 2023 11:27:15 -0500
Subject: [PATCH] Graph tweaks

Determine the correct height of the bar from the data-value and the given height of the tbody rather than including an explicit data-height on the bar.

Better algorithm to determine where to draw horizontal lines on the graph.

Only display the top 10 geolocated search locations with the rest falling under "Other", unless there are only 11 locations in the list.
---
 orcinus/admin.php   | 64 +++++++++++++++++++++++++++------------------
 orcinus/js/admin.js | 42 ++++++++++++++++++-----------
 2 files changed, 66 insertions(+), 40 deletions(-)

diff --git a/orcinus/admin.php b/orcinus/admin.php
index 1aee1c2..6aae215 100644
--- a/orcinus/admin.php
+++ b/orcinus/admin.php
@@ -2706,19 +2706,37 @@ ORCINUS;
                             </tr>
                           </thead>
                           <tbody><?php
-                            foreach ($locCount as $iso => $searches) { ?> 
-                              <tr>
-                                <th scope="row"><?php
-                                  if (file_exists(__DIR__.'/img/flags/'.strtolower($iso).'.png')) { ?> 
-                                    <img src="img/flags/<?php echo strtolower($iso); ?>.png" alt="<?php echo strtoupper($iso); ?>" title="<?php echo $locData[$iso]; ?>" class="svg-icon-flag"><?php
-                                  } else { ?>
-                                    <img src="img/help.svg" alt="?" title="<?php echo $locData[$iso]; ?>" class="svg-icon"><?php
-                                  } ?> 
-                                  <span class="align-middle"><?php echo $locData[$iso]; ?></span>
-                                </th>
-                                <td class="text-end"><?php echo $searches; ?></td>
-                                <td class="text-center"><small>(<?php echo round($searches / array_sum($locCount) * 100, 1); ?>%)</small></td>
-                              </tr><?php
+                            $top10 = 0;
+                            foreach ($locCount as $iso => $searches) {
+                              if ($top10++ < 10 || $iso == array_key_last($locCount)) { ?> 
+                                <tr>
+                                  <th scope="row"><?php
+                                    if (file_exists(__DIR__.'/img/flags/'.strtolower($iso).'.png')) { ?> 
+                                      <img src="img/flags/<?php echo strtolower($iso); ?>.png" alt="<?php echo strtoupper($iso); ?>" title="<?php echo $locData[$iso]; ?>" class="svg-icon-flag"><?php
+                                    } else { ?>
+                                      <img src="img/help.svg" alt="?" title="<?php echo $locData[$iso]; ?>" class="svg-icon"><?php
+                                    } ?> 
+                                    <span class="align-middle"><?php echo $locData[$iso]; ?></span>
+                                  </th>
+                                  <td class="text-end"><?php echo $searches; ?></td>
+                                  <td class="text-center"><small>(<?php echo round($searches / array_sum($locCount) * 100, 1); ?>%)</small></td>
+                                </tr><?php
+                              } else {
+                                $cap = false; $hits = 0;
+                                foreach ($locCount as $iso2 => $searches2) {
+                                  if ($iso2 == $iso) $capture = true;
+                                  if ($capture) $hits += $searches2;
+                                } ?> 
+                                <tr>
+                                  <th scope="row">
+                                    <img src="img/help.svg" alt="?" title="Other" class="svg-icon">
+                                    <span class="align-middle">Other</span>
+                                  </th>
+                                  <td class="text-end"><?php echo $hits; ?></td>
+                                  <td class="text-center"><small>(<?php echo round($hits / array_sum($locCount) * 100, 1); ?>%)</small></td>
+                                </tr><?php
+                                break;
+                              }
                             } ?> 
                           </tbody>
                         </table>
@@ -2740,17 +2758,15 @@ ORCINUS;
                       <li class="list-group-item">
                         <h4>All Searches by Day of Week</h4>
                         <table class="bar-graph d-flex align-items-end position-relative w-100 gap-1 pt-4 mb-5">
-                          <tbody class="flex-fill d-flex gap-3"><?php
+                          <tbody class="flex-fill d-flex gap-3" style="height:14em;"><?php
                             foreach ($dayWalker as $day => $value) { ?> 
                               <tr class="flex-fill d-flex flex-column justify-content-end<?php
-                                if ($day == 'Sun') echo ' ps-2';
-                                if ($day == 'Sat') echo ' pe-2'; ?>">
+                                if ($day == array_key_first($dayWalker)) echo ' ps-2';
+                                if ($day == array_key_last($dayWalker)) echo ' pe-2'; ?>">
                                 <th class="position-relative p-0">
                                   <span class="position-absolute top-0 start-50 translate-middle-x"><?php echo $day; ?></span>
                                 </th>
-                                <td class="order-first position-relative bg-secondary bg-gradient p-0" data-height="<?php
-                                    echo round($value / (max($dayWalker) / 200));
-                                  ?>" data-value="<?php echo $value; ?>" title="<?php echo $day; ?>">
+                                <td class="order-first position-relative bg-secondary bg-gradient p-0" data-value="<?php echo $value; ?>" title="<?php echo $day; ?>">
                                   <small class="position-absolute bottom-100 start-50 translate-middle-x"><?php echo $value; ?></small>
                                 </td>
                               </tr><?php
@@ -2761,17 +2777,15 @@ ORCINUS;
                       <li class="list-group-item">
                         <h4>All Searches by Time of Day</h4>
                         <table class="bar-graph d-flex align-items-end position-relative w-100 gap-1 pt-4 mb-5">
-                          <tbody class="flex-fill d-flex gap-1"><?php
+                          <tbody class="flex-fill d-flex gap-1" style="height:14em;"><?php
                             foreach ($hourWalker as $hour => $value) { ?> 
                               <tr class="flex-fill d-flex flex-column justify-content-end<?php
-                                if ($hour == '00:00') echo ' ps-2';
-                                if ($hour == '23:00') echo ' pe-2'; ?>">
+                                if ($hour == array_key_first($hourWalker)) echo ' ps-2';
+                                if ($hour == array_key_last($hourWalker)) echo ' pe-2'; ?>">
                                 <th class="position-relative p-0">
                                   <time class="position-absolute top-0 start-50 translate-middle-x"><?php echo $hour; ?></time>
                                 </th>
-                                <td class="order-first position-relative bg-secondary bg-gradient p-0" data-height="<?php
-                                    echo (max($hourWalker)) ? round($value / (max($hourWalker) / 200)) : 0;
-                                  ?>" data-value="<?php echo $value; ?>" title="<?php echo $hour; ?>">
+                                <td class="order-first position-relative bg-secondary bg-gradient p-0" data-value="<?php echo $value; ?>" title="<?php echo $hour; ?>">
                                   <small class="position-absolute bottom-100 start-50 translate-middle-x"><?php echo $value; ?></small>
                                 </td>
                               </tr><?php
diff --git a/orcinus/js/admin.js b/orcinus/js/admin.js
index 6476bf6..a96a211 100644
--- a/orcinus/js/admin.js
+++ b/orcinus/js/admin.js
@@ -359,22 +359,25 @@ for (let x = 0; x < os_index_with_selected.length; x++) {
 
 
 /* ***** Page >> Search Statistics ********************************* */
-let bars = document.querySelectorAll('table.bar-graph td[data-height]');
+let bars = document.querySelectorAll('table.bar-graph td[data-value]');
 for (let x = 0; x < bars.length; x++) {
   bars[x].style.height = '0px';
   bars[x].style.transition = 'height 0.8s ease';
 
-  let tb = bars[x].parentNode.parentNode;
-  if (tb.offsetHeight <= parseInt(bars[x].getAttribute('data-height'))) {
-    tb.style.height = bars[x].getAttribute('data-height') + 'px';
-    tb.dataMaxValue = bars[x].getAttribute('data-value');
-  }
-  setTimeout((function(elem) {
-    elem.style.height = elem.getAttribute('data-height') + 'px';
-  })(bars[x]), 5);
+  bars[x].tbody = bars[x].parentNode.parentNode;
+  if (!bars[x].tbody.dataMaxValue) bars[x].tbody.dataMaxValue = 0;
+  bars[x].tbody.dataMaxValue = Math.max(
+    parseFloat(bars[x].getAttribute('data-value')),
+    bars[x].tbody.dataMaxValue
+  );
+
+  setTimeout((function(elem) { return function() {
+    elem.style.height = (parseFloat(elem.getAttribute('data-value') / elem.tbody.dataMaxValue) * elem.tbody.offsetHeight) + 'px';
+  }})(bars[x]), 5);
 }
 
 let graphs = document.querySelectorAll('table.bar-graph');
+let ticks = [1, 5, 10, 50, 100, 500, 1000, 5000, 10000, 50000, 100000, 500000, 1000000];
 for (let x = 0; x < graphs.length; x++) {
   let thead = graphs[x].getElementsByTagName('thead');
   if (!thead.length) {
@@ -383,13 +386,23 @@ for (let x = 0; x < graphs.length; x++) {
     // Adjust background lines
     if (tbody.dataMaxValue) {
       graphs[x].unitHeight = tbody.offsetHeight / tbody.dataMaxValue;
-    } else graphs[x].unitHeight = tbody.offsetHeight;
 
-    // 5 intervals by default?
-    graphs[x].interval = tbody.offsetHeight / 5;
+      let divisions = 1;
+      do {
+        graphs[x].interval = tbody.dataMaxValue / divisions;
+      } while (
+        graphs[x].interval * graphs[x].unitHeight > 20 &&
+        divisions < tbody.dataMaxValue &&
+        divisions++ < tbody.offsetHeight / 50
+      );
 
-    graphs[x].interval = Math.max(1, Math.round(graphs[x].interval / graphs[x].unitHeight / 5) * 5 * graphs[x].unitHeight, graphs[x].unitHeight);
+      let divVal = Math.floor(Math.log10(tbody.dataMaxValue));
+      graphs[x].interval = Math.max(1, Math.round(graphs[x].interval / ticks[divVal])) * ticks[divVal] * graphs[x].unitHeight;
 
+    } else {
+      graphs[x].unitHeight = tbody.offsetHeight;
+      graphs[x].interval = tbody.offsetHeight;
+    }
 
         thead = document.createElement('thead');
       let tr = document.createElement('tr');
@@ -397,8 +410,7 @@ for (let x = 0; x < graphs.length; x++) {
         for (let y = 0; y < Math.ceil(tbody.offsetHeight / graphs[x].interval); y++) {
           let td = document.createElement('td');
               td.classList.add('d-flex', 'flex-column', 'justify-content-end', 'text-end');
-              td.style.height = graphs[x].interval + 'px';
-              td.style.transform = 'translatey(0.6em)';
+              td.style.height = Math.min(tbody.offsetHeight, graphs[x].interval) + 'px';
             let small = document.createElement('small');
                 small.appendChild(document.createTextNode(Math.round(y * graphs[x].interval / graphs[x].unitHeight)));
               td.appendChild(small);