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

code rearranged, x axis is linear

Browse Source
main
Benjamin Kraft 3 months ago
parent 5733606f03
commit 2f619742f8
1 changed files with 44 additions and 62 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 106
      public/elotracker/chart-integration.js

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

@ -3,24 +3,11 @@ let player_charts = [];
const x_scale = { const x_scale = {
display: true, display: true,
type: "timeseries", type: "linear",
time: { stepSize: 1000 * 60 * 60 * 24,
parser: "dd.MM.yy HH:mm",
tooltipFormat: "dd.MM.yy HH:mm",
unit: "day",
unitStepSize: 1,
displayFormats: {
"day": "dd.MM.yy",
}
},
ticks: { ticks: {
callback: (value, index, ticks) => { callback: (value, index, ticks) => {
let tickdate = new Date(value); let tickdate = new Date(value);
if (index === 0) return `${tickdate.getDate()}.${month_names[tickdate.getMonth()]}`;
let prev_tickdate = new Date(ticks[index-1].value);
if (prev_tickdate.getDate() === tickdate.getDate()) {
return null;
}
return `${tickdate.getDate()}.${month_names[tickdate.getMonth()]}`; return `${tickdate.getDate()}.${month_names[tickdate.getMonth()]}`;
} }
} }
@ -56,7 +43,7 @@ const trigger_legend_leave = function (e, legendItem, legend) {
legend.chart.data.datasets.forEach((dataset, i) => { legend.chart.data.datasets.forEach((dataset, i) => {
dataset.backgroundColor = dataset.backgroundColor.length === 9 ? dataset.backgroundColor.slice(0, -2) : dataset.backgroundColor; dataset.backgroundColor = dataset.backgroundColor.length === 9 ? dataset.backgroundColor.slice(0, -2) : dataset.backgroundColor;
dataset.borderColor = dataset.borderColor.length === 9 ? dataset.borderColor.slice(0, -2) : dataset.borderColor; dataset.borderColor = dataset.borderColor.length === 9 ? dataset.borderColor.slice(0, -2) : dataset.borderColor;
dataset.borderWidth = 3; dataset.borderWidth = 3;
}); });
legend.chart.update(); legend.chart.update();
} }
@ -98,6 +85,20 @@ async function create_charts() {
let player_entries_byName = {}; // playername zeigt auf entries (damit im kombinierten Graphen die Tooltips korrekt gerendert werden können) 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 let player_accounts = {}; // puuid zeigt auf player account
const tooltip_plugin = {
callbacks: {
label: function (context) {
return format_rank(player_entries_byName[context.dataset.label][context.parsed.x / 1000]["tier"], player_entries_byName[context.dataset.label][context.parsed.x / 1000]["rank"], player_entries_byName[context.dataset.label][context.parsed.x / 1000]["points"])
},
title: items => {
return new Date(items[0].raw.x).toLocaleDateString();
},
beforeTitle: function (context) {
return context[0].dataset.label;
},
}
};
await fetch(`get.php`, { await fetch(`get.php`, {
method: "GET", method: "GET",
}) })
@ -126,7 +127,10 @@ async function create_charts() {
player_start_points = current_points; player_start_points = current_points;
player_progress_values[puuid].push({x: parseInt(timestamp) * 1000, y: 0}); player_progress_values[puuid].push({x: parseInt(timestamp) * 1000, y: 0});
} else { } else {
player_progress_values[puuid].push({x: parseInt(timestamp) * 1000, y: current_points - player_start_points}); player_progress_values[puuid].push({
x: parseInt(timestamp) * 1000,
y: current_points - player_start_points
});
} }
} }
// Linie für den Spieler zu Datasets des Graphen hinzufügen // Linie für den Spieler zu Datasets des Graphen hinzufügen
@ -158,16 +162,7 @@ async function create_charts() {
}, },
options: { options: {
plugins: { plugins: {
tooltip: { tooltip: tooltip_plugin,
callbacks: {
label: function(context) {
return format_rank(player_entries_byName[context.dataset.label][context.parsed.x/1000]["tier"],player_entries_byName[context.dataset.label][context.parsed.x/1000]["rank"],player_entries_byName[context.dataset.label][context.parsed.x/1000]["points"])
},
beforeTitle: function (context) {
return context[0].dataset.label;
},
}
},
zoom: zoom_plugin, zoom: zoom_plugin,
legend: legend_plugin, legend: legend_plugin,
}, },
@ -178,7 +173,7 @@ async function create_charts() {
stepSize: 100, stepSize: 100,
ticks: { ticks: {
callback: (value) => { callback: (value) => {
return points_to_rankstring(value,false); return points_to_rankstring(value, false);
} }
} }
}, },
@ -194,16 +189,7 @@ async function create_charts() {
}, },
options: { options: {
plugins: { plugins: {
tooltip: { tooltip: tooltip_plugin,
callbacks: {
label: function(context) {
return format_rank(player_entries_byName[context.dataset.label][context.parsed.x/1000]["tier"],player_entries_byName[context.dataset.label][context.parsed.x/1000]["rank"],player_entries_byName[context.dataset.label][context.parsed.x/1000]["points"])
},
beforeTitle: function (context) {
return context[0].dataset.label;
},
}
},
zoom: zoom_plugin, zoom: zoom_plugin,
legend: legend_plugin, legend: legend_plugin,
}, },
@ -223,12 +209,12 @@ async function create_charts() {
const charts = document.getElementsByClassName("progress-chart"); const charts = document.getElementsByClassName("progress-chart");
for (const chart of charts) { for (const chart of charts) {
let puuid = chart.id.split("-"); let puuid = chart.id.split("-");
puuid.splice(0,2); puuid.splice(0, 2);
puuid = puuid.join("-"); puuid = puuid.join("-");
let values = []; let values = [];
for (const entriesKey in player_entries[puuid]) { 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"]); let points = rank_to_points(player_entries[puuid][entriesKey]["tier"], player_entries[puuid][entriesKey]["rank"], player_entries[puuid][entriesKey]["points"]);
values.push({x: parseInt(entriesKey)*1000, y: points}); values.push({x: parseInt(entriesKey) * 1000, y: points});
} }
player_charts.push(new Chart(`progress-chart-${puuid}`, { player_charts.push(new Chart(`progress-chart-${puuid}`, {
type: "line", type: "line",
@ -245,16 +231,7 @@ async function create_charts() {
options: { options: {
plugins: { plugins: {
legend: {display: false}, legend: {display: false},
tooltip: { tooltip: tooltip_plugin,
callbacks: {
label: function(context) {
return format_rank(player_entries[puuid][context.parsed.x/1000]["tier"],player_entries[puuid][context.parsed.x/1000]["rank"],player_entries[puuid][context.parsed.x/1000]["points"])
},
beforeTitle: function (context) {
return context[0].dataset.label;
},
}
},
zoom: zoom_plugin, zoom: zoom_plugin,
}, },
scales: { scales: {
@ -264,7 +241,7 @@ async function create_charts() {
stepSize: 100, stepSize: 100,
ticks: { ticks: {
callback: (value) => { callback: (value) => {
return points_to_rankstring(value,false); return points_to_rankstring(value, false);
} }
} }
}, },
@ -276,13 +253,13 @@ async function create_charts() {
} }
} }
function rank_to_points(tier,rank,lp) { function rank_to_points(tier, rank, lp) {
const apex_tiers = (tier === "MASTER" || tier === "GRANDMASTER" || tier === "CHALLENGER"); const apex_tiers = (tier === "MASTER" || tier === "GRANDMASTER" || tier === "CHALLENGER");
const tiers = { const tiers = {
"DIAMOND": 2400, "DIAMOND": 2400,
"EMERALD": 2000, "EMERALD": 2000,
"PLATINUM": 1600, "PLATINUM": 1600,
"GOLD": 1200, "GOLD": 1200,
"SILVER": 800, "SILVER": 800,
"BRONZE": 400, "BRONZE": 400,
"IRON": 0, "IRON": 0,
@ -299,11 +276,12 @@ function rank_to_points(tier,rank,lp) {
return tiers[tier] + ranks[rank] + lp; return tiers[tier] + ranks[rank] + lp;
} }
} }
function points_to_rankstring(points, include_LP = true) { function points_to_rankstring(points, include_LP = true) {
const apex_tiers = (points >= 2800); const apex_tiers = (points >= 2800);
let lp = (apex_tiers) ? points - 2800 : points%100 let lp = (apex_tiers) ? points - 2800 : points % 100
let rank = (points-lp)%400; let rank = (points - lp) % 400;
let tier = (points-lp-rank); let tier = (points - lp - rank);
const tiers = { const tiers = {
2400: "Diamond", 2400: "Diamond",
2000: "Emerald", 2000: "Emerald",
@ -326,8 +304,8 @@ function points_to_rankstring(points, include_LP = true) {
return rank_string; return rank_string;
} }
function format_rank(tier,rank,lp) { function format_rank(tier, rank, lp) {
tier = tier.charAt(0).toUpperCase()+tier.slice(1).toLowerCase(); tier = tier.charAt(0).toUpperCase() + tier.slice(1).toLowerCase();
const apex_tiers = (tier === "Master" || tier === "Grandmaster" || tier === "Challenger"); const apex_tiers = (tier === "Master" || tier === "Grandmaster" || tier === "Challenger");
let rank_string = tier; let rank_string = tier;
if (!apex_tiers) rank_string += ` ${rank}`; if (!apex_tiers) rank_string += ` ${rank}`;
@ -338,7 +316,7 @@ function format_rank(tier,rank,lp) {
function getColor(num) { function getColor(num) {
const colors = ["#33b1ff", "#d2a106", "#007d79", "#8a3ffc", "#ff7eb6", "#ba4e00", "#fa4d56", "#fff1f1", "#6fdc8c", "#4589ff", "#d12771", "#08bdba", "#bae6ff", "#d4bbff"]; const colors = ["#33b1ff", "#d2a106", "#007d79", "#8a3ffc", "#ff7eb6", "#ba4e00", "#fa4d56", "#fff1f1", "#6fdc8c", "#4589ff", "#d12771", "#08bdba", "#bae6ff", "#d4bbff"];
return colors[num%9]; return colors[num % 9];
} }
function toggle_combined_chart() { function toggle_combined_chart() {
@ -351,6 +329,7 @@ function toggle_combined_chart() {
chart.classList.add("closed"); chart.classList.add("closed");
} }
} }
function toggle_leaderboard_chart(event) { function toggle_leaderboard_chart(event) {
if (this.classList.contains("closed")) { if (this.classList.contains("closed")) {
this.classList.remove("closed"); this.classList.remove("closed");
@ -359,6 +338,7 @@ function toggle_leaderboard_chart(event) {
this.classList.add("closed"); this.classList.add("closed");
} }
} }
document.querySelectorAll("button.open-general-graph").forEach(element => element.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("mousedown", toggle_leaderboard_chart)); document.querySelectorAll("button.leaderboard-element").forEach(element => element.addEventListener("mousedown", toggle_leaderboard_chart));
@ -367,7 +347,7 @@ async function update_leaderboard_entries() {
this.classList.add("button-updating") this.classList.add("button-updating")
let eventSource = new EventSource("./update.php"); let eventSource = new EventSource("./update.php");
eventSource.addEventListener("progress", e => { eventSource.addEventListener("progress", e => {
this.style.setProperty("--button-loading-bar-width", `${e.data*100}%`); this.style.setProperty("--button-loading-bar-width", `${e.data * 100}%`);
}) })
eventSource.addEventListener("forbidden", e => { eventSource.addEventListener("forbidden", e => {
const currenttime = new Date(); const currenttime = new Date();
@ -388,6 +368,7 @@ async function update_leaderboard_entries() {
eventSource.close(); eventSource.close();
update_leaderboard_elements(); update_leaderboard_elements();
}) })
function reset_button(button) { function reset_button(button) {
button.disabled = false; button.disabled = false;
button.style.setProperty("--button-loading-bar-width", `0`); button.style.setProperty("--button-loading-bar-width", `0`);
@ -411,7 +392,8 @@ function format_time_minsec(date) {
} }
return min + trenner + nullausgleich + date.getSeconds() + format; return min + trenner + nullausgleich + date.getSeconds() + format;
} }
const month_names = ["Jan","Feb","Mär","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez"];
const month_names = ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"];
async function update_leaderboard_elements() { async function update_leaderboard_elements() {
fetch(`./leaderboard_list.php`, { fetch(`./leaderboard_list.php`, {

Write Preview
Loading…
Cancel
Save