diff --git a/public/elotracker/chart-integration.js b/public/elotracker/chart-integration.js
index 7a7aad6..2acb58d 100644
--- a/public/elotracker/chart-integration.js
+++ b/public/elotracker/chart-integration.js
@@ -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];
- 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);
- }
+ 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_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,
diff --git a/public/elotracker/index.php b/public/elotracker/index.php
index 5878fdf..eba3d97 100644
--- a/public/elotracker/index.php
+++ b/public/elotracker/index.php
@@ -5,6 +5,7 @@
UEM Elo Tracker
+