Skip to content

Commit

Permalink
Merge pull request #83 from training-solonet/ipan
Browse files Browse the repository at this point in the history 
Ipan
  • Loading branch information
@Diandaru
Diandaru authored Nov 28, 2024
2 parents 6f25f08 + b1919b5 commit 60b590f
Show file tree
Hide file tree
Showing 3 changed files with 197 additions and 22 deletions.
39 changes: 28 additions & 11 deletions app/Http/Controllers/DashboardRplController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,32 +14,49 @@ public function index(Request $request)
{
$userId = Auth::id();

// Jumlah data berdasarkan kategori
$jumlahDataProject = Siswa::where('user_id', $userId)
->where('kategori', 'Project')
->count();
->where('kategori', 'Project')
->count();

$jumlahDataLearning = Siswa::where('user_id', $userId)
->where('kategori', 'Learning')
->count();
->where('kategori', 'Learning')
->count();

$totalWaktu = Siswa::where('user_id', $userId)
// Total waktu dalam detik
$siswaData = Siswa::where('user_id', $userId)
->get()
->reduce(function ($carry, $item) {
->map(function ($item) {
$totalTime = 0;
if ($item->waktu_mulai && $item->waktu_selesai) {
$waktuMulai = Carbon::parse($item->waktu_mulai);
$waktuSelesai = Carbon::parse($item->waktu_selesai);
if ($waktuSelesai->greaterThan($waktuMulai)) {
$carry += $waktuSelesai->diffInSeconds($waktuMulai);
$totalTime = $waktuSelesai->diffInSeconds($waktuMulai);
}
}
return $carry;
}, 0);

return [
'name' => $item->aktivitas_name,
'totalTime' => $totalTime,
];
});

$totalWaktu = $siswaData->sum('totalTime');
$aktivitasNames = $siswaData->pluck('name');
$totalAktivitas = $jumlahDataLearning + $jumlahDataProject;

// Persentase
$persentaseLearning = $totalAktivitas > 0 ? ($jumlahDataLearning / $totalAktivitas) * 100 : 0;
$persentaseProject = $totalAktivitas > 0 ? ($jumlahDataProject / $totalAktivitas) * 100 : 0;

return view('dashboardrpl', compact('jumlahDataProject', 'jumlahDataLearning', 'totalWaktu', 'persentaseLearning', 'persentaseProject'));
return view('dashboardrpl', compact(
'jumlahDataProject',
'jumlahDataLearning',
'totalWaktu',
'persentaseLearning',
'persentaseProject',
'aktivitasNames',
'siswaData'
));
}
}
22 changes: 11 additions & 11 deletions resources/views/dashboard_siswa.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ class="btn btn-sm btn-outline-dark d-flex align-items-center me-2">
</div>

<!-- Progress Bars -->
<div class="mt-5">
<div class="mt-3">
<h6 class="font-weight-bold">Perbandingan Aktivitas DiKantor dan Dengan Teknisi</h6>

<!-- Progress Bar DiKantor -->
Expand Down Expand Up @@ -140,12 +140,12 @@ class="btn btn-sm btn-outline-dark d-flex align-items-center me-2">
{{-- Diagram --}}
<div class="d-flex row mt-4" id="dashboard-content" style="display: none;">
<!-- Card 1: Untuk Diagram Lingkaran dan Batang DiKantor -->
<div class="col-md-6">
<div class="col-md-12">
<div class="card shadow-sm border h-100">
<div class="card-body py-4">
<div class="row">
<div class="row w-75" style="margin: auto;">
<!-- Diagram Lingkaran DiKantor -->
<div class="col-md-12">
<div class="col-md-6">
<h6 class="text-center mb-3">Persentase Waktu Per Materi DiKantor</h6>
<div class="chart">
<canvas id="chart-pie-dikantor" class="chart-canvas"
Expand All @@ -158,12 +158,12 @@ class="btn btn-sm btn-outline-dark d-flex align-items-center me-2">
</div>
</div>
<!-- Diagram Batang DiKantor -->
<div class="col-md-12 mt-3">
<div class="col-md-6 mt-1">
<h6 class="text-center mb-3">Jumlah Aktivitas DiKantor</h6>
<div class="chart">
<canvas id="chart-bar-dikantor" class="chart-canvas" height="519"
width="649"
style="margin-top:65px; display: block; box-sizing: border-box; height: 380px; width: 481px;"></canvas>
style="margin-top: 4rem; display: block; box-sizing: border-box; height: 380px; width: 481px;"></canvas>
</div>
</div>
</div>
Expand All @@ -172,12 +172,12 @@ class="btn btn-sm btn-outline-dark d-flex align-items-center me-2">
</div>

<!-- Card 2: Untuk Diagram Lingkaran dan Batang Dengan Teknisi -->
<div class="col-md-6">
<div class="col-md-12 mt-3">
<div class="card shadow-sm border h-100">
<div class="card-body py-4">
<div class="row">
<div class="row w-75" style="margin: auto">
<!-- Diagram Lingkaran Dengan Teknisi -->
<div class="col-md-12">
<div class="col-md-6">
<h6 class="text-center mb-3">Persentase Waktu Per Aktivitas Dengan Teknisi</h6>
<div class="chart">
<canvas id="chart-pie" class="chart-canvas" height="240"></canvas>
Expand All @@ -189,9 +189,9 @@ class="btn btn-sm btn-outline-dark d-flex align-items-center me-2">
</div>
</div>
<!-- Diagram Batang Dengan Teknisi -->
<div class="col-md-12 mt-3">
<div class="col-md-6 mt-1">
<h6 class="text-center mb-3">Jumlah Aktivitas Dengan Teknisi</h6>
<div class="chart" style="margin-top:4rem;">
<div class="chart" style="margin-top: 5rem;">
<canvas id="chart-bar" class="chart-canvas" height="240"></canvas>
</div>
</div>
Expand Down
158 changes: 158 additions & 0 deletions resources/views/dashboardrpl.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,165 @@
</div>
</div>

