From 696dfd082ed20f61480bc2f30f3379f3fae1230f Mon Sep 17 00:00:00 2001
From: mekya <ahmetmermerkaya@gmail.com>
Date: Thu, 2 Jan 2025 18:51:24 +0300
Subject: [PATCH] Use fps charts wisely

---
 src/main/webapp/player.html | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/main/webapp/player.html b/src/main/webapp/player.html
index bcb5e45f..18e038ab 100644
--- a/src/main/webapp/player.html
+++ b/src/main/webapp/player.html
@@ -424,9 +424,20 @@ <h3 class="col text-muted">
         const fps = frameTimestamps.length/(fpsCalculationInterval/1000);
         //console.log("FPS: " + fps);
 
-		if (updateChart) {
+		if (updateChart) 
+		{
+			
+			
+			// Check if the data length exceeds the maximum
+			if (fpsChart.data.datasets[0].data.length > maxCapacity) { //60 means last 1 minute
+			    // Remove the oldest data point because charts causes performance problems if data size is too big
+			    fpsChart.data.datasets[0].data.shift();
+				fpsChart.data.labels.shift();
+			}
+			
 			fpsChart.data.labels.push(''); // Add empty label or time
 			fpsChart.data.datasets[0].data.push(fps); // Add FPS data
+			
 			fpsChart.update();
 			$("#frame_rendered").text(fps.toPrecision(3));
 			$("#frame_rendered").show();
@@ -644,8 +655,17 @@ <h3 class="col text-muted">
 							var fps = (obj.framesReceived - lastFrameReceivedCount) / timeDiff * 1000;
 							$("#frame_received").text(fps.toPrecision(3));
 							$("#frame_received_container").show();
+							
+							// Check if the data length exceeds the maximum
+							if (receivedFpsChart.data.datasets[0].data.length > maxCapacity) { //60 points means 60 seconds
+							    // Remove the oldest data point
+							    receivedFpsChart.data.datasets[0].data.shift();
+								receivedFpsChart.data.labels.shift();
+							}
+							
 							receivedFpsChart.data.labels.push(''); // Add empty label or time
 							receivedFpsChart.data.datasets[0].data.push(fps); // Add FPS data
+							
 							receivedFpsChart.update();
 						}
 						lastFrameReceivedCount = obj.framesReceived;
@@ -667,6 +687,12 @@ <h3 class="col text-muted">
 							$("#frame_decoded").text(fps.toPrecision(3));
 							$("#frame_decoded_container").show();
 
+							
+							if (decodedFpsChart.data.datasets[0].data.length > maxCapacity) { //60 points means 60 seconds
+							    // Remove the oldest data point
+							    decodedFpsChart.data.datasets[0].data.shift();
+								decodedFpsChart.data.labels.shift();
+							}
 							decodedFpsChart.data.labels.push(''); // Add empty label or time
 							decodedFpsChart.data.datasets[0].data.push(fps); // Add FPS data
 							decodedFpsChart.update();