From cd87286aac953dabbe04ccaf5849544cc2b1108b Mon Sep 17 00:00:00 2001
From: simon <mail@simon-lang.de>
Date: Wed, 28 Aug 2024 14:51:03 +0200
Subject: [PATCH] improved performance of charts by disabling animations

---
 public/elotracker/chart-integration.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/public/elotracker/chart-integration.js b/public/elotracker/chart-integration.js
index e4cb70c..e68092d 100644
--- a/public/elotracker/chart-integration.js
+++ b/public/elotracker/chart-integration.js
@@ -59,7 +59,7 @@ const trigger_legend_hover = function (legendItem, chart) {
 		dataset.borderWidth = legendItem.datasetIndex === i ? 4 : 3;
 		dataset.pointRadius = dataset.pointRadius===0 ? 0 : 2;
 	});
-	chart.update();
+	chart.update("none");
 }
 const trigger_legend_leave = function (chart) {
 	chart.data.datasets.forEach((dataset, i) => {
@@ -67,7 +67,7 @@ const trigger_legend_leave = function (chart) {
 		dataset.borderColor = dataset.borderColor.length === 9 ? dataset.borderColor.slice(0, -2) : dataset.borderColor;
 		dataset.borderWidth = 3;
 	});
-	chart.update();
+	chart.update("none");
 	hovered = false;
 }
 const trigger_legend_click = function (item) {
@@ -469,7 +469,7 @@ function getColor(num) {
 	return colors[num % 9];
 }
 
-function toggle_combined_chart() {
+async function toggle_combined_chart() {
 	const comb_charts = this.parentNode.parentNode.querySelectorAll(`.leaderboard>.graph-wrapper`);
 	const chart = this.parentNode.parentNode.querySelector(`.graph-wrapper.${this.id}`);
 	const buttons = document.querySelectorAll("button.open-general-graph");
@@ -477,6 +477,9 @@ function toggle_combined_chart() {
 	const all_legends = document.querySelectorAll(`#combined-chart-legends .chart-legend`);
 	all_legends.forEach(element => {element.classList.add("hidden")});
 	legend.classList.remove("hidden");
+	combined_charts.forEach(c_chart => {
+		c_chart.options.animation = false;
+	})
 	if (chart.classList.contains("closed")) {
 		comb_charts.forEach(element => element.classList.add("closed"));
 		buttons.forEach(element => element.classList.remove("dropdown-open"));
@@ -488,6 +491,10 @@ function toggle_combined_chart() {
 		this.classList.remove("dropdown-open");
 		document.querySelector("#combined-chart-legends").classList.add("hidden");
 	}
+	await new Promise(r => setTimeout(r,400)); // auf höhen-animation warten
+	combined_charts.forEach(c_chart => {
+		c_chart.options.animation = true;
+	})
 }
 
 function toggle_leaderboard_chart(event) {