171 lines
4.3 KiB
HTML
171 lines
4.3 KiB
HTML
<!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>
|