Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-11-04 21:15:55 +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.scale.xLabels = getHoursArray();
graphs.traffic.update();
$('#pageViewsThisMonth').html(data.monthlyPageViews.thisMonth);