UI : align overview and todays UI with centered stats #182 (#191)

* Move chart to center

* Align css

* Align dark-style.css

* Add stats title

* Removed title : cleaner look

* Shorter titles for stats

* Shorter title, unique is implicit

* Invert Species Total and Today

* Re-add left chart

* Re-add left chart bis

* Adapt css for flexible layout

* Align with main css

* Restore overview-stats, add center-column

* Restore style, add center-column

* Restore css

* add center-column

* Remove useless change

* Prevents centering

* Prevents centering

* Aggregate ajax sqlite

* Ensured the 5 sqlite commands are centralized

* Load center only after left has completed (to sync values)

homepage/static/dark-style.css

@@ -272,6 +272,10 @@ button:hover {
   justify-content: center;
 }
 
+.center-column {
+  display: none;
+}
+
 .left-column {
   flex: 10%;
   padding-left: 10px;
@@ -501,6 +505,10 @@ button:hover {
   .column1,.column2,.column3,.column4 {
     height: 90%
   }
+  .center-column {
+    display: flex;
+    justify-content: center;
+  }
   .left-column {
     display: none;
   }
@@ -515,7 +523,7 @@ button:hover {
     overflow-x: hidden;
   }
   .overview .right-column .chart img {
-    margin-left: 5%;
+    margin-left: auto;
     margin-right: auto;
     margin-top: 10px;
     opacity: 0.7;
@@ -639,6 +647,10 @@ button:hover {
   .topnav.responsive button {
     display: block;
   }
+  .center-column {
+    display: flex;
+    justify-content: center;
+  }
   .left-column {
     display: none;
   }

homepage/style.css

@@ -261,6 +261,9 @@ button:hover {
   justify-content: center;
 }
 
+.center-column {
+  display: none;
+}
 .left-column {
   flex: 10%;
   padding-left: 10px;
@@ -477,6 +480,10 @@ button:hover {
   .column1,.column2,.column3,.column4 {
     height: 90%
   }
+  .center-column {
+    display: flex;
+    justify-content: center;
+  }
   .left-column {
     display: none;
   }
@@ -491,7 +498,7 @@ button:hover {
     overflow-x: hidden;
   }
   .overview .right-column .chart img {
-    margin-left: 5%;
+    margin-left: auto;
     margin-right: auto;
     margin-top: 10px;
   }
@@ -608,6 +615,10 @@ button:hover {
   .topnav.responsive button {
     display: block;
   }
+  .center-column {
+    display: flex;
+    justify-content: center;
+  }
   .left-column {
     display: none;
   }

scripts/overview.php

@@ -151,56 +151,103 @@ if(isset($_GET['ajax_detections']) && $_GET['ajax_detections'] == "true" && isse
   die();
 }
 
+function get_chart_data($db, $force_regen = false) {
+  if ($force_regen || !isset($_SESSION['chart_data'])) {
+    $statement = $db->prepare('SELECT COUNT(*) FROM detections');
+    ensure_db_ok($statement);
+    $result = $statement->execute();
+    $totalcount = $result->fetchArray(SQLITE3_ASSOC);
+
+    $statement2 = $db->prepare('SELECT COUNT(*) FROM detections WHERE Date == DATE(\'now\', \'localtime\')');
+    ensure_db_ok($statement2);
+    $result2 = $statement2->execute();
+    $todaycount = $result2->fetchArray(SQLITE3_ASSOC);
+
+    $statement3 = $db->prepare('SELECT COUNT(*) FROM detections WHERE Date == Date(\'now\', \'localtime\') AND TIME >= TIME(\'now\', \'localtime\', \'-1 hour\')');
+    ensure_db_ok($statement3);
+    $result3 = $statement3->execute();
+    $hourcount = $result3->fetchArray(SQLITE3_ASSOC);
+
+    $statement5 = $db->prepare('SELECT COUNT(DISTINCT(Com_Name)) FROM detections WHERE Date == Date(\'now\',\'localtime\')');
+    ensure_db_ok($statement5);
+    $result5 = $statement5->execute();
+    $speciestally = $result5->fetchArray(SQLITE3_ASSOC);
+
+    $statement6 = $db->prepare('SELECT COUNT(DISTINCT(Com_Name)) FROM detections');
+    ensure_db_ok($statement6);
+    $result6 = $statement6->execute();
+    $totalspeciestally = $result6->fetchArray(SQLITE3_ASSOC);
+
+    // Store the data in session to be reused by other charts
+    $_SESSION['chart_data'] = [
+      'totalcount' => $totalcount,
+      'todaycount' => $todaycount,
+      'hourcount' => $hourcount,
+      'speciestally' => $speciestally,
+      'totalspeciestally' => $totalspeciestally
+    ];
+  }
+
+  return $_SESSION['chart_data'];
+}
+
 if(isset($_GET['ajax_left_chart']) && $_GET['ajax_left_chart'] == "true") {
 
-$statement = $db->prepare('SELECT COUNT(*) FROM detections');
+  // Force the data to regenerate and store it in session
-ensure_db_ok($statement);
+  $chart_data = get_chart_data($db, true);
-$result = $statement->execute();
-$totalcount = $result->fetchArray(SQLITE3_ASSOC);
-
-$statement3 = $db->prepare('SELECT COUNT(*) FROM detections WHERE Date == Date(\'now\', \'localtime\') AND TIME >= TIME(\'now\', \'localtime\', \'-1 hour\')');
-ensure_db_ok($statement3);
-$result3 = $statement3->execute();
-$hourcount = $result3->fetchArray(SQLITE3_ASSOC);
-
-$statement5 = $db->prepare('SELECT COUNT(DISTINCT(Com_Name)) FROM detections WHERE Date == Date(\'now\',\'localtime\')');
-ensure_db_ok($statement5);
-$result5 = $statement5->execute();
-$speciestally = $result5->fetchArray(SQLITE3_ASSOC);
-
-$statement6 = $db->prepare('SELECT COUNT(DISTINCT(Com_Name)) FROM detections');
-ensure_db_ok($statement6);
-$result6 = $statement6->execute();
-$totalspeciestally = $result6->fetchArray(SQLITE3_ASSOC);
-  
 ?>
 <table>
   <tr>
     <th>Total</th>
-    <td><?php echo $totalcount['COUNT(*)'];?></td>
+    <td><?php echo $chart_data['totalcount']['COUNT(*)'];?></td>
   </tr>
   <tr>
     <th>Today</th>
-    <td><form action="" method="GET"><button type="submit" name="view" value="Todays Detections"><?php echo $todaycount['COUNT(*)'];?></button></td>
+    <td><form action="" method="GET"><button type="submit" name="view" value="Todays Detections"><?php echo $chart_data['todaycount']['COUNT(*)'];?></button></td>
     </form>
   </tr>
   <tr>
     <th>Last Hour</th>
-    <td><?php echo $hourcount['COUNT(*)'];?></td>
+    <td><?php echo $chart_data['hourcount']['COUNT(*)'];?></td>
   </tr>
   <tr>
     <th>Species Detected Today</th>
-    <td><form action="" method="GET"><input type="hidden" name="view" value="Recordings"><button type="submit" name="date" value="<?php echo date('Y-m-d');?>"><?php echo $speciestally['COUNT(DISTINCT(Com_Name))'];?></button></td>
+    <td><form action="" method="GET"><input type="hidden" name="view" value="Recordings"><button type="submit" name="date" value="<?php echo date('Y-m-d');?>"><?php echo $chart_data['speciestally']['COUNT(DISTINCT(Com_Name))'];?></button></td>
     </form>
   </tr>
   <tr>
     <th>Total Number of Species</th>
-    <td><form action="" method="GET"><button type="submit" name="view" value="Species Stats"><?php echo $totalspeciestally['COUNT(DISTINCT(Com_Name))'];?></button></td>
+    <td><form action="" method="GET"><button type="submit" name="view" value="Species Stats"><?php echo $chart_data['totalspeciestally']['COUNT(DISTINCT(Com_Name))'];?></button></td>
     </form>
   </tr>
 </table>
 <?php
-die();
+  die();
+}
+
+if(isset($_GET['ajax_center_chart']) && $_GET['ajax_center_chart'] == "true") {
+
+  // Retrieve the cached data from session without regenerating
+  $chart_data = get_chart_data($db);
+?>
+  <table><tr>
+  <th>Total</th>
+  <th>Today</th>
+  <th>Last Hour</th>
+  <th>Species Total</th>
+  <th>Species Today</th>
+      </tr>
+      <tr>
+      <td><?php echo $chart_data['totalcount']['COUNT(*)'];?></td>
+      <td><form action="" method="GET"><input type="hidden" name="view" value="Todays Detections"><?php echo $chart_data['todaycount']['COUNT(*)'];?></td></form>
+      <td><?php echo $chart_data['hourcount']['COUNT(*)'];?></td>
+      <td><form action="" method="GET"><button type="submit" name="view" value="Species Stats"><?php echo $chart_data['totalspeciestally']['COUNT(DISTINCT(Com_Name))'];?></button></td></form>
+      <td><form action="" method="GET"><input type="hidden" name="view" value="Recordings"><button type="submit" name="date" value="<?php echo date('Y-m-d');?>"><?php echo $chart_data['speciestally']['COUNT(DISTINCT(Com_Name))'];?></button></td></form>
+  </tr>
+  </table>
+
+<?php
+  die();
 }
 
 if (get_included_files()[0] === __FILE__) {
@@ -263,6 +310,8 @@ if (get_included_files()[0] === __FILE__) {
 <div class="left-column">
 </div>
 <div class="right-column">
+<div class="center-column">
+</div>
 <div class="chart">
 <?php
 $refresh = $config['RECORDING_LENGTH'];
@@ -319,11 +368,22 @@ function loadLeftChart() {
   xhttp.onload = function() {
     if(this.responseText.length > 0 && !this.responseText.includes("Database is busy")) {
       document.getElementsByClassName("left-column")[0].innerHTML = this.responseText;
+      loadCenterChart();
     }
   }
   xhttp.open("GET", "overview.php?ajax_left_chart=true", true);
   xhttp.send();
 }
+function loadCenterChart() {
+  const xhttp = new XMLHttpRequest();
+  xhttp.onload = function() {
+    if(this.responseText.length > 0 && !this.responseText.includes("Database is busy")) {
+      document.getElementsByClassName("center-column")[0].innerHTML = this.responseText;
+    }
+  }
+  xhttp.open("GET", "overview.php?ajax_center_chart=true", true);
+  xhttp.send();
+}
 function refreshTopTen() {
   const xhttp = new XMLHttpRequest();
   xhttp.onload = function() {

scripts/todays_detections.php

@@ -303,8 +303,8 @@ if(isset($_GET['today_stats'])) {
   <th>Total</th>
   <th>Today</th>
   <th>Last Hour</th>
-  <th>Unique Species Total</th>
+  <th>Species Total</th>
-  <th>Unique Species Today</th>
+  <th>Species Today</th>
       </tr>
       <tr>
       <td><?php echo $totalcount['COUNT(*)'];?></td>
@@ -410,8 +410,8 @@ if (get_included_files()[0] === __FILE__) {
   <th>Total</th>
   <th>Today</th>
   <th>Last Hour</th>
-  <th>Unique Species Total</th>
+  <th>Species Total</th>
-  <th>Unique Species Today</th>
+  <th>Species Today</th>
       </tr>
       <tr>
       <td><?php echo $totalcount['COUNT(*)'];?></td>