Update Karakteristik Petani
This commit is contained in:
@@ -3,6 +3,42 @@
|
||||
@push('style')
|
||||
<link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}" />
|
||||
<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-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; }
|
||||
@@ -611,19 +647,33 @@
|
||||
<!--/ Card Border Shadow -->
|
||||
<!-- Vehicles overview -->
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-start gap-3">
|
||||
<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>
|
||||
<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>
|
||||
<div class="card chart-group-header-toggle" role="button" tabindex="0"
|
||||
data-bs-toggle="collapse" data-bs-target="#demografi-charts"
|
||||
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 class="collapse show chart-group-panel" id="demografi-charts">
|
||||
<div class="row g-6 pt-4">
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<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">
|
||||
<h5 class="m-0 me-2">Gender</h5>
|
||||
<small class="text-body-secondary">Distribusi petani berdasarkan gender</small>
|
||||
</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 class="card-body">
|
||||
<div id="genderChart"></div>
|
||||
@@ -632,13 +682,18 @@
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<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">
|
||||
<h5 class="m-0 me-2">Kelompok Umur</h5>
|
||||
<small class="text-body-secondary">
|
||||
Distribusi petani berdasarkan kelompok umur
|
||||
</small>
|
||||
</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 class="card-body">
|
||||
@@ -648,7 +703,7 @@
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<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">
|
||||
<h5 class="m-0 me-2">Tingkat Pendidikan</h5>
|
||||
|
||||
@@ -656,6 +711,11 @@
|
||||
Distribusi petani berdasarkan pendidikan terakhir
|
||||
</small>
|
||||
</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 class="card-body">
|
||||
@@ -667,15 +727,24 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-start gap-3">
|
||||
<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>
|
||||
<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>
|
||||
<div class="card chart-group-header-toggle" role="button" tabindex="0"
|
||||
data-bs-toggle="collapse" data-bs-target="#rumah-tangga-charts"
|
||||
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 class="collapse show chart-group-panel" id="rumah-tangga-charts">
|
||||
<div class="row g-6 pt-4">
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<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">
|
||||
<h5 class="m-0 me-2">Jumlah Tanggungan</h5>
|
||||
|
||||
@@ -683,6 +752,11 @@
|
||||
Distribusi petani berdasarkan jumlah tanggungan
|
||||
</small>
|
||||
</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 class="card-body">
|
||||
@@ -692,7 +766,7 @@
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<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">
|
||||
<h5 class="m-0 me-2">
|
||||
Rentang Penghasilan per Bulan
|
||||
@@ -702,6 +776,11 @@
|
||||
Distribusi petani berdasarkan penghasilan dari usaha tani per musim
|
||||
</small>
|
||||
</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 class="card-body">
|
||||
@@ -711,7 +790,7 @@
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<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">
|
||||
<h5 class="m-0 me-2">Status Keanggotaan Kelompok Tani</h5>
|
||||
|
||||
@@ -719,6 +798,11 @@
|
||||
Petani yang terdaftar di kelompok tani
|
||||
</small>
|
||||
</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 class="card-body">
|
||||
@@ -730,15 +814,24 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-start gap-3">
|
||||
<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>
|
||||
<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>
|
||||
<div class="card chart-group-header-toggle" role="button" tabindex="0"
|
||||
data-bs-toggle="collapse" data-bs-target="#usaha-tani-charts"
|
||||
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 class="collapse show chart-group-panel" id="usaha-tani-charts">
|
||||
<div class="row g-6 pt-4">
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<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">
|
||||
<h5 class="m-0 me-2">
|
||||
Komoditas Utama yang Dikelola
|
||||
@@ -748,6 +841,11 @@
|
||||
Jumlah petani berdasarkan komoditas utama
|
||||
</small>
|
||||
</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 class="card-body">
|
||||
@@ -757,7 +855,7 @@
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<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">
|
||||
<h5 class="m-0 me-2">
|
||||
Luas Lahan yang Dimiliki
|
||||
@@ -767,6 +865,11 @@
|
||||
Distribusi petani berdasarkan luas lahan garapan
|
||||
</small>
|
||||
</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 class="card-body">
|
||||
@@ -776,7 +879,7 @@
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<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">
|
||||
<h5 class="m-0 me-2">
|
||||
Status Kepemilikan Lahan
|
||||
@@ -786,6 +889,11 @@
|
||||
Distribusi petani berdasarkan status lahan
|
||||
</small>
|
||||
</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 class="card-body">
|
||||
@@ -837,6 +945,7 @@
|
||||
>
|
||||
</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>
|
||||
|
||||
</div>
|
||||
@@ -857,7 +966,7 @@
|
||||
@endforeach
|
||||
</div>
|
||||
<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 class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
@@ -985,19 +1094,33 @@
|
||||
</div>
|
||||
|
||||
<div class="py-4">
|
||||
<div class="d-flex justify-content-between align-items-start gap-3">
|
||||
<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>
|
||||
<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>
|
||||
<div class="card chart-group-header-toggle" role="button" tabindex="0"
|
||||
data-bs-toggle="collapse" data-bs-target="#indeks-segmentasi-charts"
|
||||
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 class="collapse show chart-group-panel" id="indeks-segmentasi-charts">
|
||||
<div class="row g-6 py-4">
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<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">
|
||||
<h5 class="m-0 me-2">Distribusi Indeks Petani</h5>
|
||||
<p class="card-subtitle">Jumlah dan proporsi petani pada setiap segmen kesiapan adopsi.</p>
|
||||
</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 class="card-body">
|
||||
<div class="segment-distribution">
|
||||
@@ -1022,12 +1145,17 @@
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<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">
|
||||
<h5 class="m-0 me-2">Distribusi Indeks Petani</h5>
|
||||
<p class="card-subtitle">Perbandingan komposisi segmen kesiapan adopsi petani antar-komoditas.</p>
|
||||
|
||||
</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 class="card-body">
|
||||
<div class="segment-commodity-chart" id="chart-segmentasi-petani-komoditas"></div>
|
||||
@@ -1039,9 +1167,18 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-4">
|
||||
<div class="d-flex justify-content-between align-items-start gap-3">
|
||||
<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>
|
||||
<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>
|
||||
<div class="card chart-group-header-toggle" role="button" tabindex="0"
|
||||
data-bs-toggle="collapse" data-bs-target="#indeks-kesiapan-charts"
|
||||
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 class="collapse show chart-group-panel" id="indeks-kesiapan-charts">
|
||||
<div class="row g-6 py-4">
|
||||
@@ -1080,19 +1217,33 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-4">
|
||||
<div class="d-flex justify-content-between align-items-start gap-3">
|
||||
<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>
|
||||
<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>
|
||||
<div class="card chart-group-header-toggle" role="button" tabindex="0"
|
||||
data-bs-toggle="collapse" data-bs-target="#indeks-wilayah-charts"
|
||||
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 class="collapse show chart-group-panel" id="indeks-wilayah-charts">
|
||||
<div class="row g-6 py-4">
|
||||
<div class="col-lg-12 col-sm-12">
|
||||
<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">
|
||||
<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>
|
||||
</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 class="card-body">
|
||||
<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>
|
||||
<input type="search" id="indexFarmerSearch" class="form-control" placeholder="Cari petani..." aria-label="Cari petani pada tabel indeks">
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1170,7 +1322,7 @@
|
||||
</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">
|
||||
<table id="table-petani" class="table table-hover">
|
||||
<thead>
|
||||
@@ -1230,6 +1382,10 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
penghasilan: null
|
||||
};
|
||||
|
||||
const farmerSearchInput = document.querySelector('#farmerSearch');
|
||||
const farmerFilterSelects = document.querySelectorAll('.farmer-table-filter');
|
||||
const farmerClearButton = document.querySelector('#clearFarmerTableFilter');
|
||||
|
||||
let searchTimer = null;
|
||||
let farmerTableRequest = null;
|
||||
|
||||
@@ -1253,11 +1409,18 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
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) {
|
||||
updateFarmerClearFilter();
|
||||
farmerTableRequest?.abort();
|
||||
const request = new AbortController();
|
||||
farmerTableRequest = request;
|
||||
const searchInput = document.querySelector('#farmerSearch');
|
||||
const searchInput = farmerSearchInput;
|
||||
const search = searchInput ? searchInput.value.trim() : '';
|
||||
const params = new URLSearchParams();
|
||||
|
||||
@@ -1456,38 +1619,29 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
activeFilters[filter] = value;
|
||||
}
|
||||
|
||||
document.querySelectorAll('.farmer-table-filter').forEach((select) => {
|
||||
farmerFilterSelects.forEach((select) => {
|
||||
select.value = activeFilters[select.dataset.filter] ?? '';
|
||||
});
|
||||
loadFarmerTable(1);
|
||||
}
|
||||
|
||||
function resetFarmerFilter() {
|
||||
activeFilters = {
|
||||
gender: null,
|
||||
umur: null,
|
||||
pendidikan: null,
|
||||
jumlah_tanggungan: null,
|
||||
kelompok_tani: null,
|
||||
komoditas: null,
|
||||
luas_lahan: null,
|
||||
status_kepemilikan_lahan: null,
|
||||
penghasilan: null
|
||||
};
|
||||
clearTimeout(searchTimer);
|
||||
Object.keys(activeFilters).forEach((key) => { activeFilters[key] = null; });
|
||||
|
||||
const searchInput = document.querySelector('#farmerSearch');
|
||||
const searchInput = farmerSearchInput;
|
||||
if (searchInput) {
|
||||
searchInput.value = '';
|
||||
}
|
||||
|
||||
document.querySelectorAll('.farmer-table-filter').forEach((select) => {
|
||||
farmerFilterSelects.forEach((select) => {
|
||||
select.value = activeFilters[select.dataset.filter] ?? '';
|
||||
});
|
||||
loadFarmerTable(1);
|
||||
}
|
||||
|
||||
document.querySelector('#applyFarmerFilter').addEventListener('click', function () {
|
||||
document.querySelectorAll('.farmer-table-filter').forEach((select) => {
|
||||
farmerFilterSelects.forEach((select) => {
|
||||
activeFilters[select.dataset.filter] = select.value || null;
|
||||
});
|
||||
loadFarmerTable(1);
|
||||
@@ -1497,6 +1651,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
if (event.target.id !== 'farmerSearch') {
|
||||
return;
|
||||
}
|
||||
updateFarmerClearFilter();
|
||||
clearTimeout(searchTimer);
|
||||
searchTimer = setTimeout(function () {
|
||||
loadFarmerTable(1);
|
||||
@@ -1519,7 +1674,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
const button = event.target.closest('#resetFarmerFilter');
|
||||
const button = event.target.closest('#clearFarmerTableFilter');
|
||||
if (!button) {
|
||||
return;
|
||||
}
|
||||
@@ -1660,12 +1815,12 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
data: ageGroupData
|
||||
}
|
||||
],
|
||||
colors: [config.colors.primary],
|
||||
colors: ['#c7c2f9', '#9d94f4', '#7367f0', '#5048a8', '#2e2960'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 4,
|
||||
columnWidth: '45%',
|
||||
distributed: false,
|
||||
distributed: true,
|
||||
dataLabels: { position: 'top' }
|
||||
}
|
||||
},
|
||||
@@ -1720,7 +1875,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
const label = w.globals.labels[dataPointIndex];
|
||||
const percentage = totalAgeGroup > 0 ? (Number(value) / totalAgeGroup) * 100 : 0;
|
||||
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>
|
||||
</div>
|
||||
`;
|
||||
@@ -1763,9 +1918,10 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
}
|
||||
},
|
||||
series: [{ name: 'Petani', data: educationData }],
|
||||
colors: [config.colors.success],
|
||||
colors: ['#e9f9f0', '#a9e8c5', '#68d79a', '#28c76f', '#1c8b4d', '#104f2c'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
distributed: true,
|
||||
horizontal: true,
|
||||
borderRadius: 4,
|
||||
barHeight: '55%',
|
||||
@@ -1819,7 +1975,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
const label = w.globals.labels[dataPointIndex];
|
||||
const percentage = totalPendidikan > 0 ? ((value / totalPendidikan) * 100).toFixed(1) : '0.0';
|
||||
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>
|
||||
</div>
|
||||
`;
|
||||
@@ -1861,9 +2017,10 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
}
|
||||
},
|
||||
series: [{ name: 'Petani', data: dependentData }],
|
||||
colors: [config.colors.danger],
|
||||
colors: ['#ffb7b9', '#ff4c51', '#b23538', '#661e20'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
distributed: true,
|
||||
horizontal: true,
|
||||
borderRadius: 4,
|
||||
barHeight: '50%',
|
||||
@@ -1917,7 +2074,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
const label = w.globals.labels[dataPointIndex];
|
||||
const percentage = totalDependentsFarmers > 0 ? ((value / totalDependentsFarmers) * 100).toFixed(1) : '0.0';
|
||||
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>
|
||||
</div>
|
||||
`;
|
||||
@@ -2178,9 +2335,10 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
}
|
||||
},
|
||||
series: [{ name: 'Petani', data: landAreaData }],
|
||||
colors: [config.colors.warning],
|
||||
colors: ['#ffbb7b', '#ff9f43', '#b26f2e', '#663f1a'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
distributed: true,
|
||||
horizontal: true,
|
||||
borderRadius: 4,
|
||||
barHeight: '50%',
|
||||
@@ -2234,7 +2392,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
const label = w.globals.labels[dataPointIndex];
|
||||
const percentage = totalLandFarmers > 0 ? ((value / totalLandFarmers) * 100).toFixed(1) : '0.0';
|
||||
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>
|
||||
</div>
|
||||
`;
|
||||
@@ -2380,9 +2538,10 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
}
|
||||
},
|
||||
series: [{ name: 'Petani', data: incomeData }],
|
||||
colors: [config.colors.info],
|
||||
colors: ['#99e3ec', '#4ccede', '#00bad1', '#008292', '#004a53'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
distributed: true,
|
||||
horizontal: true,
|
||||
borderRadius: 4,
|
||||
barHeight: '50%',
|
||||
@@ -2436,7 +2595,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
const label = w.globals.labels[dataPointIndex];
|
||||
const percentage = totalIncomeFarmers > 0 ? ((value / totalIncomeFarmers) * 100).toFixed(1) : '0.0';
|
||||
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>
|
||||
</div>
|
||||
`;
|
||||
@@ -2629,9 +2788,6 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
"scrollX": true
|
||||
});
|
||||
|
||||
let selectedDesa = null;
|
||||
let selectedKomoditas = null;
|
||||
let selectedSegmen = null;
|
||||
|
||||
|
||||
|
||||
@@ -2708,10 +2864,9 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
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 =
|
||||
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
|
||||
};
|
||||
|
||||
let selectedDesa = null;
|
||||
|
||||
const group = L.featureGroup().addTo(map);
|
||||
|
||||
@@ -3209,6 +3363,9 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
(${desa.segmentasi?.jumlah_dominan ?? 0} petani)
|
||||
`);
|
||||
|
||||
polygon.on('click', function () {
|
||||
window.applyIndexFarmerFilter?.(1, desa.desa_kelurahan);
|
||||
});
|
||||
polygon.addTo(group);
|
||||
});
|
||||
|
||||
@@ -3299,7 +3456,10 @@ document.addEventListener('DOMContentLoaded', 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');
|
||||
},
|
||||
"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(); });
|
||||
tablePetani.on('xhr.dt', function (event, settings, rows) {
|
||||
if (!Array.isArray(rows)) return;
|
||||
@@ -3422,9 +3596,9 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
$('#btn-reset-filter').on('click', function () {
|
||||
$('.index-table-filter').val('');
|
||||
$('#indexFarmerSearch').val('');
|
||||
selectedDesa = null;
|
||||
selectedKomoditas = null;
|
||||
selectedSegmen = null;
|
||||
|
||||
|
||||
|
||||
tablePetani.search('').columns().search('').draw();
|
||||
});
|
||||
|
||||
@@ -3464,16 +3638,33 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
document.querySelectorAll('.chart-group-panel').forEach((panel) => {
|
||||
const button = document.querySelector('[aria-controls="' + panel.id + '"]');
|
||||
panel.addEventListener('hidden.bs.collapse', function (event) {
|
||||
if (event.target !== panel) return;
|
||||
button.textContent = 'Tampilkan Chart';
|
||||
document.querySelectorAll('.chart-group-header-toggle').forEach((header) => {
|
||||
header.addEventListener('keydown', function (event) {
|
||||
if (event.target !== header || !['Enter', ' '].includes(event.key)) return;
|
||||
event.preventDefault();
|
||||
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;
|
||||
button.textContent = 'Sembunyikan Chart';
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
syncState();
|
||||
if (eventName === 'shown.bs.collapse') window.dispatchEvent(new Event('resize'));
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
+1
-1
@@ -21,7 +21,7 @@ Route::get('/', function() {
|
||||
return redirect()->route('dashboard.survey-petani');
|
||||
}
|
||||
|
||||
return redirect()->route('dashboard.produktivitas');
|
||||
return redirect()->route('dashboard.karakteristik-petani');
|
||||
})->name('home');
|
||||
|
||||
Route::middleware('auth')
|
||||
|
||||
Reference in New Issue
Block a user