datetime on graph improved

Author: codeperfectplus

src/routes/api.py

@@ -24,12 +24,28 @@ def cpu_percent_api():
 @login_required
 def graph_data_api():
     try:
+        curent_time = datetime.now()
         # Get the time filter from query parameters
         time_filter = request.args.get('filter', default='1 day')
 
         # Determine the start time based on the filter
         now = datetime.now()
-        if time_filter == '1 day':
+        # 5 minutes, 15 minutes, 30 minutes, 1 hour, 3 hours, 6 hours, 12 hours, 1 day, 2 days, 3 days, 1 week, 1 month
+        if time_filter == '5 minutes':
+            start_time = now - timedelta(minutes=5)
+        elif time_filter == '15 minutes':
+            start_time = now - timedelta(minutes=15)
+        elif time_filter == '30 minutes':
+            start_time = now - timedelta(minutes=30)
+        elif time_filter == '1 hour':
+            start_time = now - timedelta(hours=1)
+        elif time_filter == '3 hours':
+            start_time = now - timedelta(hours=3)
+        elif time_filter == '6 hours':
+            start_time = now - timedelta(hours=6)
+        elif time_filter == '12 hours':
+            start_time = now - timedelta(hours=12)
+        elif time_filter == '1 day':
             start_time = now - timedelta(days=1)
         elif time_filter == '2 days':
             start_time = now - timedelta(days=2)
@@ -72,7 +88,8 @@ def graph_data_api():
             "network_received": network_received_data,
             "dashboard_memory_usage": dashboard_memory_usage,
             "cpu_frequency": cpu_frequency,
-            "current_temp": current_temp
+            "current_temp": current_temp,
+            "current_time": curent_time
         }), 200
     except Exception as e:
         # Handle and log the error for debugging purposes

src/static/js/graphs.js

@@ -1,7 +1,11 @@
 // Variables to store chart instances
 let cpuTimeChart, memoryTimeChart, batteryTimeChart, networkTimeChart, dashboardMemoryTimeChart, cpuFrequencyTimeChart, currentTempTimeChart;
 
