fix: fullscreen acp graphs

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

@@ -11,7 +11,7 @@
 	"page-views-seven": "Last 7 Days",
 	"page-views-thirty": "Last 30 Days",
 	"page-views-last-day": "Last 24 hours",
-	"page-views-custom": "Custom Date Range",
+	"page-views-custom": "Custom 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>",

public/scss/admin/general/dashboard.scss

@@ -1,3 +1,6 @@
+.template-admin-dashboard .graph-container {
+	min-height: 300px;
+}
 .dashboard {
 	.card {
 		max-width: 100% !important;
@@ -12,7 +15,8 @@
 		}
 
 		&.fullscreen {
-			width: 100%;
+			width: 100%!important;
+			height: 100%!important;
 			padding: 40px;
 		}
 	}

public/src/admin/dashboard.js

@@ -18,6 +18,8 @@ import * as alerts from '../modules/alerts';
 import * as translator from '../modules/translator';
 import { formattedNumber } from '../modules/helpers';
 
+import { setupFullscreen } from './modules/fullscreen';
+
 Chart.register(
 	LineController,
 	DoughnutController,
@@ -75,7 +77,7 @@ export function init() {
 		socket.emit('admin.rooms.getAll', updateRoomUsage);
 		initiateDashboard();
 	});
-	setupFullscreen();
+	setupFullscreen($('#expand-analytics'), $('#analytics-panel'));
 }
 
 function updateRoomUsage(err, data) {
@@ -579,36 +581,3 @@ function initiateDashboard(realtime) {
 	}, realtime ? DEFAULTS.realtimeInterval : DEFAULTS.graphInterval);
 }
 
-function setupFullscreen() {
-	const container = document.getElementById('analytics-panel');
-	const $container = $(container);
-	const btn = $container.find('#expand-analytics');
-	let fsMethod;
-	let 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.on('click', function () {
-			if ($container.hasClass('fullscreen')) {
-				document[exitMethod]();
-				$container.removeClass('fullscreen');
-			} else {
-				container[fsMethod]();
-				$container.addClass('fullscreen');
-			}
-		});
-	}
-}

public/src/admin/dashboard/logins.js

@@ -1,6 +1,6 @@
 'use strict';
 
-define('admin/dashboard/logins', ['admin/modules/dashboard-line-graph'], (graph) => {
+define('admin/dashboard/logins', ['admin/modules/dashboard-line-graph', 'admin/modules/fullscreen'], (graph, { setupFullscreen }) => {
 	const ACP = {};
 
 	ACP.init = () => {
@@ -8,6 +8,7 @@ define('admin/dashboard/logins', ['admin/modules/dashboard-line-graph'], (graph)
 			set: 'logins',
 			dataset: ajaxify.data.dataset,
 		});
+		setupFullscreen($('#expand-analytics'), $('#analytics-panel'));
 	};
 
 	return ACP;

public/src/admin/dashboard/topics.js

@@ -1,6 +1,8 @@
 'use strict';
 
-define('admin/dashboard/topics', ['admin/modules/dashboard-line-graph', 'hooks'], (graph, hooks) => {
+define('admin/dashboard/topics', [
+	'admin/modules/dashboard-line-graph', 'hooks', 'admin/modules/fullscreen'
+], (graph, hooks, { setupFullscreen }) => {
 	const ACP = {};
 
 	ACP.init = () => {
@@ -10,6 +12,7 @@ define('admin/dashboard/topics', ['admin/modules/dashboard-line-graph', 'hooks']
 		}).then(() => {
 			hooks.onPage('action:admin.dashboard.updateGraph', ACP.updateTable);
 		});
+		setupFullscreen($('#expand-analytics'), $('#analytics-panel'));
 	};
 
 	ACP.updateTable = () => {

public/src/admin/dashboard/users.js

@@ -1,6 +1,8 @@
 'use strict';
 
-define('admin/dashboard/users', ['admin/modules/dashboard-line-graph', 'hooks'], (graph, hooks) => {
+define('admin/dashboard/users', [
+	'admin/modules/dashboard-line-graph', 'hooks', 'admin/modules/fullscreen',
+], (graph, hooks, { setupFullscreen }) => {
 	const ACP = {};
 
 	ACP.init = () => {
@@ -10,6 +12,7 @@ define('admin/dashboard/users', ['admin/modules/dashboard-line-graph', 'hooks'],
 		}).then(() => {
 			hooks.onPage('action:admin.dashboard.updateGraph', ACP.updateTable);
 		});
+		setupFullscreen($('#expand-analytics'), $('#analytics-panel'));
 	};
 
 	ACP.updateTable = () => {

public/src/admin/modules/fullscreen.js

@@ -0,0 +1,30 @@
+export function setupFullscreen($btn, $container) {
+	let fsMethod;
+	let exitMethod;
+	const container = $container.get(0);
+	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.on('click', function () {
+			if ($container.hasClass('fullscreen')) {
+				document[exitMethod]().catch(err => console.error(err));
+				$container.removeClass('fullscreen');
+			} else {
+				container[fsMethod]().catch(err => console.error(err));
+				$container.addClass('fullscreen');
+			}
+		});
+	}
+}

src/views/admin/partials/dashboard/graph.tpl

@@ -4,20 +4,20 @@
 			{graphTitle}
 
 			<div class="d-flex gap-1 align-items-center">
+				<a class="btn btn-sm btn-light lh-sm" target="_blank" id="view-as-json" href="{config.relative_path}/api/v3/admin/analytics/{set}?type=hourly" data-bs-toggle="tooltip" data-bs-placement="bottom" title="[[admin/dashboard:view-as-json]]"><i class="fa fa-fw fa-xs fa-terminal text-primary"></i></a>
+				<a class="btn btn-sm btn-light lh-sm" id="expand-analytics" href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="[[admin/dashboard:expand-analytics]]"><i class="fa fa-fw fa-xs fa-expand text-primary"></i></a>
 				<select data-action="updateGraph" class="form-select form-select-sm">
 					<option value="1">[[admin/dashboard:page-views-last-day]]</option>
 					<option value="7">[[admin/dashboard:page-views-seven]]</option>
 					<option value="30">[[admin/dashboard:page-views-thirty]]</option>
 					<option value="custom">[[admin/dashboard:page-views-custom]]</option>
-					<option value="range" class="hidden">[[admin/dashboard:page-views-custom]]</option>
+					<option value="range" class="hidden"></option>
 				</select>
-				<a class="btn btn-sm btn-light lh-sm" target="_blank" id="view-as-json" href="{config.relative_path}/api/v3/admin/analytics/{set}?type=hourly" data-bs-toggle="tooltip" data-bs-placement="bottom" title="[[admin/dashboard:view-as-json]]"><i class="fa fa-fw fa-xs fa-terminal text-primary"></i></a>
-				<a class="btn btn-sm btn-light lh-sm" id="expand-analytics" href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="[[admin/dashboard:expand-analytics]]"><i class="fa fa-fw fa-xs fa-expand text-primary"></i></a>
 			</div>
 		</div>
 	</div>
 	<div class="card-body p-0">
-		<div class="graph-container position-relative" id="analytics-traffic-container" style="width: 100%; {{{ if template.admin/dashboard }}}min-height: 300px;{{{ end }}}">
+		<div class="graph-container position-relative {template.name}" id="analytics-traffic-container" style="width: 100%;">
 			<canvas id="analytics-traffic"></canvas>
 		</div>
 	</div>