|
@@ -13,7 +13,7 @@
|
|
|
<div class="ui small input">
|
|
|
<input type="text" id="statsRangeEnd" placeholder="End date">
|
|
|
</div>
|
|
|
- <button class="ui basic button"><i class="search icon"></i> Search</button><br>
|
|
|
+ <button onclick="handleLoadStatisticButtonPress();" class="ui basic button"><i class="search icon"></i> Search</button><br>
|
|
|
<small>Leave end range as empty for showing starting day only statistic</small>
|
|
|
</div>
|
|
|
<div class="ui divider"></div>
|
|
@@ -101,21 +101,34 @@
|
|
|
<br><br>
|
|
|
</div>
|
|
|
<script>
|
|
|
+ var statisticCharts = [];
|
|
|
function initStatisticSummery(startdate="", enddate=""){
|
|
|
if (startdate == "" && enddate == "" ){
|
|
|
let todaykey = getTodayStatisticKey();
|
|
|
- $.getJSON("/api/analytic/load?id=" + todaykey, function(data){
|
|
|
- console.log(data, todaykey);
|
|
|
- //Render visitor data
|
|
|
- renderVisitorChart(data.RequestOrigin);
|
|
|
+ loadStatisticByDate(todaykey);
|
|
|
+ }else if ((startdate != "" && enddate == "") || startdate == enddate){
|
|
|
+ //Load the target date
|
|
|
+ let targetDate = startdate.trim();
|
|
|
+ loadStatisticByDate(targetDate);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- //Render IP versions
|
|
|
- renderIPVersionChart(data.RequestClientIp);
|
|
|
+ function loadStatisticByDate(dateid){
|
|
|
+ $.getJSON("/api/analytic/load?id=" + dateid, function(data){
|
|
|
+ //Destroy all the previous charts
|
|
|
+ statisticCharts.forEach(function(thisChart){
|
|
|
+ thisChart.destroy();
|
|
|
+ })
|
|
|
|
|
|
- //Render user agent analysis
|
|
|
- renderUserAgentCharts(data.UserAgent);
|
|
|
- });
|
|
|
- }
|
|
|
+ //Render visitor data
|
|
|
+ renderVisitorChart(data.RequestOrigin);
|
|
|
+
|
|
|
+ //Render IP versions
|
|
|
+ renderIPVersionChart(data.RequestClientIp);
|
|
|
+
|
|
|
+ //Render user agent analysis
|
|
|
+ renderUserAgentCharts(data.UserAgent);
|
|
|
+ });
|
|
|
}
|
|
|
initStatisticSummery();
|
|
|
|
|
@@ -132,6 +145,12 @@
|
|
|
return formattedDate
|
|
|
}
|
|
|
|
|
|
+ function handleLoadStatisticButtonPress(){
|
|
|
+ var sd = $("#statsRangeStart").val();
|
|
|
+ var ed = $("#statsRangeEnd").val();
|
|
|
+ initStatisticSummery(sd, ed);
|
|
|
+ }
|
|
|
+
|
|
|
function renderUserAgentCharts(userAgentsEntries){
|
|
|
let userAgents = Object.keys(userAgentsEntries);
|
|
|
let requestCounts = Object.values(userAgentsEntries);
|
|
@@ -205,6 +224,8 @@
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+ statisticCharts.push(deviceTypeChart);
|
|
|
+
|
|
|
//Create the OS chart
|
|
|
let OSnames = [];
|
|
|
let OSCounts = [];
|
|
@@ -231,9 +252,11 @@
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+ statisticCharts.push(osTypeChart);
|
|
|
+
|
|
|
//Populate the OS version table
|
|
|
let sortedOSVersion = Object.entries(osVersion).sort((a, b) => b[1] - a[1]);
|
|
|
-
|
|
|
+ $("#stats_OSVersionList").html("");
|
|
|
// Loop through the sorted data and populate the table
|
|
|
for (let i = 0; i < sortedOSVersion.length; i++) {
|
|
|
let osVersion = sortedOSVersion[i][0];
|
|
@@ -280,7 +303,7 @@
|
|
|
}
|
|
|
});
|
|
|
|
|
|
- console.log(browserTypes);
|
|
|
+ statisticCharts.push(browserTypeChart);
|
|
|
|
|
|
}
|
|
|
|
|
@@ -315,6 +338,8 @@
|
|
|
options: ipvChartOption
|
|
|
});
|
|
|
|
|
|
+ statisticCharts.push(ipTypeChart);
|
|
|
+
|
|
|
//Populate the request count table
|
|
|
let requestCounts = Object.entries(RequestClientIp);
|
|
|
|
|
@@ -387,5 +412,7 @@
|
|
|
data: CCchartData,
|
|
|
options: CCchartOptions
|
|
|
});
|
|
|
+
|
|
|
+ statisticCharts.push(visitorsChart);
|
|
|
}
|
|
|
</script>
|