Initial commit

2025-03-08 21:11:01 +08:00
commit f9b8ae4f35
3 changed files with 375 additions and 0 deletions
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Real-time Dashboard - Average Response Times</title>
+    <!-- Include Chart.js -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            padding: 20px;
+        }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            border: 1px solid #ccc;
+            padding: 20px;
+            border-radius: 5px;
+            background-color: #f9f9f9;
+        }
+        .chart-container {
+            margin-top: 20px;
+        }
+        .overview {
+            margin-top: 20px;
+            border-top: 1px solid #ccc;
+            padding-top: 20px;
+        }
+        .overview h2 {
+            margin-bottom: 10px;
+        }
+        .response-times {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 10px;
+        }
+        .response-times div {
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            background-color: #fff;
+        }
+        .response-times div p {
+            margin: 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Real-time Dashboard - Average Response Times</h1>
+
+        <div class="chart-container">
+            <canvas id="response-chart" width="400" height="200"></canvas>
+        </div>
+
+        <div class="overview">
+            <h2>Average Response Time Overview</h2>
+            <p>Overall Average Response Time: <span id="overall-average"></span> hours</p>
+            <div class="response-times">
+                <div>
+                    <p>Low: <span id="low"></span> hours</p>
+                    <p>High: <span id="high"></span> hours</p>
+                </div>
+                <div>
+                    <p>Medium: <span id="medium"></span> hours</p>
+                    <p>Critical: <span id="critical"></span> hours</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Sample data: Average response times for different priority levels
+        var priorityLevels = ["Low", "Medium", "High", "Critical"];
+        var responseTimes = [4.5, 3.2, 5.1, 2.8]; // Initial response times (hours)
+
+        // Function to update data and dashboard
+        function updateDataAndDashboard() {
+            responseTimes = responseTimes.map(time => time + (Math.random() * 2 - 1)); // Simulate random data update
+            var overallAverage = responseTimes.reduce((acc, val) => acc + val, 0) / responseTimes.length;
+            
+            // Update overall average text
+            document.getElementById('overall-average').textContent = overallAverage.toFixed(2);
+
+            // Update specific response times
+            document.getElementById('low').textContent = responseTimes[0].toFixed(2);
+            document.getElementById('medium').textContent = responseTimes[1].toFixed(2);
+            document.getElementById('high').textContent = responseTimes[2].toFixed(2);
+            document.getElementById('critical').textContent = responseTimes[3].toFixed(2);
+            
+            // Update chart data
+            responseChart.data.datasets[0].data = responseTimes;
+            responseChart.update();
+        }
+
+        // Create initial chart
+        var ctx = document.getElementById('response-chart').getContext('2d');
+        var responseChart = new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: priorityLevels,
+                datasets: [{
+                    label: 'Average Response Time',
+                    data: responseTimes,
+                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
+                    borderColor: 'rgba(54, 162, 235, 1)',
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                scales: {
+                    y: {
+                        beginAtZero: true
+                    }
+                }
+            }
+        });
+
+        // Update data and dashboard every 5 seconds (for demonstration)
+        setInterval(updateDataAndDashboard, 5000); // 5000 milliseconds = 5 seconds
+    </script>
+</body>
+</html>