Fix chart resize regression due to chart.js v4 update (#8298)

* Fix chart resize regression due to chart.js v4 update

* Update to chart.js v4.5.1 + add .map file for easier debugging

https://github.com/chartjs/Chart.js/releases/tag/v4.5.1

* Delete .map file

1 files changed, 30 insertions, 0 deletions

diff --git a/p/scripts/statsWithChartjs.js b/p/scripts/statsWithChartjs.js
index 3398ee89c..7282f7f9b 100644
--- a/p/scripts/statsWithChartjs.js
+++ b/p/scripts/statsWithChartjs.js
@@ -36,6 +36,36 @@ function initCharts() {
 		/* eslint-enable no-new */
 	}
 
+	// Force resize after clicking enlarge button (needed since chart.js v4)
+	for (const id in Chart.instances) {
+		const instance = Chart.instances[id];
+		const boxTitle = instance.canvas.parentElement.previousElementSibling;
+		const enlargeBtns = boxTitle.querySelectorAll('a.btn');
+
+		function forceResize() {
+			function waitHash() {
+				requestAnimationFrame(() => instance.resize());
+				window.removeEventListener('hashchange', waitHash);
+			}
+			instance.resize(); // try early resize
+			window.addEventListener('hashchange', waitHash);
+		}
+		for (const btn of enlargeBtns) {
+			btn.addEventListener('click', forceResize);
+		}
+	}
+
+	window.addEventListener('resize', () => {
+		for (const id in Chart.instances) {
+			const instance = Chart.instances[id];
+
+			// Workaround for a chart.js bug which makes the canvas blurry if
+			// page was loaded with very low zoom level and later zoomed in
+			instance.update();
+			instance.resize();
+		}
+	});
+
 	if (window.console) {
 		console.log('Chart.js finished');
 	}