diff --git a/homepage/static/dark-style.css b/homepage/static/dark-style.css
index 2347e57..36ae9b4 100644
--- a/homepage/static/dark-style.css
+++ b/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;
}
diff --git a/homepage/style.css b/homepage/style.css
index 8fdff1e..337b78c 100644
--- a/homepage/style.css
+++ b/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;
}
diff --git a/scripts/overview.php b/scripts/overview.php
index 017787f..29bfee3 100644
--- a/scripts/overview.php
+++ b/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');
-ensure_db_ok($statement);
-$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);
-
+ // Force the data to regenerate and store it in session
+ $chart_data = get_chart_data($db, true);
?>
| Total |
- |
+ |
| Today |
- |
+ |
| Last Hour |
- |
+ |
| Species Detected Today |
- |
+ |
| Total Number of Species |
- |
+ |
+
+ | Total |
+ Today |
+ Last Hour |
+ Species Total |
+ Species Today |
+
+
+ |
+ |
+ |
+ |
+ |
+
+
+
+
+
+
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() {
diff --git a/scripts/todays_detections.php b/scripts/todays_detections.php
index e0f609d..89caf54 100644
--- a/scripts/todays_detections.php
+++ b/scripts/todays_detections.php
@@ -303,8 +303,8 @@ if(isset($_GET['today_stats'])) {
Total |
Today |
Last Hour |
- Unique Species Total |
- Unique Species Today |
+ Species Total |
+ Species Today |
|
@@ -410,8 +410,8 @@ if (get_included_files()[0] === __FILE__) {
Total |
Today |
Last Hour |
- Unique Species Total |
- Unique Species Today |
+ Species Total |
+ Species Today |
|