university-esports-mainz.de/public/elotracker/chart-integration.js

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_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

	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_pointprogress[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) {
				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(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({
					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,
				})
				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
			new Chart(`progress-chart-combined`, {
				type: "line",
				data: {
					labels: all_dates,
					datasets: all_rank_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);
								}
							}
						},
					},
					responsive: true,
					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))

	const charts = document.getElementsByClassName("progress-chart");
	for (const chart of charts) {
		let puuid = chart.id.split("-");
		puuid.splice(0,2);
		puuid = puuid.join("-");
		let xValues = [];
		let yValues = [];
		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"]);
			xValues.push(entriesKey);
			yValues.push(points);
		}
		new Chart(`progress-chart-${puuid}`, {
			type: "line",
			data: {
				labels: xValues,
				datasets: [{
					label: `${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`,
					fill: false,
					borderColor: "rgba(150,150,175)",
					backgroundColor: "rgba(150,150,175)",
					data: yValues
				}]
			},
			options: {
				plugins: {
					legend: {display: false},
					tooltip: {
						callbacks: {
							label: function(context) {
								return format_rank(player_entries[puuid][context.label]["tier"],player_entries[puuid][context.label]["rank"],player_entries[puuid][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);
							}
						}
					},
				},
				responsive: true,
				maintainAspectRatio: false,
			}
		});
	}

};

function rank_to_points(tier,rank,lp) {
	const apex_tiers = (tier === "MASTER" || tier === "GRANDMASTER" || tier === "CHALLENGER");
	const tiers = {
		"DIAMOND": 2400,
		"EMERALD": 2000,
		"PLATINUM":	1600,
		"GOLD":	1200,
		"SILVER": 800,
		"BRONZE": 400,
		"IRON": 0,
	};
	const ranks = {
		"I": 300,
		"II": 200,
		"III": 100,
		"IV": 0,
	};
	if (apex_tiers) {
		return 2800 + lp;
	} else {
		return tiers[tier] + ranks[rank] + lp;
	}
}
function points_to_rankstring(points, include_LP = true) {
	const apex_tiers = (points >= 2800);
	let lp = (apex_tiers) ? points - 2800 : points%100
	let rank = (points-lp)%400;
	let tier = (points-lp-rank);
	const tiers = {
		2400: "Diamond",
		2000: "Emerald",
		1600: "Platinum",
		1200: "Gold",
		800: "Silver",
		400: "Bronze",
		0: "Iron",
	};
	const ranks = {
		300: "I",
		200: "II",
		100: "III",
		0: "IV",
	};

	let rank_string = (apex_tiers) ? "Master" : tiers[tier];
	if (!apex_tiers) rank_string += ` ${ranks[rank]}`;
	if (include_LP || apex_tiers) rank_string += ` ${lp} LP`;
	return rank_string;
}

function format_rank(tier,rank,lp) {
	tier = tier.charAt(0).toUpperCase()+tier.slice(1).toLowerCase();
	const apex_tiers = (tier === "Master" || tier === "Grandmaster" || tier === "Challenger");
	let rank_string = tier;
	if (!apex_tiers) rank_string += ` ${rank}`;
	rank_string += ` ${lp} LP`;
	return rank_string;
}

function getColor(num) {
	const colors = ["#33b1ff", "#d2a106", "#007d79", "#8a3ffc", "#ff7eb6", "#ba4e00", "#fa4d56", "#fff1f1", "#6fdc8c", "#4589ff", "#d12771", "#08bdba", "#bae6ff", "#d4bbff"];

	return colors[num%9];
}

function toggle_combined_chart() {
	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");
	}
}
function toggle_leaderboard_chart() {
	if (this.classList.contains("closed")) {
		this.classList.remove("closed");
	} else {
		this.classList.add("closed");
	}
}
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));

async function update_leaderboard() {
	this.disabled = true;
	this.classList.add("button-updating")
	let eventSource = new EventSource("./update.php");
	eventSource.addEventListener("progress", e => {
		this.style.setProperty("--button-loading-bar-width", `${e.data*100}%`);
	})
	eventSource.addEventListener("forbidden", e => {
		const currenttime = new Date();
		const updatetime = new Date(e.data);
		let timediff = new Date(currenttime - updatetime);
		let resttime = new Date(600000 - (currenttime - updatetime));
		window.alert(`Das letzte Update wurde vor ${format_time_minsec(timediff)} durchgeführt. Versuche es in ${format_time_minsec(resttime)} noch einmal`);
		reset_button(this);
		eventSource.close();
	})
	eventSource.onerror = e => {
		window.alert(`Beim Update ist ein Fehler aufgetreten. Versuche es später noch einmal`)
		reset_button(this);
		eventSource.close();
	}
	eventSource.addEventListener("done", e => {
		reset_button(this);
		eventSource.close();
	})
	function reset_button(button) {
		button.disabled = false;
		button.style.setProperty("--button-loading-bar-width", `0`);
		button.classList.remove("button-updating");
	}
}

document.querySelector("button.update-leaderboard").addEventListener("click", update_leaderboard);

function format_time_minsec(date) {
	let format, trenner = "", min = "", nullausgleich = "";
	if (date.getMinutes() === 0) {
		format = " Sekunden";
	} else {
		min = date.getMinutes();
		format = " Minuten";
		trenner = ":";
		if (date.getSeconds() < 10) {
			nullausgleich = "0";
		}
	}
	return min + trenner + nullausgleich + date.getSeconds() + format;
}