<div class="row">
<div class="col-md-12 mt-5">
<h4 class="font-weight-bold mb-3 text-center">Grafik Persentase Aktivitas Dikantor dan Keluar
Dengan
Teknisi</h4>
</div>
</div>
{{-- Diagram --}}
<div class="d-flex row mt-4" id="dashboard-content" style="display: none;">
<!-- Card 1: Untuk Diagram Lingkaran dan Batang DiKantor -->
<div class="col-md-12">
<div class="card shadow-sm border h-100">
<div class="card-body py-4">
<div class="row w-75" style="margin: auto;">
<!-- Diagram Lingkaran DiKantor -->
<div class="col-md-6">
<h6 class="text-center mb-3">Persentase Waktu Per Learning</h6>
<div class="chart">
<canvas id="chart-pie-dikantor" class="chart-canvas"
height="240"></canvas>
</div>
<div class="text-center mt-3">
<button id="toggle-legend-dikantor" class="btn btn-sm btn-outline-info">
<i class="fas fa-info-circle me-1"></i> Detail
</button>
</div>
</div>
<!-- Diagram Batang DiKantor -->
<div class="col-md-6 mt-1">
<h6 class="text-center mb-3">Jumlah Aktivitas Project</h6>
<div class="chart">
<canvas id="chart-bar-dikantor" class="chart-canvas" height="519"
width="649"
style="margin-top: 4rem; display: block; box-sizing: border-box; height: 380px; width: 481px;"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Card 2: Untuk Diagram Lingkaran dan Batang Dengan Teknisi -->
<div class="col-md-12 mt-3">
<div class="card shadow-sm border h-100">
<div class="card-body py-4">
<div class="row w-75" style="margin: auto">
<!-- Diagram Lingkaran Dengan Teknisi -->
<div class="col-md-6">
<h6 class="text-center mb-3">Persentase Waktu Per Aktivitas Dengan Teknisi</h6>
<div class="chart">
<canvas id="chart-pie" class="chart-canvas" height="240"></canvas>
</div>
<div class="text-center mt-3">
<button id="toggle-legend" class="btn btn-sm btn-outline-info">
<i class="fas fa-info-circle me-1"></i> Detail
</button>
</div>
</div>
<!-- Diagram Batang Dengan Teknisi -->
<div class="col-md-6 mt-1">
<h6 class="text-center mb-3">Jumlah Aktivitas Dengan Teknisi</h6>
<div class="chart" style="margin-top: 5rem;">
<canvas id="chart-bar" class="chart-canvas" height="240"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>

{{-- Chart.js Script --}}
<script>
// Format time utility
function formatTime(seconds) {
seconds = Math.abs(seconds);
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
const s = seconds % 60;
return `${h}h ${m}m ${s}s`;
}
// Data for Pie Chart
const ctxPie = document.getElementById('chart-pie').getContext('2d');
const gradientColorsPie = [];
const colors = [
'rgba(75, 192, 192, 1)', 'rgba(255, 99, 132, 1)', 'rgba(255, 159, 64, 1)', 'rgba(153, 102, 255, 1)',
'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(231, 233, 237, 1)', 'rgba(255, 99, 99, 1)',
];
colors.forEach((color) => {
const gradient = ctxPie.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, color);
gradient.addColorStop(1, color.replace('1)', '0.2)'));
gradientColorsPie.push(gradient);
});
const pieChart = new Chart(ctxPie, {
type: 'doughnut',
data: {
labels: @json($aktivitasNames),
datasets: [{
data: @json($siswaData->pluck('totalTime')),
backgroundColor: gradientColorsPie,
hoverOffset: 10
}]
},
options: {
responsive: true,
cutout: '70%',
animation: {
animateRotate: true,
animateScale: true,
duration: 1500
},
plugins: {
tooltip: {
callbacks: {
label: function(tooltipItem) {
const data = tooltipItem.dataset.data;
const currentValue = data[tooltipItem.dataIndex];
return `${tooltipItem.label}: (${formatTime(currentValue)})`;
}
}
}
}
}
});
// Bar Chart
const ctxBar = document.getElementById('chart-bar').getContext('2d');
const gradientBar = ctxBar.createLinearGradient(0, 0, 0, 400);
gradientBar.addColorStop(0, 'rgba(54, 162, 235, 1)');
gradientBar.addColorStop(1, 'rgba(54, 162, 235, 0.4)');
const barChart = new Chart(ctxBar, {
type: 'bar',
data: {
labels: @json($aktivitasNames),
datasets: [{
label: 'Total Aktivitas',
data: @json($siswaData->pluck('totalTime')),
backgroundColor: gradientBar,
borderWidth: 2
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>



</x-app-layout>

0 comments on commit 60b590f

Please sign in to comment.