penambahan dan perbaikan untuk log

2026-06-11 11:07:49 +07:00
parent 423a2d1095
commit 7c1f1db72a
4 changed files with 228 additions and 144 deletions
@@ -159,7 +159,12 @@ func (h *AdminHandler) GetPage(c *gin.Context) {
  .toast.show { opacity: 1; }
  .toast-ok { background: #2ecc71; }
  .toast-err { background: #e74c3c; }
+  .charts-row { display: flex; gap: 16px; margin-bottom: 16px; }
+  .chart-card { background: white; border-radius: 8px; padding: 16px 20px; flex: 1; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+  .chart-card h3 { font-size: 14px; font-weight: 600; color: #555; margin-bottom: 12px; }
+  @media (max-width: 768px) { .charts-row { flex-direction: column; } }
 </style>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
 </head>
 <body>

@@ -184,6 +189,17 @@ func (h *AdminHandler) GetPage(c *gin.Context) {
 </div>

 <div class="container">
+  <div class="charts-row">
+    <div class="chart-card">
+      <h3>Status Mapping</h3>
+      <canvas id="chartPie" height="200"></canvas>
+    </div>
+    <div class="chart-card">
+      <h3>Kapasitas per Kelas</h3>
+      <canvas id="chartBar" height="200"></canvas>
+    </div>
+  </div>
+
  <div class="search-bar">
    <input type="text" id="search" placeholder="🔍 Cari nama ruangan..." oninput="filterTable()">
  </div>
@@ -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 } }
+      }
+    }
+  });
+}
 </script>
 </body>
 </html>`