added opening and collapsing charts

public/elotracker/chart-integration.js

@@ -80,6 +80,8 @@ window.onload = async function(){
 							}
 						},
 					},
+					responsive: true,
+					maintainAspectRatio: false,
 				}
 			});
 		})
@@ -134,6 +136,8 @@ window.onload = async function(){
 						}
 					},
 				},
+				responsive: true,
+				maintainAspectRatio: false,
 			}
 		});
 	}
@@ -203,3 +207,21 @@ function getColor(num) {
 	const colors = ["#ea5545", "#f46a9b", "#ef9b20", "#edbf33", "#ede15b", "#bdcf32", "#87bc45", "#27aeef", "#b33dc6"]
 	return colors[num%9];
 }
+
+function toggle_combined_chart() {
+	let chart = this.parentNode.parentNode.querySelector(`.graph-wrapper.${this.id}`);
+	if (chart.classList.contains("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.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

@@ -18,11 +18,14 @@ $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='combined-charts-buttons'>
+        <button type='button' id='rank-graph' class='open-general-graph'>Rang-Vergleich</button>
+        <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='leaderboard-list'>";
 $placement_counter = 1;
 foreach ($tracker->getProgressions() as $puuid => $progress){
-    echo "<div class='leaderboard-element place-$placement_counter'>";
 	$entries = $tracker->entries[$puuid];
 	$account = $tracker->accounts[$puuid];
 	$start_elo = reset($entries);
@@ -38,6 +41,11 @@ foreach ($tracker->getProgressions() as $puuid => $progress){
     $start_tier_ucfirst = ucfirst($start_tier_lowercase);
     $gained_lp_sign = ($progress > 0) ? " plus-lp" : (($progress < 0) ? " minus-lp" : "no-lp");
 
+    if ($start_elo) {
+		echo "<button type='button' class='leaderboard-element place-$placement_counter closed'>";
+	} else {
+		echo "<button type='button' class='leaderboard-element place-$placement_counter closed' disabled>";
+	}
     echo "<span class='placement'>$placement_counter.</span>";
 
 	echo "<div class='player-info'>
@@ -60,9 +68,9 @@ foreach ($tracker->getProgressions() as $puuid => $progress){
                 <span class='rank-desc'><span class='rank-tier'>{$tier_ucfirst} {$current_elo->rank}</span> <br> <span class='rank-LP'>{$current_elo->points} LP</span></span>
             </div>
           </div>";
-		echo "<canvas id=\"progress-chart-$puuid\" class='progress-chart' style=\"width:100%;max-width:700px\"></canvas>";
+		echo "<div class='graph-wrapper'><canvas id=\"progress-chart-$puuid\" class='progress-chart' style=\"width:100%;max-width:700px\"></canvas></div>";
 	}
-	echo "</div>";
+	echo "</button>";
     $placement_counter++;
 }
 echo "</div>";

public/elotracker/styles.css

@@ -17,6 +17,22 @@ body {
 h1 {
 	text-align: center;
 }
+button {
+	background: none;
+	color: inherit;
+	border: none;
+	padding: 0;
+	font: inherit;
+	cursor: pointer;
+	outline: inherit;
+	text-align: unset;
+}
+button[disabled] {
+	cursor: initial;
+}
+button[disabled]:hover {
+	background-color: initial;
+}
 
 .uem-logo-header {
 	display: flex;
@@ -28,6 +44,16 @@ img.uem-logo {
 	height: 120px;
 }
 
+button.open-general-graph {
+	border: solid 2px #68a8cc;
+	border-radius: 12px;
+	padding: 16px 24px;
+	transition: background-color 200ms ease-out;
+}
+button.open-general-graph:hover {
+	background-color: #1f2931;
+}
+
 .leaderboard {
 	display: flex;
 	flex-direction: column;
@@ -39,11 +65,14 @@ img.uem-logo {
 	align-items: stretch;
 	gap: 16px;
 	max-width: 600px;
+	margin-top: 20px;
 }
 .leaderboard-element {
 	display: grid;
 	grid-template-columns: 64px 1fr auto;
-	grid-template-rows: 1.5fr 0.5fr;
+	grid-template-rows: auto auto 1fr;
+	row-gap: 8px;
+	align-items: center;
 	border: solid 4px #6a818f;
 	border-radius: 20px;
 	padding: 16px 16px 16px 36px;
@@ -101,8 +130,9 @@ img.uem-logo {
 	display: grid;
 	grid-template-rows: 1fr 0.9fr;
 	grid-template-columns: 72px auto;
-	align-items: center;
 	grid-column: 2;
+	margin: 10px 0;
+	row-gap: 10px;
 }
 .leaderboard-element .ranked-emblem {
 	grid-column: 3;
@@ -116,6 +146,7 @@ img.uem-logo {
 	grid-row-end: 3;
 	grid-column: 1;
 	border-radius: 8px;
+	align-self: end;
 }
 .player-info .playername {
 	grid-row: 1;
@@ -123,7 +154,7 @@ img.uem-logo {
 	margin: 0;
 }
 .player-info .lp-gained {
-	align-self: flex-start;
+	align-self: start;
 	grid-row: 2;
 	grid-column: 2;
 	font-size: 1.5em;
@@ -160,3 +191,33 @@ img.uem-logo {
 .elo-gained .rank-LP {
 	font-size: 0.8em;
 }
+
+.leaderboard-element .graph-wrapper {
+	position: relative;
+	display: grid;
+	grid-template-rows: 1fr;
+	grid-template-columns: 1fr;
+	grid-row: 3;
+	grid-column: 1 / 4;
+	overflow: hidden;
+	height: 250px;
+	width: 520px;
+	transition: height 400ms;
+}
+.leaderboard-element.closed .graph-wrapper {
+	height: 0;
+}
+
+.leaderboard>.graph-wrapper {
+	position: relative;
+	display: flex;
+	justify-content: center;
+	height: 600px;
+	width: 90vw;
+	max-width: 800px;
+	transition: height 400ms;
+	overflow: hidden;
+}
+.leaderboard>.graph-wrapper.closed {
+	height: 0;
+}