157 lines
6.7 KiB
PHP
157 lines
6.7 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
|
|
<div class="grid grid-cols-3 gap-5 mb-20">
|
|
<div class="flex justify-center items-center">
|
|
<div>
|
|
<div class="font-semibold py-5">
|
|
Siswa Yang Melakukan Pelanggaran
|
|
</div>
|
|
<div class="flex justify-items-start items-center">
|
|
<div class="rounded-full p-3 bg-[#FFECDF]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-[#FF771D] w-8 h-8 ">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-5 text-3xl font-semibold">
|
|
{{ $countPelanggar }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-center items-center">
|
|
<div>
|
|
<div class="font-semibold py-5">
|
|
Jumlah Siswa
|
|
</div>
|
|
<div class="flex justify-items-start items-center">
|
|
<div class="rounded-full p-3 bg-gray-200">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-[#4154F1] w-8 h-8 ">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-5 text-3xl font-semibold">
|
|
{{ $countSiswa }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-center items-center">
|
|
<div>
|
|
<div class="font-semibold py-5">
|
|
Kriteria Pelanggaran
|
|
</div>
|
|
<div class="flex justify-items-start items-center">
|
|
<div class="rounded-full p-3 bg-[#FFECDF]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-[#FF771D] w-8 h-8">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-5 text-3xl font-semibold">
|
|
{{ $countSubKriteria }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- <div class="flex items-center">
|
|
<div class="w-full">
|
|
<canvas id="donat"></canvas>
|
|
</div>
|
|
<div class="w-full">
|
|
<div class="container mx-auto px-4 py-8">
|
|
<div class="block">
|
|
<div class="flex items-center">
|
|
<div class="bg-[#95CE7A] text-center p-4 rounded-lg my-2 mr-10">
|
|
</div>
|
|
<p class="text-base font-semibold">Pelanggaran Ringan</p>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="bg-[#5470C6] text-center p-4 rounded-lg my-2 mr-10">
|
|
</div>
|
|
<p class="text-base font-semibold">Pelanggaran Sedang</p>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="bg-[#FAC858] text-center p-4 rounded-lg my-2 mr-10">
|
|
</div>
|
|
<p class="text-base font-semibold">Tindak Pidana Ringan (TIPIRING)</p>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="bg-[#EE6666] text-center p-4 rounded-lg my-2 mr-10">
|
|
</div>
|
|
<p class="text-base font-semibold">Tindak Pidana Berat (TIPIRAT)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> --}}
|
|
|
|
<div class="flex">
|
|
<div class="w-1/2">
|
|
<canvas id="donat"></canvas>
|
|
</div>
|
|
<div class="w-1/2">
|
|
<table class="table-auto border-collapse border-2 border-gray-600 w-full">
|
|
<thead>
|
|
<tr class="bg-[#5A72A0]">
|
|
<th class="border-2 border-gray-600 px-4 py-2" >Range Nilai</th>
|
|
<th class="border-2 border-gray-600 px-4 py-2" >Keterangan</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="border-2 border-gray-600 px-4 py-2">1 - 2</td>
|
|
<td class="border-2 border-gray-600 px-4 py-2">Pelanggaran Ringan</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="border-2 border-gray-600 px-4 py-2">2.1 - 8</td>
|
|
<td class="border-2 border-gray-600 px-4 py-2">Pelanggaran Sedang</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="border-2 border-gray-600 px-4 py-2">8.1 - 20</td>
|
|
<td class="border-2 border-gray-600 px-4 py-2">Tindak Pidana Ringan (TIPIRING)</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="border-2 border-gray-600 px-4 py-2">20.1 - 100</td>
|
|
<td class="border-2 border-gray-600 px-4 py-2">Tindak Pidana Berat (TIPIRAT)</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@section('script')
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const data = @json($data);
|
|
|
|
const ctx = document.getElementById('donat').getContext('2d');
|
|
|
|
const myChart = new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: data.map(row => row.label),
|
|
datasets: [
|
|
{
|
|
label: 'Tingkat',
|
|
data: data.map(row => row.value),
|
|
backgroundColor: ['#95CE7A', '#5470C6', '#FAC858', '#EE6666'],
|
|
hoverBackgroundColor: ['#95CE7A', '#5470C6', '#FAC858', '#EE6666']
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
@endsection
|