public/elotracker/chart-integration.js

@@ -1,9 +1,7 @@
 window.onload = async function(){
 	let all_dates = []; // Alle Daten für die für min. einen Spieler ein Rang gespeichert ist
-	let all_rank_yDatasets = []; // Datasets, also die einzelnen Linien im Graphen, beinhaltet player_points
+	let all_yDatasets = []; // Datasets, also die einzelnen Linien im Graphen, beinhaltet player_points
-	let all_progress_yDatasets = []; // Datasets, also die einzelnen Linien im Graphen, beinhaltet die Differenz der aktuellen player_points und der start player_points
 	let player_points = {}; // puuid zeigt auf eine Liste von Punkten, welche die y-Koordinaten im Graphen darstellen
-	let player_pointprogress = {}; // puuid zeigt auf eine Liste von Punkten, welche die y-Koordinaten im Graphen darstellen
 	let player_entries = {}; // puuid zeigt auf player entries
 	let player_entries_byName = {}; // playername zeigt auf entries (damit im kombinierten Graphen die Tooltips korrekt gerendert werden können)
 	let player_accounts = {}; // puuid zeigt auf player account
@@ -22,7 +20,6 @@ window.onload = async function(){
 				}
 				// Hier schonmal puuids/namen auf leere Arrays setzen, damit später einfach .push verwendet werden kann
 				player_points[puuid] = [];
-				player_pointprogress[puuid] = [];
 				player_entries_byName[`${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`] = [];
 			}
 			// Daten sortieren und Duplicates entfernen
@@ -31,27 +28,18 @@ window.onload = async function(){
 
 			let color_counter = 0;
 			for (const puuid in player_entries) {
-				let player_start_points = -1;
 				for (const date_string of all_dates) {
 					// Für alle Player Entries Punktzahl berechnen und in player_points eintragen
 					// Bei der Gelegenheit auch Entries in player_entries_byName eintragen
 					if (date_string in player_entries[puuid]) {
-						const current_points = rank_to_points(player_entries[puuid][date_string]["tier"],player_entries[puuid][date_string]["rank"],player_entries[puuid][date_string]["points"]);
+						player_points[puuid].push(rank_to_points(player_entries[puuid][date_string]["tier"],player_entries[puuid][date_string]["rank"],player_entries[puuid][date_string]["points"]));
-						player_points[puuid].push(current_points);
 						player_entries_byName[`${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`][date_string] = player_entries[puuid][date_string];
-						if (player_start_points === -1) {
-							player_start_points = current_points;
-							player_pointprogress[puuid].push(0);
-						} else {
-							player_pointprogress[puuid].push(current_points - player_start_points);
-						}
 					} else {
 						player_points[puuid].push(null);
-						player_pointprogress[puuid].push(null);
 					}
 				}
 				// Linie für den Spieler zu Datasets des Graphen hinzufügen
-				all_rank_yDatasets.push({
+				all_yDatasets.push({
 					label: `${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`,
 					fill: false,
 					borderColor: getColor(color_counter),
@@ -59,14 +47,6 @@ window.onload = async function(){
 					data: player_points[puuid],
 					spanGaps: true,
 				})
-				all_progress_yDatasets.push({
-					label: `${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`,
-					fill: false,
-					borderColor: getColor(color_counter),
-					backgroundColor: getColor(color_counter),
-					data: player_pointprogress[puuid],
-					spanGaps: true,
-				})
 				color_counter++;
 			}
 			// Graphen erstellen
@@ -74,7 +54,7 @@ window.onload = async function(){
 				type: "line",
 				data: {
 					labels: all_dates,
-					datasets: all_rank_yDatasets,
+					datasets: all_yDatasets,
 				},
 				options: {
 					plugins: {
@@ -104,34 +84,6 @@ window.onload = async function(){
 					maintainAspectRatio: false,
 				}
 			});
-			new Chart(`progress-chart-combined-progress`, {
-				type: "line",
-				data: {
-					labels: all_dates,
-					datasets: all_progress_yDatasets,
-				},
-				options: {
-					plugins: {
-						tooltip: {
-							callbacks: {
-								label: function(context) {
-									return format_rank(player_entries_byName[context.dataset.label][context.label]["tier"],player_entries_byName[context.dataset.label][context.label]["rank"],player_entries_byName[context.dataset.label][context.label]["points"])
-								},
-								beforeTitle: function (context) {
-									return context[0].dataset.label;
-								},
-							}
-						}
-					},
-					scales: {
-						y: {
-							display: true,
-						},
-					},
-					responsive: true,
-					maintainAspectRatio: false,
-				}
-			});
 		})
 		.catch(e => console.error(e))
 
@@ -252,16 +204,13 @@ function format_rank(tier,rank,lp) {
 }
 
 function getColor(num) {
-	const colors = ["#33b1ff", "#d2a106", "#007d79", "#8a3ffc", "#ff7eb6", "#ba4e00", "#fa4d56", "#fff1f1", "#6fdc8c", "#4589ff", "#d12771", "#08bdba", "#bae6ff", "#d4bbff"];
+	const colors = ["#ea5545", "#f46a9b", "#ef9b20", "#edbf33", "#ede15b", "#bdcf32", "#87bc45", "#27aeef", "#b33dc6"]
-
 	return colors[num%9];
 }
 
 function toggle_combined_chart() {
-	const comb_charts = this.parentNode.parentNode.querySelectorAll(`.leaderboard>.graph-wrapper`);
+	let chart = this.parentNode.parentNode.querySelector(`.graph-wrapper.${this.id}`);
-	const chart = this.parentNode.parentNode.querySelector(`.graph-wrapper.${this.id}`);
 	if (chart.classList.contains("closed")) {
-		comb_charts.forEach(element => element.classList.add("closed"));
 		chart.classList.remove("closed");
 	} else {
 		chart.classList.add("closed");
@@ -274,5 +223,5 @@ function toggle_leaderboard_chart() {
 		this.classList.add("closed");
 	}
 }
-document.querySelectorAll("button.open-general-graph").forEach(element => element.addEventListener("click", toggle_combined_chart));
+document.querySelector("button#rank-graph").addEventListener("click", toggle_combined_chart);
 document.querySelectorAll("button.leaderboard-element").forEach(element => element.addEventListener("click", toggle_leaderboard_chart));

public/elotracker/index.php

@@ -23,7 +23,6 @@ echo "<div class='combined-charts-buttons'>
         <button type='button' id='progress-graph' class='open-general-graph'>Fortschritt-Vergleich</button>
       </div>";
 echo "<div class='graph-wrapper rank-graph closed'><canvas id=\"progress-chart-combined\" style=\"width:100%;max-width:700px\"></canvas></div>";
-echo "<div class='graph-wrapper progress-graph closed'><canvas id=\"progress-chart-combined-progress\" style=\"width:100%;max-width:700px\"></canvas></div>";
 echo "<div class='leaderboard-list'>";
 $placement_counter = 1;
 foreach ($tracker->getProgressions() as $puuid => $progress){