added combined elo-graph

public/elotracker/chart-integration.js

@@ -1,4 +1,90 @@
 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 player_points = {}; // 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
+
+	await fetch(`get.php`, {
+		method: "GET",
+	})
+		.then(res => res.json())
+		.then(result => {
+			player_entries = result["entries"];
+			player_accounts = result["accounts"];
+			for (const puuid in player_entries) {
+				// Alle Daten für die Spieler Einträge haben sollen in all_dates
+				for (const entry_date in player_entries[puuid]) {
+					all_dates.push(entry_date)
+				}
+				// Hier schonmal puuids/namen auf leere Arrays setzen, damit später einfach .push verwendet werden kann
+				player_points[puuid] = [];
+				player_entries_byName[`${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`] = [];
+			}
+			// Daten sortieren und Duplicates entfernen
+			all_dates.sort();
+			all_dates = [...new Set(all_dates)];
+
+			let color_counter = 0;
+			for (const puuid in player_entries) {
+				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"]));
+						player_entries_byName[`${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`][date_string] = player_entries[puuid][date_string];
+					} else {
+						player_points[puuid].push(null);
+					}
+				}
+				// Linie für den Spieler zu Datasets des Graphen hinzufügen
+				all_yDatasets.push({
+					label: `${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`,
+					fill: false,
+					borderColor: getColor(color_counter),
+					backgroundColor: getColor(color_counter),
+					data: player_points[puuid],
+					spanGaps: true,
+				})
+				color_counter++;
+			}
+			// Graphen erstellen
+			new Chart(`progress-chart-combined`, {
+				type: "line",
+				data: {
+					labels: all_dates,
+					datasets: all_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,
+							stepSize: 100,
+							ticks: {
+								callback: (value) => {
+									return points_to_rankstring(value,false);
+								}
+							}
+						},
+					},
+				}
+			});
+		})
+		.catch(e => console.error(e))
+
 	const charts = document.getElementsByClassName("progress-chart");
 	for (const chart of charts) {
 		let puuid = chart.id.split("-");
@@ -8,7 +94,9 @@ window.onload = async function(){
 			method: "GET",
 		})
 			.then(res => res.json())
-			.then(entries => {
+			.then(result => {
+				let entries = result["entries"];
+				let account = result["accounts"];
 				let xValues = [];
 				let yValues = [];
 				for (const entriesKey in entries) {
@@ -21,6 +109,7 @@ window.onload = async function(){
 					data: {
 						labels: xValues,
 						datasets: [{
+							label: `${account["gameName"]}#${account["tagLine"]}`,
 							fill: false,
 							borderColor: "rgba(150,150,175)",
 							backgroundColor: "rgba(150,150,175)",
@@ -34,7 +123,10 @@ window.onload = async function(){
 								callbacks: {
 									label: function(context) {
 										return format_rank(entries[context.label]["tier"],entries[context.label]["rank"],entries[context.label]["points"])
-									}
+									},
+									beforeTitle: function (context) {
+										return context[0].dataset.label;
+									},
 								}
 							}
 						},
@@ -115,3 +207,8 @@ function format_rank(tier,rank,lp) {
 	rank_string += ` ${lp} LP`;
 	return rank_string;
 }
+
+function getColor(num) {
+	const colors = ["#ea5545", "#f46a9b", "#ef9b20", "#edbf33", "#ede15b", "#bdcf32", "#87bc45", "#27aeef", "#b33dc6"]
+	return colors[num%9];
+}

public/elotracker/get.php

@@ -1,9 +1,11 @@
 <?php
-if (!isset($_GET["puuid"]) && $_GET["puuid"]!=null) exit;
-
 require_once "Tracker.php";
-
 $tracker = new Tracker();
-$puuid = $_GET["puuid"];
 
-echo json_encode($tracker->entries[$puuid]);
+if (!isset($_GET["puuid"]) || $_GET["puuid"]==null) {
+	echo json_encode(["accounts"=>$tracker->accounts,"entries"=>$tracker->entries]);
+	exit;
+}
+
+$puuid = $_GET["puuid"];
+echo json_encode(["accounts"=>$tracker->accounts[$puuid],"entries"=>$tracker->entries[$puuid]]);

public/elotracker/index.php

@@ -18,6 +18,7 @@ $latest_patch = json_decode(file_get_contents("https://ddragon.leagueoflegends.c
 echo "<h1>UEM LoL Elo-Challenge</h1>";
 echo "<div class='uem-logo-header'><img class='uem-logo' src='./../img/uem-logo.png' alt=''></div>";
 echo "<div class='leaderboard'>";
+echo "<canvas id=\"progress-chart-combined\" style=\"width:100%;max-width:700px\"></canvas>";
 echo "<div class='leaderboard-list'>";
 $placement_counter = 1;
 foreach ($tracker->getProgressions() as $puuid => $progress){