Commit cfd003e1 authored by Syaifur Rohman's avatar Syaifur Rohman

add table and chart absensi

parent a57f7baa
<?php
namespace App\Http\Controllers\Api;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\Akademik\AbsensiModel;
class ChartDashboardController extends Controller
{
public function __construct()
{
$this->mAkAbsensi = new AbsensiModel();
}
public function getStatistikAbsensi()
{
// Fetch all attendance records for the current school and active period
$absensi = $this->mAkAbsensi
->where('idPSekolah', session()->get('idPSekolah'))
->where('idPPeriode', session()->get('idPPeriode'))
->get();
// Initialize a status count array with descriptive keys
$statusCount = [
'belum_ada_absensi' => 0,
'hadir' => 0,
'tidak_hadir' => 0,
'terlambat' => 0,
'ijin' => 0,
'sakit' => 0,
];
// Count each status across all students
foreach ($absensi as $record) {
switch ($record->idStatus) {
case 0:
$statusCount['belum_ada_absensi']++;
break;
case 1:
$statusCount['hadir']++;
break;
case 2:
$statusCount['tidak_hadir']++;
break;
case 3:
$statusCount['terlambat']++;
break;
case 4:
$statusCount['ijin']++;
break;
case 5:
$statusCount['sakit']++;
break;
}
}
// Return the status count as JSON
return response()->json($statusCount);
}
}
\ No newline at end of file
...@@ -28,6 +28,36 @@ ...@@ -28,6 +28,36 @@
{{ session('gagal') }} {{ session('gagal') }}
</div> </div>
@endif @endif
<div class="card">
<div class="card-header pb-0">
<h1 class="text-center mb-5">Statistik Absensi Siswa</h1>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<h3>Kehadiran Siswa</h3>
<table class="table text-center" border="1">
<thead>
<tr>
<td>Siswa</td>
<td>Jumlah</td>
<td>Prosentase</td>
</tr>
</thead>
<tbody id="attendance-stats">
<!-- Data will be populated here -->
</tbody>
</table>
</div>
<div class="col-md-6">
<div id="chartKehadiranSiswa" style="height: 500px;"></div>
</div>
</div>
</div>
</div>
@if (session()->get('role') == 2)
<div class="card"> <div class="card">
<div class="card-header pb-0"> <div class="card-header pb-0">
<h1 class="text-center mb-5">Petunjuk Penggunaan</h1> <h1 class="text-center mb-5">Petunjuk Penggunaan</h1>
...@@ -111,6 +141,7 @@ ...@@ -111,6 +141,7 @@
@endif @endif
</div> </div>
</div> </div>
@endif
</div> </div>
</div> </div>
</div> </div>
...@@ -123,6 +154,84 @@ ...@@ -123,6 +154,84 @@
</script> </script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() {
// Fetch attendance statistics
$.ajax({
url: baseUrl + '/chart/dashboard/get-statistik-absensi',
method: 'GET',
success: function(response) {
let total = response.hadir + response.tidak_hadir + response.terlambat + response.ijin + response.sakit;
let rows = `
<tr>
<td>Belum Ada Absensi</td>
<td>${response.belum_ada_absensi}</td>
<td>${((response.belum_ada_absensi / total) * 100).toFixed(2)}%</td>
</tr>
<tr>
<td>Hadir</td>
<td>${response.hadir}</td>
<td>${((response.hadir / total) * 100).toFixed(2)}%</td>
</tr>
<tr>
<td>Tidak Hadir</td>
<td>${response.tidak_hadir}</td>
<td>${((response.tidak_hadir / total) * 100).toFixed(2)}%</td>
</tr>
<tr>
<td>Terlambat</td>
<td>${response.terlambat}</td>
<td>${((response.terlambat / total) * 100).toFixed(2)}%</td>
</tr>
<tr>
<td>Ijin</td>
<td>${response.ijin}</td>
<td>${((response.ijin / total) * 100).toFixed(2)}%</td>
</tr>
<tr>
<td>Sakit</td>
<td>${response.sakit}</td>
<td>${((response.sakit / total) * 100).toFixed(2)}%</td>
</tr>
`;
$('#attendance-stats').html(rows);
// Draw the pie chart for attendance
drawChartKehadiranSiswa(response);
},
error: function(err) {
console.log("Error:", err);
}
});
});
// Load Google Charts
google.charts.load('current', {'packages':['corechart']});
function drawChartKehadiranSiswa(data) {
// Create the data table
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Status');
dataTable.addColumn('number', 'Jumlah');
dataTable.addRows([
['Belum Ada Absensi', data.belum_ada_absensi],
['Hadir', data.hadir],
['Tidak Hadir', data.tidak_hadir],
['Terlambat', data.terlambat],
['Ijin', data.ijin],
['Sakit', data.sakit]
]);
// Set chart options
var options = {
title: 'Kehadiran Siswa',
pieHole: 0.4,
};
// Instantiate and draw the chart
var chart = new google.visualization.PieChart(document.getElementById('chartKehadiranSiswa'));
chart.draw(dataTable, options);
}
@if (session()->get('role') == 1) @if (session()->get('role') == 1)
// Memuat Google Charts // Memuat Google Charts
google.charts.load('current', {'packages':['corechart']}); google.charts.load('current', {'packages':['corechart']});
......
...@@ -120,6 +120,8 @@ Route::middleware(['login:1'])->group(function () { ...@@ -120,6 +120,8 @@ Route::middleware(['login:1'])->group(function () {
Route::middleware(['login:2'])->group(function () { Route::middleware(['login:2'])->group(function () {
@include_once('web_sekolah.php'); @include_once('web_sekolah.php');
// Chart Dashboard
Route::get('chart/dashboard/get-statistik-absensi', 'Api\ChartDashboardController@getStatistikAbsensi');
}); });
Route::middleware(['login:3'])->group(function () { Route::middleware(['login:3'])->group(function () {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment