Probindo/database-pertani-web
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Karakteristik Petani

Browse Source
This commit is contained in:
afriadirahman
2026-10-12 10:22:01 +07:00
parent f49bb0c2db
commit aef27704f2
2 changed files with 277 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/dashboard/karakteristik-petani.blade.php
+272 -81
View File
@@ -3,6 +3,42 @@
@push('style') @push('style')
<link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}" /> <link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}" />
<style> <style>
.chart-group-header-toggle {
cursor: pointer;
background-color: rgba(var(--bs-primary-rgb, 115, 103, 240), 0.08);
border-inline-start: 4px solid var(--bs-primary, #7367f0);
box-shadow: none;
transition: background-color 0.2s ease;
}
.chart-group-header-toggle:hover {
background-color: rgba(var(--bs-primary-rgb, 115, 103, 240), 0.13);
}
.chart-group-header-toggle .card-body {
padding: 12px 16px;
}
.chart-group-header-toggle h5 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 2px;
}
.chart-group-header-toggle p {
font-size: 0.8125rem;
line-height: 1.4;
}
.chart-group-header-toggle:focus-visible {
outline: 2px solid var(--bs-primary);
outline-offset: 3px;
}
.chart-group-icon-toggle {
width: 34px;
height: 34px;
flex-shrink: 0;
}
.chart-group-icon-toggle .icon-base {
font-size: 24px;
width: 24px;
height: 24px;
}
.readiness-score-list { display: grid; gap: 12px; } .readiness-score-list { display: grid; gap: 12px; }
.readiness-score-row { display: flex; align-items: baseline; gap: 10px; font-size: 0.8125rem; line-height: 1.5; } .readiness-score-row { display: flex; align-items: baseline; gap: 10px; font-size: 0.8125rem; line-height: 1.5; }
.readiness-score-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .readiness-score-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
@@ -611,19 +647,33 @@
<!--/ Card Border Shadow --> <!--/ Card Border Shadow -->
<!-- Vehicles overview --> <!-- Vehicles overview -->
<div class="col-12"> <div class="col-12">
<div class="d-flex justify-content-between align-items-start gap-3"> <div class="card chart-group-header-toggle" role="button" tabindex="0"
<div><h5 class="mb-1">Profil Demografi</h5><p class="text-body-secondary mb-0">Komposisi petani berdasarkan gender, kelompok umur, dan pendidikan.</p></div> data-bs-toggle="collapse" data-bs-target="#demografi-charts"
<button type="button" class="btn btn-label-secondary btn-sm chart-group-toggle" data-bs-toggle="collapse" data-bs-target="#demografi-charts" aria-expanded="true" aria-controls="demografi-charts">Sembunyikan Chart</button> aria-expanded="true" aria-controls="demografi-charts" aria-label="Sembunyikan chart">
<div class="card-body d-flex justify-content-between align-items-center gap-3">
<div>
<h5>Profil Demografi</h5>
<p class="text-body-secondary mb-0">Komposisi petani berdasarkan gender, kelompok umur, dan pendidikan.</p>
</div>
<span class="btn btn-icon btn-label-secondary btn-sm chart-group-icon-toggle" aria-hidden="true">
<i class="icon-base ti tabler-chevron-up"></i>
</span>
</div>
</div> </div>
<div class="collapse show chart-group-panel" id="demografi-charts"> <div class="collapse show chart-group-panel" id="demografi-charts">
<div class="row g-6 pt-4"> <div class="row g-6 pt-4">
<div class="col-12 col-md-6 col-xl-4"> <div class="col-12 col-md-6 col-xl-4">
<div class="card h-100"> <div class="card h-100">
<div class="card-header d-flex align-items-center justify-content-between"> <div class="card-header d-flex align-items-start justify-content-between gap-2">
<div class="card-title mb-0"> <div class="card-title mb-0">
<h5 class="m-0 me-2">Gender</h5> <h5 class="m-0 me-2">Gender</h5>
<small class="text-body-secondary">Distribusi petani berdasarkan gender</small> <small class="text-body-secondary">Distribusi petani berdasarkan gender</small>
</div> </div>
<button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
title="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih." aria-label="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih.">
<i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
</button>
</div> </div>
<div class="card-body"> <div class="card-body">
<div id="genderChart"></div> <div id="genderChart"></div>
@@ -632,13 +682,18 @@
</div> </div>
<div class="col-12 col-md-6 col-xl-4"> <div class="col-12 col-md-6 col-xl-4">
<div class="card h-100"> <div class="card h-100">
<div class="card-header"> <div class="card-header d-flex align-items-start justify-content-between gap-2">
<div class="card-title mb-0"> <div class="card-title mb-0">
<h5 class="m-0 me-2">Kelompok Umur</h5> <h5 class="m-0 me-2">Kelompok Umur</h5>
<small class="text-body-secondary"> <small class="text-body-secondary">
Distribusi petani berdasarkan kelompok umur Distribusi petani berdasarkan kelompok umur
</small> </small>
</div> </div>
<button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
title="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih." aria-label="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih.">
<i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
</button>
</div> </div>
<div class="card-body"> <div class="card-body">
@@ -648,7 +703,7 @@
</div> </div>
<div class="col-12 col-md-6 col-xl-4"> <div class="col-12 col-md-6 col-xl-4">
<div class="card h-100"> <div class="card h-100">
<div class="card-header"> <div class="card-header d-flex align-items-start justify-content-between gap-2">
<div class="card-title mb-0"> <div class="card-title mb-0">
<h5 class="m-0 me-2">Tingkat Pendidikan</h5> <h5 class="m-0 me-2">Tingkat Pendidikan</h5>
@@ -656,6 +711,11 @@
Distribusi petani berdasarkan pendidikan terakhir Distribusi petani berdasarkan pendidikan terakhir
</small> </small>
</div> </div>
<button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
title="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih." aria-label="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih.">
<i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
</button>
</div> </div>
<div class="card-body"> <div class="card-body">
@@ -667,15 +727,24 @@
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="d-flex justify-content-between align-items-start gap-3"> <div class="card chart-group-header-toggle" role="button" tabindex="0"
<div><h5 class="mb-1">Sosial Ekonomi</h5><p class="text-body-secondary mb-0">Kondisi sosial ekonomi petani dilihat dari jumlah tanggungan keluarga, penghasilan usaha tani, dan keterlibatan dalam kelompok tani.</p></div> data-bs-toggle="collapse" data-bs-target="#rumah-tangga-charts"
<button type="button" class="btn btn-label-secondary btn-sm chart-group-toggle" data-bs-toggle="collapse" data-bs-target="#rumah-tangga-charts" aria-expanded="true" aria-controls="rumah-tangga-charts">Sembunyikan Chart</button> aria-expanded="true" aria-controls="rumah-tangga-charts" aria-label="Sembunyikan chart">
<div class="card-body d-flex justify-content-between align-items-center gap-3">
<div>
<h5>Sosial Ekonomi</h5>
<p class="text-body-secondary mb-0">Tanggungan keluarga, penghasilan usaha tani, dan keanggotaan kelompok tani.</p>
</div>
<span class="btn btn-icon btn-label-secondary btn-sm chart-group-icon-toggle" aria-hidden="true">
<i class="icon-base ti tabler-chevron-up"></i>
</span>
</div>
</div> </div>
<div class="collapse show chart-group-panel" id="rumah-tangga-charts"> <div class="collapse show chart-group-panel" id="rumah-tangga-charts">
<div class="row g-6 pt-4"> <div class="row g-6 pt-4">
<div class="col-12 col-md-6 col-xl-4"> <div class="col-12 col-md-6 col-xl-4">
<div class="card h-100"> <div class="card h-100">
<div class="card-header"> <div class="card-header d-flex align-items-start justify-content-between gap-2">
<div class="card-title mb-0"> <div class="card-title mb-0">
<h5 class="m-0 me-2">Jumlah Tanggungan</h5> <h5 class="m-0 me-2">Jumlah Tanggungan</h5>
@@ -683,6 +752,11 @@
Distribusi petani berdasarkan jumlah tanggungan Distribusi petani berdasarkan jumlah tanggungan
</small> </small>
</div> </div>
<button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
title="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih." aria-label="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih.">
<i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
</button>
</div> </div>
<div class="card-body"> <div class="card-body">
@@ -692,7 +766,7 @@
</div> </div>
<div class="col-12 col-md-6 col-xl-4"> <div class="col-12 col-md-6 col-xl-4">
<div class="card h-100"> <div class="card h-100">
<div class="card-header"> <div class="card-header d-flex align-items-start justify-content-between gap-2">
<div class="card-title mb-0"> <div class="card-title mb-0">
<h5 class="m-0 me-2"> <h5 class="m-0 me-2">
Rentang Penghasilan per Bulan Rentang Penghasilan per Bulan
@@ -702,6 +776,11 @@
Distribusi petani berdasarkan penghasilan dari usaha tani per musim Distribusi petani berdasarkan penghasilan dari usaha tani per musim
</small> </small>
</div> </div>
<button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
title="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih." aria-label="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih.">
<i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
</button>
</div> </div>
<div class="card-body"> <div class="card-body">
@@ -711,7 +790,7 @@
</div> </div>
<div class="col-12 col-md-6 col-xl-4"> <div class="col-12 col-md-6 col-xl-4">
<div class="card h-100"> <div class="card h-100">
<div class="card-header"> <div class="card-header d-flex align-items-start justify-content-between gap-2">
<div class="card-title mb-0"> <div class="card-title mb-0">
<h5 class="m-0 me-2">Status Keanggotaan Kelompok Tani</h5> <h5 class="m-0 me-2">Status Keanggotaan Kelompok Tani</h5>
@@ -719,6 +798,11 @@
Petani yang terdaftar di kelompok tani Petani yang terdaftar di kelompok tani
</small> </small>
</div> </div>
<button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
title="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih." aria-label="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih.">
<i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
</button>
</div> </div>
<div class="card-body"> <div class="card-body">
@@ -730,15 +814,24 @@
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="d-flex justify-content-between align-items-start gap-3"> <div class="card chart-group-header-toggle" role="button" tabindex="0"
<div><h5 class="mb-1">Profil Lahan</h5><p class="text-body-secondary mb-0">Karakteristik lahan usaha tani berdasarkan komoditas utama, luas lahan garapan, dan status kepemilikan lahan.</p></div> data-bs-toggle="collapse" data-bs-target="#usaha-tani-charts"
<button type="button" class="btn btn-label-secondary btn-sm chart-group-toggle" data-bs-toggle="collapse" data-bs-target="#usaha-tani-charts" aria-expanded="true" aria-controls="usaha-tani-charts">Sembunyikan Chart</button> aria-expanded="true" aria-controls="usaha-tani-charts" aria-label="Sembunyikan chart">
<div class="card-body d-flex justify-content-between align-items-center gap-3">
<div>
<h5>Profil Lahan</h5>
<p class="text-body-secondary mb-0">Karakteristik lahan usaha tani berdasarkan komoditas utama, luas lahan garapan, dan status kepemilikan lahan.</p>
</div>
<span class="btn btn-icon btn-label-secondary btn-sm chart-group-icon-toggle" aria-hidden="true">
<i class="icon-base ti tabler-chevron-up"></i>
</span>
</div>
</div> </div>
<div class="collapse show chart-group-panel" id="usaha-tani-charts"> <div class="collapse show chart-group-panel" id="usaha-tani-charts">
<div class="row g-6 pt-4"> <div class="row g-6 pt-4">
<div class="col-12 col-md-6 col-xl-4"> <div class="col-12 col-md-6 col-xl-4">
<div class="card h-100"> <div class="card h-100">
<div class="card-header d-flex align-items-center justify-content-between"> <div class="card-header d-flex align-items-start justify-content-between gap-2">
<div class="card-title mb-0"> <div class="card-title mb-0">
<h5 class="m-0 me-2"> <h5 class="m-0 me-2">
Komoditas Utama yang Dikelola Komoditas Utama yang Dikelola
@@ -748,6 +841,11 @@
Jumlah petani berdasarkan komoditas utama Jumlah petani berdasarkan komoditas utama
</small> </small>
</div> </div>
<button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
title="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih." aria-label="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih.">
<i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
</button>
</div> </div>
<div class="card-body"> <div class="card-body">
@@ -757,7 +855,7 @@
</div> </div>
<div class="col-12 col-md-6 col-xl-4"> <div class="col-12 col-md-6 col-xl-4">
<div class="card h-100"> <div class="card h-100">
<div class="card-header"> <div class="card-header d-flex align-items-start justify-content-between gap-2">
<div class="card-title mb-0"> <div class="card-title mb-0">
<h5 class="m-0 me-2"> <h5 class="m-0 me-2">
Luas Lahan yang Dimiliki Luas Lahan yang Dimiliki
@@ -767,6 +865,11 @@
Distribusi petani berdasarkan luas lahan garapan Distribusi petani berdasarkan luas lahan garapan
</small> </small>
</div> </div>
<button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
title="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih." aria-label="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih.">
<i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
</button>
</div> </div>
<div class="card-body"> <div class="card-body">
@@ -776,7 +879,7 @@
</div> </div>
<div class="col-12 col-md-6 col-xl-4"> <div class="col-12 col-md-6 col-xl-4">
<div class="card h-100"> <div class="card h-100">
<div class="card-header"> <div class="card-header d-flex align-items-start justify-content-between gap-2">
<div class="card-title mb-0"> <div class="card-title mb-0">
<h5 class="m-0 me-2"> <h5 class="m-0 me-2">
Status Kepemilikan Lahan Status Kepemilikan Lahan
@@ -786,6 +889,11 @@
Distribusi petani berdasarkan status lahan Distribusi petani berdasarkan status lahan
</small> </small>
</div> </div>
<button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
title="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih." aria-label="Klik bagian grafik untuk memfilter Daftar Petani di bawah sesuai kategori yang dipilih.">
<i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
</button>
</div> </div>
<div class="card-body"> <div class="card-body">
@@ -837,6 +945,7 @@
> >
</div> </div>
<button type="button" id="clearFarmerTableFilter" class="btn btn-label-secondary d-none text-nowrap"><i class="icon-base ti tabler-filter-off me-1" aria-hidden="true"></i>Bersihkan Filter</button>
<button type="button" class="btn btn-label-secondary btn-icon" data-bs-toggle="collapse" data-bs-target="#demografi-table-filter-panel" aria-expanded="false" aria-controls="demografi-table-filter-panel" aria-label="Filter tabel" title="Filter tabel"><i class="icon-base ti tabler-filter"></i></button> <button type="button" class="btn btn-label-secondary btn-icon" data-bs-toggle="collapse" data-bs-target="#demografi-table-filter-panel" aria-expanded="false" aria-controls="demografi-table-filter-panel" aria-label="Filter tabel" title="Filter tabel"><i class="icon-base ti tabler-filter"></i></button>
</div> </div>
@@ -857,7 +966,7 @@
@endforeach @endforeach
</div> </div>
<small class="text-body-secondary d-block mt-3">Filter tabel mengikuti filter dashboard yang telah diterapkan.</small> <small class="text-body-secondary d-block mt-3">Filter tabel mengikuti filter dashboard yang telah diterapkan.</small>
<div class="d-flex gap-2 mt-3"><button type="button" id="applyFarmerFilter" class="btn btn-primary btn-sm">Terapkan Filter</button><button type="button" id="resetFarmerFilter" class="btn btn-label-secondary btn-sm">Clear Filter</button></div> <div class="d-flex justify-content-end mt-3"><button type="button" id="applyFarmerFilter" class="btn btn-primary btn-sm">Terapkan Filter</button></div>
</div></div> </div></div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover"> <table class="table table-hover">
@@ -985,19 +1094,33 @@
</div> </div>
<div class="py-4"> <div class="py-4">
<div class="d-flex justify-content-between align-items-start gap-3"> <div class="card chart-group-header-toggle" role="button" tabindex="0"
<div><h5 class="mb-1">Indeks Petani</h5><p class="text-body-secondary mb-0">Komposisi petani menurut tingkat kesiapan adopsi, secara keseluruhan dan pada setiap komoditas.</p></div> data-bs-toggle="collapse" data-bs-target="#indeks-segmentasi-charts"
<button type="button" class="btn btn-label-secondary btn-sm chart-group-toggle" data-bs-toggle="collapse" data-bs-target="#indeks-segmentasi-charts" aria-expanded="true" aria-controls="indeks-segmentasi-charts">Sembunyikan Chart</button> aria-expanded="true" aria-controls="indeks-segmentasi-charts" aria-label="Sembunyikan chart">
<div class="card-body d-flex justify-content-between align-items-center gap-3">
<div>
<h5>Indeks Petani</h5>
<p class="text-body-secondary mb-0">Komposisi petani menurut tingkat kesiapan adopsi, secara keseluruhan dan pada setiap komoditas.</p>
</div>
<span class="btn btn-icon btn-label-secondary btn-sm chart-group-icon-toggle" aria-hidden="true">
<i class="icon-base ti tabler-chevron-up"></i>
</span>
</div>
</div> </div>
<div class="collapse show chart-group-panel" id="indeks-segmentasi-charts"> <div class="collapse show chart-group-panel" id="indeks-segmentasi-charts">
<div class="row g-6 py-4"> <div class="row g-6 py-4">
<div class="col-lg-6 col-sm-12"> <div class="col-lg-6 col-sm-12">
<div class="card card-border-shadow-primary h-100"> <div class="card card-border-shadow-primary h-100">
<div class="card-header d-flex justify-content-between align-items-center"> <div class="card-header d-flex justify-content-between align-items-start gap-2">
<div class="card-title mb-0"> <div class="card-title mb-0">
<h5 class="m-0 me-2">Distribusi Indeks Petani</h5> <h5 class="m-0 me-2">Distribusi Indeks Petani</h5>
<p class="card-subtitle">Jumlah dan proporsi petani pada setiap segmen kesiapan adopsi.</p> <p class="card-subtitle">Jumlah dan proporsi petani pada setiap segmen kesiapan adopsi.</p>
</div> </div>
<button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
title="Klik segmen pada grafik untuk memfilter Daftar Petani di bawah." aria-label="Klik segmen pada grafik untuk memfilter Daftar Petani di bawah.">
<i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
</button>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="segment-distribution"> <div class="segment-distribution">
@@ -1022,12 +1145,17 @@
</div> </div>
<div class="col-lg-6 col-sm-12"> <div class="col-lg-6 col-sm-12">
<div class="card card-border-shadow-secondary h-100"> <div class="card card-border-shadow-secondary h-100">
<div class="card-header d-flex justify-content-between align-items-center"> <div class="card-header d-flex justify-content-between align-items-start gap-2">
<div class="card-title mb-0"> <div class="card-title mb-0">
<h5 class="m-0 me-2">Distribusi Indeks Petani</h5> <h5 class="m-0 me-2">Distribusi Indeks Petani</h5>
<p class="card-subtitle">Perbandingan komposisi segmen kesiapan adopsi petani antar-komoditas.</p> <p class="card-subtitle">Perbandingan komposisi segmen kesiapan adopsi petani antar-komoditas.</p>
</div> </div>
<button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
title="Klik bagian batang untuk memfilter Daftar Petani di bawah berdasarkan komoditas dan segmen." aria-label="Klik bagian batang untuk memfilter Daftar Petani di bawah berdasarkan komoditas dan segmen.">
<i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
</button>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="segment-commodity-chart" id="chart-segmentasi-petani-komoditas"></div> <div class="segment-commodity-chart" id="chart-segmentasi-petani-komoditas"></div>
@@ -1039,9 +1167,18 @@
</div> </div>
</div> </div>
<div class="py-4"> <div class="py-4">
<div class="d-flex justify-content-between align-items-start gap-3"> <div class="card chart-group-header-toggle" role="button" tabindex="0"
<div><h5 class="mb-1">Dimensi dan Komponen Kesiapan Adopsi</h5><p class="text-body-secondary mb-0">Perbandingan skor tiap dimensi dan komponen untuk mengenali aspek kesiapan adopsi yang kuat dan yang perlu ditingkatkan.</p></div> data-bs-toggle="collapse" data-bs-target="#indeks-kesiapan-charts"
<button type="button" class="btn btn-label-secondary btn-sm chart-group-toggle" data-bs-toggle="collapse" data-bs-target="#indeks-kesiapan-charts" aria-expanded="true" aria-controls="indeks-kesiapan-charts">Sembunyikan Chart</button> aria-expanded="true" aria-controls="indeks-kesiapan-charts" aria-label="Sembunyikan chart">
<div class="card-body d-flex justify-content-between align-items-center gap-3">
<div>
<h5>Dimensi dan Komponen Kesiapan Adopsi</h5>
<p class="text-body-secondary mb-0">Perbandingan skor dimensi dan komponen kesiapan adopsi petani.</p>
</div>
<span class="btn btn-icon btn-label-secondary btn-sm chart-group-icon-toggle" aria-hidden="true">
<i class="icon-base ti tabler-chevron-up"></i>
</span>
</div>
</div> </div>
<div class="collapse show chart-group-panel" id="indeks-kesiapan-charts"> <div class="collapse show chart-group-panel" id="indeks-kesiapan-charts">
<div class="row g-6 py-4"> <div class="row g-6 py-4">
@@ -1080,19 +1217,33 @@
</div> </div>
</div> </div>
<div class="py-4"> <div class="py-4">
<div class="d-flex justify-content-between align-items-start gap-3"> <div class="card chart-group-header-toggle" role="button" tabindex="0"
<div><h5 class="mb-1">Sebaran wilayah petani</h5><p class="text-body-secondary mb-0">Perbandingan tingkat kesiapan adopsi antarwilayah melalui peta dan komposisi segmen petani di setiap desa/kelurahan.</p></div> data-bs-toggle="collapse" data-bs-target="#indeks-wilayah-charts"
<button type="button" class="btn btn-label-secondary btn-sm chart-group-toggle" data-bs-toggle="collapse" data-bs-target="#indeks-wilayah-charts" aria-expanded="true" aria-controls="indeks-wilayah-charts">Sembunyikan Chart</button> aria-expanded="true" aria-controls="indeks-wilayah-charts" aria-label="Sembunyikan chart">
<div class="card-body d-flex justify-content-between align-items-center gap-3">
<div>
<h5>Sebaran wilayah petani</h5>
<p class="text-body-secondary mb-0">Peta dan komposisi segmen kesiapan adopsi petani per desa/kelurahan.</p>
</div>
<span class="btn btn-icon btn-label-secondary btn-sm chart-group-icon-toggle" aria-hidden="true">
<i class="icon-base ti tabler-chevron-up"></i>
</span>
</div>
</div> </div>
<div class="collapse show chart-group-panel" id="indeks-wilayah-charts"> <div class="collapse show chart-group-panel" id="indeks-wilayah-charts">
<div class="row g-6 py-4"> <div class="row g-6 py-4">
<div class="col-lg-12 col-sm-12"> <div class="col-lg-12 col-sm-12">
<div class="card card-border-shadow-danger h-100"> <div class="card card-border-shadow-danger h-100">
<div class="card-header d-flex justify-content-between align-items-center"> <div class="card-header d-flex justify-content-between align-items-start gap-2">
<div class="card-title mb-0"> <div class="card-title mb-0">
<h5 class="m-0 me-2">Peta Sebaran</h5> <h5 class="m-0 me-2">Peta Sebaran</h5>
<p class="card-subtitle">Warna wilayah menunjukkan kategori rata-rata indeks kesiapan adopsi petani di setiap desa/kelurahan.</p> <p class="card-subtitle">Warna wilayah menunjukkan kategori rata-rata indeks kesiapan adopsi petani di setiap desa/kelurahan.</p>
</div> </div>
<button type="button" class="btn btn-icon btn-sm btn-label-secondary chart-filter-help flex-shrink-0"
data-bs-toggle="tooltip" data-bs-trigger="hover focus click" data-bs-placement="top"
title="Klik wilayah desa/kelurahan untuk melihat rincian dan memfilter Daftar Petani di bawah." aria-label="Klik wilayah desa/kelurahan untuk melihat rincian dan memfilter Daftar Petani di bawah.">
<i class="icon-base ti tabler-help-circle" aria-hidden="true"></i>
</button>
</div> </div>
<div class="card-body"> <div class="card-body">
<div id="farmer-map-shell" class="position-relative"> <div id="farmer-map-shell" class="position-relative">
@@ -1151,6 +1302,7 @@
<span class="input-group-text"><i class="icon-base ti tabler-search"></i></span> <span class="input-group-text"><i class="icon-base ti tabler-search"></i></span>
<input type="search" id="indexFarmerSearch" class="form-control" placeholder="Cari petani..." aria-label="Cari petani pada tabel indeks"> <input type="search" id="indexFarmerSearch" class="form-control" placeholder="Cari petani..." aria-label="Cari petani pada tabel indeks">
</div> </div>
<button type="button" id="btn-reset-filter" class="btn btn-label-secondary d-none text-nowrap"><i class="icon-base ti tabler-filter-off me-1" aria-hidden="true"></i>Bersihkan Filter</button>
<button type="button" class="btn btn-label-secondary btn-icon" data-bs-toggle="collapse" data-bs-target="#index-table-filter-panel" aria-expanded="false" aria-controls="index-table-filter-panel" aria-label="Filter tabel" title="Filter tabel"><i class="icon-base ti tabler-filter"></i></button> <button type="button" class="btn btn-label-secondary btn-icon" data-bs-toggle="collapse" data-bs-target="#index-table-filter-panel" aria-expanded="false" aria-controls="index-table-filter-panel" aria-label="Filter tabel" title="Filter tabel"><i class="icon-base ti tabler-filter"></i></button>
</div> </div>
</div> </div>
@@ -1170,7 +1322,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="d-flex gap-2 px-6 pb-4"><button type="button" id="applyIndexTableFilter" class="btn btn-primary btn-sm">Terapkan Filter</button><button type="button" id="btn-reset-filter" class="btn btn-label-secondary btn-sm">Clear Filter</button></div></div> <div class="d-flex justify-content-end mt-3"><button type="button" id="applyIndexTableFilter" class="btn btn-primary btn-sm">Terapkan Filter</button></div></div>
<div class="card-body"> <div class="card-body">
<table id="table-petani" class="table table-hover"> <table id="table-petani" class="table table-hover">
<thead> <thead>
@@ -1230,6 +1382,10 @@ document.addEventListener('DOMContentLoaded', function () {
penghasilan: null penghasilan: null
}; };
const farmerSearchInput = document.querySelector('#farmerSearch');
const farmerFilterSelects = document.querySelectorAll('.farmer-table-filter');
const farmerClearButton = document.querySelector('#clearFarmerTableFilter');
let searchTimer = null; let searchTimer = null;
let farmerTableRequest = null; let farmerTableRequest = null;
@@ -1253,11 +1409,18 @@ document.addEventListener('DOMContentLoaded', function () {
return number.toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' ha'; return number.toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' ha';
} }
function updateFarmerClearFilter() {
const hasFilters = Object.values(activeFilters).some((value) => value !== null && value !== undefined && value !== '');
const hasSearch = Boolean(farmerSearchInput?.value.trim());
farmerClearButton.classList.toggle('d-none', !hasFilters && !hasSearch);
}
async function loadFarmerTable(page = 1) { async function loadFarmerTable(page = 1) {
updateFarmerClearFilter();
farmerTableRequest?.abort(); farmerTableRequest?.abort();
const request = new AbortController(); const request = new AbortController();
farmerTableRequest = request; farmerTableRequest = request;
const searchInput = document.querySelector('#farmerSearch'); const searchInput = farmerSearchInput;
const search = searchInput ? searchInput.value.trim() : ''; const search = searchInput ? searchInput.value.trim() : '';
const params = new URLSearchParams(); const params = new URLSearchParams();
@@ -1456,38 +1619,29 @@ document.addEventListener('DOMContentLoaded', function () {
activeFilters[filter] = value; activeFilters[filter] = value;
} }
document.querySelectorAll('.farmer-table-filter').forEach((select) => { farmerFilterSelects.forEach((select) => {
select.value = activeFilters[select.dataset.filter] ?? ''; select.value = activeFilters[select.dataset.filter] ?? '';
}); });
loadFarmerTable(1); loadFarmerTable(1);
} }
function resetFarmerFilter() { function resetFarmerFilter() {
activeFilters = { clearTimeout(searchTimer);
gender: null, Object.keys(activeFilters).forEach((key) => { activeFilters[key] = null; });
umur: null,
pendidikan: null,
jumlah_tanggungan: null,
kelompok_tani: null,
komoditas: null,
luas_lahan: null,
status_kepemilikan_lahan: null,
penghasilan: null
};
const searchInput = document.querySelector('#farmerSearch'); const searchInput = farmerSearchInput;
if (searchInput) { if (searchInput) {
searchInput.value = ''; searchInput.value = '';
} }
document.querySelectorAll('.farmer-table-filter').forEach((select) => { farmerFilterSelects.forEach((select) => {
select.value = activeFilters[select.dataset.filter] ?? ''; select.value = activeFilters[select.dataset.filter] ?? '';
}); });
loadFarmerTable(1); loadFarmerTable(1);
} }
document.querySelector('#applyFarmerFilter').addEventListener('click', function () { document.querySelector('#applyFarmerFilter').addEventListener('click', function () {
document.querySelectorAll('.farmer-table-filter').forEach((select) => { farmerFilterSelects.forEach((select) => {
activeFilters[select.dataset.filter] = select.value || null; activeFilters[select.dataset.filter] = select.value || null;
}); });
loadFarmerTable(1); loadFarmerTable(1);
@@ -1497,6 +1651,7 @@ document.addEventListener('DOMContentLoaded', function () {
if (event.target.id !== 'farmerSearch') { if (event.target.id !== 'farmerSearch') {
return; return;
} }
updateFarmerClearFilter();
clearTimeout(searchTimer); clearTimeout(searchTimer);
searchTimer = setTimeout(function () { searchTimer = setTimeout(function () {
loadFarmerTable(1); loadFarmerTable(1);
@@ -1519,7 +1674,7 @@ document.addEventListener('DOMContentLoaded', function () {
}); });
document.addEventListener('click', function (event) { document.addEventListener('click', function (event) {
const button = event.target.closest('#resetFarmerFilter'); const button = event.target.closest('#clearFarmerTableFilter');
if (!button) { if (!button) {
return; return;
} }
@@ -1660,12 +1815,12 @@ document.addEventListener('DOMContentLoaded', function () {
data: ageGroupData data: ageGroupData
} }
], ],
colors: [config.colors.primary], colors: ['#c7c2f9', '#9d94f4', '#7367f0', '#5048a8', '#2e2960'],
plotOptions: { plotOptions: {
bar: { bar: {
borderRadius: 4, borderRadius: 4,
columnWidth: '45%', columnWidth: '45%',
distributed: false, distributed: true,
dataLabels: { position: 'top' } dataLabels: { position: 'top' }
} }
}, },
@@ -1720,7 +1875,7 @@ document.addEventListener('DOMContentLoaded', function () {
const label = w.globals.labels[dataPointIndex]; const label = w.globals.labels[dataPointIndex];
const percentage = totalAgeGroup > 0 ? (Number(value) / totalAgeGroup) * 100 : 0; const percentage = totalAgeGroup > 0 ? (Number(value) / totalAgeGroup) * 100 : 0;
return ` return `
<div style="background:${config.colors.primary}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);"> <div style="background:${w.config.colors[dataPointIndex % w.config.colors.length]}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
${label} tahun: <strong>${value} petani (${percentage.toFixed(1)}%)</strong> ${label} tahun: <strong>${value} petani (${percentage.toFixed(1)}%)</strong>
</div> </div>
`; `;
@@ -1763,9 +1918,10 @@ document.addEventListener('DOMContentLoaded', function () {
} }
}, },
series: [{ name: 'Petani', data: educationData }], series: [{ name: 'Petani', data: educationData }],
colors: [config.colors.success], colors: ['#e9f9f0', '#a9e8c5', '#68d79a', '#28c76f', '#1c8b4d', '#104f2c'],
plotOptions: { plotOptions: {
bar: { bar: {
distributed: true,
horizontal: true, horizontal: true,
borderRadius: 4, borderRadius: 4,
barHeight: '55%', barHeight: '55%',
@@ -1819,7 +1975,7 @@ document.addEventListener('DOMContentLoaded', function () {
const label = w.globals.labels[dataPointIndex]; const label = w.globals.labels[dataPointIndex];
const percentage = totalPendidikan > 0 ? ((value / totalPendidikan) * 100).toFixed(1) : '0.0'; const percentage = totalPendidikan > 0 ? ((value / totalPendidikan) * 100).toFixed(1) : '0.0';
return ` return `
<div style="background:${config.colors.success}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);"> <div style="background:${w.config.colors[dataPointIndex % w.config.colors.length]}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
${label}: <strong>${value} petani (${percentage}%)</strong> ${label}: <strong>${value} petani (${percentage}%)</strong>
</div> </div>
`; `;
@@ -1861,9 +2017,10 @@ document.addEventListener('DOMContentLoaded', function () {
} }
}, },
series: [{ name: 'Petani', data: dependentData }], series: [{ name: 'Petani', data: dependentData }],
colors: [config.colors.danger], colors: ['#ffb7b9', '#ff4c51', '#b23538', '#661e20'],
plotOptions: { plotOptions: {
bar: { bar: {
distributed: true,
horizontal: true, horizontal: true,
borderRadius: 4, borderRadius: 4,
barHeight: '50%', barHeight: '50%',
@@ -1917,7 +2074,7 @@ document.addEventListener('DOMContentLoaded', function () {
const label = w.globals.labels[dataPointIndex]; const label = w.globals.labels[dataPointIndex];
const percentage = totalDependentsFarmers > 0 ? ((value / totalDependentsFarmers) * 100).toFixed(1) : '0.0'; const percentage = totalDependentsFarmers > 0 ? ((value / totalDependentsFarmers) * 100).toFixed(1) : '0.0';
return ` return `
<div style="background:${config.colors.danger}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);"> <div style="background:${w.config.colors[dataPointIndex % w.config.colors.length]}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
${label}: <strong>${value} petani (${percentage}%)</strong> ${label}: <strong>${value} petani (${percentage}%)</strong>
</div> </div>
`; `;
@@ -2178,9 +2335,10 @@ document.addEventListener('DOMContentLoaded', function () {
} }
}, },
series: [{ name: 'Petani', data: landAreaData }], series: [{ name: 'Petani', data: landAreaData }],
colors: [config.colors.warning], colors: ['#ffbb7b', '#ff9f43', '#b26f2e', '#663f1a'],
plotOptions: { plotOptions: {
bar: { bar: {
distributed: true,
horizontal: true, horizontal: true,
borderRadius: 4, borderRadius: 4,
barHeight: '50%', barHeight: '50%',
@@ -2234,7 +2392,7 @@ document.addEventListener('DOMContentLoaded', function () {
const label = w.globals.labels[dataPointIndex]; const label = w.globals.labels[dataPointIndex];
const percentage = totalLandFarmers > 0 ? ((value / totalLandFarmers) * 100).toFixed(1) : '0.0'; const percentage = totalLandFarmers > 0 ? ((value / totalLandFarmers) * 100).toFixed(1) : '0.0';
return ` return `
<div style="background:${config.colors.warning}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);"> <div style="background:${w.config.colors[dataPointIndex % w.config.colors.length]}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
${label}: <strong>${value} petani (${percentage}%)</strong> ${label}: <strong>${value} petani (${percentage}%)</strong>
</div> </div>
`; `;
@@ -2380,9 +2538,10 @@ document.addEventListener('DOMContentLoaded', function () {
} }
}, },
series: [{ name: 'Petani', data: incomeData }], series: [{ name: 'Petani', data: incomeData }],
colors: [config.colors.info], colors: ['#99e3ec', '#4ccede', '#00bad1', '#008292', '#004a53'],
plotOptions: { plotOptions: {
bar: { bar: {
distributed: true,
horizontal: true, horizontal: true,
borderRadius: 4, borderRadius: 4,
barHeight: '50%', barHeight: '50%',
@@ -2436,7 +2595,7 @@ document.addEventListener('DOMContentLoaded', function () {
const label = w.globals.labels[dataPointIndex]; const label = w.globals.labels[dataPointIndex];
const percentage = totalIncomeFarmers > 0 ? ((value / totalIncomeFarmers) * 100).toFixed(1) : '0.0'; const percentage = totalIncomeFarmers > 0 ? ((value / totalIncomeFarmers) * 100).toFixed(1) : '0.0';
return ` return `
<div style="background:${config.colors.info}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);"> <div style="background:${w.config.colors[dataPointIndex % w.config.colors.length]}; color:#fff; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
${label}: <strong>${value} petani (${percentage}%)</strong> ${label}: <strong>${value} petani (${percentage}%)</strong>
</div> </div>
`; `;
@@ -2629,9 +2788,6 @@ document.addEventListener('DOMContentLoaded', function () {
"scrollX": true "scrollX": true
}); });
let selectedDesa = null;
let selectedKomoditas = null;
let selectedSegmen = null;
@@ -2708,10 +2864,9 @@ document.addEventListener('DOMContentLoaded', function () {
config.dataPointIndex config.dataPointIndex
]; ];
console.log('Segmen dipilih:', segmen);
// Set filter segmen
selectedSegmen = segmen; window.applyIndexFarmerFilter?.(5, segmen);
} }
} }
}, },
@@ -2834,9 +2989,9 @@ document.addEventListener('DOMContentLoaded', function () {
const komoditas = const komoditas =
config.w.config.xaxis.categories[config.dataPointIndex]; config.w.config.xaxis.categories[config.dataPointIndex];
console.log('Komoditas dipilih:', komoditas);
selectedKomoditas = komoditas; const segmen = chartContext.w.config.series[config.seriesIndex]?.name;
window.applyIndexFarmerFilter?.(2, komoditas, segmen);
} }
} }
}, },
@@ -3131,7 +3286,6 @@ document.addEventListener('DOMContentLoaded', function () {
@endforeach @endforeach
}; };
let selectedDesa = null;
const group = L.featureGroup().addTo(map); const group = L.featureGroup().addTo(map);
@@ -3209,6 +3363,9 @@ document.addEventListener('DOMContentLoaded', function () {
(${desa.segmentasi?.jumlah_dominan ?? 0} petani) (${desa.segmentasi?.jumlah_dominan ?? 0} petani)
`); `);
polygon.on('click', function () {
window.applyIndexFarmerFilter?.(1, desa.desa_kelurahan);
});
polygon.addTo(group); polygon.addTo(group);
}); });
@@ -3299,7 +3456,10 @@ document.addEventListener('DOMContentLoaded', function () {
} }
}, },
drawCallback: function () { drawCallback: function () {
const info = this.api().page.info(); const api = this.api();
const hasFilter = Boolean(api.search()) || api.columns().search().toArray().some(Boolean);
$('#btn-reset-filter').toggleClass('d-none', !hasFilter);
const info = api.page.info();
$('#indexFarmerTotalBadge').text(info.recordsDisplay + ' petani'); $('#indexFarmerTotalBadge').text(info.recordsDisplay + ' petani');
}, },
"paging": true, "paging": true,
@@ -3399,6 +3559,20 @@ document.addEventListener('DOMContentLoaded', function () {
} }
}); });
window.applyIndexFarmerFilter = function (column, value, segmen) {
if (value === null || value === undefined) return;
const escaped = $.fn.dataTable.util.escapeRegex(String(value));
const search = '^' + escaped + '$';
const nextValue = tablePetani.column(column).search() === search ? '' : String(value);
tablePetani.column(column).search(nextValue ? search : '', true, false);
$('.index-table-filter[data-column="' + column + '"]').val(nextValue);
if (segmen !== undefined) {
tablePetani.column(5).search('^' + $.fn.dataTable.util.escapeRegex(segmen) + '$', true, false);
$('#index-table-segmen').val(segmen);
}
tablePetani.draw();
};
$('#indexFarmerSearch').on('input', function () { tablePetani.search(this.value).draw(); }); $('#indexFarmerSearch').on('input', function () { tablePetani.search(this.value).draw(); });
tablePetani.on('xhr.dt', function (event, settings, rows) { tablePetani.on('xhr.dt', function (event, settings, rows) {
if (!Array.isArray(rows)) return; if (!Array.isArray(rows)) return;
@@ -3422,9 +3596,9 @@ document.addEventListener('DOMContentLoaded', function () {
$('#btn-reset-filter').on('click', function () { $('#btn-reset-filter').on('click', function () {
$('.index-table-filter').val(''); $('.index-table-filter').val('');
$('#indexFarmerSearch').val(''); $('#indexFarmerSearch').val('');
selectedDesa = null;
selectedKomoditas = null;
selectedSegmen = null;
tablePetani.search('').columns().search('').draw(); tablePetani.search('').columns().search('').draw();
}); });
@@ -3464,16 +3638,33 @@ document.addEventListener('DOMContentLoaded', function () {
}); });
</script> </script>
<script> <script>
document.querySelectorAll('.chart-group-panel').forEach((panel) => { document.querySelectorAll('.chart-group-header-toggle').forEach((header) => {
const button = document.querySelector('[aria-controls="' + panel.id + '"]'); header.addEventListener('keydown', function (event) {
panel.addEventListener('hidden.bs.collapse', function (event) { if (event.target !== header || !['Enter', ' '].includes(event.key)) return;
if (event.target !== panel) return; event.preventDefault();
button.textContent = 'Tampilkan Chart'; header.click();
}); });
panel.addEventListener('shown.bs.collapse', function (event) { });
document.querySelectorAll('.chart-group-panel').forEach((panel) => {
const control = document.querySelector('.chart-group-header-toggle[aria-controls="' + panel.id + '"]');
if (!control) return;
const icon = control.querySelector('.chart-group-icon-toggle i');
const syncState = () => {
const expanded = panel.classList.contains('show');
const label = expanded ? 'Sembunyikan chart' : 'Tampilkan chart';
control.setAttribute('aria-expanded', String(expanded));
control.setAttribute('aria-label', label);
control.title = label;
icon.classList.toggle('tabler-chevron-up', expanded);
icon.classList.toggle('tabler-chevron-down', !expanded);
};
syncState();
['hidden.bs.collapse', 'shown.bs.collapse'].forEach((eventName) => {
panel.addEventListener(eventName, (event) => {
if (event.target !== panel) return; if (event.target !== panel) return;
button.textContent = 'Sembunyikan Chart'; syncState();
window.dispatchEvent(new Event('resize')); if (eventName === 'shown.bs.collapse') window.dispatchEvent(new Event('resize'));
});
}); });
}); });
</script> </script>
routes/web.php
+1 -1
View File
@@ -21,7 +21,7 @@ Route::get('/', function() {
return redirect()->route('dashboard.survey-petani'); return redirect()->route('dashboard.survey-petani');
} }
return redirect()->route('dashboard.produktivitas'); return redirect()->route('dashboard.karakteristik-petani');
})->name('home'); })->name('home');
Route::middleware('auth') Route::middleware('auth')