|
|
@ -1,18 +1,99 @@ |
|
|
|
window.onload = async function(){ |
|
|
|
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 player_points = {}; // 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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
await fetch(`get.php`, { |
|
|
|
|
|
|
|
method: "GET", |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
.then(res => res.json()) |
|
|
|
|
|
|
|
.then(result => { |
|
|
|
|
|
|
|
player_entries = result["entries"]; |
|
|
|
|
|
|
|
player_accounts = result["accounts"]; |
|
|
|
|
|
|
|
for (const puuid in player_entries) { |
|
|
|
|
|
|
|
// Alle Daten für die Spieler Einträge haben sollen in all_dates
|
|
|
|
|
|
|
|
for (const entry_date in player_entries[puuid]) { |
|
|
|
|
|
|
|
all_dates.push(entry_date) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// Hier schonmal puuids/namen auf leere Arrays setzen, damit später einfach .push verwendet werden kann
|
|
|
|
|
|
|
|
player_points[puuid] = []; |
|
|
|
|
|
|
|
player_entries_byName[`${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`] = []; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// Daten sortieren und Duplicates entfernen
|
|
|
|
|
|
|
|
all_dates.sort(); |
|
|
|
|
|
|
|
all_dates = [...new Set(all_dates)]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let color_counter = 0; |
|
|
|
|
|
|
|
for (const puuid in player_entries) { |
|
|
|
|
|
|
|
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"])); |
|
|
|
|
|
|
|
player_entries_byName[`${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`][date_string] = player_entries[puuid][date_string]; |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
player_points[puuid].push(null); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// Linie für den Spieler zu Datasets des Graphen hinzufügen
|
|
|
|
|
|
|
|
all_yDatasets.push({ |
|
|
|
|
|
|
|
label: `${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`, |
|
|
|
|
|
|
|
fill: false, |
|
|
|
|
|
|
|
borderColor: getColor(color_counter), |
|
|
|
|
|
|
|
backgroundColor: getColor(color_counter), |
|
|
|
|
|
|
|
data: player_points[puuid], |
|
|
|
|
|
|
|
spanGaps: true, |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
color_counter++; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// Graphen erstellen
|
|
|
|
|
|
|
|
new Chart(`progress-chart-combined`, { |
|
|
|
|
|
|
|
type: "line", |
|
|
|
|
|
|
|
data: { |
|
|
|
|
|
|
|
labels: all_dates, |
|
|
|
|
|
|
|
datasets: all_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, |
|
|
|
|
|
|
|
stepSize: 100, |
|
|
|
|
|
|
|
ticks: { |
|
|
|
|
|
|
|
callback: (value) => { |
|
|
|
|
|
|
|
return points_to_rankstring(value,false); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
.catch(e => console.error(e)) |
|
|
|
|
|
|
|
|
|
|
|
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("-"); |
|
|
|
fetch(`get.php?puuid=${puuid}`, { |
|
|
|
|
|
|
|
method: "GET", |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
.then(res => res.json()) |
|
|
|
|
|
|
|
.then(entries => { |
|
|
|
|
|
|
|
let xValues = []; |
|
|
|
let xValues = []; |
|
|
|
let yValues = []; |
|
|
|
let yValues = []; |
|
|
|
for (const entriesKey in entries) { |
|
|
|
for (const entriesKey in player_entries[puuid]) { |
|
|
|
let points = rank_to_points(entries[entriesKey]["tier"], entries[entriesKey]["rank"], entries[entriesKey]["points"]); |
|
|
|
let points = rank_to_points(player_entries[puuid][entriesKey]["tier"], player_entries[puuid][entriesKey]["rank"], player_entries[puuid][entriesKey]["points"]); |
|
|
|
xValues.push(entriesKey); |
|
|
|
xValues.push(entriesKey); |
|
|
|
yValues.push(points); |
|
|
|
yValues.push(points); |
|
|
|
} |
|
|
|
} |
|
|
@ -21,6 +102,7 @@ window.onload = async function(){ |
|
|
|
data: { |
|
|
|
data: { |
|
|
|
labels: xValues, |
|
|
|
labels: xValues, |
|
|
|
datasets: [{ |
|
|
|
datasets: [{ |
|
|
|
|
|
|
|
label: `${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`, |
|
|
|
fill: false, |
|
|
|
fill: false, |
|
|
|
borderColor: "rgba(150,150,175)", |
|
|
|
borderColor: "rgba(150,150,175)", |
|
|
|
backgroundColor: "rgba(150,150,175)", |
|
|
|
backgroundColor: "rgba(150,150,175)", |
|
|
@ -33,8 +115,11 @@ window.onload = async function(){ |
|
|
|
tooltip: { |
|
|
|
tooltip: { |
|
|
|
callbacks: { |
|
|
|
callbacks: { |
|
|
|
label: function(context) { |
|
|
|
label: function(context) { |
|
|
|
return format_rank(entries[context.label]["tier"],entries[context.label]["rank"],entries[context.label]["points"]) |
|
|
|
return format_rank(player_entries[puuid][context.label]["tier"],player_entries[puuid][context.label]["rank"],player_entries[puuid][context.label]["points"]) |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
beforeTitle: function (context) { |
|
|
|
|
|
|
|
return context[0].dataset.label; |
|
|
|
|
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
@ -51,8 +136,6 @@ window.onload = async function(){ |
|
|
|
}, |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
}) |
|
|
|
|
|
|
|
.catch(e => console.error(e)) |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}; |
|
|
|
}; |
|
|
@ -115,3 +198,8 @@ function format_rank(tier,rank,lp) { |
|
|
|
rank_string += ` ${lp} LP`; |
|
|
|
rank_string += ` ${lp} LP`; |
|
|
|
return rank_string; |
|
|
|
return rank_string; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function getColor(num) { |
|
|
|
|
|
|
|
const colors = ["#ea5545", "#f46a9b", "#ef9b20", "#edbf33", "#ede15b", "#bdcf32", "#87bc45", "#27aeef", "#b33dc6"] |
|
|
|
|
|
|
|
return colors[num%9]; |
|
|
|
|
|
|
|
} |