Update main.js

static/js/main.js

@@ -17,78 +17,58 @@ let pingInterval = null;
 let lastPingTime = Date.now();
 let connectionLostTimeout = null;
 
-// Bitcoin-themed progress bar functionality
-let progressInterval;
-let currentProgress = 0;
-let lastUpdateTime = Date.now();
-let expectedUpdateInterval = 60000; // Expected server update interval (60 seconds)
-const PROGRESS_MAX = 60; // 60 seconds for a complete cycle
-
-// Initialize the progress bar and start the animation
-function initProgressBar() {
-    // Clear any existing interval
-    if (progressInterval) {
-        clearInterval(progressInterval);
-    }
-    
-    // Set last update time to now
-    lastUpdateTime = Date.now();
-    
-    // Reset progress with initial offset
-    currentProgress = 1; // Start at 1 instead of 0 for offset
-    updateProgressBar(currentProgress);
-    
-    // Start the interval
-    progressInterval = setInterval(function() {
-        // Calculate elapsed time since last update
-        const elapsedTime = Date.now() - lastUpdateTime;
-        
-        // Calculate progress percentage based on elapsed time with +1 second offset
-        const secondsElapsed = Math.floor(elapsedTime / 1000) + 1; // Add 1 second offset
-        
-        // If we've gone past the expected update time
-        if (secondsElapsed >= PROGRESS_MAX) {
-            // Keep the progress bar full but show waiting state
-            currentProgress = PROGRESS_MAX;
-        } else {
-            // Normal progress with offset
-            currentProgress = secondsElapsed;
-        }
-        
-        updateProgressBar(currentProgress);
-    }, 1000);
-}
-
-// Update the progress bar display
-function updateProgressBar(seconds) {
-    const progressPercent = (seconds / PROGRESS_MAX) * 100;
-    $("#bitcoin-progress-inner").css("width", progressPercent + "%");
-    
-    // Add glowing effect when close to completion
-    if (progressPercent > 80) {
-        $("#bitcoin-progress-inner").addClass("glow-effect");
-    } else {
-        $("#bitcoin-progress-inner").removeClass("glow-effect");
-    }
-    
-    // Update remaining seconds text - more precise calculation
-    let remainingSeconds = PROGRESS_MAX - seconds;
-    
-    // When we're past the expected time, show "Waiting for update..."
-    if (remainingSeconds <= 0) {
-        $("#progress-text").text("Waiting for update...");
-        $("#bitcoin-progress-inner").addClass("waiting-for-update");
-    } else {
-        $("#progress-text").text(remainingSeconds + "s to next update");
-        $("#bitcoin-progress-inner").removeClass("waiting-for-update");
-    }
-}
-
 // Register Chart.js annotation plugin if available
 if (window['chartjs-plugin-annotation']) {
     Chart.register(window['chartjs-plugin-annotation']);
 }
 
