Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-11-05 05:25:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Closes #3884

Browse Source 
Added toggles to change graph to monthly view vs regular
single-day view.

Also fixed issue where labels were out of date as the graph
data changed.
This commit is contained in:
Julian Lam
2015-11-25 14:22:32 -05:00
parent 9f48d3e6d2
commit 9c1b067445
3 changed files with 90 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
public/src/admin/general/dashboard.js
View File

@@ -150,12 +150,26 @@ define('admin/general/dashboard', ['semver'], function(semver) {
for (var i = currentHour, ii = currentHour - 24; i > ii; i--) {
var hour = i < 0 ? 24 + i : i;
labels.push(hour + ':00 ');
labels.push(hour + ':00');
}
return labels.reverse();
}
function getDaysArray() {
var currentDay = new Date().getTime(),
months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels = [],
tmpDate;
for(var x=29;x>=0;x--) {
tmpDate = new Date(currentDay - (1000*60*60*24*x));
labels.push(months[tmpDate.getMonth()] + ' ' + tmpDate.getDate());
}
return labels;
}
function setupGraphs() {
var trafficCanvas = document.getElementById('analytics-traffic'),
registeredCanvas = document.getElementById('analytics-registered'),
@@ -263,6 +277,10 @@ define('admin/general/dashboard', ['semver'], function(semver) {
$(window).on('resize', adjustPieCharts);
adjustPieCharts();
$('[data-action="updateGraph"]').on('click', function() {
updateTrafficGraph($(this).attr('data-units'));
})
}
function adjustPieCharts() {
@@ -277,26 +295,44 @@ define('admin/general/dashboard', ['semver'], function(semver) {
});
}
function updateTrafficGraph() {
function updateTrafficGraph(units) {
if (!app.isFocused) {
return;
}
socket.emit('admin.analytics.get', {graph: "traffic"}, function (err, data) {
socket.emit('admin.analytics.get', {
graph: 'traffic',
units: units || 'hours'
}, function (err, data) {
if (JSON.stringify(graphData.traffic) === JSON.stringify(data)) {
return;
}
graphData.traffic = data;
for (var i = 0, ii = data.pageviews.length; i < ii; i++) {
graphs.traffic.datasets[0].points[i].value = data.pageviews[i];
graphs.traffic.datasets[1].points[i].value = data.uniqueVisitors[i];
// If new data set contains fewer points than currently shown, truncate
while(graphs.traffic.datasets[0].points.length > data.pageviews.length) {
graphs.traffic.removeData();
}
var currentHour = new Date().getHours();
if (units === 'days') {
graphs.traffic.scale.xLabels = getDaysArray();
} else {
graphs.traffic.scale.xLabels = getHoursArray();
}
for (var i = 0, ii = data.pageviews.length; i < ii; i++) {
if (graphs.traffic.datasets[0].points[i]) {
graphs.traffic.datasets[0].points[i].value = data.pageviews[i];
graphs.traffic.datasets[0].points[i].label = graphs.traffic.scale.xLabels[i];
graphs.traffic.datasets[1].points[i].value = data.uniqueVisitors[i];
graphs.traffic.datasets[1].points[i].label = graphs.traffic.scale.xLabels[i];
} else {
// No points to replace? Add data.
graphs.traffic.addData([data.pageviews[i], data.uniqueVisitors[i]], graphs.traffic.scale.xLabels[i]);
}
}
graphs.traffic.update();
$('#pageViewsThisMonth').html(data.monthlyPageViews.thisMonth);

50
src/socket.io/admin.js
View File

@@ -206,17 +206,29 @@ SocketAdmin.email.test = function(socket, data, callback) {
};
SocketAdmin.analytics.get = function(socket, data, callback) {
data.units = 'hours'; // temp
// Default returns views from past 24 hours, by hour
if (data.units === 'days') {
data.amount = 30;
} else {
data.amount = 24;
}
if (data && data.graph && data.units && data.amount) {
if (data.graph === 'traffic') {
async.parallel({
uniqueVisitors: function(next) {
getHourlyStatsForSet('analytics:uniquevisitors', data.amount, next);
if (data.units === 'days') {
getDailyStatsForSet('analytics:uniquevisitors', Date.now(), data.amount, next);
} else {
getHourlyStatsForSet('analytics:uniquevisitors', Date.now(), data.amount, next);
}
},
pageviews: function(next) {
getHourlyStatsForSet('analytics:pageviews', data.amount, next);
if (data.units === 'days') {
getDailyStatsForSet('analytics:pageviews', Date.now(), data.amount, next);
} else {
getHourlyStatsForSet('analytics:pageviews', Date.now(), data.amount, next);
}
},
monthlyPageViews: function(next) {
analytics.getMonthlyPageViews(next);
@@ -240,14 +252,14 @@ SocketAdmin.logs.clear = function(socket, data, callback) {
meta.logs.clear(callback);
};
function getHourlyStatsForSet(set, hours, callback) {
var hour = new Date(),
terms = {},
function getHourlyStatsForSet(set, hour, numHours, callback) {
var terms = {},
hoursArr = [];
hour = new Date(hour);
hour.setHours(hour.getHours(), 0, 0, 0);
for (var i = 0, ii = hours; i < ii; i++) {
for (var i = 0, ii = numHours; i < ii; i++) {
hoursArr.push(hour.getTime());
hour.setHours(hour.getHours() - 1, 0, 0, 0);
}
@@ -272,6 +284,30 @@ function getHourlyStatsForSet(set, hours, callback) {
});
}
function getDailyStatsForSet(set, day, numDays, callback) {
var daysArr = [];
day = new Date(day);
day.setHours(0, 0, 0, 0);
async.whilst(function() {
return numDays--;
}, function(next) {
getHourlyStatsForSet(set, day.getTime()-(1000*60*60*24*numDays), 24, function(err, day) {
if (err) {
return next(err);
}
daysArr.push(day.reduce(function(cur, next) {
return cur+next;
}));
next();
});
}, function(err) {
callback(err, daysArr);
});
};
SocketAdmin.getMoreEvents = function(socket, next, callback) {
var start = parseInt(next, 10);
if (start < 0) {

4
src/views/admin/general/dashboard.tpl
View File

@@ -17,11 +17,11 @@
</div>
<div class="text-center pull-left monthly-pageviews">
<div><strong id="pageViewsThisMonth"></strong></div>
<div>Page views This Month</div>
<div><a href="#" data-action="updateGraph" data-units="days">Page views This Month</a></div>
</div>
<div class="text-center pull-left monthly-pageviews">
<div><strong id="pageViewsPastDay"></strong></div>
<div>Page views in last 24 hours</div>
<div><a href="#" data-action="updateGraph" data-units="hours">Page views in last 24 hours</a></div>
</div>
</div>
</div>