Dynamically load Chart.js bundle (#3480)

* Remove fill from some lines in charts

* Bump PostCSS version

* Dynamically load Chart.js bundle

build.js

@@ -5,20 +5,20 @@ import { promises as fs } from 'node:fs';
 import path from 'node:path';
 import postcssConfig from './postcss.config.js';
 
-const esbuildConfig = {
-	outfile: './web/js/dist/main.min.js',
-	bundle: true,
-	minify: true,
-	sourcemap: true,
-};
+// Packages to build but exclude from bundle
+const externalPackages = ['chart.js/auto'];
 
-// Build JavaScript
+// Build main bundle
 async function buildJS() {
 	const inputPath = './web/js/src/main.js';
 	try {
 		await esbuild.build({
-			...esbuildConfig,
 			entryPoints: [inputPath],
+			outfile: './web/js/dist/main.min.js',
+			bundle: true,
+			minify: true,
+			sourcemap: true,
+			external: externalPackages,
 		});
 		console.log('✅ JavaScript build completed for', inputPath);
 	} catch (error) {
@@ -27,7 +27,29 @@ async function buildJS() {
 	}
 }
 
-// Process and build CSS
+// Build external packages
+async function buildExternalJS() {
+	try {
+		const buildPromises = externalPackages.map(async (pkg) => {
+			const outputPath = `./web/js/dist/${pkg.replace('/', '-')}.min.js`;
+			await esbuild.build({
+				entryPoints: [pkg],
+				outfile: outputPath,
+				bundle: true,
+				minify: true,
+				format: 'esm',
+			});
+			console.log(`✅ Dependency build completed for ${pkg}`);
+		});
+
+		await Promise.all(buildPromises);
+	} catch (error) {
+		console.error('❌ Error building external packages:', error);
+		process.exit(1);
+	}
+}
+
+// Process a CSS file
 async function processCSS(inputFile, outputFile) {
 	try {
 		const css = await fs.readFile(inputFile);
@@ -43,7 +65,7 @@ async function processCSS(inputFile, outputFile) {
 	}
 }
 
-// Build CSS files
+// Build CSS
 async function buildCSS() {
 	const themesSourcePath = './web/css/src/themes/';
 	const cssEntries = await fs.readdir(themesSourcePath);
@@ -64,6 +86,7 @@ async function buildCSS() {
 async function build() {
 	console.log('🚀 Building JS and CSS...');
 	await buildJS();
+	await buildExternalJS();
 	await buildCSS();
 	console.log('🎉 Build completed.');
 }

package.json

@@ -20,6 +20,7 @@
 	"packageManager": "[email protected]",
 	"dependencies": {
 		"@fortawesome/fontawesome-free": "^6.4.0",
+		"chart.js": "^4.2.1",
 		"nanoid": "^4.0.2",
 		"normalize.css": "^8.0.1"
 	},
@@ -35,7 +36,7 @@
 		"husky": "^8.0.3",
 		"lint-staged": "^13.2.1",
 		"markdownlint-cli2": "^0.6.0",
-		"postcss": "^8.4.22",
+		"postcss": "^8.4.23",
 		"postcss-import": "^15.1.0",
 		"postcss-path-replace": "^1.0.4",
 		"postcss-preset-env": "^8.3.2",

web/js/pages/list_rrd.js

@@ -1,6 +1,10 @@
-document.addEventListener('DOMContentLoaded', main);
+async function loadChartJs() {
+	const module = await import('/js/dist/chart.js-auto.min.js');
+	return module.Chart;
+}
 
 async function main() {
+	const Chart = await loadChartJs();
 	const chartCanvases = document.querySelectorAll('.js-rrd-chart');
 
 	for (const chartCanvas of chartCanvases) {
@@ -29,8 +33,6 @@ async function fetchRrdData(service, period) {
 }
 
 function prepareChartData(rrdData, period) {
-	const totalDatasets = rrdData.meta.legend.length;
-
 	return {
 		labels: rrdData.data.map((_, index) => {
 			const timestamp = rrdData.meta.start + index * rrdData.meta.step;
@@ -45,10 +47,8 @@ function prepareChartData(rrdData, period) {
 				data: rrdData.data.map((dataPoint) => dataPoint[legendIndex]),
 				tension: 0.3,
 				pointStyle: false,
-				fill: legendIndex === 0 && totalDatasets > 1,
 				borderWidth: 2,
 				borderColor: lineColor,
-				backgroundColor: lineColor,
 			};
 		}),
 	};
@@ -107,3 +107,5 @@ function getChartOptions(unit) {
 function getCssVariable(variableName) {
 	return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();
 }
+
+main();

web/templates/pages/list_rrd.php

@@ -19,8 +19,6 @@
 </div>
 <!-- End toolbar -->
 
-<script defer src="/js/vendor/chart.min.js?<?= JS_LATEST_UPDATE ?>"></script>
-
 <div class="container animate__animated animate__fadeIn">
 	<div class="form-container form-container-wide">
 		<!-- Begin graph list item loop -->

yarn.lock

@@ -834,6 +834,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@kurkle/color@npm:^0.3.0":
+  version: 0.3.2
+  resolution: "@kurkle/color@npm:0.3.2"
+  checksum: 79e97b31f8f6efb28c69d373f94b0c7480226fe8ec95221f518ac998e156444a496727ce47de6d728eb5c3369288e794cba82cae34253deb0d472d3bfe080e49
+  languageName: node
+  linkType: hard
+
 "@nodelib/fs.scandir@npm:2.1.5":
   version: 2.1.5
   resolution: "@nodelib/fs.scandir@npm:2.1.5"
@@ -1629,6 +1636,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chart.js@npm:^4.2.1":
+  version: 4.2.1
+  resolution: "chart.js@npm:4.2.1"
+  dependencies:
+    "@kurkle/color": ^0.3.0
+  checksum: 7319fdfd1e29812e87bbc07737e8c9072ff659bbc09ade8dd262f83424cd7e48f89afe5220e11e002c9f236883fae3f3adb8adc16acb4682b0ddcc0b661c3af9
+  languageName: node
+  linkType: hard
+
 "chownr@npm:^2.0.0":
   version: 2.0.0
   resolution: "chownr@npm:2.0.0"
@@ -2108,9 +2124,9 @@ __metadata:
   linkType: hard
 
 "electron-to-chromium@npm:^1.4.284":
-  version: 1.4.367
-  resolution: "electron-to-chromium@npm:1.4.367"
-  checksum: 721e4958945a16ff21a63896d4e112da7b8f3fd5540a27280d5777c196fe4e1f1b51359f86c6fe83a267e81f127e4753ec9171547f094f86481a421c809473b0
+  version: 1.4.368
+  resolution: "electron-to-chromium@npm:1.4.368"
+  checksum: b8ec4128a81c86c287cb2d677504c64d50f30c3c1d6dd9700a93797c6311f9f94b1c49a3e5112f5cfb3987a9bbade0133f9ec9898dae592db981059d5c2abdbb
   languageName: node
   linkType: hard
 
@@ -2803,6 +2819,7 @@ __metadata:
     "@prettier/plugin-php": ^0.19.4
     "@typescript-eslint/eslint-plugin": ^5.59.0
     "@typescript-eslint/parser": ^5.59.0
+    chart.js: ^4.2.1
     cssnano: ^6.0.0
     esbuild: ^0.17.17
     eslint: ^8.38.0
@@ -2813,7 +2830,7 @@ __metadata:
     markdownlint-cli2: ^0.6.0
     nanoid: ^4.0.2
     normalize.css: ^8.0.1
-    postcss: ^8.4.22
+    postcss: ^8.4.23
     postcss-import: ^15.1.0
     postcss-path-replace: ^1.0.4
     postcss-preset-env: ^8.3.2
@@ -4862,14 +4879,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.1.10, postcss@npm:^8.4.21, postcss@npm:^8.4.22":
-  version: 8.4.22
-  resolution: "postcss@npm:8.4.22"
+"postcss@npm:^8.1.10, postcss@npm:^8.4.21, postcss@npm:^8.4.23":
+  version: 8.4.23
+  resolution: "postcss@npm:8.4.23"
   dependencies:
     nanoid: ^3.3.6
     picocolors: ^1.0.0
     source-map-js: ^1.0.2
-  checksum: 7473dfb7ac5b4cb03576c39d687d7fc02c826ab08af97df15b5d3970662532d44a18a0994f392a9c3658ee17c292e7a55990e586b90ca0afcc9f36df13e07029
+  checksum: 8bb9d1b2ea6e694f8987d4f18c94617971b2b8d141602725fedcc2222fdc413b776a6e1b969a25d627d7b2681ca5aabb56f59e727ef94072e1b6ac8412105a2f
   languageName: node
   linkType: hard