Merge branch 'main' of https://git.probindo.com/Probindo/database-pertani-web
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,816 @@
|
||||
@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=""/>
|
||||
@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');
|
||||
|
||||
$countSegmentasi = $countSegmentasi->keyBy('segmen');
|
||||
$seriesSegmentasi = collect($segments)->map(function ($segment) use ($countSegmentasi) {
|
||||
return $countSegmentasi[$segment['name']]->total ?? 0;
|
||||
});
|
||||
$seriesSegmentasiKomoditas = collect($segments)->map(function ($segment) use ($countSegmentasiByKomoditas, $komoditas) {
|
||||
|
||||
return [
|
||||
'name' => $segment['name'],
|
||||
'data' => $komoditas->map(function ($item) use ($countSegmentasiByKomoditas, $segment) {
|
||||
|
||||
return optional(
|
||||
$countSegmentasiByKomoditas->first(function ($row) use ($item, $segment) {
|
||||
return $row->komoditas_id == $item->id
|
||||
&& $row->segmen == $segment['name'];
|
||||
})
|
||||
)->total ?? 0;
|
||||
|
||||
})->values(),
|
||||
];
|
||||
|
||||
})->values();
|
||||
|
||||
$segmenDominan = $mapSegmentasi
|
||||
->groupBy('desa_kelurahan_id')
|
||||
->map(function ($items) {
|
||||
return $items->sortByDesc('total')->first();
|
||||
});
|
||||
|
||||
$mapAvgSkorSegmentasi->each(function ($item) use ($segmenDominan) {
|
||||
$dominan = $segmenDominan->get($item->desa_kelurahan_id);
|
||||
|
||||
$item->segmen_dominan = $dominan?->segmen;
|
||||
$item->jumlah_dominan = $dominan?->total;
|
||||
});
|
||||
|
||||
$segmentasiByDesa = $mapAvgSkorSegmentasi->keyBy('desa_kelurahan_id');
|
||||
$desaLookup = $desaKelurahan->keyBy('desa_kelurahan_id');
|
||||
|
||||
$mapDesaSegmentasi = $segmentasiByDesa->map(function ($segmentasi, $desaId) use ($desaLookup) {
|
||||
$desa = $desaLookup->get($desaId);
|
||||
|
||||
if (!$desa) {
|
||||
return null;
|
||||
}
|
||||
|
||||
$desa->segmentasi = $segmentasi;
|
||||
|
||||
return $desa;
|
||||
})->filter()->values();
|
||||
@endphp
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<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">{{ $countPetani }}</h4>
|
||||
</div>
|
||||
<p class="mb-1">Total Petani</p>
|
||||
<p class="mb-0">
|
||||
<span class="text-heading fw-medium me-2">{{ $countKomoditas }}</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">{{ number_format($sumLahan, 2, ',', '.') }} ha</h4>
|
||||
</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">{{ number_format($avgLahan, 2, ',', '.') }}</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">{{ number_format($avgSkor, 2, ',', '.') }}</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">{{ $avgSegmen }}</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">{{ $countDesa }}</h4>
|
||||
</div>
|
||||
<p class="mb-1">Jumlah Desa Sasaran</p>
|
||||
<p class="mb-0">
|
||||
<span class="text-heading fw-medium me-2">{{ $countKecamatan }}</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>
|
||||
|
||||
@foreach ($segments as $segment)
|
||||
@php
|
||||
$total = $countSegmentasi->where('segmen', $segment['name'])->sum('total');
|
||||
$persen = $countPetani ? ($total / $countPetani) * 100 : 0;
|
||||
@endphp
|
||||
|
||||
<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_format($total) }}</td>
|
||||
<td class="text-end pe-0">{{ number_format($persen, 2) }}%</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</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>
|
||||
@foreach ($mapDesaSegmentasi as $desa)
|
||||
@php
|
||||
$style = $segmentStyles[$desa->segmentasi->segmen] ?? null;
|
||||
$styleDominan = $segmentStyles[$desa->segmentasi->segmen_dominan] ?? null;
|
||||
@endphp
|
||||
<tr>
|
||||
<td class="pe-0">{{ $desa->desa_kelurahan }}</td>
|
||||
<td class="text-end pe-0">{{ number_format($desa->segmentasi->jumlah_petani) }}</td>
|
||||
<td class="pe-0">
|
||||
<span class="badge bg-{{ $style['color'] ?? 'secondary' }}">
|
||||
{{ $desa->segmentasi->segmen }}
|
||||
</span>
|
||||
({{ number_format($desa->segmentasi->skor, 2, ',', '.') }})
|
||||
</td>
|
||||
<td class="pe-0">
|
||||
<span class="badge bg-{{ $styleDominan['color'] ?? 'secondary' }}">
|
||||
{{ $desa->segmentasi->segmen_dominan }}
|
||||
</span>
|
||||
({{ number_format($desa->segmentasi->jumlah_dominan) }} petani)
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</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>
|
||||
</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>
|
||||
@foreach ($daftarPetani as $item)
|
||||
@php
|
||||
$style = $segmentStyles[$item->segmen()] ?? null;
|
||||
@endphp
|
||||
<tr data-desa="{{ $item->desa_kelurahan_id }}">
|
||||
<td class="pe-0">{{ $item->nama }}</td>
|
||||
<td class="pe-0">{{ $item->desaKelurahan?->nama }}</td>
|
||||
<td class="pe-0">{{ $item->komoditas?->nama }}</td>
|
||||
<td class="text-end pe-0">{{ number_format($item->lahans?->sum('luas_lahan'), 2, ',', '.') }}</td>
|
||||
<td class="text-end pe-0">{{ $item->skor ? number_format($item->skor?->skor_kesiapan_adopsi, 2, ',', '.') : '' }}</td>
|
||||
<td class="pe-0">
|
||||
@if ($item->skor)
|
||||
<span class="badge bg-{{ $style['color'] ?? 'secondary' }}">
|
||||
{{ $item->segmen() }}
|
||||
</span>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</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>
|
||||
$('.data-table').DataTable({
|
||||
"paging": false,
|
||||
"lengthChange": true,
|
||||
"searching": false,
|
||||
"ordering": false,
|
||||
"info": false,
|
||||
"autoWidth": false,
|
||||
"responsive": false,
|
||||
"scrollX": true
|
||||
});
|
||||
|
||||
var tableDesa = $('#table-desa').DataTable({
|
||||
"paging": true,
|
||||
"lengthChange": false,
|
||||
"searching": false,
|
||||
"ordering": true,
|
||||
"info": false,
|
||||
"autoWidth": false,
|
||||
"responsive": false,
|
||||
"scrollX": true,
|
||||
"pageLength": 5,
|
||||
});
|
||||
|
||||
var tablePetani = $('#table-petani').DataTable({
|
||||
"paging": true,
|
||||
"lengthChange": true,
|
||||
"searching": true,
|
||||
"ordering": true,
|
||||
"info": true,
|
||||
"autoWidth": false,
|
||||
"responsive": false,
|
||||
"scrollX": true
|
||||
});
|
||||
|
||||
let selectedDesa = null;
|
||||
|
||||
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
|
||||
if (!selectedDesa) return true;
|
||||
|
||||
if (settings.nTable.id === 'table-petani') {
|
||||
const row = tablePetani.row(dataIndex).node();
|
||||
return $(row).data('desa') == selectedDesa;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
// Chart Segmentasi Petani
|
||||
var optionsSegmentasiPetani = {
|
||||
series: @json($seriesSegmentasi),
|
||||
chart: {
|
||||
type: 'donut',
|
||||
width: 320,
|
||||
},
|
||||
labels: @json(array_column($segments, 'name')),
|
||||
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,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
var chartSegmentasiPetani = new ApexCharts(document.querySelector('#chart-segmentasi-petani'), optionsSegmentasiPetani)
|
||||
chartSegmentasiPetani.render()
|
||||
|
||||
// Chart Segmentasi Petani By Komoditas
|
||||
var optionsSegmentasiPetaniByKomoditas = {
|
||||
series: @json($seriesSegmentasiKomoditas),
|
||||
colors: @json($colors),
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 240,
|
||||
stacked: true,
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 1,
|
||||
colors: ['#fff'],
|
||||
},
|
||||
title: {
|
||||
show: false,
|
||||
},
|
||||
xaxis: {
|
||||
categories: @json($komoditas->pluck('nama')),
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val + ' petani'
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'left',
|
||||
offsetX: 40,
|
||||
},
|
||||
}
|
||||
|
||||
// Chart Segmentasi Petani By Komoditas
|
||||
var chartSegmentasiPetaniByKomoditas = new ApexCharts(document.querySelector('#chart-segmentasi-petani-komoditas'), optionsSegmentasiPetaniByKomoditas)
|
||||
chartSegmentasiPetaniByKomoditas.render()
|
||||
|
||||
// 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;
|
||||
|
||||
var radarDimensi = new ApexCharts($("#chart-dimensi")[0],
|
||||
options = {
|
||||
chart: {
|
||||
height: 240,
|
||||
type: 'radar',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Rata-rata Dimensi Kesiapan Adopsi",
|
||||
data: [{{ round($avgDimensi->skor_d2_sistem_praktik_budidaya, 2) }},
|
||||
{{ round($avgDimensi->skor_d4_sosial_ekonomi, 2) }},
|
||||
{{ round($avgDimensi->skor_d6_rantai_nilai_akses_pasar, 2) }}]
|
||||
}
|
||||
],
|
||||
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, config.colors.info],
|
||||
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, 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();
|
||||
|
||||
var radarKomponen = new ApexCharts($("#chart-komponen")[0],
|
||||
options = {
|
||||
chart: {
|
||||
height: 240,
|
||||
type: 'radar',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Rata-rata Komponen Kesiapan Adopsi",
|
||||
data: [
|
||||
{{ round($avgKomponen->skor_komp_1_d4_k3_motivasi_kapasitas_adopsi, 2) }},
|
||||
{{ round($avgKomponen->skor_komp_2_d4_k2_ekonomi_rumah_tangga, 2) }},
|
||||
{{ round($avgKomponen->skor_komp_3_d2_praktik_budidaya_gap, 2) }},
|
||||
{{ round($avgKomponen->skor_komp_4_d4_k4_keterlibatan_kelembagaan, 2) }},
|
||||
{{ round($avgKomponen->skor_komp_5_d4_k5_k6_akses_kebebasan_keuangan, 2) }},
|
||||
{{ round($avgKomponen->skor_komp_6_d6_k1_k4_k5_rantai_nilai_akses_pasar, 2) }}
|
||||
]
|
||||
}
|
||||
],
|
||||
lotOptions: {
|
||||
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, config.colors.info],
|
||||
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();
|
||||
|
||||
// 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 desaData = @json($mapDesaSegmentasi);
|
||||
const warnaSegmen = {
|
||||
@foreach($segments as $segment)
|
||||
"{{ $segment['name'] }}": "var(--bs-{{ $segment['color'] }})",
|
||||
@endforeach
|
||||
};
|
||||
const group = L.featureGroup().addTo(map);
|
||||
desaData.forEach(desa => {
|
||||
if (!desa.path) return;
|
||||
|
||||
const coordinates = JSON.parse(desa.path);
|
||||
|
||||
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}<br>
|
||||
Indeks: ${Number(desa.segmentasi.skor).toFixed(2)}<br>
|
||||
Segmen: <b>${desa.segmentasi.segmen}</b><br>
|
||||
Segmen Dominan: <b>${desa.segmentasi.segmen_dominan}</b> (${desa.segmentasi.jumlah_dominan} petani)
|
||||
`);
|
||||
polygon.on('click', function () {
|
||||
selectedDesa = desa.desa_kelurahan_id;
|
||||
tablePetani.draw();
|
||||
});
|
||||
|
||||
polygon.addTo(group);
|
||||
});
|
||||
|
||||
if (group.getLayers().length > 0) {
|
||||
map.fitBounds(group.getBounds(), {
|
||||
padding: [20, 20]
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
@endpush
|
||||
File diff suppressed because it is too large
Load Diff
@@ -43,7 +43,7 @@ $segments = [
|
||||
</div>
|
||||
<h4 class="mb-0">{{ $totalPetani }}</h4>
|
||||
</div>
|
||||
<p class="mb-1">Petani</p>
|
||||
<p class="mb-1">Total Petani</p>
|
||||
<p class="mb-0">
|
||||
<span class="text-heading fw-medium me-2">{{ $petaniSummary->count('total') }}</span>
|
||||
<small class="text-body-secondary">komoditas utama</small>
|
||||
|
||||
@@ -68,6 +68,23 @@
|
||||
</ul>
|
||||
@endif
|
||||
|
||||
@if(in_array($userRole, ['super_admin', 'admin']) && env('APP_NAME') == 'AgroMonev')
|
||||
<ul class="menu-sub">
|
||||
<li class="menu-item {{ request()->routeIs('dashboard.demografi-petani') ? 'active' : '' }}">
|
||||
<a href="{{ route('dashboard.demografi-petani') }}" class="menu-link">
|
||||
<div data-i18n="Demografi Petani">Demografi Petani</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-sub">
|
||||
<li class="menu-item {{ request()->routeIs('dashboard.indikator-pertanian') ? 'active' : '' }}">
|
||||
<a href="{{ route('dashboard.indikator-pertanian') }}" class="menu-link">
|
||||
<div data-i18n="Indikator Pertanian">Indikator Pertanian</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@endif
|
||||
|
||||
@if(in_array($userRole, ['super_admin', 'admin', 'fasilitator']) && env('APP_NAME') == 'AgroMonev')
|
||||
<ul class="menu-sub">
|
||||
<li class="menu-item {{ request()->routeIs('dashboard.survey-petani') ? 'active' : '' }}">
|
||||
|
||||
Reference in New Issue
Block a user