hide linechart points when zoomed out

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: {