Update static/js/util.js

static/js/util.js

@@ -589,34 +589,45 @@
 // Plotting Function
 
 function fetchAndPlotGraph(graphDivId, sensorId, fullscreenToggleId) {
-	const plotUrl = `/sensors/plot/${sensorId}`;
-	fetch(plotUrl)
-		.then(response => response.json())
-		.then(graphs => {
-			Plotly.newPlot(graphDivId, graphs.data, graphs.layout, {responsive: true});
-		})
-		.catch(error => console.error('Error:', error));
+    const plotUrl = `/sensors/plot/${sensorId}`;
+    fetch(plotUrl)
+        .then(response => response.json())
+        .then(graphs => {
+
+            // Create the Plotly graph with the updated layout
+            Plotly.newPlot(graphDivId, graphs.data, graphs.layout, {responsive: true});
+			
 
-	setupFullscreenToggle(graphDivId, fullscreenToggleId);
+        })
+        .catch(error => console.error('Error:', error));
 
+    setupFullscreenToggle(graphDivId, fullscreenToggleId);
 }
 
 function setupFullscreenToggle(graphDivId, fullscreenToggleId) {
-	var divGraph = document.getElementById(graphDivId);
-	var btnFullScreenToggle = document.getElementById(fullscreenToggleId);
-
-	btnFullScreenToggle.addEventListener('click', function() {
-		toggleFullscreen(divGraph);
-	});
-
-	document.addEventListener('fullscreenchange', function() {
-		var isFullScreen = Boolean(document.fullscreenElement);
-		var update = {
-			width: isFullScreen ? window.innerWidth : 1200,
-			height: isFullScreen ? window.innerHeight : 512
-		};
-		Plotly.relayout(graphDivId, update);
-	});
+    var divGraph = document.getElementById(graphDivId);
+    var btnFullScreenToggle = document.getElementById(fullscreenToggleId);
+
+    btnFullScreenToggle.addEventListener('click', function() {
+        toggleFullscreen(divGraph);
+    });
+
+    // Add event listener for window resize
+    window.addEventListener('resize', function() {
+        Plotly.relayout(graphDivId, {
+            width: divGraph.clientWidth, // Use the clientWidth of the divGraph
+            height: divGraph.clientHeight // Use the clientHeight of the divGraph
+        });
+    });
+
+    document.addEventListener('fullscreenchange', function() {
+        var isFullScreen = Boolean(document.fullscreenElement);
+        var update = {
+            width: isFullScreen ? window.innerWidth : divGraph.clientWidth,
+            height: isFullScreen ? window.innerHeight : 512
+        };
+        Plotly.relayout(graphDivId, update);
+    });
 }
 
 function toggleFullscreen(element) {