TIF_E41211408_DaffaFauziRahman
/
TIF_E41211408
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tampilan Dashboard

This commit is contained in:
daffarahman11 2025-05-05 15:54:30 +07:00
parent b309e56152
commit 7b20b29157
8 changed files with 205 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/Http/Controllers/dashboardController.php
View File

@ -14,12 +14,19 @@ public function index()
{
$jumlahRawanCuras = Curas::where('klaster_id', '3')->count();
$jumlahTotalCuras = Curas::count();
$prosentaseCuras = ($jumlahRawanCuras / $jumlahTotalCuras) * 100;
$jumlahRawanCuranmor = Curanmor::where('klaster_id', '3')->count();
$jumlahTotalCuranmor = Curanmor::count();
$namaUser = Auth::user()->nama;
$prosentaseCuras = ($jumlahRawanCuras / $jumlahTotalCuras) * 100;
$prosentaseCuranmor = ($jumlahRawanCuranmor / $jumlahTotalCuranmor) * 100;
$totalKecamatan = Kecamatan::count();
return view('admin.dashboardAdmin', compact('jumlahRawanCuras', 'jumlahRawanCuranmor', 'namaUser', 'prosentaseCuras', 'prosentaseCuranmor', 'totalKecamatan'));
$curasTertinggis = Curas::orderBy('jumlah_curas', 'desc')->take(5)->get();
$curanmorTertinggis = Curanmor::orderBy('jumlah_curanmor', 'desc')->take(5)->get();
$namaUser = Auth::user()->nama;
return view('admin.dashboardAdmin', compact('jumlahRawanCuras', 'jumlahRawanCuranmor', 'namaUser', 'prosentaseCuras', 'prosentaseCuranmor', 'totalKecamatan', 'curasTertinggis', 'curanmorTertinggis'));
}
}

2
app/Services/KMeansService.php
View File

@ -221,7 +221,7 @@ public function hitungKMeansCuranmor()
public function SSEElbowCuras()
{
$data = Curas::select('id', 'jumlah_curas')->get();
$maxK = 4;
$maxK = 10;
$maxIterasi = 100;
$elbowData = [];

22
database/seeders/KlasterSeeder.php
View File

@ -15,17 +15,17 @@ public function run(): void
{
Klaster::create([
'nama_klaster'=> 'Aman',
'warna'=> '#00FF00',
'warna'=> '#27AE60',
]);
Klaster::create([
'nama_klaster'=> 'Sedang',
'warna'=> '#FFFF00',
]);
Klaster::create([
'nama_klaster'=> 'Rawan',
'warna'=> '#FF0000',
]);
}
Klaster::create([
'nama_klaster'=> 'Sedang',
'warna'=> '#F1C40F',
]);
Klaster::create([
'nama_klaster'=> 'Rawan',
'warna'=> '#E74C3C',
]);
}
}

109
public/assets/js/chart-custom.js
View File

