+
+
+
Status Mapping
+
+
+
+
Kapasitas per Kelas
+
+
+
+
@@ -409,6 +425,76 @@ document.querySelectorAll('.modal-overlay').forEach(el => {
});
init();
+initCharts();
+
+function initCharts() {
+ const sudah = DATA.filter(r => r.sudah_mapping).length;
+ const belum = DATA.filter(r => !r.sudah_mapping).length;
+
+ // Pie chart — sudah vs belum mapping
+ new Chart(document.getElementById('chartPie'), {
+ type: 'doughnut',
+ data: {
+ labels: ['Sudah Mapping', 'Belum Mapping'],
+ datasets: [{
+ data: [sudah, belum],
+ backgroundColor: ['#2ecc71', '#f4a261'],
+ borderWidth: 0
+ }]
+ },
+ options: {
+ responsive: true,
+ plugins: {
+ legend: { position: 'bottom', labels: { font: { size: 12 } } }
+ }
+ }
+ });
+
+ // Bar chart — kapasitas per kelas
+ const kelasSummary = {};
+ DATA.forEach(r => {
+ const kelas = r.kode_kelas || 'Belum';
+ if (!kelasSummary[kelas]) kelasSummary[kelas] = { kapasitas: 0, ruangan: 0 };
+ kelasSummary[kelas].kapasitas += r.jumlah_tt;
+ kelasSummary[kelas].ruangan += 1;
+ });
+
+ const labels = Object.keys(kelasSummary).sort();
+ const kapasitas = labels.map(k => kelasSummary[k].kapasitas);
+ const colors = labels.map((_, i) => 'hsl(' + ((i * 47) % 360) + ', 65%, 55%)');
+
+ new Chart(document.getElementById('chartBar'), {
+ type: 'bar',
+ data: {
+ labels: labels,
+ datasets: [{
+ label: 'Total Kapasitas',
+ data: kapasitas,
+ backgroundColor: colors,
+ borderRadius: 6,
+ borderWidth: 0
+ }]
+ },
+ options: {
+ responsive: true,
+ plugins: {
+ legend: { display: false },
+ tooltip: {
+ callbacks: {
+ afterLabel: ctx => {
+ const kelas = labels[ctx.dataIndex];
+ return 'Ruangan: ' + kelasSummary[kelas].ruangan;
+ }
+ }
+ }
+ },
+ scales: {
+ y: { beginAtZero: true, grid: { color: '#f0f0f0' } },
+ x: { grid: { display: false } }
+ }
+ }
+ });
+}