chore: improved the graph

Author: codeperfectplus

src/routes/api.py

@@ -382,15 +382,15 @@ def graph_data_api_v3_():
                         # Create a new list for the time series data of this particular series
                         series_data = {
                             "metric": series.get("metric"),
-                            "values": []
+                            "values": {}
                         }
 
                         # Iterate over the values for this series
                         for value in series.get("values", []):
                             timestamp = datetime.fromtimestamp(float(value[0]), tz=timezone.utc).isoformat()
                             if timestamp not in time_data:
                                 time_data.append(timestamp)
-                            series_data["values"].append(value[1])
+                            series_data["values"][timestamp] = value[1]
 
                         # Append the series data to the metric
                         metric_data[metric].append(series_data)
@@ -399,16 +399,21 @@ def graph_data_api_v3_():
             else:
                 raise Exception(f"Failed to fetch data for {metric} from Prometheus: {response.text}")
 
-        # Ensure all metric data has the same length as time_data
+        # Sort the time data for proper alignment
+        time_data.sort()
+
+        # Ensure all metric data aligns with time_data
         for metric, series_list in metric_data.items():
             for series in series_list:
-                while len(series["values"]) < len(time_data):
-                    series["values"].append(None)
+                aligned_values = []
+                for timestamp in time_data:
+                    aligned_values.append(series["values"].get(timestamp, None))
+                series["values"] = aligned_values
 
         # Return the data as JSON
         response_data = {
             "time": time_data,
-            **metric_data,
+            **{metric: [{"metric": s["metric"], "values": s["values"]} for s in series_list] for metric, series_list in metric_data.items()},
             "current_time": current_time
         }
 

src/static/js/graphs_experimental.js

