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
+ + + + + + + + + + + + + + +
TotalTodayLast HourSpecies TotalSpecies 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