refactor: use esm only import used chart types/plugins

public/src/admin/advanced/errors.js

@@ -1,18 +1,36 @@
-'use strict';
+import {
+	Chart,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	LineElement,
+	PointElement,
+	Tooltip,
+	Filler,
+} from 'chart.js';
+
+import * as bootbox from 'bootbox';
+import * as alerts from '../../modules/alerts';
+
+Chart.register(
+	LineController,
+	CategoryScale,
+	LinearScale,
+	LineElement,
+	PointElement,
+	Tooltip,
+	Filler
+);
 
 
-define('admin/advanced/errors', [
-	'bootbox', 'alerts', 'chart.js/auto',
-], function (bootbox, alerts, { Chart }) {
-	const Errors = {};
+// eslint-disable-next-line import/prefer-default-export
+export function init() {
+	setupCharts();
 
-	Errors.init = function () {
-		Errors.setupCharts();
+	$('[data-action="clear"]').on('click', clear404);
+}
 
-		$('[data-action="clear"]').on('click', Errors.clear404);
-	};
-
-	Errors.clear404 = function () {
+function clear404() {
 	bootbox.confirm('[[admin/advanced/errors:clear404-confirm]]', function (ok) {
 		if (ok) {
 			socket.emit('admin.errors.clear', {}, function (err) {
@@ -25,9 +43,9 @@ define('admin/advanced/errors', [
 			});
 		}
 	});
-	};
+}
 
-	Errors.setupCharts = function () {
+function setupCharts() {
 	const notFoundCanvas = document.getElementById('not-found');
 	const tooBusyCanvas = document.getElementById('toobusy');
 	let dailyLabels = utils.getDaysArray();
@@ -80,11 +98,6 @@ define('admin/advanced/errors', [
 		data: data['not-found'],
 		options: {
 			responsive: true,
-				plugins: {
-					legend: {
-						display: false,
-					},
-				},
 			scales: {
 				y: {
 					beginAtZero: true,
@@ -98,11 +111,6 @@ define('admin/advanced/errors', [
 		data: data.toobusy,
 		options: {
 			responsive: true,
-				plugins: {
-					legend: {
-						display: false,
-					},
-				},
 			scales: {
 				y: {
 					beginAtZero: true,
@@ -110,7 +118,4 @@ define('admin/advanced/errors', [
 			},
 		},
 	});
-	};
-
-	return Errors;
-});
+}

public/src/admin/dashboard.js

@@ -1,10 +1,34 @@
-'use strict';
+import {
+	Chart,
+	LineController,
+	DoughnutController,
+	CategoryScale,
+	LinearScale,
+	LineElement,
+	PointElement,
+	ArcElement,
+	Tooltip,
+	Filler,
+} from 'chart.js';
 
+import * as Benchpress from 'benchpressjs';
+import * as bootbox from 'bootbox';
+import * as alerts from '../modules/alerts';
+import * as translator from '../modules/translator';
+import { formattedNumber } from '../modules/helpers';
+
+Chart.register(
+	LineController,
+	DoughnutController,
+	CategoryScale,
+	LinearScale,
+	LineElement,
+	PointElement,
+	ArcElement,
+	Tooltip,
+	Filler
+);
 
-define('admin/dashboard', [
-	'chart.js/auto', 'translator', 'benchpress', 'bootbox', 'alerts', 'helpers',
-], function ({ Chart }, translator, Benchpress, bootbox, alerts, helpers) {
-	const Admin = {};
 const intervals = {
 	rooms: false,
 	graphs: false,
@@ -38,7 +62,8 @@ define('admin/dashboard', [
 	usedTopicColors.length = 0;
 });
 
-	Admin.init = function () {
+// eslint-disable-next-line import/prefer-default-export
+export function init() {
 	app.enterRoom('admin');
 
 	isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
@@ -46,13 +71,13 @@ define('admin/dashboard', [
 	setupDarkModeButton();
 	setupRealtimeButton();
 	setupGraphs(function () {
-			socket.emit('admin.rooms.getAll', Admin.updateRoomUsage);
+		socket.emit('admin.rooms.getAll', updateRoomUsage);
 		initiateDashboard();
 	});
 	setupFullscreen();
-	};
+}
 
-	Admin.updateRoomUsage = function (err, data) {
+function updateRoomUsage(err, data) {
 	if (err) {
 		return alerts.error(err);
 	}
@@ -64,19 +89,19 @@ define('admin/dashboard', [
 	graphData.rooms = data;
 
 	const html = '<div class="text-center">' +
-						'<span class="fs-5">' + helpers.formattedNumber(data.onlineRegisteredCount) + '</span>' +
+					'<span class="fs-5">' + formattedNumber(data.onlineRegisteredCount) + '</span>' +
 					'<div class="stat text-nowrap text-uppercase fw-semibold text-xs text-muted">[[admin/dashboard:active-users.users]]</div>' +
 				'</div>' +
 				'<div class="text-center">' +
-						'<span class="fs-5">' + helpers.formattedNumber(data.onlineGuestCount) + '</span>' +
+					'<span class="fs-5">' + formattedNumber(data.onlineGuestCount) + '</span>' +
 					'<div class="stat text-nowrap text-uppercase fw-semibold text-xs text-muted">[[admin/dashboard:active-users.guests]]</div>' +
 				'</div>' +
 				'<div class="text-center">' +
-						'<span class="fs-5">' + helpers.formattedNumber(data.onlineRegisteredCount + data.onlineGuestCount) + '</span>' +
+					'<span class="fs-5">' + formattedNumber(data.onlineRegisteredCount + data.onlineGuestCount) + '</span>' +
 					'<div class="stat text-nowrap text-uppercase fw-semibold text-xs text-muted">[[admin/dashboard:active-users.total]]</div>' +
 				'</div>' +
 				'<div class="text-center">' +
-						'<span class="fs-5">' + helpers.formattedNumber(data.socketCount) + '</span>' +
+					'<span class="fs-5">' + formattedNumber(data.socketCount) + '</span>' +
 					'<div class="stat text-nowrap text-uppercase fw-semibold text-xs text-muted">[[admin/dashboard:active-users.connections]]</div>' +
 				'</div>';
 
@@ -85,7 +110,7 @@ define('admin/dashboard', [
 	updateTopicsGraph(data.topTenTopics);
 
 	$('#active-users').translateHtml(html);
-	};
+}
 
 const graphs = {
 	traffic: null,
@@ -94,7 +119,11 @@ define('admin/dashboard', [
 	topics: null,
 };
 
-	const topicColors = ['#bf616a', '#5B90BF', '#d08770', '#ebcb8b', '#a3be8c', '#96b5b4', '#8fa1b3', '#b48ead', '#ab7967', '#46BFBD'];
+const topicColors = [
+	'#bf616a', '#5B90BF', '#d08770', '#ebcb8b',
+	'#a3be8c', '#96b5b4', '#8fa1b3', '#b48ead',
+	'#ab7967', '#46BFBD',
+];
 
 /* eslint-disable */
 // from chartjs.org
@@ -267,12 +296,6 @@ define('admin/dashboard', [
 
 		const doughnutOpts = {
 			responsive: true,
-				maintainAspectRatio: true,
-				plugins: {
-					legend: {
-						display: false,
-					},
-				},
 		};
 		graphs.registered = new Chart(registeredCtx, {
 			type: 'doughnut',
@@ -417,9 +440,9 @@ define('admin/dashboard', [
 		} else {
 			graphs.traffic.data.xLabels = utils.getHoursArray();
 
-				$('#pageViewsThirty').html(helpers.formattedNumber(data.summary.thirty));
-				$('#pageViewsSeven').html(helpers.formattedNumber(data.summary.seven));
-				$('#pageViewsPastDay').html(helpers.formattedNumber(data.pastDay));
+			$('#pageViewsThirty').html(formattedNumber(data.summary.thirty));
+			$('#pageViewsSeven').html(formattedNumber(data.summary.seven));
+			$('#pageViewsPastDay').html(formattedNumber(data.pastDay));
 		}
 
 		graphs.traffic.data.datasets[0].data = data.pageviews;
@@ -533,7 +556,7 @@ define('admin/dashboard', [
 
 	intervals.rooms = setInterval(function () {
 		if (app.isFocused && socket.connected) {
-				socket.emit('admin.rooms.getAll', Admin.updateRoomUsage);
+			socket.emit('admin.rooms.getAll', updateRoomUsage);
 		}
 	}, realtime ? DEFAULTS.realtimeInterval : DEFAULTS.roomInterval);
 
@@ -575,6 +598,3 @@ define('admin/dashboard', [
 		});
 	}
 }
-
-	return Admin;
-});

public/src/admin/manage/category-analytics.js

@@ -1,12 +1,28 @@
-'use strict';
+import {
+	Chart,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	LineElement,
+	PointElement,
+	Tooltip,
+	Filler,
+} from 'chart.js';
 
+import * as categorySelector from '../../modules/categorySelector';
 
-define('admin/manage/category-analytics', [
-	'chart.js/auto', 'categorySelector',
-], function ({ Chart }, categorySelector) {
-	const CategoryAnalytics = {};
+Chart.register(
+	LineController,
+	CategoryScale,
+	LinearScale,
+	LineElement,
+	PointElement,
+	Tooltip,
+	Filler
+);
 
-	CategoryAnalytics.init = function () {
+// eslint-disable-next-line import/prefer-default-export
+export function init() {
 	categorySelector.init($('[component="category-selector"]'), {
 		onSelect: function (selectedCategory) {
 			ajaxify.go('admin/manage/categories/' + selectedCategory.cid + '/analytics');
@@ -101,11 +117,6 @@ define('admin/manage/category-analytics', [
 	const chartOpts = {
 		responsive: true,
 		animation: false,
-			plugins: {
-				legend: {
-					display: false,
-				},
-			},
 		scales: {
 			y: {
 				beginAtZero: true,
@@ -136,7 +147,5 @@ define('admin/manage/category-analytics', [
 		data: data['posts:daily'],
 		options: chartOpts,
 	});
-	};
+}
 
-	return CategoryAnalytics;
-});

public/src/admin/modules/dashboard-line-graph.js

@@ -1,14 +1,37 @@
-'use strict';
+import {
+	Chart,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	LineElement,
+	PointElement,
+	Tooltip,
+	Filler,
+} from 'chart.js';
 
-define('admin/modules/dashboard-line-graph', [
-	'chart.js/auto', 'translator', 'benchpress', 'api', 'hooks', 'bootbox',
-], function ({ Chart }, translator, Benchpress, api, hooks, bootbox) {
-	const Graph = {
-		_current: null,
-	};
+import * as Benchpress from 'benchpressjs';
+import * as bootbox from 'bootbox';
+import * as translator from '../../modules/translator';
+import * as api from '../../modules/api';
+import * as hooks from '../../modules/hooks';
+
+
+Chart.register(
+	LineController,
+	CategoryScale,
+	LinearScale,
+	LineElement,
+	PointElement,
+	Tooltip,
+	Filler
+);
+
+
+let _current = null;
 let isMobile = false;
 
-	Graph.init = ({ set, dataset }) => {
+// eslint-disable-next-line import/prefer-default-export
+export function init({ set, dataset }) {
 	const canvas = document.getElementById('analytics-traffic');
 	const canvasCtx = canvas.getContext('2d');
 	const trafficLabels = utils.getHoursArray();
@@ -18,7 +41,7 @@ define('admin/modules/dashboard-line-graph', [
 		Chart.defaults.plugins.tooltip.enabled = false;
 	}
 
-		Graph.handleUpdateControls({ set });
+	handleUpdateControls({ set });
 
 	const t = translator.Translator.create();
 	return new Promise((resolve) => {
@@ -45,7 +68,7 @@ define('admin/modules/dashboard-line-graph', [
 
 			data.datasets[0].yAxisID = 'left-y-axis';
 
-				Graph._current = new Chart(canvasCtx, {
+			_current = new Chart(canvasCtx, {
 				type: 'line',
 				data: data,
 				options: {
@@ -69,15 +92,15 @@ define('admin/modules/dashboard-line-graph', [
 			});
 
 			if (!dataset) {
-					Graph.update(set).then(resolve);
+				update(set).then(resolve);
 			} else {
-					resolve(Graph._current);
+				resolve(_current);
 			}
 		});
 	});
-	};
+}
 
-	Graph.handleUpdateControls = ({ set }) => {
+function handleUpdateControls({ set }) {
 	$('[data-action="updateGraph"]:not([data-units="custom"])').on('click', function () {
 		let until = new Date();
 		const amount = $(this).attr('data-amount');
@@ -85,7 +108,7 @@ define('admin/modules/dashboard-line-graph', [
 			until.setHours(0, 0, 0, 0);
 		}
 		until = until.getTime();
-			Graph.update(set, $(this).attr('data-units'), until, amount);
+		update(set, $(this).attr('data-units'), until, amount);
 
 		require(['translator'], function (translator) {
 			translator.translate('[[admin/dashboard:page-views-custom]]', function (translated) {
@@ -126,7 +149,7 @@ define('admin/modules/dashboard-line-graph', [
 				// Input validation
 				if (!formData.startRange && !formData.endRange) {
 					// No range? Assume last 30 days
-						Graph.update(set, 'days');
+					update(set, 'days');
 					return;
 				} else if (!validRegexp.test(formData.startRange) || !validRegexp.test(formData.endRange)) {
 					// Invalid Input
@@ -139,7 +162,7 @@ define('admin/modules/dashboard-line-graph', [
 				until = until.getTime();
 				const amount = (until - new Date(formData.startRange).getTime()) / (1000 * 60 * 60 * 24);
 
-					Graph.update(set, 'days', until, amount);
+				update(set, 'days', until, amount);
 
 				// Update "custom range" label
 				targetEl.attr('data-startRange', formData.startRange);
@@ -148,29 +171,29 @@ define('admin/modules/dashboard-line-graph', [
 			}
 		});
 	});
-	};
+}
 
-	Graph.update = (
+function update(
 	set,
 	units = ajaxify.data.query.units || 'hours',
 	until = ajaxify.data.query.until,
 	amount = ajaxify.data.query.count
-	) => {
-		if (!Graph._current) {
+) {
+	if (!_current) {
 		return Promise.reject(new Error('[[error:invalid-data]]'));
 	}
 
 	return new Promise((resolve) => {
 		api.get(`/admin/analytics/${set}`, { units, until, amount }).then((dataset) => {
 			if (units === 'days') {
-					Graph._current.data.xLabels = utils.getDaysArray(until, amount);
+				_current.data.xLabels = utils.getDaysArray(until, amount);
 			} else {
-					Graph._current.data.xLabels = utils.getHoursArray();
+				_current.data.xLabels = utils.getHoursArray();
 			}
 
-				Graph._current.data.datasets[0].data = dataset;
-				Graph._current.data.labels = Graph._current.data.xLabels;
-				Graph._current.update();
+			_current.data.datasets[0].data = dataset;
+			_current.data.labels = _current.data.xLabels;
+			_current.update();
 
 			// Update address bar and "View as JSON" button url
 			const apiEl = $('#view-as-json');
@@ -183,12 +206,10 @@ define('admin/modules/dashboard-line-graph', [
 			const url = ajaxify.removeRelativePath(ajaxify.data.url.slice(1));
 			ajaxify.updateHistory(`${url}?${newHref}`, true);
 			hooks.fire('action:admin.dashboard.updateGraph', {
-					graph: Graph._current,
+				graph: _current,
 			});
-				resolve(Graph._current);
+			resolve(_current);
 		});
 	});
-	};
+}
 
-	return Graph;
-});

public/src/client/flags/list.js

@@ -1,15 +1,23 @@
-'use strict';
+import {
+	Chart,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	LineElement,
+	PointElement,
+	Tooltip,
+	Filler,
+} from 'chart.js';
+
+import * as categoryFilter from '../../modules/categoryFilter';
+import * as userFilter from '../../modules/userFilter';
+import * as autocomplete from '../../modules/autocomplete';
+import * as api from '../../modules/api';
+import * as alerts from '../../modules/alerts';
+import * as components from '../../modules/components';
+
+Chart.register(LineController, CategoryScale, LinearScale, LineElement, PointElement, Tooltip, Filler);
 
-define('forum/flags/list', [
-	'components', 'chart.js/auto', 'categoryFilter',
-	'autocomplete', 'api', 'alerts',
-	'userFilter',
-], function (
-	components, { Chart }, categoryFilter,
-	autocomplete, api, alerts,
-	userFilter
-) {
-	const Flags = {};
 const selected = new Map([
 	['cids', []],
 	['assignee', []],
@@ -17,10 +25,10 @@ define('forum/flags/list', [
 	['reporterId', []],
 ]);
 
-	Flags.init = function () {
-		Flags.enableFilterForm();
-		Flags.enableCheckboxes();
-		Flags.handleBulkActions();
+export function init() {
+	enableFilterForm();
+	enableCheckboxes();
+	handleBulkActions();
 
 	if (ajaxify.data.filters.hasOwnProperty('cid')) {
 		selected.set('cids', Array.isArray(ajaxify.data.filters.cid) ?
@@ -65,15 +73,15 @@ define('forum/flags/list', [
 		});
 
 	$('#flags-daily-wrapper').one('shown.bs.collapse', function () {
-			Flags.handleGraphs();
+		handleGraphs();
 	});
 
 	autocomplete.user($('#filter-assignee, #filter-targetUid, #filter-reporterId'), (ev, ui) => {
 		setTimeout(() => { ev.target.value = ui.item.user.uid; });
 	});
-	};
+}
 
-	Flags.enableFilterForm = function () {
+export function enableFilterForm() {
 	const $filtersEl = components.get('flags/filters');
 	if ($filtersEl && $filtersEl.get(0).nodeName !== 'FORM') {
 		// Harmony; update hidden form and submit on change
@@ -115,7 +123,7 @@ define('forum/flags/list', [
 			ev.target.firstChild.textContent = textVariant;
 		});
 	}
-	};
+}
 
 function applyFilters() {
 	let formEl = components.get('flags/filters').get(0);
@@ -146,7 +154,7 @@ define('forum/flags/list', [
 	ajaxify.go('flags?' + (length ? qs : 'reset=1'));
 }
 
-	Flags.enableCheckboxes = function () {
+export function enableCheckboxes() {
 	const flagsList = document.querySelector('[component="flags/list"]');
 	const checkboxes = flagsList.querySelectorAll('[data-flag-id] input[type="checkbox"]');
 	const bulkEl = document.querySelector('[component="flags/bulk-actions"] button');
@@ -198,14 +206,14 @@ define('forum/flags/list', [
 			e.stopImmediatePropagation();
 		}
 	});
-	};
+}
 
-	Flags.handleBulkActions = function () {
+export function handleBulkActions() {
 	document.querySelector('[component="flags/bulk-actions"]').addEventListener('click', function (e) {
 		const subselector = e.target.closest('[data-action]');
 		if (subselector) {
 			const action = subselector.getAttribute('data-action');
-				const flagIds = Flags.getSelected();
+			const flagIds = getSelected();
 			const promises = flagIds.map((flagId) => {
 				const data = {};
 				if (action === 'bulk-assign') {
@@ -234,9 +242,9 @@ define('forum/flags/list', [
 			});
 		}
 	});
-	};
+}
 
-	Flags.getSelected = function () {
+export function getSelected() {
 	const checkboxes = document.querySelectorAll('[component="flags/list"] [data-flag-id] input[type="checkbox"]');
 	const payload = [];
 	checkboxes.forEach(function (el) {
@@ -246,9 +254,9 @@ define('forum/flags/list', [
 	});
 
 	return payload;
-	};
+}
 
-	Flags.handleGraphs = function () {
+export function handleGraphs() {
 	const dailyCanvas = document.getElementById('flags:daily');
 	const dailyLabels = utils.getDaysArray().map(function (text, idx) {
 		return idx % 3 ? '' : text;
@@ -282,11 +290,6 @@ define('forum/flags/list', [
 		options: {
 			responsive: true,
 			animation: false,
-				plugins: {
-					legend: {
-						display: false,
-					},
-				},
 			scales: {
 				y: {
 					beginAtZero: true,
@@ -294,7 +297,5 @@ define('forum/flags/list', [
 			},
 		},
 	});
-	};
+}
 
-	return Flags;
-});

public/src/client/ip-blacklist.js

@@ -1,11 +1,21 @@
-'use strict';
+import {
+	Chart,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	LineElement,
+	PointElement,
+	Tooltip,
+	Filler,
+} from 'chart.js';
 
-define('forum/ip-blacklist', [
-	'chart.js/auto', 'benchpress', 'bootbox', 'alerts',
-], function ({ Chart }, Benchpress, bootbox, alerts) {
-	const Blacklist = {};
+import * as Benchpress from 'benchpressjs';
+import * as bootbox from 'bootbox';
+import * as alerts from '../modules/alerts';
 
-	Blacklist.init = function () {
+Chart.register(LineController, CategoryScale, LinearScale, LineElement, PointElement, Tooltip, Filler);
+
+export function init() {
 	const blacklist = $('#blacklist-rules');
 
 	blacklist.on('keyup', function () {
@@ -39,10 +49,10 @@ define('forum/ip-blacklist', [
 		});
 	});
 
-		Blacklist.setupAnalytics();
-	};
+	setupAnalytics();
+}
 
-	Blacklist.setupAnalytics = function () {
+export function setupAnalytics() {
 	const hourlyCanvas = document.getElementById('blacklist:hourly');
 	const dailyCanvas = document.getElementById('blacklist:daily');
 	const hourlyLabels = utils.getHoursArray().map(function (text, idx) {
@@ -79,6 +89,8 @@ define('forum/ip-blacklist', [
 			datasets: [
 				{
 					label: '',
+					fill: 'origin',
+					tension: 0.25,
 					backgroundColor: 'rgba(151,187,205,0.2)',
 					borderColor: 'rgba(151,187,205,1)',
 					pointBackgroundColor: 'rgba(151,187,205,1)',
@@ -93,12 +105,6 @@ define('forum/ip-blacklist', [
 
 	const chartOpts = {
 		responsive: true,
-			maintainAspectRatio: true,
-			plugins: {
-				legend: {
-					display: false,
-				},
-			},
 		scales: {
 			y: {
 				position: 'left',
@@ -108,7 +114,6 @@ define('forum/ip-blacklist', [
 		},
 	};
 
-
 	new Chart(hourlyCanvas.getContext('2d'), {
 		type: 'line',
 		data: data['blacklist:hourly'],
@@ -120,7 +125,5 @@ define('forum/ip-blacklist', [
 		data: data['blacklist:daily'],
 		options: chartOpts,
 	});
-	};
+}
 
-	return Blacklist;
-});

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

@@ -10,7 +10,7 @@
 		</div>
 	</div>
 	<div class="card-body">
-		<div class="graph-container position-relative" id="analytics-traffic-container" style="aspect-ratio: 16/9;">
+		<div class="graph-container position-relative" id="analytics-traffic-container" style="aspect-ratio: 2;">
 			<canvas id="analytics-traffic" ></canvas>
 		</div>
 		<hr/>