From a0cd39aa7a6d7ac9c112d735993ff70496484875 Mon Sep 17 00:00:00 2001 From: "Lang, Simon" Date: Thu, 13 Jun 2024 13:03:20 +0200 Subject: [PATCH] added new progress-chart updated color-palette --- public/elotracker/chart-integration.js | 65 +++++++++++++++++++++++--- public/elotracker/index.php | 1 + 2 files changed, 59 insertions(+), 7 deletions(-) diff --git a/public/elotracker/chart-integration.js b/public/elotracker/chart-integration.js index 5c0fca0..475961c 100644 --- a/public/elotracker/chart-integration.js +++ b/public/elotracker/chart-integration.js @@ -1,7 +1,9 @@ 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 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 @@ -20,6 +22,7 @@ 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 @@ -28,18 +31,27 @@ 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]) { - 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"])); + 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_yDatasets.push({ + all_rank_yDatasets.push({ label: `${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`, fill: false, borderColor: getColor(color_counter), @@ -47,6 +59,14 @@ 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 @@ -54,7 +74,7 @@ window.onload = async function(){ type: "line", data: { labels: all_dates, - datasets: all_yDatasets, + datasets: all_rank_yDatasets, }, options: { plugins: { @@ -84,6 +104,34 @@ 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)) @@ -204,13 +252,16 @@ function format_rank(tier,rank,lp) { } function getColor(num) { - const colors = ["#ea5545", "#f46a9b", "#ef9b20", "#edbf33", "#ede15b", "#bdcf32", "#87bc45", "#27aeef", "#b33dc6"] + const colors = ["#33b1ff", "#d2a106", "#007d79", "#8a3ffc", "#ff7eb6", "#ba4e00", "#fa4d56", "#fff1f1", "#6fdc8c", "#4589ff", "#d12771", "#08bdba", "#bae6ff", "#d4bbff"]; + return colors[num%9]; } function toggle_combined_chart() { - let chart = this.parentNode.parentNode.querySelector(`.graph-wrapper.${this.id}`); + 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"); @@ -223,5 +274,5 @@ function toggle_leaderboard_chart() { this.classList.add("closed"); } } -document.querySelector("button#rank-graph").addEventListener("click", toggle_combined_chart); +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)); \ No newline at end of file diff --git a/public/elotracker/index.php b/public/elotracker/index.php index ea8669e..7e6c853 100644 --- a/public/elotracker/index.php +++ b/public/elotracker/index.php @@ -23,6 +23,7 @@ echo "
"; echo "
"; +echo "
"; echo "
"; $placement_counter = 1; foreach ($tracker->getProgressions() as $puuid => $progress){