mirror of
https://github.com/Foltik/Shimapan
synced 2025-03-01 10:13:50 -05:00
Update dashboard for new stats
This commit is contained in:
parent
af4d65e1c5
commit
55f778e754
@ -1,13 +1,6 @@
|
||||
const angular = require('angular');
|
||||
|
||||
angular.module('DashCtrl', ['chart.js', 'StatSvc']).controller('DashController', ['$scope', 'StatService', async ($scope, StatService) => {
|
||||
const colorScheme = ['#2a9fd6'];
|
||||
// Calculate and format descending dates back one week to use for x-axis labels
|
||||
const currentDate = new Date();
|
||||
const oneDay = 1000 * 60 * 60 * 24;
|
||||
let labels = Array.from({length: 7}, (date, i) =>
|
||||
(new Date(currentDate - oneDay * (6 - i))).toISOString().substr(5, 5));
|
||||
|
||||
const toHumanReadable = bytes => {
|
||||
const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB'];
|
||||
let index = 0;
|
||||
@ -16,50 +9,32 @@ angular.module('DashCtrl', ['chart.js', 'StatSvc']).controller('DashController',
|
||||
return bytes.toFixed(3) + ' ' + units[index];
|
||||
};
|
||||
|
||||
// Get stats for the week
|
||||
$scope.statWeekUploads = 0;
|
||||
$scope.statWeekUploadSize = 0;
|
||||
$scope.statWeekViews = 0;
|
||||
|
||||
const weekStats = await StatService.getWeek();
|
||||
console.log(weekStats);
|
||||
|
||||
$scope.uploadData = [Array.from({length: 7}, (val, i) => weekStats[labels[i]] && weekStats[labels[i]].uploads ? weekStats[labels[i]].uploads : 0)];
|
||||
$scope.viewData = [Array.from({length: 7}, (val, i) => weekStats[labels[i]] && weekStats[labels[i]].views ? weekStats[labels[i]].views : 0)];
|
||||
|
||||
$scope.statWeekUploads = Object.keys(weekStats).reduce((acc, key) => acc + (weekStats[key].uploads ? weekStats[key].uploads : 0), 0);
|
||||
$scope.statWeekUploadSize = toHumanReadable(Object.keys(weekStats).reduce((acc, key) => acc + (weekStats[key].size ? weekStats[key].size : 0), 0));
|
||||
$scope.statWeekViews = Object.keys(weekStats).reduce((acc, key) => acc + (weekStats[key].views ? weekStats[key].views : 0), 0);
|
||||
|
||||
// Get all-time stats
|
||||
$scope.statTotalUploads = 0;
|
||||
$scope.statTotalUploadSize = 0;
|
||||
$scope.statTotalViews = 0;
|
||||
const allStats = await StatService.getAll();
|
||||
console.log(allStats);
|
||||
$scope.statTotalUploads = allStats.count;
|
||||
$scope.statTotalUploadSize = toHumanReadable(allStats.size);
|
||||
$scope.statTotalViews = allStats.views;
|
||||
|
||||
$scope.uploadColors = colorScheme;
|
||||
$scope.uploadLabels = labels;
|
||||
$scope.uploadSeries = ['Uploads'];
|
||||
//$scope.uploadData = [[5, 11, 4, 3, 7, 9, 21]];
|
||||
$scope.uploadOptions = {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Historical Uploads'
|
||||
},
|
||||
const getWeekUploadStats = async () => {
|
||||
const stats = await StatService.getUploadsWeek();
|
||||
console.log(stats);
|
||||
$scope.statWeekUploads = stats.length;
|
||||
$scope.statWeekUploadSize = toHumanReadable(stats.reduce((acc, stat) => acc + stat.size, 0));
|
||||
};
|
||||
|
||||
$scope.viewColors = colorScheme;
|
||||
$scope.viewLabels = labels;
|
||||
$scope.viewSeries = ['Views'];
|
||||
//$scope.viewData = [[5, 11, 4, 3, 7, 9, 21]];
|
||||
$scope.viewOptions = {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Historical Views'
|
||||
}
|
||||
const getWeekViewStats = async () => {
|
||||
const stats = await StatService.getViewsWeek();
|
||||
$scope.statWeekViews = stats.length;
|
||||
};
|
||||
|
||||
const getAllUploadStats = async () => {
|
||||
const stats = await StatService.getUploads();
|
||||
console.log(stats);
|
||||
$scope.statTotalUploads = stats.length;
|
||||
$scope.statTotalUploadSize = toHumanReadable(stats.reduce((acc, stat) => acc + stat.size, 0));
|
||||
};
|
||||
|
||||
const getAllViewStats = async () => {
|
||||
const stats = await StatService.getViews();
|
||||
$scope.statTotalViews = stats.length;
|
||||
};
|
||||
|
||||
|
||||
await Promise.all([getWeekUploadStats(), getWeekViewStats(), getAllUploadStats(), getAllViewStats()]);
|
||||
$scope.$apply();
|
||||
}]);
|
@ -1,21 +1,48 @@
|
||||
const angular = require('angular');
|
||||
|
||||
angular.module('StatSvc', []).service('StatService', ['$http', function($http) {
|
||||
this.getWeek = async () => {
|
||||
this.getUploads = async () => {
|
||||
const res = await $http({
|
||||
method: 'GET',
|
||||
url: '/api/stats/week'
|
||||
url: '/api/stats/uploads'
|
||||
});
|
||||
|
||||
return res.data;
|
||||
};
|
||||
|
||||
this.getAll = async () => {
|
||||
this.getUploadsWeek = async () => {
|
||||
let oneWeekAgo = new Date();
|
||||
oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
|
||||
|
||||
const res = await $http({
|
||||
method: 'GET',
|
||||
url: '/api/stats/all'
|
||||
url: '/api/stats/uploads',
|
||||
data: {
|
||||
after: oneWeekAgo
|
||||
}
|
||||
});
|
||||
|
||||
return res.data;
|
||||
}
|
||||
};
|
||||
|
||||
this.getViews = async () => {
|
||||
const res = await $http({
|
||||
method: 'GET',
|
||||
url: '/api/stats/views'
|
||||
});
|
||||
|
||||
return res.data;
|
||||
};
|
||||
|
||||
this.getViewsWeek = async () => {
|
||||
let oneWeekAgo = new Date();
|
||||
oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
|
||||
|
||||
const res = await $http({
|
||||
method: 'GET',
|
||||
url: '/api/stats/uploads'
|
||||
});
|
||||
|
||||
return res.data;
|
||||
};
|
||||
}]);
|
||||
|
@ -1,20 +1,4 @@
|
||||
<div class="inner" ng-controller="DashController">
|
||||
<div id="dash-historical" class="dash-row">
|
||||
<div class="dash-card dash-card-graph">
|
||||
<canvas id="dash-upload-historical" class="chart chart-line"
|
||||
chart-data="uploadData" chart-series="uploadSeries" chart-options="uploadOptions"
|
||||
chart-labels="uploadLabels"
|
||||
chart-dataset-override="uploadDatasetOverride" chart-click="uploadOnClick"
|
||||
chart-colors="uploadColors"></canvas>
|
||||
</div>
|
||||
<div class="dash-card dash-card-graph">
|
||||
<canvas id="dash-view-historical" class="chart chart-line"
|
||||
chart-data="viewData" chart-series="viewSeries" chart-options="viewOptions"
|
||||
chart-labels="viewLabels"
|
||||
chart-dataset-override="viewDatasetOverride" chart-click="viewOnClick"
|
||||
chart-colors="viewColors"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dash-singlestats" class="dash-row">
|
||||
<div class="dash-card dash-card-singlestat">
|
||||
<div class="dash-stat">
|
||||
|
Loading…
Reference in New Issue
Block a user