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

improved rendering of date and time in charts

Browse Source
main
Simon Lang 7 months ago
parent 43664033b2
commit 3af92a2d0e
2 changed files with 57 additions and 45 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 97
      public/elotracker/chart-integration.js
  2. 1
      public/elotracker/index.php

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

@ -1,6 +1,31 @@
let combined_charts = [];
let player_charts = [];
const x_scale = {
display: true,
type: "timeseries",
time: {
parser: "dd.MM.yy HH:mm",
tooltipFormat: "dd.MM.yy HH:mm",
unit: "day",
unitStepSize: 1,
displayFormats: {
"day": "dd.MM.yy",
}
},
ticks: {
callback: (value, index, ticks) => {
let tickdate = new Date(value);
if (index === 0) return `${tickdate.getDate()}.${tickdate.getMonth() + 1}.`;
let prev_tickdate = new Date(ticks[index-1].value);
if (prev_tickdate.getDate() === tickdate.getDate()) {
return null;
}
return `${tickdate.getDate()}.${tickdate.getMonth() + 1}.`;
}
}
}
window.onload = create_charts;
async function create_charts() {
@ -8,11 +33,10 @@ async function create_charts() {
combined_charts = [];
player_charts.forEach(chart => chart.destroy());
player_charts = [];
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 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_rank_values = {};
let player_progress_values = {};
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
@ -24,39 +48,28 @@ async function create_charts() {
.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_pointprogress[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 all_rank_yDatasets = []; // Datasets, also die einzelnen Linien im Graphen, beinhaltet player_rank_values
let all_progress_yDatasets = []; // Datasets, also die einzelnen Linien im Graphen, beinhaltet player_progress_values
let color_counter = 0;
for (const puuid in player_entries) {
player_rank_values[puuid] = [];
player_progress_values[puuid] = [];
player_entries_byName[`${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`] = [];
let player_start_points = -1;
for (const date_string of all_dates) {
// Für alle Player Entries Punktzahl berechnen und in player_points eintragen
for (const timestamp in player_entries[puuid]) {
// Für alle Player Entries Punktzahl und Punktedifferenz berechnen
// 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_entries_byName[`${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`][date_string] = player_entries[puuid][date_string];
const current_points = rank_to_points(player_entries[puuid][timestamp]["tier"], player_entries[puuid][timestamp]["rank"], player_entries[puuid][timestamp]["points"]);
player_rank_values[puuid].push({x: parseInt(timestamp) * 1000, y: current_points});
player_entries_byName[`${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`][timestamp] = player_entries[puuid][timestamp];
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);
}
player_progress_values[puuid].push({x: parseInt(timestamp) * 1000, y: 0});
} else {
player_points[puuid].push(null);
player_pointprogress[puuid].push(null);
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
@ -65,7 +78,7 @@ async function create_charts() {
fill: false,
borderColor: getColor(color_counter),
backgroundColor: getColor(color_counter),
data: player_points[puuid],
data: player_rank_values[puuid],
spanGaps: true,
})
all_progress_yDatasets.push({
@ -73,7 +86,7 @@ async function create_charts() {
fill: false,
borderColor: getColor(color_counter),
backgroundColor: getColor(color_counter),
data: player_pointprogress[puuid],
data: player_progress_values[puuid],
spanGaps: true,
})
color_counter++;
@ -82,7 +95,6 @@ async function create_charts() {
combined_charts.push(new Chart(`progress-chart-combined`, {
type: "line",
data: {
labels: all_dates,
datasets: all_rank_yDatasets,
},
options: {
@ -90,7 +102,7 @@ async function create_charts() {
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"])
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;
@ -99,6 +111,7 @@ async function create_charts() {
}
},
scales: {
x: x_scale,
y: {
display: true,
stepSize: 100,
@ -116,7 +129,6 @@ async function create_charts() {
combined_charts.push(new Chart(`progress-chart-combined-progress`, {
type: "line",
data: {
labels: all_dates,
datasets: all_progress_yDatasets,
},
options: {
@ -124,7 +136,7 @@ async function create_charts() {
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"])
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;
@ -133,6 +145,7 @@ async function create_charts() {
}
},
scales: {
x: x_scale,
y: {
display: true,
},
@ -149,23 +162,20 @@ async function create_charts() {
let puuid = chart.id.split("-");
puuid.splice(0,2);
puuid = puuid.join("-");
let xValues = [];
let yValues = [];
let values = [];
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"]);
xValues.push(entriesKey);
yValues.push(points);
values.push({x: parseInt(entriesKey)*1000, y: points});
}
player_charts.push(new Chart(`progress-chart-${puuid}`, {
type: "line",
data: {
labels: xValues,
datasets: [{
label: `${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`,
fill: false,
borderColor: "rgba(150,150,175)",
backgroundColor: "rgba(150,150,175)",
data: yValues
data: values
}]
},
options: {
@ -174,7 +184,7 @@ async function create_charts() {
tooltip: {
callbacks: {
label: function(context) {
return format_rank(player_entries[puuid][context.label]["tier"],player_entries[puuid][context.label]["rank"],player_entries[puuid][context.label]["points"])
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;
@ -183,6 +193,7 @@ async function create_charts() {
}
},
scales: {
x: x_scale,
y: {
display: true,
stepSize: 100,

1
public/elotracker/index.php
Unescape View File

@ -5,6 +5,7 @@
<link href="styles.css" rel="stylesheet">
<title>UEM Elo Tracker</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</head>
<body>
<?php

Write Preview
Loading…
Cancel
Save