-// Function to fetch and display data
+function stringToDate(dateString) {
+    const date = new Date(dateString);
+    return date;
+}
+
 function fetchDataAndRenderCharts() {
     // Get the selected filter value
     const filterValue = document.getElementById('timeFilter').value;
@@ -11,20 +15,90 @@ function fetchDataAndRenderCharts() {
         .then(response => response.json())
         .then(data => {
             const cpuData = data.cpu;
-            const timeData = data.time.map(t => new Date(t)); // Ensure date objects
             const memoryData = data.memory;
             const batteryData = data.battery;
             const networkSentData = data.network_sent;
             const networkReceivedData = data.network_received;
             const dashboardMemoryUsageData = data.dashboard_memory_usage;
             const cpuFrequencyData = data.cpu_frequency;
             const currentTempData = data.current_temp;
+            const currentTime = data.current_time;
+            const timeZoneName = Intl.DateTimeFormat().resolvedOptions().timeZone;
+            console.log(currentTime);
+        
+            // Format the time data using the currentTime from backend
+            const timeData = data.time.map(time => formatDate(time, currentTime));
+
+            displayTimeAndTimeZone(currentTime, timeZoneName);
 
             createCharts(cpuData, timeData, memoryData, batteryData, networkSentData, networkReceivedData, dashboardMemoryUsageData, cpuFrequencyData, currentTempData);
         })
         .catch(error => console.error('Error fetching data:', error));
 }
 
+function formatDate(dateString, currentTime) {
+    const date = new Date(dateString);
+    const now = new Date(currentTime);  // Use currentTime from backend
+
+    // Helper function to format with leading zeros
+    const pad = (num) => String(num).padStart(2, '0');
+
+    // Manually extract UTC components
+    const day = pad(date.getUTCDate()); // e.g., 09
+    const month = pad(date.getUTCMonth() + 1); // e.g., 04
+    const year = date.getUTCFullYear(); // e.g., 2021
+    const hours = pad(date.getUTCHours()); // e.g., 11
+    const minutes = pad(date.getUTCMinutes()); // e.g., 33
+
+
+    // Calculate time differences
+    const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
+    const diffWeeks = Math.floor(diffDays / 7);
+    const diffMonths = now.getMonth() - date.getUTCMonth() + (12 * (now.getFullYear() - date.getUTCFullYear()));
+    const diffYears = now.getFullYear() - date.getUTCFullYear();
+
+    // Determine the label based on time differences
+    if (diffDays === 0) {
+        return `Today ${hours}:${minutes}`;
+    } else if (diffDays === 1) {
+        return `Yesterday ${hours}:${minutes}`;
+    } else if (diffDays <= 3) {
+        return `${diffDays} Days Ago ${hours}:${minutes}`;
+    } else if (diffDays <= 7) {
+        return `${Math.ceil(diffDays / 7)} Week${diffDays > 7 ? 's' : ''} Ago ${hours}:${minutes}`;
+    } else if (diffDays <= 30) {
+        return `${Math.ceil(diffDays / 7)} Weeks Ago ${hours}:${minutes}`;
+    } else if (diffMonths < 12) {
+        return `${diffMonths} Month${diffMonths > 1 ? 's' : ''} Ago ${hours}:${minutes}`;
+    } else if (diffYears < 2) {
+        return `Last Year ${hours}:${minutes}`;
+    } else {
+        return `${year}/${month}/${day} ${hours}:${minutes}`;
+    }
+}
+
+function displayTimeAndTimeZone(currentTime, timeZoneName) {
+    // Update current time and timezone
+    function updateTime() {
+        const options = { hour: '2-digit', minute: '2-digit', second: '2-digit', timeZone: timeZoneName };
+        now = new Date();
+        const timeString = now.toLocaleTimeString('en-US', options);
+
+        // Display the current time and timezone
+        document.getElementById('currentTime').textContent = `Current Time: ${timeString}`;
+        document.getElementById('timeZoneName').textContent = `Time Zone: ${timeZoneName}`;
+    }
+
+    // Initial display
+    updateTime();
+    
+    // Update time every second
+    setInterval(updateTime, 1000);
+}
+
+// Display current time and time zone
+
+
 // Function to create a chart with multiple datasets
 function createChart(ctx, labels, datasets, yLabel) {
     if (ctx.chart) {
@@ -34,29 +108,22 @@ function createChart(ctx, labels, datasets, yLabel) {
     ctx.chart = new Chart(ctx, {
         type: 'line',
         data: {
-            labels: labels,  // Use timeData for x-axis labels
+            labels: labels,  // Use your timeData directly as labels
             datasets: datasets
         },
         options: {
             scales: {
                 x: {
-                    type: 'time', // Use 'time' scale for proper date formatting
-                    time: {
-                        unit: 'minute', // Adjust based on the granularity of your data
-                        tooltipFormat: 'll HH:mm', // Tooltip format for time
-                        displayFormats: {
-                            minute: 'HH:mm', // Display format for minute-level granularity
-                            hour: 'MMM D, HH:mm', // Display format for hour-level granularity
-                            day: 'MMM D', // Display format for day-level granularity
-                            week: 'MMM D', // Display format for week-level granularity
-                            month: 'MMM YYYY', // Display format for month-level granularity
-                            quarter: '[Q]Q YYYY', // Display format for quarter-level granularity
-                            year: 'YYYY' // Display format for year-level granularity
-                        }
-                    },
+                    type: 'category', // Use 'category' scale to treat time as strings
                     title: {
                         display: true,
                         text: 'Time'
+                    },
+                    ticks: {
+                        autoSkip: true,          // Automatically skip some labels to prevent overlap
+                        maxTicksLimit: 10,       // Maximum number of ticks to display
+                        maxRotation: 30,          // Prevent rotating the labels for better readability
+                        minRotation: 0
                     }
                 },
                 y: {
@@ -71,6 +138,7 @@ function createChart(ctx, labels, datasets, yLabel) {
     });
 }
 
+
 // Function to create charts with the fetched data
 function createCharts(cpuData, timeData, memoryData, batteryData, networkSentData, networkReceivedData, dashboardMemoryUsageData, cpuFrequencyData, currentTempData) {
     // CPU Usage Chart

src/templates/graphs.html

@@ -15,6 +15,13 @@
         <div class="time-filter-container">
             <label for="timeFilter">Select Time Filter:</label>
             <select id="timeFilter">
+                <option value="5 minutes">Last 5 Minutes</option>
+                <option value="15 minutes">Last 15 Minutes</option>
+                <option value="30 minutes">Last 30 Minutes</option>                
+                <option value="1 hour">Last 1 Hour</option>
+                <option value="3 hours">Last 3 Hours</option>
+                <option value="6 hours">Last 6 Hours</option>
+                <option value="12 hours">Last 12 Hours</option>
                 <option value="1 day">Last 1 Day</option>
                 <option value="2 days">Last 2 Days</option>
                 <option value="3 days">Last 3 Days</option>
@@ -25,6 +32,14 @@
     </div>
 </div>
 
+<!-- Display current time and time zone -->
+<div class="container">
+    <h2><i class="fas fa-clock"></i> Current Server Time & Time Zone</h2>
+    <p id="currentTime">Current Time: </p>
+    <p id="timeZoneName">Time Zone: </p>
+</div>
+
+<!-- Chart containers -->
 <div class="container">
     <h2><i class="fas fa-microchip"></i> CPU Usage Over Time</h2>
     <canvas id="cpuTimeChart"></canvas>
@@ -64,4 +79,4 @@ <h2><i class="fas fa-thermometer-half"></i> Current Temperature Over Time</h2>
 {% block extra_scripts %}
 <script src="{{ url_for('static', filename='js/graphs.js')}}"></script>
 <script src="{{ url_for('static', filename='js/refresh_page.js')}}"></script>
-{% endblock %}
+{% endblock %}