1371 lines
49 KiB
PHP
1371 lines
49 KiB
PHP
@extends('layout.main')
|
|
|
|
@push('style')
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
|
crossorigin=""/>
|
|
<style>
|
|
.clickable-row {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.clickable-row:hover {
|
|
background-color: rgba(0, 0, 0, 0.03);
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
@php
|
|
$segments = [
|
|
[
|
|
'name' => 'Penggerak',
|
|
'range' => '4.0 - 5.0',
|
|
'icon' => 'tabler-crown',
|
|
'color' => 'success',
|
|
],
|
|
[
|
|
'name' => 'Perintis',
|
|
'range' => '3.0 - 3.9',
|
|
'icon' => 'tabler-flag',
|
|
'color' => 'info',
|
|
],
|
|
[
|
|
'name' => 'Pemerhati',
|
|
'range' => '2.0 - 2.9',
|
|
'icon' => 'tabler-eye',
|
|
'color' => 'warning',
|
|
],
|
|
[
|
|
'name' => 'Pemula',
|
|
'range' => '1.0 - 1.9',
|
|
'icon' => 'tabler-seedling',
|
|
'color' => 'danger',
|
|
],
|
|
];
|
|
|
|
$colors = collect($segments)
|
|
->pluck('color')
|
|
->map(fn($c) => "var(--bs-{$c})")
|
|
->values();
|
|
$segmentStyles = collect($segments)->keyBy('name');
|
|
|
|
$provinsi = $desaKelurahan
|
|
->unique('provinsi_id')
|
|
->sortBy('provinsi')
|
|
->values();
|
|
@endphp
|
|
<div class="container-xxl flex-grow-1 container-p-y">
|
|
<div class="row g-6 py-4">
|
|
<form id="form-filter" method="GET" action="{{ route('dashboard.indeks-petani') }}">
|
|
@csrf
|
|
<div class="col-12">
|
|
<div class="card card-border-shadow-primary">
|
|
<div class="card-body py-3">
|
|
|
|
{{-- FILTER WILAYAH --}}
|
|
<div class="d-flex align-items-center gap-2 flex-wrap">
|
|
|
|
<div class="d-flex align-items-center me-2">
|
|
<i class="icon-base ti tabler-map-2 me-2"></i>
|
|
<span class="fw-medium">Wilayah</span>
|
|
</div>
|
|
|
|
<div class="filter-item">
|
|
<select id="filter-provinsi" class="form-select form-select-sm" name="provinsi_id" data-default="{{ $provinsi_id }}">
|
|
<option value="">Semua Provinsi</option>
|
|
@foreach($provinsi as $p)
|
|
<option value="{{ $p->provinsi_id }}" {{ old('provinsi_id', $provinsi_id) == $p->provinsi_id ? 'selected' : '' }}>
|
|
{{ $p->provinsi }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-item">
|
|
<select id="filter-kabkota" class="form-select form-select-sm" name="kabupatenKota_id" data-default="{{ $kabupatenKota_id }}" disabled>
|
|
<option value="">Semua Kabupaten/Kota</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-item">
|
|
<select id="filter-kecamatan" class="form-select form-select-sm" name="kecamatan_id" data-default="{{ $kecamatan_id }}" disabled>
|
|
<option value="">Semua Kecamatan</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-item">
|
|
<select id="filter-desa" class="form-select form-select-sm" name="desaKelurahan_id" data-default="{{ $desaKelurahan_id }}" disabled>
|
|
<option value="">Semua Desa/Kelurahan</option>
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<hr class="my-3">
|
|
|
|
{{-- FILTER DATA --}}
|
|
<div class="d-flex align-items-center gap-2 flex-wrap">
|
|
|
|
<div class="d-flex align-items-center me-2">
|
|
<i class="icon-base ti tabler-adjustments-horizontal me-2"></i>
|
|
<span class="fw-medium">Data</span>
|
|
</div>
|
|
|
|
<div class="filter-item">
|
|
<select id="filter-komoditas" class="form-select form-select-sm" name="komoditas_id">
|
|
<option value="">Semua Komoditas</option>
|
|
@foreach ($komoditas as $item)
|
|
<option value="{{ $item->id }}" {{ old('komoditas_id', $komoditas_id) == $item->id ? 'selected' : '' }}>
|
|
{{ $item->nama }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-item">
|
|
<select id="filter-segmen" class="form-select form-select-sm" name="segmen">
|
|
<option value="">Semua Segmen</option>
|
|
@foreach ($segments as $segment)
|
|
<option value="{{ $segment['name'] }}" {{ old('segmen', $segmen) == $segment['name'] ? 'selected' : '' }}>
|
|
{{ $segment['name'] }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
id="btn-reset-dashboard-filter"
|
|
class="btn btn-outline-secondary btn-sm">
|
|
<i class="icon-base ti tabler-filter me-1"></i>
|
|
Filter
|
|
</button>
|
|
<button
|
|
type="button"
|
|
id="btn-reset-dashboard-filter"
|
|
class="btn btn-outline-secondary btn-sm">
|
|
<i class="icon-base ti tabler-refresh me-1"></i>
|
|
Reset
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="row g-6">
|
|
<div class="col-lg-3 col-sm-6">
|
|
<div class="card card-border-shadow-primary h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="avatar me-4">
|
|
<span class="avatar-initial rounded bg-label-primary">
|
|
<i class="icon-base ti tabler-user-check icon-28px"></i>
|
|
</span>
|
|
</div>
|
|
<h4 class="mb-0" id="count-petani">0</h4>
|
|
</div>
|
|
<p class="mb-1">Total Petani</p>
|
|
<p class="mb-0">
|
|
<span class="text-heading fw-medium me-2" id="count-komoditas">0</span>
|
|
<small class="text-body-secondary">komoditas utama</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6">
|
|
<div class="card card-border-shadow-warning h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="avatar me-4">
|
|
<span class="avatar-initial rounded bg-label-warning">
|
|
<i class="icon-base ti tabler-trees icon-28px"></i>
|
|
</span>
|
|
</div>
|
|
<h4 class="mb-0" id="sum-lahan">0</h4>
|
|
<small class="text-body-warning">ha</small>
|
|
</div>
|
|
<p class="mb-1">Total Luas Lahan</p>
|
|
<p class="mb-0">
|
|
<small class="text-body-warning">rata-rata</small>
|
|
<span class="text-heading fw-medium" id="avg-lahan"></span>
|
|
<small class="text-body-warning">ha/petani</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6">
|
|
<div class="card card-border-shadow-info h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="avatar me-4">
|
|
<span class="avatar-initial rounded bg-label-info">
|
|
<i class="icon-base ti tabler-star icon-28px"></i>
|
|
</span>
|
|
</div>
|
|
<h4 class="mb-0" id="avg-skor"></h4>
|
|
</div>
|
|
<p class="mb-1">Rata-rata Indeks Kesiapan Adopsi</p>
|
|
<p class="mb-0">
|
|
<small class="text-body-secondary">Segmentasi:</small>
|
|
<span class="text-heading fw-medium me-2" id="avg-segmen"></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6">
|
|
<div class="card card-border-shadow-success h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="avatar me-4">
|
|
<span class="avatar-initial rounded bg-label-success">
|
|
<i class="icon-base ti tabler-map-2 icon-28px"></i>
|
|
</span>
|
|
</div>
|
|
<h4 class="mb-0" id="count-desa">0</h4>
|
|
</div>
|
|
<p class="mb-1">Jumlah Desa Sasaran</p>
|
|
<p class="mb-0">
|
|
<span class="text-heading fw-medium me-2" id="count-kecamatan">0</span>
|
|
<small class="text-body-secondary">kecamatan sasaran</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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-title mb-0">
|
|
<h5 class="m-0 me-2">Distribusi Segmentasi Petani</h5>
|
|
<p class="card-subtitle">untuk semua komoditas</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-start align-items-start mb-3">
|
|
<div id="chart-segmentasi-petani"></div>
|
|
<table class="table card-table table-border-top-0 table-border-bottom-0 data-table">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th class="text-end pe-0">Petani</th>
|
|
<th class="text-end pe-0">%</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="table-segmentasi-petani"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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-title mb-0">
|
|
<h5 class="m-0 me-2">Distribusi Segmentasi Petani</h5>
|
|
<p class="card-subtitle">per komoditas</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="chart-segmentasi-petani-komoditas"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-6 py-4">
|
|
<div class="col-lg-6 col-sm-12">
|
|
<div class="card card-border-shadow-info h-100">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<div class="card-title mb-0">
|
|
<h5 class="m-0 me-2">Rata-rata Dimensi Kesiapan Adopsi</h5>
|
|
<p class="card-subtitle">untuk semua komoditas</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="chart-dimensi"></div>
|
|
<div class="d-flex flex-wrap gap-3 mt-3 small justify-content-center">
|
|
<div>
|
|
<span class="badge bg-label-primary">D1</span> Sistem & Praktik Budidaya
|
|
</div>
|
|
<div>
|
|
<span class="badge bg-label-primary">D2</span> Sosial Ekonomi Rumah Tangga
|
|
</div>
|
|
<div>
|
|
<span class="badge bg-label-primary">D3</span> Rantai Nilai & Akses Pasar
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-sm-12">
|
|
<div class="card card-border-shadow-warning h-100">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<div class="card-title mb-0">
|
|
<h5 class="m-0 me-2">Rata-rata Komponen Kesiapan Adopsi</h5>
|
|
<p class="card-subtitle">untuk semua komoditas</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="chart-komponen"></div>
|
|
<div class="d-flex flex-wrap gap-3 mt-3 small justify-content-center">
|
|
<div>
|
|
<span class="badge bg-label-primary">K1</span> Motivasi & Kapasitas Adopsi
|
|
</div>
|
|
<div>
|
|
<span class="badge bg-label-primary">K2</span> Kondisi Ekonomi Rumah Tangga
|
|
</div>
|
|
<div>
|
|
<span class="badge bg-label-primary">K3</span> Praktik Budidaya & GAP
|
|
</div>
|
|
<div>
|
|
<span class="badge bg-label-primary">K4</span> Keterlibatan Kelembagaan
|
|
</div>
|
|
<div>
|
|
<span class="badge bg-label-primary">K5</span> Akses & Kebebasan Keuangan
|
|
</div>
|
|
<div>
|
|
<span class="badge bg-label-primary">K6</span> Rantai Nilai & Akses Pasar
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-6 py-4">
|
|
<div class="col-lg-6 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-title mb-0">
|
|
<h5 class="m-0 me-2">Sebaran Segmentasi Petani</h5>
|
|
<p class="card-subtitle">berdasarkan sebaran wilayah untuk semua komoditas</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="map-sebaran-petani" style="height: 380px;"></div>
|
|
<span class="small text-muted">*klik pada desa untuk menampilkan detail informasi dan menyaring daftar petani</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-sm-12">
|
|
<div class="card card-border-shadow-success h-100">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<div class="card-title mb-0">
|
|
<h5 class="m-0 me-2">Distribusi Segmentasi Petani</h5>
|
|
<p class="card-subtitle">berdasarkan sebaran wilayah untuk semua komoditas</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<table id="table-desa" class="table card-table table-border-top-0 table-border-bottom-0">
|
|
<thead>
|
|
<tr>
|
|
<th class="pe-0">Desa/Kelurahan</th>
|
|
<th class="text-end pe-0">Petani</th>
|
|
<th class="pe-0">Segmen Rata-rata</th>
|
|
<th class="pe-0">Segmen Dominan</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-6 py-4">
|
|
<div class="col-lg-12 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-title mb-0">
|
|
<h5 class="m-0 me-2">Daftar Petani</h5>
|
|
<p class="card-subtitle">untuk semua komoditas</p>
|
|
</div>
|
|
<button type="button" id="btn-reset-filter" class="btn btn-outline-secondary btn-sm">
|
|
<i class="fas fa-sync-alt me-1"></i>
|
|
Reset Filter
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<table id="table-petani" class="table card-table table-border-top-0 table-border-bottom-0">
|
|
<thead>
|
|
<tr>
|
|
<th class="pe-0">Nama Petani</th>
|
|
<th class="pe-0">Desa/Kelurahan</th>
|
|
<th class="pe-0">Komoditas</th>
|
|
<th class="text-end pe-0">Luas Lahan (ha)</th>
|
|
<th class="text-end pe-0">Indeks Kesiapan Adopsi</th>
|
|
<th class="pe-0">Segmen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
|
crossorigin=""></script>
|
|
|
|
<script>
|
|
const wilayah = @json($wilayah);
|
|
|
|
function fillSelect($select, data, valueField, textField, placeholder) {
|
|
$select.empty().append(
|
|
`<option value="">${placeholder}</option>`
|
|
);
|
|
data.forEach(function (item) {
|
|
$select.append(
|
|
`<option value="${item[valueField]}">${item[textField]}</option>`
|
|
);
|
|
});
|
|
$select.trigger('change.select2');
|
|
}
|
|
$('#filter-provinsi').select2().on('change', function () {
|
|
console.log('change provinsi');
|
|
let provinsiId = $(this).val();
|
|
|
|
fillSelect($('#filter-kabkota'), [], 'id', 'nama', 'Semua Kabupaten/Kota');
|
|
fillSelect($('#filter-kecamatan'), [], 'id', 'nama', 'Semua Kecamatan');
|
|
fillSelect($('#filter-desa'), [], 'id', 'nama', 'Semua Desa/Kelurahan');
|
|
|
|
if (!provinsiId) {
|
|
$('#filter-kabkota, #filter-kecamatan, #filter-desa')
|
|
.prop('disabled', true);
|
|
|
|
return;
|
|
}
|
|
|
|
let provinsi = wilayah.find(x => x.id == provinsiId);
|
|
if (!provinsi) {
|
|
return;
|
|
}
|
|
|
|
let kabupaten = provinsi.kabupaten || [];
|
|
fillSelect($('#filter-kabkota'), kabupaten, 'id', 'nama', 'Semua Kabupaten/Kota');
|
|
|
|
$('#filter-kabkota').prop('disabled', false);
|
|
$('#filter-kecamatan, #filter-desa').prop('disabled', true);
|
|
|
|
let defaultKabupaten = $('#filter-kabkota').data('default');
|
|
if (defaultKabupaten) {
|
|
$('#filter-kabkota').val(defaultKabupaten).trigger('change');
|
|
}
|
|
});
|
|
$('#filter-kabkota').select2().on('change', function () {
|
|
let kabupatenId = $(this).val();
|
|
|
|
fillSelect($('#filter-kecamatan'), [], 'id', 'nama', 'Semua Kecamatan');
|
|
fillSelect($('#filter-desa'), [], 'id', 'nama', 'Semua Desa/Kelurahan');
|
|
|
|
$('#filter-desa').prop('disabled', true);
|
|
|
|
if (!kabupatenId) {
|
|
$('#filter-kecamatan').prop('disabled', true);
|
|
return;
|
|
}
|
|
|
|
// Cari kabupaten di semua provinsi
|
|
let kabupaten = null;
|
|
|
|
wilayah.forEach(function (provinsi) {
|
|
let found = (provinsi.kabupaten || []).find(
|
|
x => x.id == kabupatenId
|
|
);
|
|
|
|
if (found) {
|
|
kabupaten = found;
|
|
}
|
|
});
|
|
|
|
if (!kabupaten) {
|
|
return;
|
|
}
|
|
|
|
let kecamatan = kabupaten.kecamatan || [];
|
|
fillSelect($('#filter-kecamatan'), kecamatan, 'id', 'nama', 'Semua Kecamatan');
|
|
|
|
$('#filter-kecamatan').prop('disabled', false);
|
|
|
|
let defaultKecamatan = $('#filter-kecamatan').data('default');
|
|
if (defaultKecamatan) {
|
|
console.log('defaultKecamatan', defaultKecamatan);
|
|
$('#filter-kecamatan').val(defaultKecamatan).trigger('change');
|
|
}
|
|
});
|
|
$('#filter-kecamatan').select2().on('change', function () {
|
|
let kecamatanId = $(this).val();
|
|
|
|
fillSelect($('#filter-desa'), [], 'id', 'nama', 'Semua Desa/Kelurahan');
|
|
|
|
if (!kecamatanId) {
|
|
$('#filter-desa').prop('disabled', true);
|
|
return;
|
|
}
|
|
|
|
let kecamatan = null;
|
|
wilayah.forEach(function (provinsi) {
|
|
(provinsi.kabupaten || []).forEach(function (kabupaten) {
|
|
let found = (kabupaten.kecamatan || []).find(
|
|
x => x.id == kecamatanId
|
|
);
|
|
if (found) {
|
|
kecamatan = found;
|
|
}
|
|
});
|
|
});
|
|
|
|
if (!kecamatan) {
|
|
return;
|
|
}
|
|
|
|
let desa = kecamatan.desa || [];
|
|
fillSelect($('#filter-desa'), desa, 'id', 'nama', 'Semua Desa/Kelurahan');
|
|
|
|
$('#filter-desa').prop('disabled', false);
|
|
|
|
let defaultDesa = $('#filter-desa').data('default');
|
|
if (defaultDesa) {
|
|
console.log('default desa', defaultDesa);
|
|
$('#filter-desa').val(defaultDesa).trigger('change');
|
|
}
|
|
});
|
|
$('#filter-desa, #filter-segmen, #filter-komoditas').select2();
|
|
|
|
let defaultProvinsi = $('#filter-provinsi').data('default');
|
|
if (defaultProvinsi) {
|
|
$('#filter-provinsi')
|
|
.val(defaultProvinsi)
|
|
.trigger('change');
|
|
}
|
|
|
|
$('.data-table').DataTable({
|
|
"paging": false,
|
|
"lengthChange": true,
|
|
"searching": false,
|
|
"ordering": false,
|
|
"info": false,
|
|
"autoWidth": false,
|
|
"responsive": false,
|
|
"scrollX": true
|
|
});
|
|
|
|
let selectedDesa = null;
|
|
let selectedKomoditas = null;
|
|
let selectedSegmen = null;
|
|
|
|
$('#btn-reset-filter').on('click', function () {
|
|
|
|
selectedDesa = null;
|
|
selectedKomoditas = null;
|
|
selectedSegmen = null;
|
|
|
|
// Reset chart
|
|
chartSegmentasiPetani.resetSeries();
|
|
chartSegmentasiPetaniByKomoditas.resetSeries();
|
|
});
|
|
|
|
|
|
// Chart Dimensi dan Komponen Kesiapan Adopsi
|
|
let cardColor, labelColor, fontFamily, headingColor, shadeColor, legendColor, borderColor, barBgColor;
|
|
if (isDarkStyle) {
|
|
barBgColor = '#3d4157';
|
|
shadeColor = 'dark';
|
|
} else {
|
|
barBgColor = '#efeef0';
|
|
shadeColor = '';
|
|
}
|
|
cardColor = config.colors.cardColor;
|
|
labelColor = config.colors.textMuted;
|
|
legendColor = config.colors.bodyColor;
|
|
borderColor = config.colors.borderColor;
|
|
headingColor = config.colors.headingColor;
|
|
</script>
|
|
|
|
<script>
|
|
|
|
$(document).ready(function () {
|
|
$.ajax({
|
|
url: '{{ route('dashboard.indeks-petani.summary') }}',
|
|
type: 'GET',
|
|
data: $('#form-filter').serialize(),
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
$('#count-petani').text(data.petani);
|
|
$('#count-komoditas').text(data.komoditas);
|
|
$('#sum-lahan').text(new Intl.NumberFormat('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(data.sum_lahan));
|
|
$('#avg-lahan').text(new Intl.NumberFormat('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(data.avg_lahan));
|
|
$('#count-desa').text(data.desa);
|
|
$('#count-kecamatan').text(data.kecamatan);
|
|
$('#avg-skor').text(new Intl.NumberFormat('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(data.skor));
|
|
$('#avg-segmen').text(data.segmen);
|
|
}
|
|
});
|
|
})
|
|
</script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
const segments = @json($segments);
|
|
|
|
// Chart Segmentasi Petani
|
|
var chartSegmentasiPetani;
|
|
|
|
function loadChartSegmentasiPetani() {
|
|
$.ajax({
|
|
url: '{{ route("dashboard.indeks-petani.segmen") }}',
|
|
type: 'GET',
|
|
data: $('#form-filter').serialize(),
|
|
dataType: 'json',
|
|
success: function(response) {
|
|
if (chartSegmentasiPetani) {
|
|
chartSegmentasiPetani.destroy();
|
|
}
|
|
var optionsSegmentasiPetani = {
|
|
series: response.series,
|
|
chart: {
|
|
type: 'donut',
|
|
width: 320,
|
|
events: {
|
|
dataPointSelection: function(event, chartContext, config) {
|
|
|
|
const segmen =
|
|
chartContext.w.config.labels[
|
|
config.dataPointIndex
|
|
];
|
|
|
|
console.log('Segmen dipilih:', segmen);
|
|
|
|
// Set filter segmen
|
|
selectedSegmen = segmen;
|
|
}
|
|
}
|
|
},
|
|
labels: @json(collect($segments)->pluck('name')->values()),
|
|
colors: @json($colors),
|
|
plotOptions: {
|
|
pie: {
|
|
borderRadius: 12,
|
|
spacing: 5,
|
|
donut: {
|
|
size: '68%',
|
|
labels: {
|
|
show: true,
|
|
total: {
|
|
show: true,
|
|
label: 'Petani Tersegmentasi',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
stroke: {
|
|
width: 0,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
responsive: [
|
|
{
|
|
breakpoint: 360,
|
|
options: {
|
|
chart: {
|
|
width: 240,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
chartSegmentasiPetani = new ApexCharts(
|
|
document.querySelector('#chart-segmentasi-petani'),
|
|
optionsSegmentasiPetani
|
|
);
|
|
|
|
chartSegmentasiPetani.render();
|
|
|
|
let html = '';
|
|
|
|
segments.forEach(function(segment, index) {
|
|
|
|
const total = response.series[index] ?? 0;
|
|
const persen = response.persentase[index] ?? 0;
|
|
|
|
html += `
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex justify-content-start align-items-center">
|
|
<div class="me-2">
|
|
<i class="icon-base ti ${segment.icon} icon-lg text-${segment.color}"></i>
|
|
</div>
|
|
|
|
<span class="text-${segment.color}">
|
|
${segment.name}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
|
|
<td class="text-end pe-0">
|
|
${Number(total).toLocaleString('id-ID')}
|
|
</td>
|
|
|
|
<td class="text-end pe-0">
|
|
${Number(persen).toLocaleString('id-ID', {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2
|
|
})}%
|
|
</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
$('#table-segmentasi-petani').html(html);
|
|
},
|
|
|
|
error: function(xhr) {
|
|
console.error('Gagal mengambil data segmentasi:', xhr);
|
|
}
|
|
});
|
|
}
|
|
|
|
loadChartSegmentasiPetani();
|
|
})
|
|
</script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
var optionsSegmentasiPetaniByKomoditas = {
|
|
series: [],
|
|
colors: @json($colors),
|
|
|
|
chart: {
|
|
type: 'bar',
|
|
height: 240,
|
|
stacked: true,
|
|
|
|
events: {
|
|
dataPointSelection: function(event, chartContext, config) {
|
|
const komoditas =
|
|
config.w.config.xaxis.categories[config.dataPointIndex];
|
|
|
|
console.log('Komoditas dipilih:', komoditas);
|
|
|
|
selectedKomoditas = komoditas;
|
|
}
|
|
}
|
|
},
|
|
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: true,
|
|
},
|
|
},
|
|
|
|
stroke: {
|
|
width: 1,
|
|
colors: ['#fff'],
|
|
},
|
|
|
|
title: {
|
|
show: false,
|
|
},
|
|
|
|
xaxis: {
|
|
categories: [],
|
|
},
|
|
|
|
tooltip: {
|
|
y: {
|
|
formatter: function(val) {
|
|
return val + ' petani';
|
|
},
|
|
},
|
|
},
|
|
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
|
|
legend: {
|
|
position: 'top',
|
|
horizontalAlign: 'left',
|
|
offsetX: 40,
|
|
},
|
|
};
|
|
|
|
var chartSegmentasiPetaniByKomoditas =
|
|
new ApexCharts(
|
|
document.querySelector('#chart-segmentasi-petani-komoditas'),
|
|
optionsSegmentasiPetaniByKomoditas
|
|
);
|
|
|
|
chartSegmentasiPetaniByKomoditas.render();
|
|
|
|
function loadChartSegmentasiKomoditas() {
|
|
|
|
$.ajax({
|
|
url: "{{ route('dashboard.indeks-petani.segmen.komoditas') }}",
|
|
type: "GET",
|
|
data: $('#form-filter').serialize(),
|
|
dataType: "json",
|
|
beforeSend: function() {
|
|
// optional
|
|
// tampilkan loading
|
|
},
|
|
success: function(response) {
|
|
|
|
chartSegmentasiPetaniByKomoditas.updateOptions({
|
|
xaxis: {
|
|
categories: response.categories
|
|
}
|
|
});
|
|
|
|
chartSegmentasiPetaniByKomoditas.updateSeries(
|
|
response.series
|
|
);
|
|
},
|
|
error: function(xhr) {
|
|
console.error(
|
|
'Gagal mengambil data chart:',
|
|
xhr.responseText
|
|
);
|
|
}
|
|
});
|
|
}
|
|
|
|
loadChartSegmentasiKomoditas();
|
|
})
|
|
</script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
var radarDimensi = new ApexCharts($("#chart-dimensi")[0], {
|
|
chart: {
|
|
height: 240,
|
|
type: 'radar',
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
series: [{
|
|
name: "Rata-rata Dimensi Kesiapan Adopsi",
|
|
data: []
|
|
}],
|
|
labels: [
|
|
'Sistem & Praktik Budidaya',
|
|
'Sosial Ekonomi Rumah Tangga',
|
|
'Rantai Nilai & Akses Pasar'
|
|
],
|
|
plotOptions: {
|
|
radar: {
|
|
polygons: {
|
|
strokeColors: borderColor,
|
|
connectorColors: borderColor
|
|
}
|
|
}
|
|
},
|
|
stroke: {
|
|
width: 2
|
|
},
|
|
legend: {
|
|
show: true,
|
|
fontSize: '13px',
|
|
position: 'bottom',
|
|
labels: {
|
|
colors: legendColor,
|
|
useSeriesColors: false
|
|
},
|
|
markers: {
|
|
height: 12,
|
|
width: 12
|
|
},
|
|
itemMargin: {
|
|
horizontal: 10
|
|
},
|
|
onItemHover: {
|
|
highlightDataSeries: false
|
|
}
|
|
},
|
|
colors: [config.colors.primary],
|
|
fill: {
|
|
opacity: 0.85
|
|
},
|
|
markers: {
|
|
show: true,
|
|
width: 1
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
top: -25,
|
|
bottom: -5
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: ['D1', 'D2', 'D3'],
|
|
labels: {
|
|
show: true,
|
|
style: {
|
|
colors: [labelColor, labelColor, labelColor],
|
|
fontSize: '13px',
|
|
fontFamily: fontFamily
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
show: true,
|
|
min: 0,
|
|
max: 5,
|
|
tickAmount: 5
|
|
},
|
|
responsive: [{
|
|
breakpoint: 769,
|
|
options: {
|
|
chart: {
|
|
height: 400
|
|
}
|
|
}
|
|
}]
|
|
});
|
|
|
|
radarDimensi.render();
|
|
|
|
function loadChartRadarDimensi() {
|
|
|
|
$.ajax({
|
|
url: "{{ route('dashboard.indeks-petani.dimensi') }}",
|
|
type: "GET",
|
|
data: $('#form-filter').serialize(),
|
|
dataType: "json",
|
|
beforeSend: function() {
|
|
// optional
|
|
// tampilkan loading
|
|
},
|
|
success: function(response) {
|
|
radarDimensi.updateSeries([{
|
|
name: "Rata-rata Dimensi Kesiapan Adopsi",
|
|
data: response.radarDimensi
|
|
}]);
|
|
},
|
|
error: function(xhr) {
|
|
console.error(
|
|
'Gagal mengambil data chart:',
|
|
xhr.responseText
|
|
);
|
|
}
|
|
});
|
|
}
|
|
|
|
loadChartRadarDimensi();
|
|
})
|
|
</script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
var radarKomponen = new ApexCharts($("#chart-komponen")[0], {
|
|
chart: {
|
|
height: 240,
|
|
type: 'radar',
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
series: [{
|
|
name: "Rata-rata Komponen Kesiapan Adopsi",
|
|
data: []
|
|
}],
|
|
labels: [
|
|
'Sistem & Praktik Budidaya',
|
|
'Sosial Ekonomi Rumah Tangga',
|
|
'Rantai Nilai & Akses Pasar'
|
|
],
|
|
plotOptions: {
|
|
radar: {
|
|
polygons: {
|
|
strokeColors: borderColor,
|
|
connectorColors: borderColor
|
|
}
|
|
}
|
|
},
|
|
stroke: {
|
|
width: 2
|
|
},
|
|
legend: {
|
|
show: true,
|
|
fontSize: '13px',
|
|
position: 'bottom',
|
|
labels: {
|
|
colors: legendColor,
|
|
useSeriesColors: false
|
|
},
|
|
markers: {
|
|
height: 12,
|
|
width: 12
|
|
},
|
|
itemMargin: {
|
|
horizontal: 10
|
|
},
|
|
onItemHover: {
|
|
highlightDataSeries: false
|
|
}
|
|
},
|
|
colors: [config.colors.primary],
|
|
fill: {
|
|
opacity: 0.85
|
|
},
|
|
markers: {
|
|
show: true,
|
|
width: 1
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
top: -25,
|
|
bottom: -5
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: ['K1', 'K2', 'K3', 'K4', 'K5', 'K6'],
|
|
labels: {
|
|
show: true,
|
|
style: {
|
|
colors: [labelColor, labelColor, labelColor, labelColor, labelColor, labelColor],
|
|
fontSize: '13px',
|
|
fontFamily: fontFamily
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
show: true,
|
|
min: 0,
|
|
max: 5,
|
|
tickAmount: 5
|
|
},
|
|
responsive: [{
|
|
breakpoint: 769,
|
|
options: {
|
|
chart: {
|
|
height: 400
|
|
}
|
|
}
|
|
}]
|
|
});
|
|
|
|
radarKomponen.render();
|
|
|
|
function loadChartRadarKomponen() {
|
|
|
|
$.ajax({
|
|
url: "{{ route('dashboard.indeks-petani.komponen') }}",
|
|
type: "GET",
|
|
data: $('#form-filter').serialize(),
|
|
dataType: "json",
|
|
beforeSend: function() {
|
|
// optional
|
|
// tampilkan loading
|
|
},
|
|
success: function(response) {
|
|
radarKomponen.updateSeries([{
|
|
name: "Rata-rata Komponen Kesiapan Adopsi",
|
|
data: response.radarKomponen
|
|
}]);
|
|
},
|
|
error: function(xhr) {
|
|
console.error(
|
|
'Gagal mengambil data chart:',
|
|
xhr.responseText
|
|
);
|
|
}
|
|
});
|
|
}
|
|
|
|
loadChartRadarKomponen();
|
|
})
|
|
</script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
// Map Sebaran Petani
|
|
var map = L.map('map-sebaran-petani').setView([-0.789, 113.921], 5);
|
|
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
}).addTo(map);
|
|
|
|
const warnaSegmen = {
|
|
@foreach($segments as $segment)
|
|
"{{ $segment['name'] }}": "var(--bs-{{ $segment['color'] }})",
|
|
@endforeach
|
|
};
|
|
|
|
let selectedDesa = null;
|
|
|
|
const group = L.featureGroup().addTo(map);
|
|
|
|
function loadMapDesa() {
|
|
|
|
$.ajax({
|
|
url: "{{ route('dashboard.indeks-petani.map') }}",
|
|
type: "GET",
|
|
data: $('#form-filter').serialize(),
|
|
beforeSend: function () {
|
|
// Optional
|
|
// $('#map-loading').show();
|
|
},
|
|
success: function (desaData) {
|
|
group.clearLayers();
|
|
|
|
if (!desaData || desaData.length === 0) {
|
|
return;
|
|
}
|
|
desaData.forEach(function (desa) {
|
|
if (!desa.path) {
|
|
return;
|
|
}
|
|
let coordinates;
|
|
|
|
try {
|
|
coordinates = typeof desa.path === 'string'
|
|
? JSON.parse(desa.path)
|
|
: desa.path;
|
|
} catch (error) {
|
|
console.error('Path polygon tidak valid:', desa);
|
|
return;
|
|
}
|
|
|
|
const polygon = L.polygon(coordinates, {
|
|
color: '#666',
|
|
weight: 1,
|
|
fillColor:
|
|
warnaSegmen[desa.segmentasi?.segmen] || '#ccc',
|
|
fillOpacity: 0.7
|
|
});
|
|
|
|
polygon.desaId = desa.desa_kelurahan_id;
|
|
|
|
polygon.bindPopup(`
|
|
<b>Desa/Kel.: ${desa.desa_kelurahan ?? '-'}</b><br>
|
|
Kec.: ${desa.kecamatan ?? '-'}<br>
|
|
Kab.: ${desa.kabupaten ?? '-'}<br>
|
|
<hr>
|
|
Petani: ${desa.segmentasi?.jumlah_petani ?? 0}<br>
|
|
Indeks:
|
|
${Number(desa.segmentasi?.skor ?? 0).toFixed(2)}
|
|
<br>
|
|
Segmen:
|
|
<b>${desa.segmentasi?.segmen ?? '-'}</b>
|
|
<br>
|
|
Segmen Dominan:
|
|
<b>${desa.segmentasi?.segmen_dominan ?? '-'}</b>
|
|
(${desa.segmentasi?.jumlah_dominan ?? 0} petani)
|
|
`);
|
|
|
|
polygon.addTo(group);
|
|
});
|
|
|
|
if (group.getLayers().length > 0) {
|
|
map.fitBounds(group.getBounds(), {
|
|
padding: [20, 20]
|
|
});
|
|
}
|
|
},
|
|
error: function (xhr) {
|
|
console.error(
|
|
'Gagal mengambil data map:',
|
|
xhr.responseText
|
|
);
|
|
},
|
|
complete: function () {
|
|
// Optional
|
|
// $('#map-loading').hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
loadMapDesa();
|
|
})
|
|
</script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
var tableDesa = $('#table-desa').DataTable({
|
|
"paging": true,
|
|
"pageLength": 5,
|
|
"lengthChange": false,
|
|
"searching": false,
|
|
"ordering": true,
|
|
"info": false,
|
|
"autoWidth": false,
|
|
"responsive": false,
|
|
"scrollX": true,
|
|
"serverSide": false,
|
|
"processing": true,
|
|
"ajax": {
|
|
"url": "{{ route('dashboard.indeks-petani.desa') }}",
|
|
"type": "GET",
|
|
"data": function (data) {
|
|
data = $('#form-filter').serialize();
|
|
return data;
|
|
},
|
|
"dataSrc": function(json) {
|
|
return json;
|
|
},
|
|
"dataType": "json"
|
|
},
|
|
columns: [
|
|
{
|
|
data: 'desa'
|
|
},
|
|
{
|
|
data: 'jumlah_petani',
|
|
className: 'text-end',
|
|
render: function(data) {
|
|
return Number(data).toLocaleString('id-ID');
|
|
}
|
|
},
|
|
{
|
|
data: null,
|
|
render: function(data) {
|
|
return `
|
|
<span class="badge bg-${data.color ?? 'secondary'}">
|
|
${data.segmen ?? '-'}
|
|
</span>
|
|
(${Number(data.skor).toLocaleString('id-ID', {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2
|
|
})})
|
|
`;
|
|
}
|
|
},
|
|
{
|
|
data: null,
|
|
render: function(data) {
|
|
return `
|
|
<span class="badge bg-${data.color_dominan ?? 'secondary'}">
|
|
${data.segmen_dominan ?? '-'}
|
|
</span>
|
|
(${Number(data.jumlah_dominan ?? 0).toLocaleString('id-ID')} petani)
|
|
`;
|
|
}
|
|
}
|
|
]
|
|
});
|
|
})
|
|
</script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
var tablePetani = $('#table-petani').DataTable({
|
|
"paging": true,
|
|
"pageLength": 10,
|
|
"lengthChange": false,
|
|
"searching": true,
|
|
"ordering": true,
|
|
"info": true,
|
|
"autoWidth": false,
|
|
"responsive": false,
|
|
"scrollX": true,
|
|
"serverSide": false,
|
|
"processing": true,
|
|
"ajax": {
|
|
"url": "{{ route('dashboard.indeks-petani.data') }}",
|
|
"type": "GET",
|
|
"data": function (data) {
|
|
data = $('#form-filter').serialize();
|
|
return data;
|
|
},
|
|
"dataSrc": function(json) {
|
|
return json;
|
|
},
|
|
"dataType": "json"
|
|
},
|
|
columns: [
|
|
{
|
|
data: 'nama',
|
|
name: 'nama',
|
|
className: 'pe-0'
|
|
},
|
|
{
|
|
data: 'desa',
|
|
name: 'desa',
|
|
className: 'pe-0'
|
|
},
|
|
{
|
|
data: 'komoditas',
|
|
name: 'komoditas',
|
|
className: 'pe-0'
|
|
},
|
|
{
|
|
data: 'luas_lahan',
|
|
name: 'luas_lahan',
|
|
className: 'text-end pe-0',
|
|
render: function(data) {
|
|
return Number(data ?? 0).toLocaleString('id-ID', {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2
|
|
});
|
|
}
|
|
},
|
|
{
|
|
data: 'skor',
|
|
name: 'skor',
|
|
className: 'text-end pe-0',
|
|
render: function(data) {
|
|
if (data === null || data === '') {
|
|
return '';
|
|
}
|
|
|
|
return Number(data).toLocaleString('id-ID', {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2
|
|
});
|
|
}
|
|
},
|
|
{
|
|
data: null,
|
|
name: 'segmen',
|
|
className: 'pe-0',
|
|
orderable: false,
|
|
render: function(data) {
|
|
|
|
if (!data.skor || !data.segmen) {
|
|
return '';
|
|
}
|
|
|
|
return `
|
|
<span class="badge bg-${data.color ?? 'secondary'}">
|
|
${data.segmen}
|
|
</span>
|
|
`;
|
|
}
|
|
}
|
|
],
|
|
order: [
|
|
[0, 'asc']
|
|
],
|
|
createdRow: function(row, data) {
|
|
$(row)
|
|
.addClass('clickable-row')
|
|
.attr('data-url', data.url);
|
|
}
|
|
});
|
|
|
|
$('#table-petani tbody').on('click', 'tr.clickable-row', function() {
|
|
const url = $(this).data('url');
|
|
|
|
if (url) {
|
|
window.location.href = url;
|
|
}
|
|
});
|
|
})
|
|
</script>
|
|
@endpush |