Base design

watcher_visio/static/js/analytics/audit.js

@@ -0,0 +1,9 @@
+// Audit-related JavaScript functions
+function initializeAuditSelector() {
+    const selector = document.getElementById('auditSelector');
+    if (selector && selector.options.length > 0) {
+        selector.dispatchEvent(new Event('change'));
+    }
+}
+
+// Export other audit-related functions...

watcher_visio/static/js/analytics/charts.js

@@ -0,0 +1,55 @@
+// Chart configuration and initialization
+const chartConfig = {
+    cutout: "60%",
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+        legend: { display: false },
+        tooltip: {
+            callbacks: {
+                label: function(context) {
+                    return `${context.label}: ${context.parsed} vCPU`;
+                }
+            }
+        }
+    },
+    animation: {
+        animateScale: true,
+        animateRotate: true
+    }
+};
+
+function initializeUtilizationCharts(cpuMean, ramMean) {
+    const cpuCtx = document.getElementById("cpuChart").getContext('2d');
+    const ramCtx = document.getElementById("ramChart").getContext('2d');
+    
+    new Chart(cpuCtx, {
+        type: "doughnut",
+        data: {
+            labels: ["Used", "Free"],
+            datasets: [{
+                data: [{{ cpu_used }}, {{ cpu_free }}],
+                backgroundColor: ["#3b82f6", "#e5e7eb"],
+                borderWidth: 2,
+                borderColor: "#ffffff"
+            }]
+        },
+        options: chartConfig
+    });
+    
+    new Chart(ramCtx, {
+        type: "doughnut",
+        data: {
+            labels: ["Used", "Free"],
+            datasets: [{
+                data: [{{ ram_used }}, {{ ram_free }}],
+                backgroundColor: ["#f97316", "#e5e7eb"],
+                borderWidth: 2,
+                borderColor: "#ffffff"
+            }]
+        },
+        options: chartConfig
+    });
+}
+
+// Export other chart-related functions...

watcher_visio/static/js/analytics/utils.js

@@ -0,0 +1,12 @@
+// Utility functions
+function calculateStats(data) {
+    if (!data || data.length === 0) return { mean: 0, std: 0 };
+    
+    const mean = data.reduce((a, b) => a + b, 0) / data.length;
+    const variance = data.reduce((a, b) => a + Math.pow(b - mean, 2), 0) / data.length;
+    const std = Math.sqrt(variance);
+    
+    return { mean, std };
+}
+
+// Export other utility functions...