add some fake data to make it look realistic

script.js

@@ -44,11 +44,14 @@ function setupCharts() {
     userChart = new Chart(userCtx, {
         type: 'line',
         data: {
-            labels: Array.from({length: 12}, (_, i) => `${i+1}AM`),
-            datasets: [{
-                label: 'Active Users',
-                data: Array(12).fill(0).map(() => Math.floor(Math.random() * 5000)),
-                borderColor: '#6366f1',
+        labels: Array.from({length: 12}, (_, i) => `${i+1}AM`),
+        datasets: [{
+            label: 'Active Users',
+            data: Array(12).fill(0).map((_,i) => {
+                const hourFactor = Math.sin((i / 11) * Math.PI) * 0.5 + 0.7;
+                return Math.floor(3000 + (hourFactor * 2000) + Math.random() * 500 - 250);
+            }),
+borderColor: '#6366f1',
                 backgroundColor: 'rgba(99, 102, 241, 0.1)',
                 tension: 0.4,
                 fill: true
@@ -112,12 +115,13 @@ function setupCharts() {
                 {
                     label: 'API Calls',
                     data: Array(24).fill(0).map((_, i) => {
-                        const base = 500;
-                        const hourFactor = Math.sin((i / 24) * Math.PI * 2) * 200;
-                        const noise = Math.random() * 100 - 50;
-                        return Math.max(0, base + hourFactor + noise);
+                        const isDaytime = i >= 9 && i < 18;
+                        const base = isDaytime ? 800 : 300;
+                        const hourFactor = Math.sin((i / 24) * Math.PI * 1.5) * (isDaytime ? 400 : 150);
+                        const noise = Math.random() * 150 - 75;
+                        return Math.max(100, base + hourFactor + noise);
                     }),
-                    borderColor: '#6366f1',
+borderColor: '#6366f1',
                     backgroundColor: 'rgba(99, 102, 241, 0.1)',
                     tension: 0.3,
                     fill: true
@@ -127,37 +131,80 @@ function setupCharts() {
         options: chartOptions
     });
 }
-
 function startDataUpdates() {
     // Update metric cards every 3 seconds
     setInterval(() => {
         const cards = document.querySelectorAll('metrics-card');
+        const now = new Date();
+        const hour = now.getHours();
         
-        // Active Users
-        const users = 5000 + Math.floor(Math.random() * 1000 - 500);
-        const userChange = Math.floor(Math.random() * 10 - 5);
+        // Active Users - follows daily pattern with peak around 2PM
+        const userBase = hour < 6 ? 2000 : hour < 12 ? 4000 : hour < 18 ? 6000 : 3000;
+        const users = userBase + Math.floor(Math.random() * 500 - 250);
+        const userChange = (Math.random() > 0.6 ? 1 : -1) * (0.5 + Math.random() * 2);
         cards[0].setAttribute('value', users.toLocaleString());
-        cards[0].setAttribute('change', userChange);
+        cards[0].setAttribute('change', userChange.toFixed(1));
         
-        // Conversion Rate
-        const conversion = (2 + Math.random()).toFixed(2);
-        const conversionChange = (Math.random() * 0.5 - 0.25).toFixed(2);
+        // Conversion Rate - higher during business hours
+        const conversionBase = hour >= 9 && hour < 17 ? 3.5 : 1.8;
+        const conversion = (conversionBase + Math.random() * 0.8 - 0.4).toFixed(2);
+        const conversionChange = (Math.random() * 0.4 - 0.2).toFixed(2);
         cards[1].setAttribute('value', conversion + '%');
         cards[1].setAttribute('change', conversionChange);
         
-        // API Latency
-        const latency = Math.floor(50 + Math.random() * 50);
-        const latencyChange = Math.floor(Math.random() * 10 - 5);
+        // API Latency - degrades slightly during peak hours
+        const latencyBase = hour >= 10 && hour < 16 ? 80 : 40;
+        const latency = Math.floor(latencyBase + Math.random() * 30);
+        const latencyChange = (Math.random() > 0.3 ? 1 : -1) * (1 + Math.random() * 4);
         cards[2].setAttribute('value', latency + 'ms');
-        cards[2].setAttribute('change', latencyChange);
-        
-        // Revenue Today
-        const revenue = Math.floor(10000 + Math.random() * 5000);
-        const revenueChange = Math.floor(Math.random() * 10 - 5);
-        cards[3].setAttribute('value', '$' + revenue.toLocaleString());
-        cards[3].setAttribute('change', revenueChange);
+        cards[2].setAttribute('change', latencyChange.toFixed(1));
         
-        // Update charts with new data points
+        // Revenue Today - follows similar pattern to users but with larger random fluctuations
+        const revenueBase = hour < 6 ? 8000 : hour < 12 ? 12000 : hour < 18 ? 15000 : 9000;
+        const revenue = revenueBase + Math.floor(Math.random() * 3000 - 1500);
+        const revenueChange = (Math.random() > 0.5 ? 1 : -1) * (2 + Math.random() * 5);
+        cards[3].setAttribute('value', '// Update charts with new data points
+        updateCharts();
+    }, 3000);
+}
+
+function updateCharts() {
+    // User Chart - follows daily pattern with realistic variations
+    const userData = userChart.data.datasets[0].data;
+    userData.shift();
+    const userTrend = hour < 6 ? 0.8 : hour < 12 ? 1.2 : hour < 18 ? 1.5 : 0.9;
+    userData.push(Math.max(0, userData[userData.length-1] * (0.98 + Math.random() * 0.04) * userTrend));
+    userChart.update();
+    
+    // Revenue Chart - more stable proportions with slight variations
+    revenueChart.data.datasets[0].data = [30, 25, 25, 20].map(v => v * (0.95 + Math.random() * 0.1));
+    revenueChart.update();
+    
+    // Performance Chart - weekday patterns with better/worse performance
+    const weekday = now.getDay();
+    const isWeekday = weekday > 0 && weekday < 6;
+    performanceChart.data.datasets[0].data = Array(7).fill(0).map((_,i) => 
+        isWeekday ? 80 + Math.floor(Math.random() * 120) : 60 + Math.floor(Math.random() * 80));
+    performanceChart.data.datasets[1].data = Array(7).fill(0).map((_,i) => 
+        isWeekday ? 40 + Math.floor(Math.random() * 70) : 30 + Math.floor(Math.random() * 40));
+    performanceChart.update();
+    
+    // Activity Chart - more realistic API call patterns
+    const activityData = activityChart.data.datasets[0].data;
+    activityData.shift();
+    const activityTrend = hour < 6 ? 0.7 : hour < 9 ? 0.9 : hour < 17 ? 1.3 : 1.0;
+    const newActivity = Math.max(100, activityData[activityData.length-1] * (0.97 + Math.random() * 0.06) * activityTrend);
+    activityData.push(newActivity);
+activityChart.update();
+}
+
+// Handle dark mode changes
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+    document.documentElement.classList.toggle('dark', e.matches);
+    setupCharts();
+}); + revenue.toLocaleString());
+        cards[3].setAttribute('change', revenueChange.toFixed(1));
+// Update charts with new data points
         updateCharts();
     }, 3000);
 }