@ -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 ) ) ;
