Allowing custom date range to be supplied in pageviews graph, closes #5541

public/language/en-GB/admin/general/dashboard.json

@@ -5,9 +5,14 @@
 	"users": "Users",
 	"posts": "Posts",
 	"topics": "Topics",
-	"page-views-last-month": "Page views Last Month",
+	"page-views-last-month": "Last Month",
-	"page-views-this-month": "Page views This Month",
+	"page-views-this-month": "This Month",
-	"page-views-last-day": "Page views in last 24 hours",
+	"page-views-last-day": "Last 24 hours",
+	"page-views-custom": "Custom Date Range",
+	"page-views-custom-start": "Range Start",
+	"page-views-custom-end": "Range End",
+	"page-views-custom-help": "Enter a date range of page views you would like to view. If no date picker is available, the accepted format is <code>YYYY-MM-DD</code>",
+	"page-views-custom-error": "Please enter a valid date range in the format <code>YYYY-MM-DD</code>",
 
 	"stats.day": "Day",
 	"stats.week": "Week",

public/less/admin/general/dashboard.less

@@ -130,8 +130,6 @@
 	}
 
 	.pageview-stats {
-		width:33%;
-
 		strong {
 			font-size: 22px;
 		}

public/src/admin/general/dashboard.js

@@ -294,7 +294,7 @@ define('admin/general/dashboard', ['semver', 'Chart', 'translator'], function (s
 			$(window).on('resize', adjustPieCharts);
 			adjustPieCharts();
 
-			$('[data-action="updateGraph"]').on('click', function () {
+			$('[data-action="updateGraph"]:not([data-units="custom"])').on('click', function () {
 				var until;
 				switch ($(this).attr('data-until')) {
 				case 'last-month':
@@ -305,6 +305,60 @@ define('admin/general/dashboard', ['semver', 'Chart', 'translator'], function (s
 				updateTrafficGraph($(this).attr('data-units'), until);
 				$('[data-action="updateGraph"]').removeClass('active');
 				$(this).addClass('active');
+
+				require(['translator'], function (translator) {
+					translator.translate('[[admin/general/dashboard:page-views-custom]]', function (translated) {
+						$('[data-action="updateGraph"][data-units="custom"]').text(translated);
+					});
+				});
+			});
+			$('[data-action="updateGraph"][data-units="custom"]').on('click', function () {
+				var targetEl = $(this);
+
+				templates.parse('admin/partials/pageviews-range-select', {}, function (html) {
+					var modal = bootbox.dialog({
+						title: '[[admin/general/dashboard:page-views-custom]]',
+						message: html,
+						buttons: {
+							submit: {
+								label: '[[global:search]]',
+								className: 'btn-primary',
+								callback: submit,
+							},
+						},
+					});
+
+					function submit() {
+						// NEED TO ADD VALIDATION HERE FOR YYYY-MM-DD
+						var formData = modal.find('form').serializeObject();
+						var validRegexp = /\d{4}-\d{2}-\d{2}/;
+
+						// Input validation
+						if (!formData.startRange && !formData.endRange) {
+							// No range? Assume last 30 days
+							updateTrafficGraph('days');
+							$('[data-action="updateGraph"]').removeClass('active');
+							$('[data-action="updateGraph"][data-units="days"]').addClass('active');
+							return;
+						} else if (!validRegexp.test(formData.startRange) || !validRegexp.test(formData.endRange)) {
+							// Invalid Input
+							modal.find('.alert-danger').removeClass('hidden');
+							return false;
+						}
+
+						var until = new Date(formData.endRange);
+						until.setDate(until.getDate() + 1);
+						until = until.getTime();
+						var amount = (until - new Date(formData.startRange).getTime()) / (1000 * 60 * 60 * 24);
+
+						updateTrafficGraph('days', until, amount);
+						$('[data-action="updateGraph"]').removeClass('active');
+						targetEl.addClass('active');
+
+						// Update "custom range" label
+						targetEl.html(formData.startRange + ' – ' + formData.endRange);
+					}
+				});
 			});
 
 			socket.emit('admin.rooms.getAll', Admin.updateRoomUsage);
@@ -325,7 +379,9 @@ define('admin/general/dashboard', ['semver', 'Chart', 'translator'], function (s
 		});
 	}
 
-	function updateTrafficGraph(units, until) {
+	function updateTrafficGraph(units, until, amount) {
+		// until and amount are optional
+
 		if (!app.isFocused) {
 			return;
 		}
@@ -334,6 +390,7 @@ define('admin/general/dashboard', ['semver', 'Chart', 'translator'], function (s
 			graph: 'traffic',
 			units: units || 'hours',
 			until: until,
+			amount: amount,
 		}, function (err, data) {
 			if (err) {
 				return app.alertError(err.message);
@@ -345,7 +402,7 @@ define('admin/general/dashboard', ['semver', 'Chart', 'translator'], function (s
 			graphData.traffic = data;
 
 			if (units === 'days') {
-				graphs.traffic.data.xLabels = utils.getDaysArray(until);
+				graphs.traffic.data.xLabels = utils.getDaysArray(until, amount);
 			} else {
 				graphs.traffic.data.xLabels = utils.getHoursArray();
 
@@ -364,6 +421,7 @@ define('admin/general/dashboard', ['semver', 'Chart', 'translator'], function (s
 			graphs.traffic.update();
 			currentGraph.units = units;
 			currentGraph.until = until;
+			currentGraph.amount = amount;
 		});
 	}
 
@@ -450,7 +508,7 @@ define('admin/general/dashboard', ['semver', 'Chart', 'translator'], function (s
 		}, realtime ? DEFAULTS.realtimeInterval : DEFAULTS.roomInterval);
 
 		intervals.graphs = setInterval(function () {
-			updateTrafficGraph(currentGraph.units, currentGraph.until);
+			updateTrafficGraph(currentGraph.units, currentGraph.until, currentGraph.amount);
 		}, realtime ? DEFAULTS.realtimeInterval : DEFAULTS.graphInterval);
 	}
 

public/src/utils.js

@@ -274,13 +274,13 @@
 			return labels.reverse();
 		},
 
-		getDaysArray: function (from) {
+		getDaysArray: function (from, amount) {
 			var currentDay = new Date(from || Date.now()).getTime();
 			var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 			var labels = [];
 			var tmpDate;
 
-			for (var x = 29; x >= 0; x -= 1) {
+			for (var x = (amount || 30) - 1; x >= 0; x -= 1) {
 				tmpDate = new Date(currentDay - (1000 * 60 * 60 * 24 * x));
 				labels.push(months[tmpDate.getMonth()] + ' ' + tmpDate.getDate());
 			}

src/socket.io/admin.js

@@ -211,11 +211,13 @@ SocketAdmin.analytics.get = function (socket, data, callback) {
 	}
 
 	// Default returns views from past 24 hours, by hour
+	if (!data.amount) {
 		if (data.units === 'days') {
 			data.amount = 30;
 		} else {
 			data.amount = 24;
 		}
+	}
 
 	if (data.graph === 'traffic') {
 		async.parallel({

src/views/admin/general/dashboard.tpl

@@ -11,18 +11,24 @@
 					<canvas id="analytics-traffic" width="100%" height="400"></canvas>
 				</div>
 				<hr/>
-				<div class="text-center pull-left pageview-stats">
+				<div class="row">
-					<div><strong id="pageViewsLastMonth"></strong></div>
+					<div class="col-sm-3 hidden-xs text-center pageview-stats">
+						<div><strong id="pageViewsLastMonth">0</strong></div>
 						<div><a href="#" class="updatePageviewsGraph" data-action="updateGraph" data-units="days" data-until="last-month">[[admin/general/dashboard:page-views-last-month]]</a></div>
 					</div>
-				<div class="text-center pull-left pageview-stats">
+					<div class="col-sm-3 text-center pageview-stats">
-					<div><strong id="pageViewsThisMonth"></strong></div>
+						<div><strong id="pageViewsThisMonth">0</strong></div>
 						<div><a href="#" class="updatePageviewsGraph" data-action="updateGraph" data-units="days">[[admin/general/dashboard:page-views-this-month]]</a></div>
 					</div>
-				<div class="text-center pull-left pageview-stats">
+					<div class="col-sm-3 hidden-xs text-center pageview-stats">
-					<div><strong id="pageViewsPastDay"></strong></div>
+						<div><strong id="pageViewsPastDay">0</strong></div>
 						<div><a href="#" class="updatePageviewsGraph active" data-action="updateGraph" data-units="hours">[[admin/general/dashboard:page-views-last-day]]</a></div>
 					</div>
+					<div class="col-sm-3 text-center pageview-stats">
+						<div><strong><i class="fa fa-clock-o"></i></strong></div>
+						<div><a href="#" class="updatePageviewsGraph" data-action="updateGraph" data-units="custom">[[admin/general/dashboard:page-views-custom]]</a></div>
+					</div>
+				</div>
 			</div>
 		</div>
 

src/views/admin/partials/pageviews-range-select.tpl

@@ -0,0 +1,20 @@
+<form role="form">
+	<fieldset>
+		<div class="alert alert-danger hidden">[[admin/general/dashboard:page-views-custom-error]]</div>
+		<div class="row">
+			<div class="col-xs-6">
+				<div class="form-group">
+					<label for="startRange">[[admin/general/dashboard:page-views-custom-start]]</label>
+					<input class="form-control" type="date" id="startRange" name="startRange" />
+				</div>
+			</div>
+			<div class="col-xs-6">
+				<div class="form-group">
+					<label for="endRange">[[admin/general/dashboard:page-views-custom-end]]</label>
+					<input class="form-control" type="date" id="endRange" name="endRange" />
+				</div>
+			</div>
+		</div>
+		<p class="help-block">[[admin/general/dashboard:page-views-custom-help]]</p>
+	</fieldset>
+</form>