web files update

web/index.php

@@ -39,9 +39,12 @@ $data['check_result'] = htmlspecialchars($_GET["check_result"]);
     
     <script type="text/javascript" src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css"/>
+    
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
 
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>
     <link rel="stylesheet" type="text/css" href="eccs.css" />
+    <link rel="stylesheet" type="text/css" href="statistics.css" />
     <script>
        $( function() {
           $( "#datepicker" ).datepicker({
@@ -76,6 +79,7 @@ $data['check_result'] = htmlspecialchars($_GET["check_result"]);
              <div class="boxCalendar">
                 <div id="calendarGo">
                    <button id="goButton" onclick="getPastResults()">Go</button>
+                   <button id="statisticsButton">Statistics</button>
                    <label id="lbl-datepicker" for="datepicker" class="strong">Select date:</label>
                    <input type="text" id="datepicker" />
                 </div> <!-- END calendarGo -->
@@ -107,6 +111,19 @@ $data['check_result'] = htmlspecialchars($_GET["check_result"]);
           var check_result = "<?php echo $data['check_result'] ?>";
        </script>
        <script type="text/javascript" src="eccs.js" /></script>
+       <script type="text/javascript" src="dataX.js" /></script>
+       <script type="text/javascript" src="statistics.js" /></script>
     </div> <!-- END eccs-central -->
+   <div id="statisticsModal" class="modal">
+      <div class="modal-content" style="height:45vh; width:85vw">
+         <span class="close">&times;</span>
+         <div class="chart-error" style="display: none;">
+            <i class="fa fa-exclamation-triangle"></i> Something happened. Can't retrieve data
+         </div>
+         <div class="chart-container" style="position: relative; height:40vh; width:80vw">
+            <canvas id="statistics"></canvas>
+         </div>
+      </div>
+   </div>
   </body>
 </html>

web/statistics.css

+.modal {
+  display: none; 
+  position: fixed; 
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%; 
+  height: 100%; 
+  overflow: auto; 
+  background-color: rgb(0,0,0); 
+  background-color: rgba(0,0,0,0.4); 
+}
+
+.modal-content {
+  background-color: #fefefe;
+  margin: 15% auto 0; 
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+}
+
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
\ No newline at end of file

web/statistics.js

+var statChart = {};
+var baseURL = window.location.protocol + "//" + window.location.host;
+
+function getStatistics() {
+	
+	let checkDate = $.datepicker.formatDate("yy-mm-dd", $('#datepicker').datepicker().datepicker('getDate'));
+
+	$.ajax({
+		url: baseURL + "/dataX.php",
+		type : 'POST',
+		data : {
+			dateFrom : checkDate
+		},
+		success: function(result) {
+			drawChart(result)
+		}, 
+		error: function (jqXHR,error,thrownError) {
+			showErr();
+		}
+	});
+}
+
+function showErr() {
+	$("#statisticsModal .chart-error").css('display', 'block')
+	$("#statisticsModal .chart-container").css('display', 'none')
+}
+
+function drawChart(data) {
+	let key = [];
+	let data1 = [];
+	let data2 = [];
+	let data3 = [];
+	let chartData;
+	
+	try {
+		chartData = $.parseJSON(data)
+	} catch (err) {
+		showErr()
+	}
+
+	chartData = $.parseJSON(data)
+
+	$.each( chartData, function( index, value ) {
+		key.push(index)
+		data1.push(value.request_count.api)
+		data2.push(value.request_count.web)
+		data3.push(value.request_uniq.idp)
+	});
+
+	let options = {
+		type: 'line',
+		data: {
+			labels: key,
+			datasets: [
+				{ label: 'API', data: data1 },
+				{ label: 'WEB', data: data2	},
+				{ label: 'Unique IdP', data: data3 }
+			]
+		},
+		options: {
+			responsive: true,
+			maintainAspectRatio: false,
+			interaction: {
+				mode: 'index',
+				intersect: false,
+			}
+		}
+	}
+	var ctx = document.getElementById('statistics').getContext('2d');
+
+	$("#statisticsModal .chart-error").css('display', 'none')
+	$("#statisticsModal .chart-container").css('display', 'block')
+
+	if ($.isEmptyObject(statChart)) {
+		statChart = new Chart(ctx, options);
+	} else {
+		statChart.update();
+	}
+}
+
+$(document).ready(function() {
+	$(".close").on("click", function() {
+		$("#statisticsModal").hide()
+	});
+	
+	$(document).on('click',function(e) {
+		if(($(e.target).closest("#statisticsModal").length > 0) && $(e.target).closest("canvas").length == 0 
+				&& !$(e.target).closest("div").hasClass('modal-content') && !$("#statisticsModal").hasClass('immune')) {
+			$("#statisticsModal").hide();
+		}
+	});
+
+	$("#statisticsButton").on("click", function() {
+		$("#statisticsModal").addClass('immune')
+		$("#statisticsModal").show()
+		setTimeout(function() {
+			$("#statisticsModal").removeClass('immune')
+		}, 1000);
+		getStatistics();
+	})
+});