added limit to zooming

public/elotracker/chart-integration.js

@@ -110,6 +110,9 @@ async function create_charts() {
 			let all_rank_yDatasets = []; // Datasets, also die einzelnen Linien im Graphen, beinhaltet player_rank_values
 			let all_progress_yDatasets = []; // Datasets, also die einzelnen Linien im Graphen, beinhaltet player_progress_values
 
+			let minval = -1;
+			let maxval = -1;
+
 			let color_counter = 0;
 			for (const puuid in player_entries) {
 				player_rank_values[puuid] = [];
@@ -121,17 +124,24 @@ async function create_charts() {
 					// Für alle Player Entries Punktzahl und Punktedifferenz berechnen
 					// Bei der Gelegenheit auch Entries in player_entries_byName eintragen
 					const current_points = rank_to_points(player_entries[puuid][timestamp]["tier"], player_entries[puuid][timestamp]["rank"], player_entries[puuid][timestamp]["points"]);
-					player_rank_values[puuid].push({x: parseInt(timestamp) * 1000, y: current_points});
+					const adj_timestamp = parseInt(timestamp) * 1000;
+					player_rank_values[puuid].push({x: adj_timestamp, y: current_points});
 					player_entries_byName[`${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`][timestamp] = player_entries[puuid][timestamp];
 					if (player_start_points === -1) {
 						player_start_points = current_points;
-						player_progress_values[puuid].push({x: parseInt(timestamp) * 1000, y: 0});
+						player_progress_values[puuid].push({x: adj_timestamp, y: 0});
 					} else {
 						player_progress_values[puuid].push({
-							x: parseInt(timestamp) * 1000,
+							x: adj_timestamp,
 							y: current_points - player_start_points
 						});
 					}
+					if (minval === -1 || adj_timestamp < minval) {
+						minval = adj_timestamp;
+					}
+					if (maxval === -1 || adj_timestamp > maxval) {
+						maxval = adj_timestamp;
+					}
 				}
 				// Linie für den Spieler zu Datasets des Graphen hinzufügen
 				all_rank_yDatasets.push({
@@ -165,7 +175,7 @@ async function create_charts() {
 				options: {
 					plugins: {
 						tooltip: tooltip_plugin,
-						zoom: zoom_plugin,
+						zoom: {...zoom_plugin},
 						legend: legend_plugin,
 					},
 					scales: {
@@ -192,7 +202,7 @@ async function create_charts() {
 				options: {
 					plugins: {
 						tooltip: tooltip_plugin,
-						zoom: zoom_plugin,
+						zoom: {...zoom_plugin},
 						legend: legend_plugin,
 					},
 					scales: {
@@ -205,6 +215,13 @@ async function create_charts() {
 					maintainAspectRatio: false,
 				}
 			}));
+			minval -= 7200000;
+			maxval += 7200000;
+			combined_charts.forEach(combined_chart => {
+				combined_chart.options.plugins.zoom.limits = {
+					x: {min: minval, max: maxval},
+				}
+			})
 		})
 		.catch(e => console.error(e))
 
@@ -214,11 +231,13 @@ async function create_charts() {
 		puuid.splice(0, 2);
 		puuid = puuid.join("-");
 		let values = [];
+		let minval = Object.keys(player_entries[puuid])[0] * 1000 - 7200000;
+		let maxval = Object.keys(player_entries[puuid])[Object.keys(player_entries[puuid]).length - 1] * 1000 + 7200000;
 		for (const entriesKey in player_entries[puuid]) {
 			let points = rank_to_points(player_entries[puuid][entriesKey]["tier"], player_entries[puuid][entriesKey]["rank"], player_entries[puuid][entriesKey]["points"]);
 			values.push({x: parseInt(entriesKey) * 1000, y: points});
 		}
-		player_charts.push(new Chart(`progress-chart-${puuid}`, {
+		const player_chart = new Chart(`progress-chart-${puuid}`, {
 			type: "line",
 			data: {
 				datasets: [{
@@ -235,7 +254,7 @@ async function create_charts() {
 				plugins: {
 					legend: {display: false},
 					tooltip: tooltip_plugin,
-					zoom: zoom_plugin,
+					zoom: {...zoom_plugin},
 				},
 				scales: {
 					x: x_scale,
@@ -252,7 +271,11 @@ async function create_charts() {
 				responsive: true,
 				maintainAspectRatio: false,
 			}
-		}));
+		});
+		player_chart.options.plugins.zoom.limits = {
+			x: {min: minval, max: maxval},
+		}
+		player_charts.push(player_chart);
 	}
 }