@@ -149,7 +149,7 @@ function createChart(ctx, labels, datasets, yLabel) {
             })),
         },
         options: {
-            
+            responsive: true,
             scales: {
                 x: {
                     type: 'category', 
@@ -179,97 +179,130 @@ 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) {
+
+    // Function to generate dynamic colors based on index
+    function generateColor(index) {
+        const hue = (index * 40) % 360;  // Adjust hue for unique colors
+        return {
+            borderColor: `hsl(${hue}, 70%, 50%)`, // Border color
+            backgroundColor: `hsl(${hue}, 70%, 80%)` // Background color
+        };
+    }
+
     // CPU Usage Chart
     const ctxCpu = document.getElementById('cpuTimeChart').getContext('2d');
-    const cpuDatasets = cpuData.map((cpu, index) => ({
-        label: `CPU Usage (%) ${cpu.metric.instance}`,
-        data: cpu.values,
-        borderColor: `rgba(${75 + index * 20}, 192, 192, 1)`,
-        backgroundColor: `rgba(${75 + index * 20}, 192, 192, 0.2)`,
-        tension: 0.4
-    }));
+    const cpuDatasets = cpuData.map((cpu, index) => {
+        const { borderColor, backgroundColor } = generateColor(index);
+        return {
+            label: `CPU Usage (%) ${cpu.metric.instance}`,
+            data: cpu.values,
+            borderColor: borderColor,
+            backgroundColor: backgroundColor,
+            tension: 0.4
+        };
+    });
 
     createChart(ctxCpu, timeData, cpuDatasets, 'CPU Usage (%)');
 
     // Memory Usage Chart
     const ctxMemory = document.getElementById('memoryTimeChart').getContext('2d');
-    const memoryDatasets = memoryData.map((memory, index) => ({
-        label: `Memory Usage (%) ${memory.metric.instance}`,
-        data: memory.values,
-        borderColor: `rgba(${75 + index * 20}, 75, 192, 1)`,
-        backgroundColor: `rgba(${75 + index * 20}, 75, 192, 0.2)`,
-        tension: 0.4
-    }));
+    const memoryDatasets = memoryData.map((memory, index) => {
+        const { borderColor, backgroundColor } = generateColor(index);
+        return {
+            label: `Memory Usage (%) ${memory.metric.instance}`,
+            data: memory.values,
+            borderColor: borderColor,
+            backgroundColor: backgroundColor,
+            tension: 0.4
+        };
+    });
 
-    createChart(ctxMemory, timeData, memoryDatasets, 'Memory Usage (%)');    
+    createChart(ctxMemory, timeData, memoryDatasets, 'Memory Usage (%)');
 
     // Battery Percentage Chart
     const ctxBattery = document.getElementById('batteryTimeChart').getContext('2d');
-    const batteryDatasets = batteryData.map((battery, index) => ({
-        label: `Battery Usage (%) ${battery.metric.instance}`,
-        data: battery.values,
-        borderColor: `rgba(${192 + index * 20}, 75, 75, 1)`,
-        backgroundColor: `rgba(${192 + index * 20}, 75, 75, 0.2)`,
-        tension: 0.4
-    }));
+    const batteryDatasets = batteryData.map((battery, index) => {
+        const { borderColor, backgroundColor } = generateColor(index);
+        return {
+            label: `Battery Usage (%) ${battery.metric.instance}`,
+            data: battery.values,
+            borderColor: borderColor,
+            backgroundColor: backgroundColor,
+            tension: 0.4
+        };
+    });
 
     createChart(ctxBattery, timeData, batteryDatasets, 'Battery Percentage (%)');
 
     // Network Sent & Received Chart
     const ctxNetwork = document.getElementById('networkTimeChart').getContext('2d');
     const networkDatasets = [
-        ...networkSentData.map((networkSent, index) => ({
-            label: `Network Sent (MB) ${networkSent.metric.instance}`,
-            data: networkSent.values,
-            borderColor: `rgba(${75 + index * 20}, 75, 192, 1)`,
-            backgroundColor: `rgba(${75 + index * 20}, 75, 192, 0.2)`,
-            tension: 0.4
-        })),
-        ...networkReceivedData.map((networkReceived, index) => ({
-            label: `Network Received (MB) ${networkReceived.metric.instance}`,
-            data: networkReceived.values,
-            borderColor: `rgba(${192 + index * 20}, 75, 75, 1)`,
-            backgroundColor: `rgba(${192 + index * 20}, 75, 75, 0.2)`,
-            tension: 0.4
-        }))
+        ...networkSentData.map((networkSent, index) => {
+            const { borderColor, backgroundColor } = generateColor(index);
+            return {
+                label: `Network Sent (MB) ${networkSent.metric.instance}`,
+                data: networkSent.values,
+                borderColor: borderColor,
+                backgroundColor: backgroundColor,
+                tension: 0.4
+            };
+        }),
+        ...networkReceivedData.map((networkReceived, index) => {
+            const { borderColor, backgroundColor } = generateColor(index + networkSentData.length);
+            return {
+                label: `Network Received (MB) ${networkReceived.metric.instance}`,
+                data: networkReceived.values,
+                borderColor: borderColor,
+                backgroundColor: backgroundColor,
+                tension: 0.4
+            };
+        })
     ];
 
     createChart(ctxNetwork, timeData, networkDatasets, 'Data Transferred (MB)');
 
     // Dashboard Memory Usage Chart
     const ctxDashboardMemory = document.getElementById('dashboardMemoryTimeChart').getContext('2d');
-    const dashboardMemoryDatasets = dashboardMemoryUsageData.map((dashboardMemory, index) => ({
-        label: `Dashboard Memory Usage (%) ${dashboardMemory.metric.instance}`,
-        data: dashboardMemory.values,
-        borderColor: `rgba(${75 + index * 20}, 192, 75, 1)`,
-        backgroundColor: `rgba(${75 + index * 20}, 192, 75, 0.2)`,
-        tension: 0.4
-    }));
+    const dashboardMemoryDatasets = dashboardMemoryUsageData.map((dashboardMemory, index) => {
+        const { borderColor, backgroundColor } = generateColor(index);
+        return {
+            label: `Dashboard Memory Usage (%) ${dashboardMemory.metric.instance}`,
+            data: dashboardMemory.values,
+            borderColor: borderColor,
+            backgroundColor: backgroundColor,
+            tension: 0.4
+        };
+    });
 
     createChart(ctxDashboardMemory, timeData, dashboardMemoryDatasets, 'Dashboard Memory Usage (%)');
 
     // CPU Frequency Chart
     const ctxCpuFrequency = document.getElementById('cpuFrequencyTimeChart').getContext('2d');
-    const cpuFrequencyDatasets = cpuFrequencyData.map((cpuFrequency, index) => ({
-        label: `CPU Frequency (GHz) ${cpuFrequency.metric.instance}`,
-        data: cpuFrequency.values,
-        borderColor: `rgba(${192 + index * 20}, 192, 75, 1)`,
-        backgroundColor: `rgba(${192 + index * 20}, 192, 75, 0.2)`,
-        tension: 0.4,
-
-    }));
+    const cpuFrequencyDatasets = cpuFrequencyData.map((cpuFrequency, index) => {
+        const { borderColor, backgroundColor } = generateColor(index);
+        return {
+            label: `CPU Frequency (GHz) ${cpuFrequency.metric.instance}`,
+            data: cpuFrequency.values,
+            borderColor: borderColor,
+            backgroundColor: backgroundColor,
+            tension: 0.4
+        };
+    });
 
     createChart(ctxCpuFrequency, timeData, cpuFrequencyDatasets, 'CPU Frequency (GHz)');
 
     // Current Temperature Chart
     const ctxCurrentTemp = document.getElementById('currentTempTimeChart').getContext('2d');
-    const currentTempDatasets = currentTempData.map((currentTemp, index) => ({
-        label: `Current Temperature (°C) ${currentTemp.metric.instance}`,
-        data: currentTemp.values,
-        borderColor: `rgba(${75 + index * 20}, 192, 192, 1)`,
-        backgroundColor: `rgba(${75 + index * 20}, 192, 192, 0.2)`,
-        tension: 0.4
-    }));
+    const currentTempDatasets = currentTempData.map((currentTemp, index) => {
+        const { borderColor, backgroundColor } = generateColor(index);
+        return {
+            label: `Current Temperature (°C) ${currentTemp.metric.instance}`,
+            data: currentTemp.values,
+            borderColor: borderColor,
+            backgroundColor: backgroundColor,
+            tension: 0.4
+        };
+    });
 
     createChart(ctxCurrentTemp, timeData, currentTempDatasets, 'Current Temperature (°C)');
 }