NodeBB/public/src/admin/general/dashboard.js

"use strict";
/*global define, ajaxify, app, socket, bootbox, Chart, RELATIVE_PATH*/

define('admin/general/dashboard', ['semver'], function(semver) {
	var	Admin = {},
		intervals = {
			rooms: false,
			graphs: false
		},
		isMobile = false;


	Admin.init = function() {
		app.enterRoom('admin');
		socket.emit('meta.rooms.getAll', Admin.updateRoomUsage);

		isMobile = !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

		intervals.rooms = setInterval(function() {
			if (app.isFocused && app.isConnected) {
				socket.emit('meta.rooms.getAll', Admin.updateRoomUsage);
			}
		}, 5000);

		$(window).on('action:ajaxify.start', function(ev, data) {
			clearInterval(intervals.rooms);
			clearInterval(intervals.graphs);

			intervals.rooms = null;
			intervals.graphs = null;
		});

		$('#logout-link').on('click', function() {
			$.post(RELATIVE_PATH + '/logout', function() {
				window.location.href = RELATIVE_PATH + '/';
			});
		});

		$.get('https://api.github.com/repos/NodeBB/NodeBB/tags', function(releases) {
			// Re-sort the releases, as they do not follow Semver (wrt pre-releases)
			releases = releases.sort(function(a, b) {
				a = a.name.replace(/^v/, '');
				b = b.name.replace(/^v/, '');
				return semver.lt(a, b) ? 1 : -1;
			});

			var	version = $('#version').html(),
				latestVersion = releases[0].name.slice(1),
				checkEl = $('.version-check');
			checkEl.html($('.version-check').html().replace('<i class="fa fa-spinner fa-spin"></i>', 'v' + latestVersion));

			// Alter box colour accordingly
			if (semver.eq(latestVersion, version)) {
				checkEl.removeClass('alert-info').addClass('alert-success');
				checkEl.append('<p>You are <strong>up-to-date</strong> <i class="fa fa-check"></i></p>');
			} else if (semver.gt(latestVersion, version)) {
				checkEl.removeClass('alert-info').addClass('alert-danger');
				checkEl.append('<p>A new version (v' + latestVersion + ') has been released. Consider upgrading your NodeBB.</p>');
			} else if (semver.gt(version, latestVersion)) {
				checkEl.removeClass('alert-info').addClass('alert-warning');
				checkEl.append('<p>You are running a <strong>development version</strong>! Unintended bugs may occur. <i class="fa fa-warning"></i></p>');
			}
		});

		$('.restart').on('click', function() {
			bootbox.confirm('Are you sure you wish to restart NodeBB?', function(confirm) {
				if (confirm) {
					app.alert({
						alert_id: 'instance_restart',
						type: 'info',
						title: 'Restarting... <i class="fa fa-spin fa-refresh"></i>',
						message: 'NodeBB is restarting.',
						timeout: 5000
					});

					$(window).one('action:reconnected', function() {
						app.alert({
							alert_id: 'instance_restart',
							type: 'success',
							title: '<i class="fa fa-check"></i> Success',
							message: 'NodeBB has successfully restarted.',
							timeout: 5000
						});
					});

					socket.emit('admin.restart');
				}
			});
		});

		$('.reload').on('click', function() {
			app.alert({
				alert_id: 'instance_reload',
				type: 'info',
				title: 'Reloading... <i class="fa fa-spin fa-refresh"></i>',
				message: 'NodeBB is reloading.',
				timeout: 5000
			});

			socket.emit('admin.reload', function(err) {
				if (!err) {
					app.alert({
						alert_id: 'instance_reload',
						type: 'success',
						title: '<i class="fa fa-check"></i> Success',
						message: 'NodeBB has successfully reloaded.',
						timeout: 5000
					});
				} else {
					app.alert({
						alert_id: 'instance_reload',
						type: 'danger',
						title: '[[global:alert.error]]',
						message: '[[error:reload-failed, ' + err.message + ']]'
					});
				}
			});
		});

		setupGraphs();
	};

	Admin.updateRoomUsage = function(err, data) {
		if (err) {
			return app.alertError(err.message);
		}

		var html = '<div class="text-center pull-left">' +
						'<div>'+ data.onlineRegisteredCount +'</div>' +
						'<div>Users</div>' +
					'</div>' +
					'<div class="text-center pull-left">' +
						'<div>'+ data.onlineGuestCount +'</div>' +
						'<div>Guests</div>' +
					'</div>' +
					'<div class="text-center pull-left">' +
						'<div>'+ (data.onlineRegisteredCount + data.onlineGuestCount) +'</div>' +
						'<div>Total</div>' +
					'</div>' +
					'<div class="text-center pull-left">' +
						'<div>'+ data.socketCount +'</div>' +
						'<div>Connections</div>' +
					'</div>';

		var idle = data.socketCount - (data.users.home + data.users.topics + data.users.category);

		updateRegisteredGraph(data.onlineRegisteredCount, data.onlineGuestCount);
		updatePresenceGraph(data.users.home, data.users.topics, data.users.category, idle);
		updateTopicsGraph(data.topics);

		$('#active-users').html(html);
	};

	var graphs = {
		traffic: null,
		registered: null,
		presence: null,
		topics: null
	};

	var topicColors = ["#bf616a","#5B90BF","#d08770","#ebcb8b","#a3be8c","#96b5b4","#8fa1b3","#b48ead","#ab7967","#46BFBD"],
		usedTopicColors = [];

	// from chartjs.org
	function lighten(col, amt) {
		var usePound = false;

		if (col[0] == "#") {
			col = col.slice(1);
			usePound = true;
		}

		var num = parseInt(col,16);

		var r = (num >> 16) + amt;

		if (r > 255) r = 255;
		else if  (r < 0) r = 0;

		var b = ((num >> 8) & 0x00FF) + amt;

		if (b > 255) b = 255;
		else if  (b < 0) b = 0;

		var g = (num & 0x0000FF) + amt;

		if (g > 255) g = 255;
		else if (g < 0) g = 0;

		return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
	}

	function getHoursArray() {
		var currentHour = new Date().getHours(),
			labels = [];

		for (var i = currentHour, ii = currentHour - 12; i > ii; i--) {
			var hour = i < 0 ? 24 + i : i;
			labels.push(hour + ':00 ');
		}

		return labels.reverse();
	}

	function setupGraphs() {
		var trafficCanvas = document.getElementById('analytics-traffic'),
			registeredCanvas = document.getElementById('analytics-registered'),
			presenceCanvas = document.getElementById('analytics-presence'),
			topicsCanvas = document.getElementById('analytics-topics'),
			trafficCtx = trafficCanvas.getContext('2d'),
			registeredCtx = registeredCanvas.getContext('2d'),
			presenceCtx = presenceCanvas.getContext('2d'),
			topicsCtx = topicsCanvas.getContext('2d'),
			trafficLabels = getHoursArray();

		if (isMobile) {
			Chart.defaults.global.showTooltips = false;
		}

		var data = {
				labels: trafficLabels,
				datasets: [
					{
						label: "Page Views",
						fillColor: "rgba(220,220,220,0.2)",
						strokeColor: "rgba(220,220,220,1)",
						pointColor: "rgba(220,220,220,1)",
						pointStrokeColor: "#fff",
						pointHighlightFill: "#fff",
						pointHighlightStroke: "rgba(220,220,220,1)",
						data: [0,0,0,0,0,0,0,0,0,0,0,0]
					},
					{
						label: "Unique Visitors",
						fillColor: "rgba(151,187,205,0.2)",
						strokeColor: "rgba(151,187,205,1)",
						pointColor: "rgba(151,187,205,1)",
						pointStrokeColor: "#fff",
						pointHighlightFill: "#fff",
						pointHighlightStroke: "rgba(151,187,205,1)",
						data: [0,0,0,0,0,0,0,0,0,0,0,0]
					}
				]
			};

		trafficCanvas.width = $(trafficCanvas).parent().width(); // is this necessary
		graphs.traffic = new Chart(trafficCtx).Line(data, {
			responsive: true
		});

		graphs.registered = new Chart(registeredCtx).Doughnut([{
		        value: 1,
		        color:"#F7464A",
		        highlight: "#FF5A5E",
		        label: "Registered Users"
		    },
		    {
		        value: 1,
		        color: "#46BFBD",
		        highlight: "#5AD3D1",
		        label: "Anonymous Users"
		    }], {
		    	responsive: true
		    });

		graphs.presence = new Chart(presenceCtx).Doughnut([{
		        value: 1,
		        color:"#F7464A",
		        highlight: "#FF5A5E",
		        label: "On homepage"
		    },
		    {
		        value: 1,
		        color: "#46BFBD",
		        highlight: "#5AD3D1",
		        label: "Reading posts"
		    },
		    {
		        value: 1,
		        color: "#FDB45C",
		        highlight: "#FFC870",
		        label: "Browsing topics"
		    },
		    {
		        value: 1,
		        color: "#949FB1",
		        highlight: "#A8B3C5",
		        label: "Idle"
		    }], {
		    	responsive: true
		    });

		graphs.topics = new Chart(topicsCtx).Doughnut([], {responsive: true});
		topicsCanvas.onclick = function(evt){
			var obj = graphs.topics.getSegmentsAtEvent(evt);
			window.open(RELATIVE_PATH + '/topic/' + obj[0].tid);
		};

		intervals.graphs = setInterval(updateTrafficGraph, 15000);
		updateTrafficGraph();

		$(window).on('resize', adjustPieCharts);
		adjustPieCharts();
	}

	function adjustPieCharts() {
		$('.pie-chart.legend-up').each(function() {
			var $this = $(this);

			if ($this.width() < 320) {
				$this.addClass('compact');
			} else {
				$this.removeClass('compact');
			}
		});
	}

	function updateTrafficGraph() {
		if (!app.isFocused  || !app.isConnected) {
			return;
		}

		socket.emit('admin.analytics.get', {graph: "traffic"}, function (err, 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];
			}

			var currentHour = new Date().getHours();

			graphs.traffic.scale.xLabels = getHoursArray();
			graphs.traffic.update();
		});
	}

	function updateRegisteredGraph(registered, anonymous) {
		graphs.registered.segments[0].value = registered;
		graphs.registered.segments[1].value = anonymous;
		graphs.registered.update();
	}

	function updatePresenceGraph(homepage, posts, topics, idle) {
		graphs.presence.segments[0].value = homepage;
		graphs.presence.segments[1].value = posts;
		graphs.presence.segments[2].value = topics;
		graphs.presence.segments[3].value = idle;
		graphs.presence.update();
	}

	function updateTopicsGraph(topics) {
		if (!Object.keys(topics).length) {
			topics = {"0": {
				title: "No users browsing",
				value: 1
			}};
		}

		var tids = Object.keys(topics),
			segments = graphs.topics.segments;

		function reassignExistingTopics() {
			for (var i = segments.length - 1; i >= 0; i--) {
				if (!segments[i]) {
					continue;
				}

				var tid = segments[i].tid;

				if ($.inArray(tid, tids) === -1) {
					usedTopicColors.splice($.inArray(segments[i].color, usedTopicColors), 1);
					graphs.topics.removeData(i);
				} else {
					graphs.topics.segments[i].value = topics[tid].value;
					delete topics[tid];
				}
			}
		}

		function assignNewTopics() {
			while (segments.length < 10 && tids.length > 0) {
				var tid = tids.pop(),
					data = topics[tid],
					color = null;

				if (!data) {
					continue;
				}

				if (tid === '0') {
					color = '#4D5360';
				} else {
					do {
						for (var i = 0, ii = topicColors.length; i < ii; i++) {
							var chosenColor = topicColors[i];

							if ($.inArray(chosenColor, usedTopicColors) === -1) {
								color = chosenColor;
								usedTopicColors.push(color);
								break;
							}
						}
					} while (color === null && usedTopicColors.length < topicColors.length);
				}

				if (color) {
					graphs.topics.addData({
						value: data.value,
						color: color,
						highlight: lighten(color, 10),
						label: data.title
					});

					segments[segments.length - 1].tid = tid;
				}
			}
		}

		function buildTopicsLegend() {
			var legend = $('#topics-legend').html('');

			for (var i = 0, ii = segments.length; i < ii; i++) {
				var topic = segments[i],
					label = topic.tid === '0' ? topic.label : '<a title="' + topic.label + '"href="' + RELATIVE_PATH + '/topic/' + topic.tid + '" target="_blank"> ' + topic.label + '</a>';

				legend.append(
					'<li>' +
						'<div style="background-color: ' + topic.highlightColor + '; border-color: ' + topic.strokeColor + '"></div>' +
						'<span>' + label + '</span>' +
					'</li>');
			}
		}

		reassignExistingTopics();
		assignNewTopics();
		buildTopicsLegend();

		graphs.topics.update();
	}

	return Admin;
});