UEM
/
university-esports-mainz.de
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added zoom and pan to charts

Browse Source
main
Simon Lang 7 months ago
parent 0543f78354
commit 731f6a5a05
4 changed files with 46 additions and 24 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 29
      public/elotracker/chart-integration.js
  2. 32
      public/elotracker/index.php
  3. 4
      public/elotracker/styles.css
  4. 1
      public/util/mysql_connect.php

29
public/elotracker/chart-integration.js
Unescape View File

@ -25,6 +25,21 @@ const x_scale = {
}
}
}
const zoom_plugin = {
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true,
},
mode: "x",
},
pan: {
enabled: true,
mode: "x",
},
}
window.onload = create_charts;
@ -108,7 +123,8 @@ async function create_charts() {
return context[0].dataset.label;
},
}
}
},
zoom: zoom_plugin,
},
scales: {
x: x_scale,
@ -142,7 +158,8 @@ async function create_charts() {
return context[0].dataset.label;
},
}
}
},
zoom: zoom_plugin,
},
scales: {
x: x_scale,
@ -190,7 +207,8 @@ async function create_charts() {
return context[0].dataset.label;
},
}
}
},
zoom: zoom_plugin,
},
scales: {
x: x_scale,
@ -286,15 +304,16 @@ function toggle_combined_chart() {
chart.classList.add("closed");
}
}
function toggle_leaderboard_chart() {
function toggle_leaderboard_chart(event) {
if (this.classList.contains("closed")) {
this.classList.remove("closed");
} else {
if (event.target.nodeName === "CANVAS") return;
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));
document.querySelectorAll("button.leaderboard-element").forEach(element => element.addEventListener("mousedown", toggle_leaderboard_chart));
async function update_leaderboard_entries() {
this.disabled = true;

32
public/elotracker/index.php
Unescape View File

@ -4,27 +4,25 @@
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet">
<title>UEM Elo Tracker</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0/hammer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0/dist/chartjs-plugin-zoom.min.js"></script>
</head>
<body>
<?php
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 "<button type='button' class='update-leaderboard progress-button'>Ränge aktualisieren ".file_get_contents(__DIR__."/../img/material-symbols/sync_24dp_FILL1_wght300_GRAD0_opsz24.svg")."</button>";
echo "<div class='combined-charts-buttons'>
<h1>UEM LoL Elo-Challenge</h1>
<div class='uem-logo-header'><img class='uem-logo' src='./../img/uem-logo.png' alt=''></div>
<div class='leaderboard'>
<button type='button' class='update-leaderboard progress-button'>Ränge aktualisieren <?php echo file_get_contents(__DIR__."/../img/material-symbols/sync_24dp_FILL1_wght300_GRAD0_opsz24.svg")?></button>
<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='graph-wrapper progress-graph closed'><canvas id=\"progress-chart-combined-progress\" style=\"width:100%;max-width:700px\"></canvas></div>";
include "leaderboard_list.php";
echo "</div>";
?>
<script src="chart-integration.js"></script>
</div>
<div class='graph-wrapper rank-graph closed'><canvas id="progress-chart-combined" style="width:100%;max-width:700px"></canvas></div>
<div class='graph-wrapper progress-graph closed'><canvas id="progress-chart-combined-progress" style="width:100%;max-width:700px"></canvas></div>
<?php include "leaderboard_list.php"; ?>
</div>
<script src="chart-integration.js"></script>
</body>
</html>

4
public/elotracker/styles.css
Unescape View File

@ -106,6 +106,10 @@ button.button-updating svg {
.leaderboard-element:hover {
background-color: #1f2931;
}
.leaderboard-element:has(canvas:hover) {
background-color: transparent;
cursor: initial;
}
.leaderboard-element.place-1 {
border: solid 4px var(--gold-1);
}

1
public/util/mysql_connect.php
Unescape View File

@ -22,6 +22,7 @@ class MySQLConnection {
private function createConn(): void {
$this->mysqli = new mysqli($this->host . ":" . $this->port, $this->user, $this->pass, $this->dbName);
$this->mysqli->set_charset("utf8");
}
public function query($sql): mysqli_result|bool {

Write Preview
Loading…
Cancel
Save