maximize graph w/ fullscreen API

public/less/admin/general/dashboard.less

@@ -9,6 +9,36 @@
 		padding-right: 50px;
 		position: relative;
 
+		.fa-expand {
+			display: none;
+			position: absolute;
+			right: 20px;
+			padding: 5px;
+			background-color: @gray-lighter;
+			color: @gray-base;
+			cursor: pointer;
+			.transition(all .4s);
+
+			&.active {
+				display: inline;
+			}
+		}
+
+		&:hover {
+			.fa-expand {
+				color: @gray-lighter;
+				background-color: @gray-base;
+			}
+		}
+
+		&.fullscreen {
+			width: 100%;
+			padding: 100px 40px;
+
+			.fa-expand {
+				top: 20px;
+			}
+		}
 
 		&.pie-chart {
 			padding-right: 0px;

public/src/admin/general/dashboard.js

@@ -48,6 +48,7 @@ define('admin/general/dashboard', ['semver', 'Chart', 'translator', 'benchpress'
 			socket.emit('admin.rooms.getAll', Admin.updateRoomUsage);
 			initiateDashboard();
 		});
+		setupFullscreen();
 	};
 
 	Admin.updateRoomUsage = function (err, data) {
@@ -496,5 +497,40 @@ define('admin/general/dashboard', ['semver', 'Chart', 'translator', 'benchpress'
 		}, realtime ? DEFAULTS.realtimeInterval : DEFAULTS.graphInterval);
 	}
 
+	function setupFullscreen() {
+		var container = document.getElementById('analytics-traffic-container');
+		var $container = $(container);
+		var btn = $container.find('.fa-expand');
+		var fsMethod;
+		var exitMethod;
+
+		if (container.requestFullscreen) {
+			fsMethod = 'requestFullscreen';
+			exitMethod = 'exitFullscreen';
+		} else if (container.mozRequestFullScreen) {
+			fsMethod = 'mozRequestFullScreen';
+			exitMethod = 'mozCancelFullScreen';
+		} else if (container.webkitRequestFullscreen) {
+			fsMethod = 'webkitRequestFullscreen';
+			exitMethod = 'webkitCancelFullScreen';
+		} else if (container.msRequestFullscreen) {
+			fsMethod = 'msRequestFullscreen';
+			exitMethod = 'msCancelFullScreen';
+		}
+
+		if (fsMethod) {
+			btn.addClass('active');
+			btn.on('click', function () {
+				if ($container.hasClass('fullscreen')) {
+					document[exitMethod]();
+					$container.removeClass('fullscreen');
+				} else {
+					container[fsMethod]();
+					$container.addClass('fullscreen');
+				}
+			});
+		}
+	}
+
 	return Admin;
 });

src/views/admin/general/dashboard.tpl

@@ -3,7 +3,8 @@
 		<div class="panel panel-default">
 			<div class="panel-heading">[[admin/general/dashboard:forum-traffic]]</div>
 			<div class="panel-body">
-				<div class="graph-container">
+				<div class="graph-container" id="analytics-traffic-container">
+					<i class="fa fa-expand"></i>
 					<ul class="graph-legend">
 						<li><div class="page-views"></div><span>[[admin/general/dashboard:page-views]]</span></li>
 						<li><div class="unique-visitors"></div><span>[[admin/general/dashboard:unique-visitors]]</span></li>