added new progress-chart

updated color-palette

public/elotracker/chart-integration.js

@@ -1,7 +1,9 @@
 window.onload = async function(){
 	let all_dates = []; // Alle Daten für die für min. einen Spieler ein Rang gespeichert ist
-	let all_yDatasets = []; // Datasets, also die einzelnen Linien im Graphen, beinhaltet player_points
+	let all_rank_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
@@ -20,6 +22,7 @@ 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
@@ -28,18 +31,27 @@ 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]) {
-						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"]));
+						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(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_yDatasets.push({
+				all_rank_yDatasets.push({
 					label: `${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`,
 					fill: false,
 					borderColor: getColor(color_counter),
@@ -47,6 +59,14 @@ 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
@@ -54,7 +74,7 @@ window.onload = async function(){
 				type: "line",
 				data: {
 					labels: all_dates,
-					datasets: all_yDatasets,
+					datasets: all_rank_yDatasets,
 				},
 				options: {
 					plugins: {
@@ -84,6 +104,34 @@ 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))
 
@@ -204,13 +252,16 @@ function format_rank(tier,rank,lp) {
 }
 
 function getColor(num) {
-	const colors = ["#ea5545", "#f46a9b", "#ef9b20", "#edbf33", "#ede15b", "#bdcf32", "#87bc45", "#27aeef", "#b33dc6"]
+	const colors = ["#33b1ff", "#d2a106", "#007d79", "#8a3ffc", "#ff7eb6", "#ba4e00", "#fa4d56", "#fff1f1", "#6fdc8c", "#4589ff", "#d12771", "#08bdba", "#bae6ff", "#d4bbff"];
+
 	return colors[num%9];
 }
 
 function toggle_combined_chart() {
-	let chart = this.parentNode.parentNode.querySelector(`.graph-wrapper.${this.id}`);
+	const comb_charts = this.parentNode.parentNode.querySelectorAll(`.leaderboard>.graph-wrapper`);
+	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");
@@ -223,5 +274,5 @@ function toggle_leaderboard_chart() {
 		this.classList.add("closed");
 	}
 }
-document.querySelector("button#rank-graph").addEventListener("click", toggle_combined_chart);
+document.querySelectorAll("button.open-general-graph").forEach(element => element.addEventListener("click", toggle_combined_chart));
 document.querySelectorAll("button.leaderboard-element").forEach(element => element.addEventListener("click", toggle_leaderboard_chart));

public/elotracker/index.php

@@ -23,6 +23,7 @@ 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){