File size: 3,649 Bytes
39da766 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | document.addEventListener('DOMContentLoaded', function() {
// Sample data for charts (replace with real data from your API)
const assetData = {
status: {
working: 40,
nonWorking: 8
},
types: {
desktop: 35,
laptop: 15
},
warranty: {
active: 30,
expired: 18
},
regions: {
south: 32,
east: 18
}
};
// Calculate quick stats
document.getElementById('totalAssets').textContent = assetData.status.working + assetData.status.nonWorking;
document.getElementById('workingAssets').textContent = assetData.status.working;
document.getElementById('nonWorkingAssets').textContent = assetData.status.nonWorking;
document.getElementById('expiredAssets').textContent = assetData.warranty.expired;
// Status Chart
const statusCtx = document.getElementById('statusChart').getContext('2d');
new Chart(statusCtx, {
type: 'pie',
data: {
labels: ['Working', 'Non-Working'],
datasets: [{
data: [assetData.status.working, assetData.status.nonWorking],
backgroundColor: ['#10B981', '#EF4444'],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom'
}
}
}
});
// Type Chart
const typeCtx = document.getElementById('typeChart').getContext('2d');
new Chart(typeCtx, {
type: 'doughnut',
data: {
labels: ['Desktop', 'Laptop'],
datasets: [{
data: [assetData.types.desktop, assetData.types.laptop],
backgroundColor: ['#3B82F6', '#F59E0B'],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom'
}
}
}
});
// Warranty Chart
const warrantyCtx = document.getElementById('warrantyChart').getContext('2d');
new Chart(warrantyCtx, {
type: 'pie',
data: {
labels: ['Active Warranty', 'Expired Warranty'],
datasets: [{
data: [assetData.warranty.active, assetData.warranty.expired],
backgroundColor: ['#F59E0B', '#6B7280'],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom'
}
}
}
});
// Region Chart
const regionCtx = document.getElementById('regionChart').getContext('2d');
new Chart(regionCtx, {
type: 'bar',
data: {
labels: ['South', 'East'],
datasets: [{
label: 'Assets by Region',
data: [assetData.regions.south, assetData.regions.east],
backgroundColor: ['#6366F1', '#EC4899'],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
},
plugins: {
legend: {
display: false
}
}
}
});
}); |