wartana/sidak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: grafik

Browse Source
This commit is contained in:
wartana
2026-01-18 22:07:22 +08:00
parent 80951b57a0
commit 67048eb22e
2 changed files with 148 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
home/admin.php
View File

@@ -215,74 +215,81 @@
</div>
<h4 class="mt-4 mb-2">Demografi Umur</h4>
<div class="row">
<!-- Balita -->
<div class="col-lg-2 col-6">
<div class="small-box bg-info">
<div class="inner">
<h3><?php echo $balita; ?></h3>
<p>Balita (0-5)</p>
</div>
<div class="icon"><i class="fas fa-baby"></i></div>
<a href="index.php?page=data-pend&kategori=Balita" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Anak -->
<div class="col-lg-2 col-6">
<div class="small-box bg-success">
<div class="inner">
<h3><?php echo $anak; ?></h3>
<p>Anak (6-12)</p>
</div>
<div class="icon"><i class="fas fa-child"></i></div>
<a href="index.php?page=data-pend&kategori=Anak" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Remaja -->
<div class="col-lg-2 col-6">
<div class="small-box bg-purple">
<div class="inner">
<h3><?php echo $remaja; ?></h3>
<p>Remaja (13-17)</p>
</div>
<div class="icon"><i class="fas fa-user-graduate"></i></div>
<a href="index.php?page=data-pend&kategori=Remaja" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Dewasa -->
<div class="col-lg-3 col-6">
<div class="small-box bg-primary">
<div class="inner">
<h3><?php echo $dewasa; ?></h3>
<p>Dewasa (18-59)</p>
</div>
<div class="icon"><i class="fas fa-user-tie"></i></div>
<a href="index.php?page=data-pend&kategori=Dewasa" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Lansia -->
<div class="col-lg-3 col-6">
<div class="small-box bg-secondary">
<div class="inner">
<h3><?php echo $lansia; ?></h3>
<p>Lansia (>60)</p>
</div>
<div class="icon"><i class="fas fa-blind"></i></div>
<a href="index.php?page=data-pend&kategori=Lansia" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
</div>
<div class="row mt-4">
<!-- Left Col: Chart -->
<div class="col-lg-6">
<div class="card card-info h-100">
<div class="card-header">
<h3 class="card-title">
<i class="fas fa-chart-pie"></i> Statistik Penduduk
</h3>
</div>
<div class="card-body">
<canvas id="donutChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
</div>
</div>
</div>
<div class="card card-info mt-4">
<div class="card-header">
<h3 class="card-title">
<i class="fas fa-chart-pie"></i> Statistik Penduduk
</h3>
</div>
<div class="card-body">
<canvas id="donutChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
</div>
<!-- Right Col: Demographics -->
<div class="col-lg-6">
<div class="row">
<!-- Balita -->
<div class="col-lg-4 col-6">
<div class="small-box bg-info">
<div class="inner">
<h3><?php echo $balita; ?></h3>
<p>Balita (0-5)</p>
</div>
<div class="icon"><i class="fas fa-baby"></i></div>
<a href="index.php?page=data-pend&kategori=Balita" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Anak -->
<div class="col-lg-4 col-6">
<div class="small-box bg-success">
<div class="inner">
<h3><?php echo $anak; ?></h3>
<p>Anak (6-12)</p>
</div>
<div class="icon"><i class="fas fa-child"></i></div>
<a href="index.php?page=data-pend&kategori=Anak" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Remaja -->
<div class="col-lg-4 col-6">
<div class="small-box bg-purple">
<div class="inner">
<h3><?php echo $remaja; ?></h3>
<p>Remaja (13-17)</p>
</div>
<div class="icon"><i class="fas fa-user-graduate"></i></div>
<a href="index.php?page=data-pend&kategori=Remaja" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Dewasa -->
<div class="col-lg-6 col-6">
<div class="small-box bg-primary">
<div class="inner">
<h3><?php echo $dewasa; ?></h3>
<p>Dewasa (18-59)</p>
</div>
<div class="icon"><i class="fas fa-user-tie"></i></div>
<a href="index.php?page=data-pend&kategori=Dewasa" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Lansia -->
<div class="col-lg-6 col-6">
<div class="small-box bg-secondary">
<div class="inner">
<h3><?php echo $lansia; ?></h3>
<p>Lansia (>60)</p>
</div>
<div class="icon"><i class="fas fa-blind"></i></div>
<a href="index.php?page=data-pend&kategori=Lansia" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<script>