Update main.js

static/js/main.js

@@ -326,6 +326,7 @@ let reconnectionDelay = 1000; // Start with 1 second
 let pingInterval = null;
 let lastPingTime = Date.now();
 let connectionLostTimeout = null;
+let previousBlockHeight = null; // Declare and initialize previousBlockHeight
 
 // Server time variables for uptime calculation
 let serverTimeOffset = 0;
@@ -777,7 +778,7 @@ function initializeChart() {
             }
         }
     } : {}
-                }
+}
             }
         });
     } catch (error) {
@@ -963,6 +964,28 @@ function updateChartWithNormalizedData(chart, data) {
             }
         }
 
+        // Add a new dataset for block found points
+        const blockFoundDataset = {
+            label: 'Block Found',
+            data: [], // This will be populated with the points where a block is found
+            borderColor: 'red',
+            backgroundColor: 'red',
+            pointRadius: 5,
+            pointHoverRadius: 7,
+            showLine: false
+        };
+
+        // Populate the block found dataset
+        if (data.block_found_points) {
+            blockFoundDataset.data = data.block_found_points.map(point => ({
+                x: point.time,
+                y: point.value
+            }));
+        }
+
+        // Add the new dataset to the chart
+        chart.data.datasets.push(blockFoundDataset);
+
         // Always update the chart
         chart.update('none');
     } catch (chartError) {
@@ -980,6 +1003,14 @@ function updateUI() {
     try {
         const data = latestMetrics;
 
+        // Check for block updates
+        if (previousBlockHeight !== null && data.last_block_height !== previousBlockHeight) {
+            // Block found, update the chart
+            highlightBlockFound(data.last_block_height);
+        }
+
+        previousBlockHeight = data.last_block_height;
+
         // If this is the initial load, force a reset of all arrows
         if (initialLoad) {
             arrowIndicator.forceApplyArrows();
@@ -1117,6 +1148,27 @@ function updateUI() {
         console.error("Error updating UI:", error);
     }
 }
+function highlightBlockFound(blockHeight) {
+    if (!trendChart) {
+        console.warn("Chart not initialized");
+        return;
+    }
+
+    // Add the block found point to the chart data
+    const blockFoundPoint = {
+        time: new Date().toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' }),
+        value: latestMetrics.hashrate_60sec // Use the current hashrate value
+    };
+
+    if (!latestMetrics.block_found_points) {
+        latestMetrics.block_found_points = [];
+    }
+
+    latestMetrics.block_found_points.push(blockFoundPoint);
+
+    // Update the chart with the new block found point
+    updateChartWithNormalizedData(trendChart, latestMetrics);
+}
 
 // Update unread notifications badge in navigation
 function updateNotificationBadge() {