improved rendering of date and time in charts

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 player_rank_values = {};
-	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_progress_values = {};
-	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
@@ -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
+			let all_rank_yDatasets = []; // Datasets, also die einzelnen Linien im Graphen, beinhaltet player_rank_values
-				for (const entry_date in player_entries[puuid]) {
+			let all_progress_yDatasets = []; // Datasets, also die einzelnen Linien im Graphen, beinhaltet player_progress_values
-					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 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) {
+				for (const timestamp in player_entries[puuid]) {
-					// Für alle Player Entries Punktzahl berechnen und in player_points eintragen
+					// 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][timestamp]["tier"], player_entries[puuid][timestamp]["rank"], player_entries[puuid][timestamp]["points"]);
-						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_rank_values[puuid].push({x: parseInt(timestamp) * 1000, y: current_points});
-						player_points[puuid].push(current_points);
+					player_entries_byName[`${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`][timestamp] = player_entries[puuid][timestamp];
-						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);
+						player_progress_values[puuid].push({x: parseInt(timestamp) * 1000, y: 0});
-						} else {
-							player_pointprogress[puuid].push(current_points - player_start_points);
-						}
 					} else {
-						player_points[puuid].push(null);
+						player_progress_values[puuid].push({x: parseInt(timestamp) * 1000, y: current_points - player_start_points});
-						player_pointprogress[puuid].push(null);
 					}
 				}
 				// 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 values = [];
-		let yValues = [];
 		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);
+			values.push({x: parseInt(entriesKey)*1000, y: points});
-			yValues.push(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,

public/elotracker/index.php

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