@ -1012,6 +1012,7 @@ if (jQuery("#radar-multiple-chart").length) {
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "visits";
series.dataFields.categoryX = "country";
series.name = "Visits";
@ -5196,61 +5197,69 @@ if (jQuery("#editor").length) {
if (jQuery('#layout1-chart-2').length) {
am4core.ready(function() {
// Theme
am4core.useTheme(am4themes_animated);
// Chart instance
// Buat chart instance
var chart = am4core.create("layout1-chart-2", am4charts.XYChart);
// Load data via Ajax
fetch("/storage/sse_elbow_curanmor.json")
.then(response => response.json())
.then(data => {
// Format data untuk chart
chart.data = data.map(item => ({
k: item.k,
sse: item.sse,
centroid_awal: item.centroid_awal.join(", ") // Menggabungkan nilai centroid_awal menjadi string
}));
// X Axis (kategori K)
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "k";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;
categoryAxis.title.text = "Jumlah Klaster (K)";
// Y Axis (nilai SSE)
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Nilai SSE";
// Line Series
let lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueY = "sse";
lineSeries.dataFields.categoryX = "k";
lineSeries.name = "SSE";
lineSeries.strokeWidth = 2;
lineSeries.tooltipText = "K={categoryX}\nSSE={valueY}\nCentroid Awal: {centroid_awal}";
lineSeries.tensionX = 1; // untuk garis agak lengkung (opsional)
// Bullets pada titik data
let bullet = lineSeries.bullets.push(new am4charts.CircleBullet());
bullet.circle.radius = 4;
// Cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "panX";
chart.cursor.lineX.disabled = false;
chart.cursor.lineY.disabled = false;
// Scrollbar (opsional)
chart.scrollbarX = new am4core.Scrollbar();
// Inisialisasi axes & series di luar agar tidak duplikat
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "k";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;
categoryAxis.title.text = "Jumlah Klaster (K)";
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Nilai SSE";
let lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueY = "sse";
lineSeries.dataFields.categoryX = "k";
lineSeries.name = "SSE";
lineSeries.strokeWidth = 2;
lineSeries.tooltipText = "K={categoryX}\nSSE={valueY}\nCentroid Awal: {centroid_awal}";
lineSeries.tensionX = 1;
let bullet = lineSeries.bullets.push(new am4charts.CircleBullet());
bullet.circle.radius = 4;
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "panX";
chart.cursor.lineX.disabled = false;
chart.cursor.lineY.disabled = false;
chart.scrollbarX = new am4core.Scrollbar();
// Fungsi untuk load data berdasarkan tipe
function loadChartData(type) {
fetch(`/storage/sse_elbow_${type}.json`)
.then(response => response.json())
.then(data => {
chart.data = data.map(item => ({
k: item.k,
sse: item.sse,
centroid_awal: item.centroid_awal.join(", ")
}));
console.log("Data yang dimuat ke chart:", chart.data);
});
}
// Load data default saat pertama kali (curas)
loadChartData('curanmor');
// Event listener dropdown
document.querySelectorAll('.chart-option').forEach(item => {
item.addEventListener('click', function(e) {
e.preventDefault();
const selected = this.getAttribute('data-value');
loadChartData(selected);
document.getElementById('dropdownMenuButton002').innerHTML = this.innerText + '<i class="ri-arrow-down-s-line ml-1"></i>';
});
});
});
}
if (jQuery("#layout1-chart-3").length) {
options = {
series: [{

79
resources/views/admin/dashboardAdmin.blade.php
View File

@ -77,11 +77,72 @@
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title">5 Kecamatan Tertinggi Kasus Curas</h4>
</div>
</div>
<div class="card-body">
<p>Berikut merupakan 5 Kecamatan yang memiliki kasus CURAS tertinggi</p>
<table class="table">
<thead>
<tr class="ligth">
<th scope="col">Nama Kecamatan</th>
<th scope="col">Jumlah Curas</th>
<th scope="col">Klaster</th>
</tr>
</thead>
<tbody>
@foreach ( $curasTertinggis as $curasTertinggi )
<tr style="background-color: {{ $curasTertinggi->punyaKlasterCuras->warna }}">
<td>{{ $curasTertinggi->punyaKecamatanCuras->nama_kecamatan }}</td>
<td>{{ $curasTertinggi->jumlah_curas }}</td>
<td>{{ $curasTertinggi->punyaKlasterCuras->nama_klaster }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title">5 Kecamatan Tertinggi Kasus Curanmor</h4>
</div>
</div>
<div class="card-body">
<p>Berikut merupakan 5 Kecamatan yang memiliki kasus CURANMOR tertinggi</p>
<table class="table">
<thead>
<tr class="ligth">
<th scope="col">Nama Kecamatan</th>
<th scope="col">Jumlah Curanmor</th>
<th scope="col">Klaster</th>
</tr>
</thead>
<tbody>
@foreach ( $curanmorTertinggis as $curanmorTertinggi )
<tr style="background-color: {{ $curanmorTertinggi->punyaKlasterCuranmor->warna }}">
<td>{{ $curanmorTertinggi->punyaKecamatanCuranmor->nama_kecamatan }}</td>
<td>{{ $curanmorTertinggi->jumlah_curanmor }}</td>
<td>{{ $curanmorTertinggi->punyaKlasterCuranmor->nama_klaster }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="card card-block card-stretch card-height">
<div class="card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title">Pemetaan Curas dan Curanmor Kab Probolinggo</h4>
<h4 class="card-title" id="map-card-title">Pemetaan Curas dan Curanmor Kab Probolinggo</h4>
</div>
<div class="card-header-toolbar d-flex align-items-center">
<div class="dropdown">
@ -103,32 +164,33 @@
</div>
</div>
</div>
<div class="col-lg-6">
<div class="col-lg-12">
<div class="card card-block card-stretch card-height">
<div class="card-header d-flex align-items-center justify-content-between">
<div class="header-title">
<h4 class="card-title">Revenue Vs Cost</h4>
<h4 class="card-title">Nilai K Terbaik</h4>
</div>
<div class="card-header-toolbar d-flex align-items-center">
<div class="dropdown">
<span class="dropdown-toggle dropdown-bg btn" id="dropdownMenuButton002"
data-toggle="dropdown">
This Month<i class="ri-arrow-down-s-line ml-1"></i>
Curanmor<i class="ri-arrow-down-s-line ml-1"></i>
</span>
<div class="dropdown-menu dropdown-menu-right shadow-none"
aria-labelledby="dropdownMenuButton002">
<a class="dropdown-item" href="#">Curas</a>
<a class="dropdown-item" href="#">Curanmor</a>
<a class="dropdown-item chart-option" data-value="curanmor" href="#">Curanmor</a>
<a class="dropdown-item chart-option" data-value="curas" href="#">Curas</a>
</div>
</div>
</div>
</div>
<div class="card-body">
<p>Perhitungan Nilai K terbaik menggunakan rumus Sum of Squared Errors (SSE) dengan nilai k = 1 sampa k = 10. Kemudian nilai SSE tersebut ditampilkan dalam Grafik Elbow Method</p>
<div id="layout1-chart-2" style="min-height: 360px;"></div>
</div>
</div>
</div>
</div>
<!-- Page end -->
@ -137,7 +199,7 @@
<script>
let map;
let geoLayer;
let mapTitle = document.querySelector('.card-title');
let mapTitle = document.getElementById('map-card-title');
let apiUrl = "{{ url('/api/map/curas') }}"; // default awal curas
let curasData = {};
@ -202,6 +264,7 @@ function loadInitialMap() {
map = L.map('map').setView([-7.843271790154591, 113.2990930356143], 10);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
minZoom: 10,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
fetchAndLoadMap(apiUrl, 'Pemetaan Curas Kab Probolinggo');

28
resources/views/components/layoutAdmin.blade.php
View File

@ -39,7 +39,7 @@
<div class="iq-sidebar sidebar-default ">
<div class="iq-sidebar-logo d-flex align-items-center justify-content-between">
<a href="/dashboard" class="header-logo">
<img src="{{ asset('/assets/images/logo.png') }}" class="img-fluid rounded-normal light-logo" alt="logo"><h5 class="logo-title light-logo ml-3">PROTECT</h5>
<img src="{{ asset('assets/images/logo.png') }}" class="img-fluid rounded-normal light-logo" alt="logo"><h5 class="logo-title light-logo ml-3">KPROTECT</h5>
</a>
<div class="iq-menu-bt-sidebar ml-0">
<i class="las la-bars wrapper-menu"></i>
@ -166,6 +166,28 @@
</li>
</ul>
</li>
<li class=" {{ Request::is('dashboard/TampilHitungCuras')||Request::is('dashboard/TampilHitungCuranmor') ? 'active' : '' }}">
<a href="#return" class="collapsed" data-toggle="collapse" aria-expanded="false">
<svg fill="#676e8a" height="20px" width="20px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" stroke="#676e8a"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M468.293,0c-6.07,0-418.515,0-424.585,0C19.607,0,0,19.607,0,43.707c0,6.07,0,418.515,0,424.585 C0,492.393,19.607,512,43.707,512c6.07,0,418.515,0,424.585,0c24.1,0,43.707-19.607,43.707-43.707c0-6.07,0-418.515,0-424.585 C512,19.607,492.393,0,468.293,0z M237.268,474.537H43.707c-3.443,0-6.244-2.801-6.244-6.244V274.732h199.805V474.537z M237.268,237.268H37.463V43.707c0-3.443,2.801-6.244,6.244-6.244h193.561V237.268z M474.537,468.293 c0,3.443-2.801,6.244-6.244,6.244H274.732V274.732h199.805V468.293z M474.537,237.268H274.732V37.463h193.561 c3.443,0,6.244,2.801,6.244,6.244V237.268z"></path> </g> </g> <g> <g> <path d="M177.327,118.634h-21.229V97.405c0-10.345-8.387-18.732-18.732-18.732s-18.732,8.387-18.732,18.732v21.229H97.405 c-10.345,0-18.732,8.387-18.732,18.732s8.387,18.732,18.732,18.732h21.229v21.229c0,10.345,8.387,18.732,18.732,18.732 s18.732-8.387,18.732-18.732v-21.229h21.229c10.345,0,18.732-8.387,18.732-18.732S187.672,118.634,177.327,118.634z"></path> </g> </g> <g> <g> <path d="M414.595,384.624h-79.43c-9.616,0-18.051,7.044-19.106,16.601c-1.246,11.299,7.568,20.862,18.614,20.862h79.43 c9.616,0,18.051-7.044,19.106-16.601C434.456,394.188,425.642,384.624,414.595,384.624z"></path> </g> </g> <g> <g> <path d="M414.595,327.18h-79.43c-9.616,0-18.051,7.044-19.106,16.601c-1.246,11.299,7.568,20.862,18.614,20.862h79.43 c9.616,0,18.051-7.044,19.106-16.601C434.456,336.744,425.642,327.18,414.595,327.18z"></path> </g> </g> <g> <g> <path d="M414.595,118.634h-79.922c-10.345,0-18.732,8.387-18.732,18.732s8.387,18.732,18.732,18.732h79.922 c10.345,0,18.732-8.387,18.732-18.732S424.94,118.634,414.595,118.634z"></path> </g> </g> <g> <g> <path d="M178.868,389.646l-15.012-15.012l15.012-15.012c7.315-7.315,7.315-19.175-0.001-26.49c-7.314-7.314-19.175-7.315-26.49,0 l-15.01,15.012l-15.012-15.012c-7.313-7.314-19.174-7.315-26.49,0c-7.315,7.315-7.315,19.175,0,26.49l15.012,15.012 l-15.012,15.012c-7.315,7.315-7.315,19.175,0,26.49c7.314,7.314,19.175,7.315,26.49,0l15.012-15.012l15.012,15.012 c7.314,7.315,19.174,7.315,26.49,0C186.183,408.821,186.183,396.961,178.868,389.646z"></path> </g> </g> </g></svg>
<span class="ml-4">Detail Perhitungan
</span>
<svg class="svg-icon iq-arrow-right arrow-active" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="10 15 15 20 20 15"></polyline><path d="M4 4h7a4 4 0 0 1 4 4v12"></path>
</svg>
</a>
<ul id="return" class="iq-submenu collapse" data-parent="#iq-sidebar-toggle">
<li class="">
<a href="/dashboard/TampilHitungCuras">
<i class="las la-minus"></i><span>K - Means Curas</span>
</a>
</li>
<li class="">
<a href="/dashboard/TampilHitungCuranmor">
<i class="las la-minus"></i><span>K - Means Curanmor</span>
</a>
</li>
</ul>
</li>
@ -178,9 +200,9 @@
<nav class="navbar navbar-expand-lg navbar-light p-0">
<div class="iq-navbar-logo d-flex align-items-center justify-content-between">
<i class="ri-menu-line wrapper-menu"></i>
<a href="../backend/index.html" class="header-logo">
<a href="/dashboard" class="header-logo">
<img src="{{ asset('assets/images/logo.png') }}" class="img-fluid rounded-normal" alt="logo">
<h5 class="logo-title ml-3">PROTECT</h5>
<h5 class="logo-title ml-3">KPROTECT</h5>
</a>
</div>

49
resources/views/landing.blade.php
View File

@ -163,9 +163,10 @@ class="img-fluid"
<!-- drop down third level -->
</li>
<li>
<a href="#sectionMap">Map</a>
<a href="#sectionOurTeam">Our Teams</a>
</li>
<li><a href="#sectionOurTeam">Our Teams</a>
<li>
<a href="#sectionMap">Map</a>
</li>
</ul>
</div>
@ -1808,8 +1809,8 @@ class="form-control position-relative subscription-email"
</li>
<li class="list-item"><a href="#sectionCurasCuranmor">Curas</a></li>
<li class="list-item"><a href="#sectionKmeans">Clustering</a></li>
<li class="list-item"><a href="#sectionMap">Map</a></li>
<li class="list-item"><a href="#sectionOurTeam">Our Team</a></li>
<li class="list-item"><a href="#sectionMap">Map</a></li>
</ul>
</div>
</div>
@ -2045,7 +2046,13 @@ function popUp(feature, layer) {
}
function loadInitialMap() {
map = L.map('map').setView([-7.843271790154591, 113.2990930356143], 10);
map = L.map('map', {
center: [-7.843271790154591, 113.2990930356143],
zoom: 10,
minZoom: 10,
maxZoom: 19
});
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; OpenStreetMap'
@ -2055,41 +2062,37 @@ function loadInitialMap() {
fetchAndLoadMap(apiUrl, 'Pemetaan Curas Kab Probolinggo');
}
document.addEventListener('DOMContentLoaded', () => {
loadInitialMap();
// Jalankan peta awal
loadInitialMap();
document.getElementById('btn-curas').addEventListener('click', (e) => {
e.preventDefault();
fetchAndLoadMap("{{ url('/api/map/curas') }}", "Pemetaan Curas Kab Probolinggo");
});
document.getElementById('btn-curanmor').addEventListener('click', (e) => {
e.preventDefault();
fetchAndLoadMap("{{ url('/api/map/curanmor') }}", "Pemetaan Curanmor Kab Probolinggo");
});
});
</script>
<script>
document.getElementById('btn-curas').addEventListener('click', (e) => {
// Tombol Curas diklik
document.getElementById('btn-curas').addEventListener('click', (e) => {
e.preventDefault();
fetchAndLoadMap("{{ url('/api/map/curas') }}", "Pemetaan Curas Kab Probolinggo");
// Tampilkan info update curas, sembunyikan curanmor
// Tampilkan info curas, sembunyikan curanmor
document.getElementById('update-curas').style.display = 'block';
document.getElementById('update-curanmor').style.display = 'none';
});
});
document.getElementById('btn-curanmor').addEventListener('click', (e) => {
// Tombol Curanmor diklik
document.getElementById('btn-curanmor').addEventListener('click', (e) => {
e.preventDefault();
fetchAndLoadMap("{{ url('/api/map/curanmor') }}", "Pemetaan Curanmor Kab Probolinggo");
// Tampilkan info update curanmor, sembunyikan curas
// Tampilkan info curanmor, sembunyikan curas
document.getElementById('update-curas').style.display = 'none';
document.getElementById('update-curanmor').style.display = 'block';
});
});
</script>
</body>
</html>

4
routes/web.php
View File

@ -44,5 +44,5 @@
})->middleware('auth');
// Route K-Means Centroid Tetap
Route::get('/kmeans-curas', [KmeansController::class, 'KMeansCuras']);
Route::get('/kmeans-curanmor', [KmeansController::class, 'KMeansCuranmor']);
Route::get('/kmeans-curas', [KmeansController::class, 'KMeansCuras'])->middleware('auth');
Route::get('/kmeans-curanmor', [KmeansController::class, 'KMeansCuranmor'])->middleware('auth');