+// Hashrate Normalization Utilities
+// Helper function to normalize hashrate to TH/s for consistent graphing
+function normalizeHashrate(value, unit) {
+    if (!value || isNaN(value)) return 0;
+
+    unit = (unit || 'th/s').toLowerCase();
+    if (unit.includes('ph/s')) {
+        return value * 1000; // Convert PH/s to TH/s
+    } else if (unit.includes('eh/s')) {
+        return value * 1000000; // Convert EH/s to TH/s
+    } else if (unit.includes('gh/s')) {
+        return value / 1000; // Convert GH/s to TH/s
+    } else if (unit.includes('mh/s')) {
+        return value / 1000000; // Convert MH/s to TH/s
+    } else if (unit.includes('kh/s')) {
+        return value / 1000000000; // Convert KH/s to TH/s
+    } else if (unit.includes('h/s') && !unit.includes('th/s') && !unit.includes('ph/s') &&
+        !unit.includes('eh/s') && !unit.includes('gh/s') && !unit.includes('mh/s') &&
+        !unit.includes('kh/s')) {
+        return value / 1000000000000; // Convert H/s to TH/s
+    } else {
+        // Assume TH/s if unit is not recognized
+        return value;
+    }
+}
+
+// Helper function to format hashrate values for display
+function formatHashrateForDisplay(value, unit) {
+    if (isNaN(value) || value === null || value === undefined) return "N/A";
+
+    // Always normalize to TH/s first if unit is provided
+    let normalizedValue = unit ? normalizeHashrate(value, unit) : value;
+
+    // Select appropriate unit based on magnitude
+    if (normalizedValue >= 1000000) { // EH/s range
+        return (normalizedValue / 1000000).toFixed(2) + ' EH/s';
+    } else if (normalizedValue >= 1000) { // PH/s range
+        return (normalizedValue / 1000).toFixed(2) + ' PH/s';
+    } else if (normalizedValue >= 1) { // TH/s range
+        return normalizedValue.toFixed(2) + ' TH/s';
+    } else if (normalizedValue >= 0.001) { // GH/s range
+        return (normalizedValue * 1000).toFixed(2) + ' GH/s';
+    } else { // MH/s range or smaller
+        return (normalizedValue * 1000000).toFixed(2) + ' MH/s';
+    }
+}
+
 // SSE Connection with Error Handling and Reconnection Logic
 function setupEventSource() {
     console.log("Setting up EventSource connection...");
@@ -121,7 +101,7 @@ function setupEventSource() {
     try {
         const eventSource = new EventSource(streamUrl);
 
-        eventSource.onopen = function(e) {
+        eventSource.onopen = function (e) {
             console.log("EventSource connection opened successfully");
             connectionRetryCount = 0; // Reset retry count on successful connection
             reconnectionDelay = 1000; // Reset reconnection delay
@@ -129,7 +109,7 @@ function setupEventSource() {
 
             // Start ping interval to detect dead connections
             lastPingTime = Date.now();
-            pingInterval = setInterval(function() {
+            pingInterval = setInterval(function () {
                 const now = Date.now();
                 if (now - lastPingTime > 60000) { // 60 seconds without data
                     console.warn("No data received for 60 seconds, reconnecting...");
@@ -140,7 +120,7 @@ function setupEventSource() {
             }, 10000); // Check every 10 seconds
         };
 
-        eventSource.onmessage = function(e) {
+        eventSource.onmessage = function (e) {
             console.log("SSE message received");
             lastPingTime = Date.now(); // Update ping time on any message
 
@@ -185,7 +165,7 @@ function setupEventSource() {
 
                     // If retry time provided, use it, otherwise use default
                     const retryTime = data.retry || 5000;
-                    setTimeout(function() {
+                    setTimeout(function () {
                         manualRefresh();
                     }, retryTime);
                     return;
@@ -196,15 +176,15 @@ function setupEventSource() {
                 updateUI();
                 hideConnectionIssue();
 
-                // Also explicitly trigger a data refresh event
+                // Notify BitcoinMinuteRefresh that we did a refresh
-                $(document).trigger('dataRefreshed');
+                BitcoinMinuteRefresh.notifyRefresh();
             } catch (err) {
                 console.error("Error processing SSE data:", err);
                 showConnectionIssue("Data processing error");
             }
         };
 
-        eventSource.onerror = function(e) {
+        eventSource.onerror = function (e) {
             console.error("SSE connection error", e);
             showConnectionIssue("Connection lost");
 
@@ -231,7 +211,7 @@ function setupEventSource() {
             const jitter = Math.random() * 0.3 + 0.85; // 0.85-1.15
             reconnectionDelay = Math.min(30000, reconnectionDelay * 1.5 * jitter);
 
-            console.log(`Reconnecting in ${(reconnectionDelay/1000).toFixed(1)} seconds... (attempt ${connectionRetryCount}/${maxRetryCount})`);
+            console.log(`Reconnecting in ${(reconnectionDelay / 1000).toFixed(1)} seconds... (attempt ${connectionRetryCount}/${maxRetryCount})`);
             setTimeout(setupEventSource, reconnectionDelay);
         };
 
@@ -239,7 +219,7 @@ function setupEventSource() {
         console.log("EventSource setup complete");
 
         // Set a timeout to detect if connection is established
-        connectionLostTimeout = setTimeout(function() {
+        connectionLostTimeout = setTimeout(function () {
             if (eventSource.readyState !== 1) { // 1 = OPEN
                 console.warn("Connection not established within timeout, switching to manual refresh");
                 showConnectionIssue("Connection timeout");
@@ -300,17 +280,17 @@ function manualRefresh() {
         method: 'GET',
         dataType: 'json',
         timeout: 15000, // 15 second timeout
-        success: function(data) {
+        success: function (data) {
             console.log("Manual refresh successful");
             lastPingTime = Date.now(); // Update ping time
             latestMetrics = data;
             updateUI();
             hideConnectionIssue();
 
-            // Explicitly trigger data refresh event
+            // Notify BitcoinMinuteRefresh that we've refreshed the data
-            $(document).trigger('dataRefreshed');
+            BitcoinMinuteRefresh.notifyRefresh();
         },
-        error: function(xhr, status, error) {
+        error: function (xhr, status, error) {
             console.error("Manual refresh failed:", error);
             showConnectionIssue("Manual refresh failed");
 
@@ -322,7 +302,7 @@ function manualRefresh() {
     });
 }
 
-// Initialize Chart.js with Error Handling
+// Initialize Chart.js with Unit Normalization
 function initializeChart() {
     try {
         const ctx = document.getElementById('trendGraph').getContext('2d');
@@ -344,7 +324,7 @@ function initializeChart() {
             data: {
                 labels: [],
                 datasets: [{
-                    label: '60s Hashrate Trend (TH/s)',
+                    label: 'Hashrate Trend (TH/s)', // Always use TH/s as the normalized unit
                     data: [],
                     borderColor: '#f7931a',
                     backgroundColor: 'rgba(247,147,26,0.1)',
@@ -359,13 +339,71 @@ function initializeChart() {
                     duration: 0 // Disable animations for better performance
                 },
                 scales: {
-                    x: { display: false },
+                    x: {
+                        display: false,
+                        ticks: {
+                            maxTicksLimit: 8, // Limit number of x-axis labels
+                            maxRotation: 0,   // Don't rotate labels
+                            autoSkip: true    // Automatically skip some labels
+                        }
+                    },
                     y: {
-                        ticks: { color: 'white' },
+                        title: {
-                        grid: { color: '#333' }
+                            display: true,
+                            text: 'Hashrate (TH/s)' // Always display unit as TH/s since that's our normalized unit
+                        },
+                        ticks: {
+                            color: 'white',
+                            maxTicksLimit: 6, // Limit total number of ticks
+                            precision: 1,     // Control decimal precision
+                            autoSkip: true,   // Skip labels to prevent overcrowding
+                            autoSkipPadding: 10, // Padding between skipped labels
+                            callback: function (value) {
+                                // For zero, just return 0
+                                if (value === 0) return '0';
+
+                                // For very large values (1M+)
+                                if (value >= 1000000) {
+                                    return (value / 1000000).toFixed(1) + 'M';
+                                }
+                                // For large values (1K+)
+                                else if (value >= 1000) {
+                                    return (value / 1000).toFixed(1) + 'K';
+                                }
+                                // For values between 10 and 1000
+                                else if (value >= 10) {
+                                    return Math.round(value);
+                                }
+                                // For small values, limit decimal places
+                                else if (value >= 1) {
+                                    return value.toFixed(1);
+                                }
+                                // For tiny values, use appropriate precision
+                                else {
+                                    return value.toPrecision(2);
+                                }
+                            }
+                        },
+                        grid: {
+                            color: '#333',
+                            lineWidth: 0.5,
+                            drawBorder: false,
+                            zeroLineColor: '#555',
+                            zeroLineWidth: 1,
+                            drawTicks: false
+                        }
                     }
                 },
                 plugins: {
+                    tooltip: {
+                        callbacks: {
+                            label: function (context) {
+                                // Format tooltip values with appropriate unit
+                                const value = context.raw;
+                                return 'Hashrate: ' + formatHashrateForDisplay(value);
+                            }
+                        }
+                    },
                     legend: { display: false },
                     annotation: hasAnnotationPlugin ? {
                         annotations: {
@@ -408,51 +446,65 @@ function updateServerTime() {
         url: "/api/time",
         method: "GET",
         timeout: 5000,
-        success: function(data) {
+        success: function (data) {
+            // Calculate the offset between server time and local time
             serverTimeOffset = new Date(data.server_timestamp).getTime() - Date.now();
             serverStartTime = new Date(data.server_start_time).getTime();
+
+            // Update BitcoinMinuteRefresh with server time info
+            BitcoinMinuteRefresh.updateServerTime(serverTimeOffset, serverStartTime);
+
+            console.log("Server time synchronized. Offset:", serverTimeOffset, "ms");
         },
-        error: function(jqXHR, textStatus, errorThrown) {
+        error: function (jqXHR, textStatus, errorThrown) {
             console.error("Error fetching server time:", textStatus, errorThrown);
         }
     });
 }
 
-// Update uptime display
+// Update UI indicators (arrows) with unit normalization
-function updateUptime() {
-    if (serverStartTime) {
-        const currentServerTime = Date.now() + serverTimeOffset;
-        const diff = currentServerTime - serverStartTime;
-        const hours = Math.floor(diff / (1000 * 60 * 60));
-        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-        const seconds = Math.floor((diff % (1000 * 60)) / 1000);
-        $("#uptimeTimer").html("<strong>Uptime:</strong> " + hours + "h " + minutes + "m " + seconds + "s");
-    }
-}
-
-// Update UI indicators (arrows)
 function updateIndicators(newMetrics) {
+    console.log("Updating indicators with new metrics");
+
     const keys = [
         "pool_total_hashrate", "hashrate_24hr", "hashrate_3hr", "hashrate_10min",
         "hashrate_60sec", "block_number", "btc_price", "network_hashrate",
         "difficulty", "daily_revenue", "daily_power_cost", "daily_profit_usd",
         "monthly_profit_usd", "daily_mined_sats", "monthly_mined_sats", "unpaid_earnings",
-        "estimated_earnings_per_day_sats", "estimated_earnings_next_block_sats", "estimated_rewards_in_window_sats",
+        "estimated_earnings_per_day_sats", "estimated_earnings_next_block_sats",
-        "workers_hashing"
+        "estimated_rewards_in_window_sats", "workers_hashing"
     ];
 
-    keys.forEach(function(key) {
+    keys.forEach(function (key) {
         const newVal = parseFloat(newMetrics[key]);
         if (isNaN(newVal)) return;
 
         const oldVal = parseFloat(previousMetrics[key]);
         if (!isNaN(oldVal)) {
-            if (newVal > oldVal) {
+            // For hashrate values, normalize both values to the same unit before comparison
+            if (key.includes('hashrate')) {
+                const newUnit = newMetrics[key + '_unit'] || 'th/s';
+                const oldUnit = previousMetrics[key + '_unit'] || 'th/s';
+
+                const normalizedNewVal = normalizeHashrate(newVal, newUnit);
+                const normalizedOldVal = normalizeHashrate(oldVal, oldUnit);
+
+                // Lower threshold to 0.5% to catch more changes
+                if (normalizedNewVal > normalizedOldVal * 1.0001) {
                     persistentArrows[key] = "<i class='arrow chevron fa-solid fa-angle-double-up bounce-up' style='color: green;'></i>";
-            } else if (newVal < oldVal) {
+                } else if (normalizedNewVal < normalizedOldVal * 0.9999) {
                     persistentArrows[key] = "<i class='arrow chevron fa-solid fa-angle-double-down bounce-down' style='color: red; position: relative; top: -2px;'></i>";
                 }
             } else {
+                // Lower threshold to 0.5% for non-hashrate values too
+                if (newVal > oldVal * 1.0001) {
+                    persistentArrows[key] = "<i class='arrow chevron fa-solid fa-angle-double-up bounce-up' style='color: green;'></i>";
+                } else if (newVal < oldVal * 0.9999) {
+                    persistentArrows[key] = "<i class='arrow chevron fa-solid fa-angle-double-down bounce-down' style='color: red; position: relative; top: -2px;'></i>";
+                }
+            }
+        } else {
+            // Keep using arrow_history as fallback - this code is unchanged
             if (newMetrics.arrow_history && newMetrics.arrow_history[key] && newMetrics.arrow_history[key].length > 0) {
                 const historyArr = newMetrics.arrow_history[key];
                 for (let i = historyArr.length - 1; i >= 0; i--) {
@@ -468,12 +520,16 @@ function updateIndicators(newMetrics) {
             }
         }
 
+        // Debug which indicators exist
         const indicator = document.getElementById("indicator_" + key);
         if (indicator) {
             indicator.innerHTML = persistentArrows[key] || "";
+        } else {
+            console.warn(`Missing indicator element for: ${key}`);
         }
     });
 
+    // Store current metrics for next comparison
     previousMetrics = { ...newMetrics };
 }
 
@@ -523,14 +579,119 @@ function checkForBlockUpdates(data) {
 // Helper function to show congratulatory messages
 function showCongrats(message) {
     const $congrats = $("#congratsMessage");
-    $congrats.text(message).fadeIn(500, function() {
+    $congrats.text(message).fadeIn(500, function () {
-        setTimeout(function() {
+        setTimeout(function () {
             $congrats.fadeOut(500);
         }, 3000);
     });
 }
 
-// Main UI update function
+// Enhanced Chart Update Function with Unit Normalization
+function updateChartWithNormalizedData(chart, data) {
+    if (!chart || !data) {
+        console.warn("Cannot update chart - chart or data is null");
+        return;
+    }
+
+    try {
+        // Always update the 24hr average line even if we don't have data points yet
+        const avg24hr = parseFloat(data.hashrate_24hr || 0);
+        const avg24hrUnit = data.hashrate_24hr_unit ? data.hashrate_24hr_unit.toLowerCase() : 'th/s';
+
+        // Normalize the average value to TH/s
+        const normalizedAvg = normalizeHashrate(avg24hr, avg24hrUnit);
+
+        if (!isNaN(normalizedAvg) &&
+            chart.options.plugins.annotation &&
+            chart.options.plugins.annotation.annotations &&
+            chart.options.plugins.annotation.annotations.averageLine) {
+            const annotation = chart.options.plugins.annotation.annotations.averageLine;
+            annotation.yMin = normalizedAvg;
+            annotation.yMax = normalizedAvg;
+            annotation.label.content = '24hr Avg: ' + normalizedAvg.toFixed(1) + ' TH/s';
+        }
+
+        // Update data points if we have any
+        if (data.arrow_history && data.arrow_history.hashrate_60sec) {
+            const historyData = data.arrow_history.hashrate_60sec;
+            if (historyData && historyData.length > 0) {
+                console.log(`Updating chart with ${historyData.length} data points`);
+
+                // Store the current unit for reference
+                const currentUnit = data.hashrate_60sec_unit ? data.hashrate_60sec_unit.toLowerCase() : 'th/s';
+
+                // Create normalized data points
+                chart.data.labels = historyData.map(item => {
+                    // Simplify time format to just hours:minutes
+                    const timeStr = item.time;
+                    // If format is HH:MM:SS, truncate seconds
+                    if (timeStr.length === 8 && timeStr.indexOf(':') !== -1) {
+                        return timeStr.substring(0, 5);
+                    }
+                    // If already in HH:MM format or other format, return as is
+                    return timeStr;
+                });
+
+                chart.data.datasets[0].data = historyData.map(item => {
+                    const val = parseFloat(item.value);
+
+                    // If the history has unit information
+                    if (item.unit) {
+                        return normalizeHashrate(val, item.unit);
+                    }
+
+                    // Otherwise use the current unit as the baseline
+                    return normalizeHashrate(val, currentUnit);
+                });
+
+                // Calculate the min and max values after normalization
+                const values = chart.data.datasets[0].data.filter(v => !isNaN(v) && v !== null);
+                if (values.length > 0) {
+                    const max = Math.max(...values);
+                    const min = Math.min(...values.filter(v => v > 0)) || 0;
+
+                    // Set appropriate Y-axis scale with some padding
+                    chart.options.scales.y.min = min * 0.8;
+                    chart.options.scales.y.max = max * 1.2;
+
+                    // Use appropriate tick step based on the range
+                    const range = max - min;
+                    if (range > 1000) {
+                        chart.options.scales.y.ticks.stepSize = 500;
+                    } else if (range > 100) {
+                        chart.options.scales.y.ticks.stepSize = 50;
+                    } else if (range > 10) {
+                        chart.options.scales.y.ticks.stepSize = 5;
+                    } else {
+                        chart.options.scales.y.ticks.stepSize = 1;
+                    }
+                }
+            } else {
+                console.log("No history data points available yet");
+            }
+        } else {
+            console.log("No hashrate_60sec history available yet");
+
+            // If there's no history data, create a starting point using current hashrate
+            if (data.hashrate_60sec) {
+                const currentTime = new Date().toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
+                const currentUnit = data.hashrate_60sec_unit ? data.hashrate_60sec_unit.toLowerCase() : 'th/s';
+                const normalizedValue = normalizeHashrate(parseFloat(data.hashrate_60sec) || 0, currentUnit);
+
+                chart.data.labels = [currentTime];
+                chart.data.datasets[0].data = [normalizedValue];
+                console.log("Created initial data point with current hashrate");
+            }
+        }
+
+        // Always update the chart
+        chart.update('none');
+    } catch (chartError) {
+        console.error("Error updating chart:", chartError);
+    }
+}
+
+// Main UI update function with hashrate normalization
 function updateUI() {
     if (!latestMetrics) {
         console.warn("No metrics data available");
@@ -546,37 +707,66 @@ function updateUI() {
         }
 
         // Cache jQuery selectors for performance and use safe update methods
-        updateElementText("pool_total_hashrate", 
+        // Format each hashrate with proper normalization
-            (data.pool_total_hashrate != null ? data.pool_total_hashrate : "N/A") + " " +
-            (data.pool_total_hashrate_unit ? data.pool_total_hashrate_unit.slice(0,-2).toUpperCase() + data.pool_total_hashrate_unit.slice(-2) : "")
-        );
 
-        updateElementText("hashrate_24hr", 
+        // Pool Hashrate
-            (data.hashrate_24hr != null ? data.hashrate_24hr : "N/A") + " " +
+        let formattedPoolHashrate = "N/A";
-            (data.hashrate_24hr_unit ? data.hashrate_24hr_unit.slice(0,-2).toUpperCase() + data.hashrate_24hr_unit.slice(-2) : "")
+        if (data.pool_total_hashrate != null) {
+            formattedPoolHashrate = formatHashrateForDisplay(
+                data.pool_total_hashrate,
+                data.pool_total_hashrate_unit || 'th/s'
             );
+        }
+        updateElementText("pool_total_hashrate", formattedPoolHashrate);
 
-        updateElementText("hashrate_3hr", 
+        // 24hr Hashrate
-            (data.hashrate_3hr != null ? data.hashrate_3hr : "N/A") + " " +
+        let formatted24hrHashrate = "N/A";
-            (data.hashrate_3hr_unit ? data.hashrate_3hr_unit.slice(0,-2).toUpperCase() + data.hashrate_3hr_unit.slice(-2) : "")
+        if (data.hashrate_24hr != null) {
+            formatted24hrHashrate = formatHashrateForDisplay(
+                data.hashrate_24hr,
+                data.hashrate_24hr_unit || 'th/s'
             );
+        }
+        updateElementText("hashrate_24hr", formatted24hrHashrate);
 
-        updateElementText("hashrate_10min", 
+        // 3hr Hashrate
-            (data.hashrate_10min != null ? data.hashrate_10min : "N/A") + " " +
+        let formatted3hrHashrate = "N/A";
-            (data.hashrate_10min_unit ? data.hashrate_10min_unit.slice(0,-2).toUpperCase() + data.hashrate_10min_unit.slice(-2) : "")
+        if (data.hashrate_3hr != null) {
+            formatted3hrHashrate = formatHashrateForDisplay(
+                data.hashrate_3hr,
+                data.hashrate_3hr_unit || 'th/s'
             );
+        }
+        updateElementText("hashrate_3hr", formatted3hrHashrate);
 
-        updateElementText("hashrate_60sec", 
+        // 10min Hashrate
-            (data.hashrate_60sec != null ? data.hashrate_60sec : "N/A") + " " +
+        let formatted10minHashrate = "N/A";
-            (data.hashrate_60sec_unit ? data.hashrate_60sec_unit.slice(0,-2).toUpperCase() + data.hashrate_60sec_unit.slice(-2) : "")
+        if (data.hashrate_10min != null) {
+            formatted10minHashrate = formatHashrateForDisplay(
+                data.hashrate_10min,
+                data.hashrate_10min_unit || 'th/s'
             );
+        }
+        updateElementText("hashrate_10min", formatted10minHashrate);
 
+        // 60sec Hashrate
+        let formatted60secHashrate = "N/A";
+        if (data.hashrate_60sec != null) {
+            formatted60secHashrate = formatHashrateForDisplay(
+                data.hashrate_60sec,
+                data.hashrate_60sec_unit || 'th/s'
+            );
+        }
+        updateElementText("hashrate_60sec", formatted60secHashrate);
+
+        // Update other non-hashrate metrics
         updateElementText("block_number", numberWithCommas(data.block_number));
 
         updateElementText("btc_price",
             data.btc_price != null ? "$" + numberWithCommas(parseFloat(data.btc_price).toFixed(2)) : "N/A"
         );
 
+        // Network hashrate (already in EH/s but verify)
         updateElementText("network_hashrate", numberWithCommas(Math.round(data.network_hashrate)) + " EH/s");
         updateElementText("difficulty", numberWithCommas(Math.round(data.difficulty)));
         updateElementText("daily_revenue", "$" + numberWithCommas(data.daily_revenue.toFixed(2)));
@@ -604,14 +794,14 @@ function updateUI() {
             const days = parseFloat(payoutText);
             if (!isNaN(days)) {
                 if (days < 4) {
-                    $("#est_time_to_payout").css({"color": "#32CD32", "animation": "none"});
+                    $("#est_time_to_payout").css({ "color": "#32CD32", "animation": "none" });
                 } else if (days > 20) {
-                    $("#est_time_to_payout").css({"color": "red", "animation": "none"});
+                    $("#est_time_to_payout").css({ "color": "red", "animation": "none" });
                 } else {
-                    $("#est_time_to_payout").css({"color": "#ffd700", "animation": "none"});
+                    $("#est_time_to_payout").css({ "color": "#ffd700", "animation": "none" });
                 }
             } else {
-                $("#est_time_to_payout").css({"color": "#ffd700", "animation": "none"});
+                $("#est_time_to_payout").css({ "color": "#ffd700", "animation": "none" });
             }
         }
 
@@ -629,51 +819,10 @@ function updateUI() {
         const now = new Date(Date.now() + serverTimeOffset);
         updateElementHTML("lastUpdated", "<strong>Last Updated:</strong> " + now.toLocaleString() + "<span id='terminal-cursor'></span>");
 
-        // Update chart if it exists
+        // Update chart with normalized data if it exists
         if (trendChart) {
-            try {
+            // Use the enhanced chart update function with normalization
-                // Always update the 24hr average line even if we don't have data points yet
+            updateChartWithNormalizedData(trendChart, data);
-                const avg24hr = parseFloat(data.hashrate_24hr || 0);
-                if (!isNaN(avg24hr) && 
-                    trendChart.options.plugins.annotation && 
-                    trendChart.options.plugins.annotation.annotations &&
-                    trendChart.options.plugins.annotation.annotations.averageLine) {
-                    const annotation = trendChart.options.plugins.annotation.annotations.averageLine;
-                    annotation.yMin = avg24hr;
-                    annotation.yMax = avg24hr;
-                    annotation.label.content = '24hr Avg: ' + avg24hr + ' TH/s';
-                }
-                
-                // Update data points if we have any (removed minimum length requirement)
-                if (data.arrow_history && data.arrow_history.hashrate_60sec) {
-                    const historyData = data.arrow_history.hashrate_60sec;
-                    if (historyData && historyData.length > 0) {
-                        console.log(`Updating chart with ${historyData.length} data points`);
-                        trendChart.data.labels = historyData.map(item => item.time);
-                        trendChart.data.datasets[0].data = historyData.map(item => {
-                            const val = parseFloat(item.value);
-                            return isNaN(val) ? 0 : val;
-                        });
-                    } else {
-                        console.log("No history data points available yet");
-                    }
-                } else {
-                    console.log("No hashrate_60sec history available yet");
-                    
-                    // If there's no history data, create a starting point using current hashrate
-                    if (data.hashrate_60sec) {
-                        const currentTime = new Date().toLocaleTimeString('en-US', {hour12: false, hour: '2-digit', minute: '2-digit'});
-                        trendChart.data.labels = [currentTime];
-                        trendChart.data.datasets[0].data = [parseFloat(data.hashrate_60sec) || 0];
-                        console.log("Created initial data point with current hashrate");
-                    }
-                }
-                
-                // Always update the chart, even if we just updated the average line
-                trendChart.update('none');
-            } catch (chartError) {
-                console.error("Error updating chart:", chartError);
-            }
         }
 
         // Update indicators and check for block updates
@@ -685,55 +834,13 @@ function updateUI() {
     }
 }
 
-// Set up refresh synchronization
-function setupRefreshSync() {
-    // Listen for the dataRefreshed event
-    $(document).on('dataRefreshed', function() {
-        // Broadcast to any other open tabs/pages that the data has been refreshed
-        try {
-            // Store the current timestamp to localStorage
-            localStorage.setItem('dashboardRefreshTime', Date.now().toString());
-            
-            // Create a custom event that can be detected across tabs/pages
-            localStorage.setItem('dashboardRefreshEvent', 'refresh-' + Date.now());
-            
-            console.log("Dashboard refresh synchronized");
-        } catch (e) {
-            console.error("Error synchronizing refresh:", e);
-        }
-    });
-}
-
 // Document ready initialization
-$(document).ready(function() {
+$(document).ready(function () {
     // Initialize the chart
     trendChart = initializeChart();
 
-    // Initialize the progress bar
+    // Initialize BitcoinMinuteRefresh with our refresh function
-    initProgressBar();
+    BitcoinMinuteRefresh.initialize(manualRefresh);
-    
-    // Set up direct monitoring of data refreshes
-    $(document).on('dataRefreshed', function() {
-        console.log("Data refresh event detected, resetting progress bar");
-        lastUpdateTime = Date.now();
-        currentProgress = 0;
-        updateProgressBar(currentProgress);
-    });
-    
-    // Wrap the updateUI function to detect changes and trigger events
-    const originalUpdateUI = updateUI;
-    updateUI = function() {
-        const previousMetricsTimestamp = latestMetrics ? latestMetrics.server_timestamp : null;
-        
-        // Call the original function
-        originalUpdateUI.apply(this, arguments);
-        
-        // Check if we got new data by comparing timestamps
-        if (latestMetrics && latestMetrics.server_timestamp !== previousMetricsTimestamp) {
-            console.log("New data detected, triggering refresh event");
-            $(document).trigger('dataRefreshed');
-        }
-    };
 
     // Set up event source for SSE
     setupEventSource();
@@ -742,21 +849,14 @@ $(document).ready(function() {
     updateServerTime();
     setInterval(updateServerTime, 30000);
 
-    // Start uptime timer
-    setInterval(updateUptime, 1000);
-    updateUptime();
-    
-    // Set up refresh synchronization with workers page
-    setupRefreshSync();
-    
     // Add a manual refresh button for fallback
     $("body").append('<button id="refreshButton" style="position: fixed; bottom: 20px; left: 20px; z-index: 1000; background: #f7931a; color: black; border: none; padding: 8px 16px; display: none; border-radius: 4px; cursor: pointer;">Refresh Data</button>');
 
-    $("#refreshButton").on("click", function() {
+    $("#refreshButton").on("click", function () {
         $(this).text("Refreshing...");
         $(this).prop("disabled", true);
         manualRefresh();
-        setTimeout(function() {
+        setTimeout(function () {
             $("#refreshButton").text("Refresh Data");
             $("#refreshButton").prop("disabled", false);
         }, 5000);
@@ -766,7 +866,7 @@ $(document).ready(function() {
     manualRefresh();
 
     // Add emergency refresh button functionality
-    $("#forceRefreshBtn").show().on("click", function() {
+    $("#forceRefreshBtn").show().on("click", function () {
         $(this).text("Refreshing...");
         $(this).prop("disabled", true);
 
@@ -774,12 +874,12 @@ $(document).ready(function() {
             url: '/api/force-refresh',
             method: 'POST',
             timeout: 15000,
-            success: function(data) {
+            success: function (data) {
                 console.log("Force refresh successful:", data);
                 manualRefresh(); // Immediately get the new data
                 $("#forceRefreshBtn").text("Force Refresh").prop("disabled", false);
             },
-            error: function(xhr, status, error) {
+            error: function (xhr, status, error) {
                 console.error("Force refresh failed:", error);
                 $("#forceRefreshBtn").text("Force Refresh").prop("disabled", false);
                 alert("Refresh failed: " + error);
@@ -788,7 +888,7 @@ $(document).ready(function() {
     });
 
     // Add stale data detection
-    setInterval(function() {
+    setInterval(function () {
         if (latestMetrics && latestMetrics.server_timestamp) {
             const lastUpdate = new Date(latestMetrics.server_timestamp);
             const timeSinceUpdate = Math.floor((Date.now() - lastUpdate.getTime()) / 1000);