Compare commits

..

No commits in common. 'fda566e84bcb248d3c223208d252f86f5df41539' and '12faaba75e54ebc5fa66adc5fbd8ac9308a14e53' have entirely different histories.

  1. 65
      public/elotracker/chart-integration.js
  2. 1
      public/elotracker/index.php

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

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

Loading…
Cancel
Save