refactor: use esm only import used chart types/plugins

NodeBB · Oct 1, 2023 · 56b3167 · 56b3167
1 parent 1bb98ba
commit 56b3167
Show file tree

Hide file tree

Showing 7 changed files with 1,346 additions and 1,287 deletions.
diff --git a/public/src/admin/advanced/errors.js b/public/src/admin/advanced/errors.js
@@ -1,116 +1,121 @@
-'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';
 
-define('admin/advanced/errors', [
-	'bootbox', 'alerts', 'chart.js/auto',
-], function (bootbox, alerts, { Chart }) {
-	const Errors = {};
+Chart.register(
+	LineController,
+	CategoryScale,
+	LinearScale,
+	LineElement,
+	PointElement,
+	Tooltip,
+	Filler
+);
 
-	Errors.init = function () {
-		Errors.setupCharts();
 
-		$('[data-action="clear"]').on('click', Errors.clear404);
-	};
+// eslint-disable-next-line import/prefer-default-export
+export function init() {
+	setupCharts();
 
-	Errors.clear404 = function () {
-		bootbox.confirm('[[admin/advanced/errors:clear404-confirm]]', function (ok) {
-			if (ok) {
-				socket.emit('admin.errors.clear', {}, function (err) {
-					if (err) {
-						return alerts.error(err);
-					}
+	$('[data-action="clear"]').on('click', clear404);
+}
 
-					ajaxify.refresh();
-					alerts.success('[[admin/advanced/errors:clear404-success]]');
-				});
-			}
-		});
-	};
+function clear404() {
+	bootbox.confirm('[[admin/advanced/errors:clear404-confirm]]', function (ok) {
+		if (ok) {
+			socket.emit('admin.errors.clear', {}, function (err) {
+				if (err) {
+					return alerts.error(err);
+				}
 
-	Errors.setupCharts = function () {
-		const notFoundCanvas = document.getElementById('not-found');
-		const tooBusyCanvas = document.getElementById('toobusy');
-		let dailyLabels = utils.getDaysArray();
+				ajaxify.refresh();
+				alerts.success('[[admin/advanced/errors:clear404-success]]');
+			});
+		}
+	});
+}
 
-		dailyLabels = dailyLabels.slice(-7);
+function setupCharts() {
+	const notFoundCanvas = document.getElementById('not-found');
+	const tooBusyCanvas = document.getElementById('toobusy');
+	let dailyLabels = utils.getDaysArray();
 
-		if (utils.isMobile()) {
-			Chart.defaults.plugins.tooltip.enabled = false;
-		}
+	dailyLabels = dailyLabels.slice(-7);
 
-		const data = {
-			'not-found': {
-				labels: dailyLabels,
-				datasets: [
-					{
-						label: '',
-						fill: 'origin',
-						tension: 0.25,
-						backgroundColor: 'rgba(186,139,175,0.2)',
-						borderColor: 'rgba(186,139,175,1)',
-						pointBackgroundColor: 'rgba(186,139,175,1)',
-						pointHoverBackgroundColor: '#fff',
-						pointBorderColor: '#fff',
-						pointHoverBorderColor: 'rgba(186,139,175,1)',
-						data: ajaxify.data.analytics['not-found'],
-					},
-				],
-			},
-			toobusy: {
-				labels: dailyLabels,
-				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)',
-						pointHoverBackgroundColor: '#fff',
-						pointBorderColor: '#fff',
-						pointHoverBorderColor: 'rgba(151,187,205,1)',
-						data: ajaxify.data.analytics.toobusy,
-					},
-				],
-			},
-		};
+	if (utils.isMobile()) {
+		Chart.defaults.plugins.tooltip.enabled = false;
+	}
 
-		new Chart(notFoundCanvas.getContext('2d'), {
-			type: 'line',
-			data: data['not-found'],
-			options: {
-				responsive: true,
-				plugins: {
-					legend: {
-						display: false,
-					},
+	const data = {
+		'not-found': {
+			labels: dailyLabels,
+			datasets: [
+				{
+					label: '',
+					fill: 'origin',
+					tension: 0.25,
+					backgroundColor: 'rgba(186,139,175,0.2)',
+					borderColor: 'rgba(186,139,175,1)',
+					pointBackgroundColor: 'rgba(186,139,175,1)',
+					pointHoverBackgroundColor: '#fff',
+					pointBorderColor: '#fff',
+					pointHoverBorderColor: 'rgba(186,139,175,1)',
+					data: ajaxify.data.analytics['not-found'],
 				},
-				scales: {
-					y: {
-						beginAtZero: true,
-					},
+			],
+		},
+		toobusy: {
+			labels: dailyLabels,
+			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)',
+					pointHoverBackgroundColor: '#fff',
+					pointBorderColor: '#fff',
+					pointHoverBorderColor: 'rgba(151,187,205,1)',
+					data: ajaxify.data.analytics.toobusy,
 				},
-			},
-		});
+			],
+		},
+	};
 
-		new Chart(tooBusyCanvas.getContext('2d'), {
-			type: 'line',
-			data: data.toobusy,
-			options: {
-				responsive: true,
-				plugins: {
-					legend: {
-						display: false,
-					},
-				},
-				scales: {
-					y: {
-						beginAtZero: true,
-					},
+	new Chart(notFoundCanvas.getContext('2d'), {
+		type: 'line',
+		data: data['not-found'],
+		options: {
+			responsive: true,
+			scales: {
+				y: {
+					beginAtZero: true,
 				},
 			},
-		});
-	};
+		},
+	});
 
-	return Errors;
-});
+	new Chart(tooBusyCanvas.getContext('2d'), {
+		type: 'line',
+		data: data.toobusy,
+		options: {
+			responsive: true,
+			scales: {
+				y: {
+					beginAtZero: true,
+				},
+			},
+		},
+	});
+}