From e59647a6204928ad359bff005190857d3f81b775 Mon Sep 17 00:00:00 2001 From: Kert Date: Sun, 14 Oct 2018 23:44:44 +0300 Subject: [PATCH] statistika done --- .../imageboard/service/StatisticService.java | 2 +- src/main/resources/static/js/statistics.js | 135 ++++++++++++++++++ .../resources/templates/fragments/head.html | 1 - src/main/resources/templates/map.html | 19 ++- src/main/resources/templates/statistics.html | 32 +++++ src/main/resources/templates/upload.html | 19 ++- 6 files changed, 195 insertions(+), 13 deletions(-) create mode 100644 src/main/resources/static/js/statistics.js create mode 100644 src/main/resources/templates/statistics.html diff --git a/src/main/java/com/kmk/imageboard/service/StatisticService.java b/src/main/java/com/kmk/imageboard/service/StatisticService.java index abf6a03..8d1405c 100644 --- a/src/main/java/com/kmk/imageboard/service/StatisticService.java +++ b/src/main/java/com/kmk/imageboard/service/StatisticService.java @@ -23,7 +23,7 @@ public List getTopOSs() { public List getTrafficByHour() { List trafficList = new ArrayList<>(); - for (int i = 0; i < 23; i++) { + for (int i = 0; i < 24; i++) { trafficList.add(statisticRepository.getRequestsByHour(i)); } return trafficList; diff --git a/src/main/resources/static/js/statistics.js b/src/main/resources/static/js/statistics.js new file mode 100644 index 0000000..e72df3f --- /dev/null +++ b/src/main/resources/static/js/statistics.js @@ -0,0 +1,135 @@ +var browserData; +var osData; +var trafficData; + + +$(document).ready(function () { + + $.ajaxSetup({ + headers: { + 'X-CSRF-TOKEN': $('meta[name="_csrf"]').attr('content') + } + }); + + function getBrowsers() { + return $.get('/statistics/browsers') + .done(function (data) { + browserData = data; + }); + } + + function getOSs() { + return $.get('/statistics/os') + .done(function (data) { + osData = data; + }); + } + + function getTraffic() { + return $.get('/statistics/traffic') + .done(function (data) { + trafficData = data; + }); + } + + + $.when(getBrowsers()).then(function () { + var dataLabels = []; + var dataData = []; + for (var i = 0; i < browserData.length; i++) { + dataLabels.push(browserData[i][0]); + dataData.push(browserData[i][1]) + } + + var ctx = document.getElementById("browserChart").getContext('2d'); + var browserPieChart = new Chart(ctx, { + type: 'pie', + data: { + labels: dataLabels, + datasets: [{ + label: '# of Requests', + data: dataData, + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)', + 'rgba(75, 192, 192, 0.2)', + 'rgba(153, 102, 255, 0.2)', + 'rgba(255, 159, 64, 0.2)' + ], + borderColor: [ + 'rgba(255,99,132,1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)', + 'rgba(75, 192, 192, 1)', + 'rgba(153, 102, 255, 1)', + 'rgba(255, 159, 64, 1)' + ], + borderWidth: 1 + }] + }, + options: {} + }); + }); + + $.when(getOSs()).then(function () { + var dataLabels = []; + var dataData = []; + for (var i = 0; i < osData.length; i++) { + dataLabels.push(osData[i][0]); + dataData.push(osData[i][1]) + } + + var ctx = document.getElementById("osChart").getContext('2d'); + var osPieChart = new Chart(ctx, { + type: 'pie', + data: { + labels: dataLabels, + datasets: [{ + label: '# of Requests', + data: dataData, + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)', + 'rgba(75, 192, 192, 0.2)', + 'rgba(153, 102, 255, 0.2)', + 'rgba(255, 159, 64, 0.2)' + ], + borderColor: [ + 'rgba(255,99,132,1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)', + 'rgba(75, 192, 192, 1)', + 'rgba(153, 102, 255, 1)', + 'rgba(255, 159, 64, 1)' + ], + borderWidth: 1 + }] + }, + options: {} + }); + }); + + $.when(getTraffic()).then(function () { + var dataLabels = ['00', '01', '02', '03', '04', + '05', '06', '07', '08', '09', + '10', '11', '12', '13', '14', + '15', '16', '17', '18', '19', + '20', '21', '22', '23'] + var ctx = document.getElementById("trafficChart").getContext('2d'); + var trafficLineChart = new Chart(ctx, { + type: 'line', + data: { + labels: dataLabels, + datasets: [{ + label: '# of Requests per hour', + data: trafficData, + borderColor: 'rgba(255, 159, 64, 1)', + borderWidth: 2 + }] + }, + options: {} + }); + }); +}); \ No newline at end of file diff --git a/src/main/resources/templates/fragments/head.html b/src/main/resources/templates/fragments/head.html index 1456e2c..2109bf8 100644 --- a/src/main/resources/templates/fragments/head.html +++ b/src/main/resources/templates/fragments/head.html @@ -20,6 +20,5 @@ - \ No newline at end of file diff --git a/src/main/resources/templates/map.html b/src/main/resources/templates/map.html index 27d35ba..ad92db3 100644 --- a/src/main/resources/templates/map.html +++ b/src/main/resources/templates/map.html @@ -2,19 +2,28 @@ - + - - + + -

+4v1539369565632" width="600" height="450" frameborder="0" style="border:0" allowfullscreen> +

+ + + + \ No newline at end of file diff --git a/src/main/resources/templates/statistics.html b/src/main/resources/templates/statistics.html new file mode 100644 index 0000000..a688224 --- /dev/null +++ b/src/main/resources/templates/statistics.html @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + +
+
+
+ +
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/src/main/resources/templates/upload.html b/src/main/resources/templates/upload.html index 22ac345..ad2d542 100644 --- a/src/main/resources/templates/upload.html +++ b/src/main/resources/templates/upload.html @@ -10,11 +10,18 @@ -
- - -
+
+
+
+
+ + +
+
+
+
+ \ No newline at end of file