From 0e00f9d471f32391d5836f2bf1f689abaa26d92b Mon Sep 17 00:00:00 2001
From: simon <mail@simon-lang.de>
Date: Mon, 24 Jun 2024 02:04:43 +0200
Subject: [PATCH] hide linechart points when zoomed out

---
 public/elotracker/chart-integration.js | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/public/elotracker/chart-integration.js b/public/elotracker/chart-integration.js
index b317d68..1615a21 100644
--- a/public/elotracker/chart-integration.js
+++ b/public/elotracker/chart-integration.js
@@ -21,6 +21,25 @@ const zoom_plugin = {
 			enabled: true,
 		},
 		mode: "x",
+		onZoomComplete: function({chart}) {
+			const show_point_cutoff = 1000 * 60 * 60 * 24 * 3
+			const diff = parseInt(chart.scales.x.max) - parseInt(chart.scales.x.min);
+			const show_points = diff < show_point_cutoff;
+			const hide_points = diff >= show_point_cutoff;
+			let update_chart = false;
+			chart.data.datasets.forEach(dataset => {
+				const points_shown = dataset.pointRadius > 0
+				if (show_points && !points_shown) {
+					dataset.pointRadius = 3;
+					update_chart = true;
+				}
+				if (hide_points && points_shown) {
+					dataset.pointRadius = 0;
+					update_chart = true;
+				}
+			})
+			if (update_chart) chart.update();
+		}
 	},
 	pan: {
 		enabled: true,
@@ -35,7 +54,7 @@ const trigger_legend_hover = function (e, legendItem, legend) {
 		dataset.backgroundColor = (legendItem.datasetIndex === i || dataset.backgroundColor.length === 9) ? dataset.backgroundColor : dataset.backgroundColor + '3D';
 		dataset.borderColor = (legendItem.datasetIndex === i || dataset.borderColor.length === 9) ? dataset.borderColor : dataset.borderColor + '3D';
 		dataset.borderWidth = legendItem.datasetIndex === i ? 4 : 3;
-		dataset.pointRadius = 2;
+		dataset.pointRadius = dataset.pointRadius===0 ? 0 : 2;
 	});
 	legend.chart.update();
 }
@@ -161,6 +180,7 @@ async function create_charts() {
 					data: player_rank_values[puuid],
 					spanGaps: true,
 					pointHitRadius: 16,
+					pointRadius: 0,
 				})
 				all_progress_yDatasets.push({
 					label: `${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`,
@@ -171,6 +191,7 @@ async function create_charts() {
 					data: player_progress_values[puuid],
 					spanGaps: true,
 					pointHitRadius: 16,
+					pointRadius: 0,
 				})
 				color_counter++;
 			}
@@ -256,6 +277,7 @@ async function create_charts() {
 					borderJoinStyle: "round",
 					data: values,
 					pointHitRadius: 16,
+					pointRadius: 0,
 				}]
 			},
 			options: {