Initial commit
This commit is contained in:
admin
commit
f9b8ae4f35
81
index.html
Normal file
81
index.html
Normal file
@ -0,0 +1,81 @@
|
||||
<!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;
|
||||
}
|
||||
.chart-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Real-time Dashboard - Average Response Times</h1>
|
||||
<div>
|
||||
<p>Overall Average Response Time: <span id="overall-average"></span> hours</p>
|
||||
<canvas id="response-chart" width="400" height="200"></canvas>
|
||||
</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 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: 'line',
|
||||
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,
|
||||
pointBackgroundColor: 'rgba(54, 162, 235, 1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(54, 162, 235, 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>
|
||||
124
index1-1.html
Normal file
124
index1-1.html
Normal file
@ -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>
|
||||
170
index1-2.html
Normal file
170
index1-2.html
Normal file
@ -0,0 +1,170 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Aging Dashboard</title>
|
||||
<!-- Chart.js library -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f0f0f0;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.age-category {
|
||||
background-color: #f2f2f2;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.age-category h2 {
|
||||
margin-top: 0;
|
||||
color: #666;
|
||||
font-size: 16px; /* Adjust font size */
|
||||
}
|
||||
|
||||
.age-category p {
|
||||
font-size: 24px; /* Adjust font size */
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Aging Dashboard</h1>
|
||||
<div class="grid">
|
||||
<div class="age-category">
|
||||
<h2>0-30 days</h2>
|
||||
<p id="count0-30">0</p>
|
||||
</div>
|
||||
<div class="age-category">
|
||||
<h2>31-60 days</h2>
|
||||
<p id="count31-60">0</p>
|
||||
</div>
|
||||
<div class="age-category">
|
||||
<h2>61-90 days</h2>
|
||||
<p id="count61-90">0</p>
|
||||
</div>
|
||||
<div class="age-category">
|
||||
<h2>91-120 days</h2>
|
||||
<p id="count91-120">0</p>
|
||||
</div>
|
||||
<div class="age-category">
|
||||
<h2>121+ days</h2>
|
||||
<p id="count121">0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Placeholder for chart -->
|
||||
<div class="chart-container">
|
||||
<canvas id="myPieChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Sample data representing counts for each aging category
|
||||
const data = {
|
||||
"0-30": 25,
|
||||
"31-60": 18,
|
||||
"61-90": 12,
|
||||
"91-120": 8,
|
||||
"121+": 3
|
||||
};
|
||||
|
||||
// Function to update the counts displayed in the dashboard
|
||||
function updateCounts() {
|
||||
Object.keys(data).forEach(key => {
|
||||
const element = document.getElementById(`count${key.replace('+', '')}`);
|
||||
if (element) {
|
||||
element.textContent = data[key];
|
||||
}
|
||||
});
|
||||
|
||||
// Update pie chart data
|
||||
updatePieChart();
|
||||
}
|
||||
|
||||
// Function to update the pie chart
|
||||
function updatePieChart() {
|
||||
const labels = Object.keys(data);
|
||||
const counts = Object.values(data);
|
||||
|
||||
const ctx = document.getElementById('myPieChart').getContext('2d');
|
||||
const myPieChart = new Chart(ctx, {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Aging Categories',
|
||||
data: counts,
|
||||
backgroundColor: [
|
||||
'#ffcc66',
|
||||
'#ff6666',
|
||||
'#66cccc',
|
||||
'#6699ff',
|
||||
'#cc66ff'
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
arc: {
|
||||
backgroundColor: '#fff', // Ensure background color is set for the shadow to be visible
|
||||
shadowColor: 'rgba(0, 0, 0, 0.4)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 5,
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Call updateCounts initially to display the initial data and chart
|
||||
updateCounts();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user