code rearranged, x axis is linear

public/elotracker/chart-integration.js

@@ -3,24 +3,11 @@ let player_charts = [];
 
 const x_scale = {
 	display: true,
-		type: "timeseries",
+	type: "linear",
-		time: {
+	stepSize: 1000 * 60 * 60 * 24,
-		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()}.${month_names[tickdate.getMonth()]}`;
-			let prev_tickdate = new Date(ticks[index-1].value);
-			if (prev_tickdate.getDate() === tickdate.getDate()) {
-				return null;
-			}
 			return `${tickdate.getDate()}.${month_names[tickdate.getMonth()]}`;
 		}
 	}
@@ -98,6 +85,20 @@ async function create_charts() {
 	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
 
+	const tooltip_plugin = {
+		callbacks: {
+			label: function (context) {
+				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"])
+			},
+			title: items => {
+				return new Date(items[0].raw.x).toLocaleDateString();
+			},
+			beforeTitle: function (context) {
+				return context[0].dataset.label;
+			},
+		}
+	};
+
 	await fetch(`get.php`, {
 		method: "GET",
 	})
@@ -126,7 +127,10 @@ async function create_charts() {
 						player_start_points = current_points;
 						player_progress_values[puuid].push({x: parseInt(timestamp) * 1000, y: 0});
 					} else {
-						player_progress_values[puuid].push({x: parseInt(timestamp) * 1000, y: current_points - player_start_points});
+						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
@@ -158,16 +162,7 @@ async function create_charts() {
 				},
 				options: {
 					plugins: {
-						tooltip: {
+						tooltip: tooltip_plugin,
-							callbacks: {
-								label: function(context) {
-									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;
-								},
-							}
-						},
 						zoom: zoom_plugin,
 						legend: legend_plugin,
 					},
@@ -194,16 +189,7 @@ async function create_charts() {
 				},
 				options: {
 					plugins: {
-						tooltip: {
+						tooltip: tooltip_plugin,
-							callbacks: {
-								label: function(context) {
-									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;
-								},
-							}
-						},
 						zoom: zoom_plugin,
 						legend: legend_plugin,
 					},
@@ -245,16 +231,7 @@ async function create_charts() {
 			options: {
 				plugins: {
 					legend: {display: false},
-					tooltip: {
+					tooltip: tooltip_plugin,
-						callbacks: {
-							label: function(context) {
-								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;
-							},
-						}
-					},
 					zoom: zoom_plugin,
 				},
 				scales: {
@@ -299,6 +276,7 @@ function rank_to_points(tier,rank,lp) {
 		return tiers[tier] + ranks[rank] + lp;
 	}
 }
+
 function points_to_rankstring(points, include_LP = true) {
 	const apex_tiers = (points >= 2800);
 	let lp = (apex_tiers) ? points - 2800 : points % 100
@@ -351,6 +329,7 @@ function toggle_combined_chart() {
 		chart.classList.add("closed");
 	}
 }
+
 function toggle_leaderboard_chart(event) {
 	if (this.classList.contains("closed")) {
 		this.classList.remove("closed");
@@ -359,6 +338,7 @@ function toggle_leaderboard_chart(event) {
 		this.classList.add("closed");
 	}
 }
+
 document.querySelectorAll("button.open-general-graph").forEach(element => element.addEventListener("click", toggle_combined_chart));
 document.querySelectorAll("button.leaderboard-element").forEach(element => element.addEventListener("mousedown", toggle_leaderboard_chart));
 
@@ -388,6 +368,7 @@ async function update_leaderboard_entries() {
 		eventSource.close();
 		update_leaderboard_elements();
 	})
+
 	function reset_button(button) {
 		button.disabled = false;
 		button.style.setProperty("--button-loading-bar-width", `0`);
@@ -411,6 +392,7 @@ function format_time_minsec(date) {
 	}
 	return min + trenner + nullausgleich + date.getSeconds() + format;
 }
+
 const month_names = ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"];
 
 async function update_leaderboard_elements() {