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