fix: cpu frequency progress bar issue resolved

codeperfectplus · codeperfectplus · commit 31e598a5af3b · 2024-09-16T09:54:51.000+05:30
diff --git a/src/static/js/refreshCardData.js b/src/static/js/refreshCardData.js
@@ -59,20 +59,33 @@ async function fetchSystemData(apiEndpoint) {
 }
 
 // Update card content and bar width based on fetched data
-function updateCard(cardSelector, dataKey, data, unit = '', barSelector = null) {
+function updateCard(cardSelector, dataKey, data, unit = '', barSelector = null, maxDataKey = null) {
     const cardElement = document.querySelector(cardSelector);
     if (!cardElement) return;
 
-    const dataValue = data?.[dataKey];
+    let dataValue = data?.[dataKey];
     cardElement.querySelector('.card-text').textContent = dataValue ? `${dataValue}${unit}` : 'Data not available';
 
     // Update the bar width if a bar selector is provided
     if (barSelector) {
         const barElement = cardElement.querySelector(barSelector);
         if (!barElement) return;
 
-        const percentage = parseFloat(dataValue);
+        let percentage = parseFloat(dataValue);
+
         if (!isNaN(percentage)) {
+            // If a maxDataKey is provided, calculate the percentage based on the max value
+            if (maxDataKey) {
+                const maxDataValue = parseFloat(data?.[maxDataKey]);
+                if (!isNaN(maxDataValue) && maxDataValue > 0) {
+                    percentage = (percentage / maxDataValue) * 100;
+                }
+            }
+
+            // Ensure the percentage doesn't exceed 100%
+            percentage = Math.min(percentage, 100);
+
+            // Set the bar width based on the percentage
             barElement.style.width = `${percentage}%`;
         }
     }
@@ -86,7 +99,7 @@ async function refreshData() {
     updateCard('.bg-disk', 'disk_percent', data, '%', '.disk-bar');
     updateCard('.cpu-temp-card', 'current_temp', data, ' °C', '.temp-bar');
     updateCard('.bg-memory', 'memory_percent', data, '%', '.memory-usage-bar');
-    updateCard('.cpu-frequency-card', 'cpu_frequency', data, ' MHz', '.frequency-bar');
+    updateCard('.cpu-frequency-card', 'cpu_frequency', data, ' MHz', '.frequency-bar', 'cpu_max_frequency');
     updateCard('.cpu-usage-card', 'cpu_percent', data, '%', '.cpu-usage-bar');
     updateCard('.network-received', 'network_received', data, 'MB');
     updateCard('.network-sent', 'network_sent', data, 'MB');
@@ -120,7 +133,7 @@ function updateColorBars() {
                 limits = [maxValue * limits[0]/100, maxValue * limits[1]/100];
             }
         }
-        
+        // console.log("card_value", card_value, limits)
         bar.classList.remove('low', 'medium', 'high');
         // Apply the appropriate class based on the limits
         if (card_value <= limits[0]) {
@@ -130,6 +143,7 @@ function updateColorBars() {
         } else {
             bar.classList.add('high');
         }
+
     });
 }
 
diff --git a/src/templates/base/base.html b/src/templates/base/base.html
@@ -15,7 +15,10 @@
 </head>
 
 <body>{% include 'ext/navbar.html' %} 
-    <div class="container">{% block content %}{% endblock %} </div>
+    <div class="container">
+        {% block content %}
+        {% endblock %} 
+    </div>
     <!-- jQuery -->
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>    
diff --git a/src/templates/card_comp/cpu/frequency.html b/src/templates/card_comp/cpu/frequency.html
@@ -3,13 +3,16 @@
         data-cpu-max-frequency="{{ system_info['cpu_max_frequency'] }}">
         <div class="card-body d-flex flex-column align-items-center">
             <h5 class="card-title mb-3">CPU Frequency <i class="fas fa-microchip"></i></h5>
-            <p class="card-text fs-4 frequency-value" data-bs-toggle="tooltip" title="Maximum CPU frequency {{ system_info['cpu_max_frequency'] }} MHz">
-                {{ system_info['cpu_frequency'] }} MHz
+            <p class="card-text fs-4 frequency-value" data-bs-toggle="tooltip"
+                title="Maximum CPU frequency {{ system_info['cpu_max_frequency'] }} MHz">
+                {{ system_info['cpu_frequency'] }}
             </p>
             <div class="frequency-indicator mt-3">
-                <div class="frequency-bar" style="width: {{ 100 * system_info['cpu_frequency'] / (system_info['cpu_max_frequency'] if system_info['cpu_max_frequency'] != 0 else 1) }}%;"></div>
+                <div class="frequency-bar"
+                    style="width: {{ 100 * system_info['cpu_frequency'] / (system_info['cpu_max_frequency'] if system_info['cpu_max_frequency'] != 0 else 1) }}%;">
+                </div>
             </div>
             <p class="card-text fs-6 mt-2">Max Frequency: {{ system_info['cpu_max_frequency'] }} MHz</p>
         </div>
     </div>
-</div>
+</div>
diff --git a/src/templates/card_comp/other/server_time.html b/src/templates/card_comp/other/server_time.html
diff --git a/src/templates/dashboard/developer.html b/src/templates/dashboard/developer.html
@@ -13,7 +13,7 @@
         {% include 'card_comp/battery/percentage.html' %}
         {% include 'card_comp/cpu/core.html' %}
         {% include 'card_comp/cpu/current_temp.html' %}
-        <!-- {% include 'card_comp/other/boot_time.html' %} -->
+        <!-- {% include 'card_comp/other/server_time.html' %} -->
         {% include 'card_comp/cpu/frequency.html' %}
         {% include 'card_comp/cpu/usages.html' %}
         {% include 'card_comp/memory/usage.html' %}
