From 7b20b2915714c69bfc17dd1de81ed4b190e5ec0d Mon Sep 17 00:00:00 2001 From: daffarahman11 Date: Mon, 5 May 2025 15:54:30 +0700 Subject: [PATCH] Tampilan Dashboard --- app/Http/Controllers/dashboardController.php | 13 ++- app/Services/KMeansService.php | 2 +- database/seeders/KlasterSeeder.php | 22 ++-- public/assets/js/chart-custom.js | 109 ++++++++++-------- .../views/admin/dashboardAdmin.blade.php | 79 +++++++++++-- .../views/components/layoutAdmin.blade.php | 28 ++++- resources/views/landing.blade.php | 49 ++++---- routes/web.php | 4 +- 8 files changed, 205 insertions(+), 101 deletions(-) diff --git a/app/Http/Controllers/dashboardController.php b/app/Http/Controllers/dashboardController.php index e67b49f..a5534ac 100644 --- a/app/Http/Controllers/dashboardController.php +++ b/app/Http/Controllers/dashboardController.php @@ -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')); } } diff --git a/app/Services/KMeansService.php b/app/Services/KMeansService.php index 3e2b2a2..31ccb52 100644 --- a/app/Services/KMeansService.php +++ b/app/Services/KMeansService.php @@ -221,7 +221,7 @@ public function hitungKMeansCuranmor() public function SSEElbowCuras() { $data = Curas::select('id', 'jumlah_curas')->get(); - $maxK = 4; + $maxK = 10; $maxIterasi = 100; $elbowData = []; diff --git a/database/seeders/KlasterSeeder.php b/database/seeders/KlasterSeeder.php index cbf0f27..261b1f4 100644 --- a/database/seeders/KlasterSeeder.php +++ b/database/seeders/KlasterSeeder.php @@ -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', + ]); + } } diff --git a/public/assets/js/chart-custom.js b/public/assets/js/chart-custom.js index 647d587..87eb8bb 100644 --- a/public/assets/js/chart-custom.js +++ b/public/assets/js/chart-custom.js @@ -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 + ''; }); + }); }); } - - - if (jQuery("#layout1-chart-3").length) { options = { series: [{ diff --git a/resources/views/admin/dashboardAdmin.blade.php b/resources/views/admin/dashboardAdmin.blade.php index cf96ac3..e7f9567 100644 --- a/resources/views/admin/dashboardAdmin.blade.php +++ b/resources/views/admin/dashboardAdmin.blade.php @@ -77,11 +77,72 @@ + +
+
+
+
+

5 Kecamatan Tertinggi Kasus Curas

+
+
+
+

Berikut merupakan 5 Kecamatan yang memiliki kasus CURAS tertinggi

+ + + + + + + + + + @foreach ( $curasTertinggis as $curasTertinggi ) + + + + + + @endforeach + +
Nama KecamatanJumlah CurasKlaster
{{ $curasTertinggi->punyaKecamatanCuras->nama_kecamatan }}{{ $curasTertinggi->jumlah_curas }}{{ $curasTertinggi->punyaKlasterCuras->nama_klaster }}
+
+
+
+
+
+
+
+

5 Kecamatan Tertinggi Kasus Curanmor

+
+
+
+

Berikut merupakan 5 Kecamatan yang memiliki kasus CURANMOR tertinggi

+ + + + + + + + + + @foreach ( $curanmorTertinggis as $curanmorTertinggi ) + + + + + + @endforeach + +
Nama KecamatanJumlah CuranmorKlaster
{{ $curanmorTertinggi->punyaKecamatanCuranmor->nama_kecamatan }}{{ $curanmorTertinggi->jumlah_curanmor }}{{ $curanmorTertinggi->punyaKlasterCuranmor->nama_klaster }}
+
+
+
-

Pemetaan Curas dan Curanmor Kab Probolinggo

+

Pemetaan Curas dan Curanmor Kab Probolinggo

@@ -103,32 +164,33 @@
-
+
-

Revenue Vs Cost

+

Nilai K Terbaik

- This Month + Curanmor
- Curas - Curanmor + Curanmor + Curas
+

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

-
+ @@ -137,7 +199,7 @@ - - + diff --git a/routes/web.php b/routes/web.php index bcdfb07..3c69899 100644 --- a/routes/web.php +++ b/routes/web.php @@ -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');