1569 lines
49 KiB
PHP
1569 lines
49 KiB
PHP
@extends('layout.main')
|
|
|
|
@push('styles')
|
|
<link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}" />
|
|
<style>
|
|
#ageGroupChart .apexcharts-tooltip,
|
|
#educationChart .apexcharts-tooltip,
|
|
#landAreaChart .apexcharts-tooltip,
|
|
#incomeChart .apexcharts-tooltip {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
overflow: visible !important;
|
|
}
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="container-xxl flex-grow-1 container-p-y">
|
|
<div class="row g-6">
|
|
<!-- Card Border Shadow -->
|
|
<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-truck icon-28px"></i
|
|
></span>
|
|
</div>
|
|
<h4 class="mb-0">{{ $data['total_petani'] }}</h4>
|
|
</div>
|
|
<p class="mb-1">Total Petani</p>
|
|
<p class="mb-0">
|
|
<!-- <span class="text-heading fw-medium me-2">+18.2%</span> -->
|
|
<small class="text-body-secondary">Terdata</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-sm-6">
|
|
<div class="card card-border-shadow-secondary 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-secondary"
|
|
><i class="icon-base ti tabler-alert-triangle icon-28px"></i
|
|
></span>
|
|
</div>
|
|
<h4 class="mb-0">{{ $data['petani_lakilaki'] }}</h4>
|
|
</div>
|
|
<p class="mb-1">Petani Laki-laki</p>
|
|
<p class="mb-0">
|
|
<span class="text-heading fw-medium me-2">{{ $data['total_petani'] > 0 ? round(($data['petani_lakilaki'] / $data['total_petani']) * 100) : 0 }}%</span>
|
|
<small class="text-body-secondary">Dari Total Petani</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-sm-6">
|
|
<div class="card card-border-shadow-danger 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-danger"
|
|
><i class="icon-base ti tabler-git-fork icon-28px"></i
|
|
></span>
|
|
</div>
|
|
<h4 class="mb-0">{{ $data['petani_perempuan'] }}</h4>
|
|
</div>
|
|
<p class="mb-1">Petani Perempuan</p>
|
|
<p class="mb-0">
|
|
<span class="text-heading fw-medium me-2">{{ $data['total_petani'] > 0 ? round(($data['petani_perempuan'] / $data['total_petani']) * 100) : 0 }}%</span>
|
|
<small class="text-body-secondary">Dari Total Petani</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 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-clock icon-28px"></i
|
|
></span>
|
|
</div>
|
|
<h4 class="mb-0">{{ $data['total_komoditas'] }}</h4>
|
|
</div>
|
|
<p class="mb-1">Total Komoditas</p>
|
|
<p class="mb-0">
|
|
<!-- <span class="text-heading fw-medium me-2">-2.5%</span> -->
|
|
<small class="text-body-secondary">Dari Seluruh Petani</small>
|
|
</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-clock icon-28px"></i
|
|
></span>
|
|
</div>
|
|
<h4 class="mb-0">{{ $data['total_luas_lahan'] }}</h4>
|
|
</div>
|
|
<p class="mb-1">Total Luas Lahan</p>
|
|
<p class="mb-0">
|
|
<span class="text-heading fw-medium me-2">{{ $data['ratarata_luas_lahan'] ? number_format($data['ratarata_luas_lahan'], 2) : 0 }}</span>
|
|
<small class="text-body-secondary">Rata-rata per Lahan</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/ Card Border Shadow -->
|
|
<!-- Vehicles overview -->
|
|
<div class="col-xxl-4 col-lg-6">
|
|
<div class="card h-100">
|
|
<div class="card-header d-flex align-items-center justify-content-between">
|
|
<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>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="genderChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xxl-4 col-lg-6">
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
<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>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div id="ageGroupChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xxl-4 col-lg-6">
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
<div class="card-title mb-0">
|
|
<h5 class="m-0 me-2">Tingkat Pendidikan</h5>
|
|
|
|
<small class="text-body-secondary">
|
|
Distribusi petani berdasarkan pendidikan terakhir
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div id="educationChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xxl-4 col-lg-6">
|
|
<div class="card h-100">
|
|
<div class="card-header d-flex align-items-center justify-content-between">
|
|
<div class="card-title mb-0">
|
|
<h5 class="m-0 me-2">
|
|
Komoditas Utama yang Dikelola
|
|
</h5>
|
|
|
|
<small class="text-body-secondary">
|
|
Jumlah petani berdasarkan komoditas utama
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div id="commodityChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xxl-4 col-lg-6">
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
<div class="card-title mb-0">
|
|
<h5 class="m-0 me-2">
|
|
Luas Lahan yang Dimiliki
|
|
</h5>
|
|
|
|
<small class="text-body-secondary">
|
|
Distribusi petani berdasarkan luas lahan garapan
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div id="landAreaChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xxl-4 col-lg-6">
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
<div class="card-title mb-0">
|
|
<h5 class="m-0 me-2">
|
|
Rentang Penghasilan per Bulan
|
|
</h5>
|
|
|
|
<small class="text-body-secondary">
|
|
Distribusi petani berdasarkan penghasilan dari usaha tani per musim
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div id="incomeChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xxl-12 col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-3">
|
|
<div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<h5 class="card-title mb-0">Daftar Petani</h5>
|
|
<span class="badge bg-label-primary">{{ $daftarPetani->total() }} petani</span>
|
|
</div>
|
|
<small class="text-body-secondary">Menampilkan data petani sesuai data yang tersedia</small>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center gap-2">
|
|
<div class="input-group input-group-merge" style="width: 220px;">
|
|
<span class="input-group-text"><i class="icon-base ti tabler-search"></i></span>
|
|
<input type="text" class="form-control" placeholder="Cari petani...">
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn btn-outline-secondary"
|
|
>
|
|
<i class="icon-base ti tabler-download me-1"></i>
|
|
Export
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
|
|
<thead>
|
|
<tr>
|
|
<th>ID Petani</th>
|
|
<th>Nama Petani</th>
|
|
<th>Gender</th>
|
|
<th>Umur</th>
|
|
<th>Komoditas</th>
|
|
<th>Luas Lahan</th>
|
|
<th>Pendidikan</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
@forelse ($daftarPetani as $petani)
|
|
|
|
@php
|
|
$umur = $petani->tanggal_lahir
|
|
? \Carbon\Carbon::parse($petani->tanggal_lahir)->age
|
|
: null;
|
|
|
|
$totalLuas = $petani->lahan
|
|
? $petani->lahan->sum('luas_lahan')
|
|
: 0;
|
|
@endphp
|
|
|
|
<tr>
|
|
<td>
|
|
<span class="text-heading fw-medium">
|
|
{{ $petani->kode ?? $petani->id }}
|
|
</span>
|
|
</td>
|
|
|
|
<td>
|
|
<span class="text-heading fw-medium">
|
|
{{ $petani->nama ?? '-' }}
|
|
</span>
|
|
</td>
|
|
|
|
<td>
|
|
@if ($petani->jenis_kelamin == 1)
|
|
<span class="badge bg-label-primary">
|
|
Laki-laki
|
|
</span>
|
|
@else
|
|
<span class="badge bg-label-danger">
|
|
Perempuan
|
|
</span>
|
|
@endif
|
|
</td>
|
|
|
|
<td>
|
|
{{ $umur ? $umur . ' tahun' : '-' }}
|
|
</td>
|
|
|
|
<td>
|
|
{{ $petani->komoditas?->nama ?? '-' }}
|
|
</td>
|
|
|
|
<td>
|
|
{{ $petani->total_luas_lahan
|
|
? number_format($petani->total_luas_lahan, 2, ',', '.') . ' ha'
|
|
: '-'
|
|
}}
|
|
</td>
|
|
|
|
<td>
|
|
@php
|
|
$pendidikanRaw = $petani->getRawOriginal('pendidikan_terakhir');
|
|
|
|
$pendidikan = match ($pendidikanRaw) {
|
|
'01_tidak_sekolah' => 'Tidak Sekolah',
|
|
'02_sd' => 'SD',
|
|
'03_smp' => 'SMP',
|
|
'04_sma' => 'SMA',
|
|
'05_diploma' => 'Diploma',
|
|
'06_sarjana' => 'Sarjana',
|
|
'07_magister' => 'Magister',
|
|
default => '-',
|
|
};
|
|
@endphp
|
|
|
|
{{ $pendidikan }}
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
@empty
|
|
|
|
<tr>
|
|
<td
|
|
colspan="7"
|
|
class="text-center py-5 text-body-secondary"
|
|
>
|
|
Belum ada data petani.
|
|
</td>
|
|
</tr>
|
|
|
|
@endforelse
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="card-footer d-flex flex-wrap justify-content-between align-items-center gap-3">
|
|
|
|
<small class="text-body-secondary">
|
|
Menampilkan
|
|
{{ $daftarPetani->firstItem() ?? 0 }}
|
|
-
|
|
{{ $daftarPetani->lastItem() ?? 0 }}
|
|
dari
|
|
{{ $daftarPetani->total() }}
|
|
petani
|
|
</small>
|
|
|
|
<div>
|
|
{{ $daftarPetani->onEachSide(1)->links('pagination::bootstrap-5') }}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="{{ asset('assets/vendor/libs/apex-charts/apexcharts.js') }}"></script>
|
|
<script>
|
|
'use strict';
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const genderChartEl = document.querySelector('#genderChart');
|
|
|
|
if (!genderChartEl) {
|
|
return;
|
|
}
|
|
|
|
const headingColor = config.colors.headingColor;
|
|
const legendColor = config.colors.bodyColor;
|
|
const fontFamily = config.fontFamily;
|
|
|
|
const lakiLaki = Number(
|
|
@json($data['petani_lakilaki'] ?? 0)
|
|
);
|
|
|
|
const perempuan = Number(
|
|
@json($data['petani_perempuan'] ?? 0)
|
|
);
|
|
|
|
const totalPetani = lakiLaki + perempuan;
|
|
|
|
const genderChartConfig = {
|
|
chart: {
|
|
height: 365,
|
|
parentHeightOffset: 0,
|
|
type: 'donut',
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
|
|
labels: ['Laki-laki', 'Perempuan'],
|
|
|
|
series: [lakiLaki, perempuan],
|
|
|
|
colors: [
|
|
config.colors.primary,
|
|
config.colors.secondary
|
|
],
|
|
|
|
stroke: { width: 0},
|
|
|
|
dataLabels: {enabled: false},
|
|
|
|
legend: {
|
|
show: true,
|
|
position: 'bottom',
|
|
offsetY: 10,
|
|
|
|
markers: {
|
|
size: 4,
|
|
strokeWidth: 0
|
|
},
|
|
|
|
itemMargin: {
|
|
horizontal: 15,
|
|
vertical: 5
|
|
},
|
|
|
|
fontSize: '13px',
|
|
fontFamily: fontFamily,
|
|
fontWeight: 400,
|
|
|
|
labels: {
|
|
colors: legendColor,
|
|
useSeriesColors: false
|
|
},
|
|
|
|
formatter: function (seriesName, options) {
|
|
const value =
|
|
options.w.globals.series[
|
|
options.seriesIndex
|
|
];
|
|
|
|
const percentage = totalPetani > 0
|
|
? ((value / totalPetani) * 100).toFixed(1)
|
|
: '0.0';
|
|
|
|
return `${seriesName}: ${value} (${percentage}%)`;
|
|
}
|
|
},
|
|
|
|
tooltip: {
|
|
theme: 'dark',
|
|
|
|
y: {
|
|
formatter: function (value) {
|
|
const percentage = totalPetani > 0
|
|
? ((value / totalPetani) * 100).toFixed(1)
|
|
: '0.0';
|
|
|
|
return `${value} petani (${percentage}%)`;
|
|
}
|
|
}
|
|
},
|
|
|
|
grid: {
|
|
padding: {
|
|
top: 15
|
|
}
|
|
},
|
|
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
size: '75%',
|
|
|
|
labels: {
|
|
show: true,
|
|
|
|
value: {
|
|
fontSize: '38px',
|
|
fontFamily: fontFamily,
|
|
color: headingColor,
|
|
fontWeight: 500,
|
|
offsetY: -20,
|
|
|
|
formatter: function (value) {
|
|
return parseInt(value);
|
|
}
|
|
},
|
|
|
|
name: {
|
|
offsetY: 30,
|
|
fontFamily: fontFamily
|
|
},
|
|
|
|
total: {
|
|
show: true,
|
|
showAlways: true,
|
|
fontSize: '15px',
|
|
fontFamily: fontFamily,
|
|
color: legendColor,
|
|
label: 'Total Petani',
|
|
|
|
formatter: function () {
|
|
return totalPetani;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
responsive: [
|
|
{
|
|
breakpoint: 1025,
|
|
options: {
|
|
chart: {
|
|
height: 380
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
const genderChart = new ApexCharts(
|
|
genderChartEl,
|
|
genderChartConfig
|
|
);
|
|
|
|
genderChart.render();
|
|
|
|
const ageGroupChartEl = document.querySelector('#ageGroupChart');
|
|
|
|
if (ageGroupChartEl) {
|
|
|
|
const ageGroupChartConfig = {
|
|
chart: {
|
|
height: 320,
|
|
type: 'bar',
|
|
parentHeightOffset: 0,
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
|
|
series: [
|
|
{
|
|
name: 'Petani',
|
|
data: [
|
|
@json($data['kelompok_umur']['kurang_30']),
|
|
@json($data['kelompok_umur']['30_39']),
|
|
@json($data['kelompok_umur']['40_49']),
|
|
@json($data['kelompok_umur']['50_59']),
|
|
@json($data['kelompok_umur']['60_keatas'])
|
|
]
|
|
}
|
|
],
|
|
|
|
colors: [
|
|
config.colors.primary
|
|
],
|
|
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 4,
|
|
columnWidth: '45%',
|
|
distributed: false,
|
|
dataLabels: {
|
|
position: 'top'
|
|
}
|
|
}
|
|
},
|
|
|
|
dataLabels: {
|
|
enabled: true,
|
|
offsetY: -20,
|
|
|
|
style: {
|
|
fontSize: '13px',
|
|
fontFamily: fontFamily,
|
|
fontWeight: 500,
|
|
colors: [
|
|
headingColor
|
|
]
|
|
},
|
|
|
|
formatter: function (value) {
|
|
return value;
|
|
}
|
|
},
|
|
|
|
xaxis: {
|
|
categories: [
|
|
'< 30',
|
|
'30 - 39',
|
|
'40 - 49',
|
|
'50 - 59',
|
|
'≥ 60'
|
|
],
|
|
|
|
labels: {
|
|
style: {
|
|
colors: legendColor,
|
|
fontSize: '12px',
|
|
fontFamily: fontFamily
|
|
},
|
|
|
|
formatter: function (value) {
|
|
return value + ' tahun';
|
|
}
|
|
},
|
|
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
|
|
axisTicks: {
|
|
show: false
|
|
}
|
|
},
|
|
|
|
yaxis: {
|
|
min: 0,
|
|
|
|
labels: {
|
|
style: {
|
|
colors: legendColor,
|
|
fontSize: '12px',
|
|
fontFamily: fontFamily
|
|
},
|
|
|
|
formatter: function (value) {
|
|
return Math.floor(value);
|
|
}
|
|
},
|
|
|
|
title: {
|
|
text: 'Petani',
|
|
style: {
|
|
color: legendColor,
|
|
fontSize: '12px',
|
|
fontFamily: fontFamily,
|
|
fontWeight: 400
|
|
}
|
|
}
|
|
},
|
|
|
|
grid: {
|
|
borderColor: config.colors.borderColor,
|
|
strokeDashArray: 5,
|
|
|
|
xaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
},
|
|
|
|
padding: {
|
|
top: 20
|
|
}
|
|
},
|
|
|
|
legend: {
|
|
show: false
|
|
},
|
|
|
|
tooltip: {
|
|
custom: function({ series, seriesIndex, dataPointIndex, w }) {
|
|
const value = series[seriesIndex][dataPointIndex];
|
|
const label = w.globals.labels[dataPointIndex];
|
|
|
|
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);
|
|
"
|
|
>
|
|
${label} tahun:
|
|
<strong>${value} petani</strong>
|
|
</div>
|
|
`;
|
|
}
|
|
},
|
|
|
|
responsive: [
|
|
{
|
|
breakpoint: 576,
|
|
|
|
options: {
|
|
chart: {
|
|
height: 300
|
|
},
|
|
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: '55%'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
const ageGroupChart = new ApexCharts(
|
|
ageGroupChartEl,
|
|
ageGroupChartConfig
|
|
);
|
|
|
|
ageGroupChart.render();
|
|
|
|
const educationChartEl = document.querySelector('#educationChart');
|
|
|
|
if (educationChartEl) {
|
|
|
|
const educationData = [
|
|
Number(@json($data['pendidikan']['tidak_sekolah'] ?? 0)),
|
|
Number(@json($data['pendidikan']['sd'] ?? 0)),
|
|
Number(@json($data['pendidikan']['smp'] ?? 0)),
|
|
Number(@json($data['pendidikan']['sma'] ?? 0)),
|
|
Number(@json($data['pendidikan']['diploma'] ?? 0)),
|
|
Number(@json($data['pendidikan']['s1_keatas'] ?? 0))
|
|
];
|
|
|
|
const totalPendidikan = educationData.reduce(
|
|
(total, value) => total + value,
|
|
0
|
|
);
|
|
|
|
const educationChartConfig = {
|
|
chart: {
|
|
height: 330,
|
|
type: 'bar',
|
|
parentHeightOffset: 0,
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
|
|
series: [
|
|
{
|
|
name: 'Petani',
|
|
data: educationData
|
|
}
|
|
],
|
|
|
|
colors: [
|
|
config.colors.success
|
|
],
|
|
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: true,
|
|
borderRadius: 4,
|
|
barHeight: '55%',
|
|
dataLabels: {
|
|
position: 'top'
|
|
}
|
|
}
|
|
},
|
|
|
|
dataLabels: {
|
|
enabled: true,
|
|
textAnchor: 'start',
|
|
offsetX: 6,
|
|
|
|
style: {
|
|
fontSize: '12px',
|
|
fontFamily: fontFamily,
|
|
fontWeight: 500,
|
|
colors: [
|
|
headingColor
|
|
]
|
|
},
|
|
|
|
formatter: function (value) {
|
|
const percentage = totalPendidikan > 0
|
|
? ((value / totalPendidikan) * 100).toFixed(1)
|
|
: '0.0';
|
|
|
|
return `${value} (${percentage}%)`;
|
|
}
|
|
},
|
|
|
|
xaxis: {
|
|
categories: [
|
|
'Tidak Sekolah',
|
|
'SD / Sederajat',
|
|
'SMP / Sederajat',
|
|
'SMA / Sederajat',
|
|
'Diploma',
|
|
'S1 ke atas'
|
|
],
|
|
|
|
labels: {
|
|
style: {
|
|
colors: legendColor,
|
|
fontSize: '12px',
|
|
fontFamily: fontFamily
|
|
},
|
|
|
|
formatter: function (value) {
|
|
return Math.floor(value);
|
|
}
|
|
},
|
|
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
|
|
axisTicks: {
|
|
show: false
|
|
},
|
|
|
|
title: {
|
|
text: 'Petani',
|
|
|
|
style: {
|
|
color: legendColor,
|
|
fontSize: '12px',
|
|
fontFamily: fontFamily,
|
|
fontWeight: 400
|
|
}
|
|
}
|
|
},
|
|
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: legendColor,
|
|
fontSize: '12px',
|
|
fontFamily: fontFamily
|
|
}
|
|
}
|
|
},
|
|
|
|
grid: {
|
|
borderColor: config.colors.borderColor,
|
|
strokeDashArray: 5,
|
|
|
|
xaxis: {
|
|
lines: {
|
|
show: true
|
|
}
|
|
},
|
|
|
|
yaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
},
|
|
|
|
padding: {
|
|
right: 55
|
|
}
|
|
},
|
|
|
|
legend: {
|
|
show: false
|
|
},
|
|
|
|
tooltip: {
|
|
custom: function({
|
|
series,
|
|
seriesIndex,
|
|
dataPointIndex,
|
|
w
|
|
}) {
|
|
const value =
|
|
series[seriesIndex][dataPointIndex];
|
|
|
|
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);
|
|
"
|
|
>
|
|
${label}:
|
|
<strong>
|
|
${value} petani (${percentage}%)
|
|
</strong>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
};
|
|
|
|
const educationChart = new ApexCharts(
|
|
educationChartEl,
|
|
educationChartConfig
|
|
);
|
|
|
|
educationChart.render();
|
|
}
|
|
|
|
const commodityChartEl = document.querySelector('#commodityChart');
|
|
|
|
if (commodityChartEl) {
|
|
|
|
const commodityLabels = @json(
|
|
$data['komoditas_utama']['labels'] ?? []
|
|
);
|
|
|
|
const commoditySeries = @json(
|
|
$data['komoditas_utama']['series'] ?? []
|
|
);
|
|
|
|
const totalCommodityFarmers = commoditySeries.reduce(
|
|
(total, value) => total + Number(value),
|
|
0
|
|
);
|
|
|
|
const commodityChartConfig = {
|
|
chart: {
|
|
height: 330,
|
|
type: 'donut',
|
|
parentHeightOffset: 0,
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
|
|
labels: commodityLabels,
|
|
|
|
series: commoditySeries,
|
|
|
|
colors: [
|
|
config.colors.primary,
|
|
config.colors.warning,
|
|
config.colors.success,
|
|
config.colors.info,
|
|
config.colors.danger,
|
|
config.colors.secondary
|
|
],
|
|
|
|
stroke: {
|
|
width: 0
|
|
},
|
|
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
|
|
legend: {
|
|
show: true,
|
|
position: 'right',
|
|
horizontalAlign: 'center',
|
|
|
|
markers: {
|
|
size: 5,
|
|
strokeWidth: 0
|
|
},
|
|
|
|
itemMargin: {
|
|
horizontal: 8,
|
|
vertical: 7
|
|
},
|
|
|
|
fontSize: '12px',
|
|
fontFamily: fontFamily,
|
|
fontWeight: 400,
|
|
|
|
labels: {
|
|
colors: legendColor,
|
|
useSeriesColors: false
|
|
},
|
|
|
|
formatter: function(seriesName, options) {
|
|
|
|
const value =
|
|
options.w.globals.series[
|
|
options.seriesIndex
|
|
];
|
|
|
|
const percentage =
|
|
totalCommodityFarmers > 0
|
|
? (
|
|
(
|
|
value /
|
|
totalCommodityFarmers
|
|
) * 100
|
|
).toFixed(1)
|
|
: '0.0';
|
|
|
|
return `${seriesName}: ${value} (${percentage}%)`;
|
|
}
|
|
},
|
|
|
|
tooltip: {
|
|
custom: function({
|
|
series,
|
|
seriesIndex,
|
|
w
|
|
}) {
|
|
|
|
const value = series[seriesIndex];
|
|
|
|
const label =
|
|
w.globals.labels[seriesIndex];
|
|
|
|
const percentage =
|
|
totalCommodityFarmers > 0
|
|
? (
|
|
(
|
|
value /
|
|
totalCommodityFarmers
|
|
) * 100
|
|
).toFixed(1)
|
|
: '0.0';
|
|
|
|
const color =
|
|
w.globals.colors[seriesIndex];
|
|
|
|
return `
|
|
<div
|
|
style="
|
|
background: ${color};
|
|
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>
|
|
`;
|
|
}
|
|
},
|
|
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
size: '68%',
|
|
|
|
labels: {
|
|
show: true,
|
|
|
|
value: {
|
|
fontSize: '30px',
|
|
fontFamily: fontFamily,
|
|
color: headingColor,
|
|
fontWeight: 500,
|
|
offsetY: -15,
|
|
|
|
formatter: function(value) {
|
|
return parseInt(value);
|
|
}
|
|
},
|
|
|
|
name: {
|
|
offsetY: 25,
|
|
fontFamily: fontFamily
|
|
},
|
|
|
|
total: {
|
|
show: true,
|
|
showAlways: true,
|
|
fontSize: '13px',
|
|
fontFamily: fontFamily,
|
|
color: legendColor,
|
|
label: 'Petani',
|
|
|
|
formatter: function() {
|
|
return totalCommodityFarmers;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
responsive: [
|
|
{
|
|
breakpoint: 1400,
|
|
|
|
options: {
|
|
chart: {
|
|
height: 350
|
|
},
|
|
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
},
|
|
|
|
{
|
|
breakpoint: 576,
|
|
|
|
options: {
|
|
chart: {
|
|
height: 330
|
|
},
|
|
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
const commodityChart = new ApexCharts(
|
|
commodityChartEl,
|
|
commodityChartConfig
|
|
);
|
|
|
|
commodityChart.render();
|
|
}
|
|
|
|
const landAreaChartEl = document.querySelector('#landAreaChart');
|
|
|
|
if (landAreaChartEl) {
|
|
|
|
const landAreaData = [
|
|
Number(@json($data['luas_lahan']['kurang_05'] ?? 0)),
|
|
Number(@json($data['luas_lahan']['05_1'] ?? 0)),
|
|
Number(@json($data['luas_lahan']['1_2'] ?? 0)),
|
|
Number(@json($data['luas_lahan']['lebih_2'] ?? 0))
|
|
];
|
|
|
|
const totalLandFarmers = landAreaData.reduce(
|
|
(total, value) => total + value,
|
|
0
|
|
);
|
|
|
|
const landAreaChartConfig = {
|
|
chart: {
|
|
height: 330,
|
|
type: 'bar',
|
|
parentHeightOffset: 0,
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
|
|
series: [
|
|
{
|
|
name: 'Petani',
|
|
data: landAreaData
|
|
}
|
|
],
|
|
|
|
colors: [
|
|
config.colors.warning
|
|
],
|
|
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: true,
|
|
borderRadius: 4,
|
|
barHeight: '50%',
|
|
dataLabels: {
|
|
position: 'top'
|
|
}
|
|
}
|
|
},
|
|
|
|
dataLabels: {
|
|
enabled: true,
|
|
textAnchor: 'start',
|
|
offsetX: 6,
|
|
|
|
style: {
|
|
fontSize: '12px',
|
|
fontFamily: fontFamily,
|
|
fontWeight: 500,
|
|
colors: [
|
|
headingColor
|
|
]
|
|
},
|
|
|
|
formatter: function (value) {
|
|
|
|
const percentage = totalLandFarmers > 0
|
|
? (
|
|
(value / totalLandFarmers) * 100
|
|
).toFixed(1)
|
|
: '0.0';
|
|
|
|
return `${value} (${percentage}%)`;
|
|
}
|
|
},
|
|
|
|
xaxis: {
|
|
categories: [
|
|
'< 0,5 ha',
|
|
'0,5 - 1 ha',
|
|
'1 - 2 ha',
|
|
'> 2 ha'
|
|
],
|
|
|
|
labels: {
|
|
style: {
|
|
colors: legendColor,
|
|
fontSize: '12px',
|
|
fontFamily: fontFamily
|
|
},
|
|
|
|
formatter: function (value) {
|
|
return Math.floor(value);
|
|
}
|
|
},
|
|
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
|
|
axisTicks: {
|
|
show: false
|
|
},
|
|
|
|
title: {
|
|
text: 'Petani',
|
|
|
|
style: {
|
|
color: legendColor,
|
|
fontSize: '12px',
|
|
fontFamily: fontFamily,
|
|
fontWeight: 400
|
|
}
|
|
}
|
|
},
|
|
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: legendColor,
|
|
fontSize: '12px',
|
|
fontFamily: fontFamily
|
|
}
|
|
}
|
|
},
|
|
|
|
grid: {
|
|
borderColor: config.colors.borderColor,
|
|
strokeDashArray: 5,
|
|
|
|
xaxis: {
|
|
lines: {
|
|
show: true
|
|
}
|
|
},
|
|
|
|
yaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
},
|
|
|
|
padding: {
|
|
right: 55
|
|
}
|
|
},
|
|
|
|
legend: {
|
|
show: false
|
|
},
|
|
|
|
tooltip: {
|
|
custom: function({
|
|
series,
|
|
seriesIndex,
|
|
dataPointIndex,
|
|
w
|
|
}) {
|
|
|
|
const value =
|
|
series[seriesIndex][dataPointIndex];
|
|
|
|
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);
|
|
"
|
|
>
|
|
${label}:
|
|
|
|
<strong>
|
|
${value} petani
|
|
(${percentage}%)
|
|
</strong>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
};
|
|
|
|
const landAreaChart = new ApexCharts(
|
|
landAreaChartEl,
|
|
landAreaChartConfig
|
|
);
|
|
|
|
landAreaChart.render();
|
|
}
|
|
|
|
const incomeChartEl = document.querySelector('#incomeChart');
|
|
|
|
if (incomeChartEl) {
|
|
|
|
const incomeData = [
|
|
Number(@json($data['penghasilan']['kurang_1'] ?? 0)),
|
|
Number(@json($data['penghasilan']['1_3'] ?? 0)),
|
|
Number(@json($data['penghasilan']['3_5'] ?? 0)),
|
|
Number(@json($data['penghasilan']['5_10'] ?? 0)),
|
|
Number(@json($data['penghasilan']['lebih_10'] ?? 0))
|
|
];
|
|
|
|
const totalIncomeFarmers = incomeData.reduce(
|
|
(total, value) => total + value,
|
|
0
|
|
);
|
|
|
|
const incomeChartConfig = {
|
|
chart: {
|
|
height: 330,
|
|
type: 'bar',
|
|
parentHeightOffset: 0,
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
|
|
series: [
|
|
{
|
|
name: 'Petani',
|
|
data: incomeData
|
|
}
|
|
],
|
|
|
|
colors: [
|
|
config.colors.info
|
|
],
|
|
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: true,
|
|
borderRadius: 4,
|
|
barHeight: '50%',
|
|
dataLabels: {
|
|
position: 'top'
|
|
}
|
|
}
|
|
},
|
|
|
|
dataLabels: {
|
|
enabled: true,
|
|
textAnchor: 'start',
|
|
offsetX: 6,
|
|
|
|
style: {
|
|
fontSize: '12px',
|
|
fontFamily: fontFamily,
|
|
fontWeight: 500,
|
|
colors: [
|
|
headingColor
|
|
]
|
|
},
|
|
|
|
formatter: function (value) {
|
|
const percentage =
|
|
totalIncomeFarmers > 0
|
|
? (
|
|
(value / totalIncomeFarmers) *
|
|
100
|
|
).toFixed(1)
|
|
: '0.0';
|
|
|
|
return `${value} (${percentage}%)`;
|
|
}
|
|
},
|
|
|
|
xaxis: {
|
|
categories: [
|
|
'< Rp1 juta',
|
|
'Rp1 - 3 juta',
|
|
'Rp3 - 5 juta',
|
|
'Rp5 - 10 juta',
|
|
'> Rp10 juta'
|
|
],
|
|
|
|
labels: {
|
|
style: {
|
|
colors: legendColor,
|
|
fontSize: '12px',
|
|
fontFamily: fontFamily
|
|
},
|
|
|
|
formatter: function (value) {
|
|
return Math.floor(value);
|
|
}
|
|
},
|
|
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
|
|
axisTicks: {
|
|
show: false
|
|
},
|
|
|
|
title: {
|
|
text: 'Petani',
|
|
|
|
style: {
|
|
color: legendColor,
|
|
fontSize: '12px',
|
|
fontFamily: fontFamily,
|
|
fontWeight: 400
|
|
}
|
|
}
|
|
},
|
|
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: legendColor,
|
|
fontSize: '12px',
|
|
fontFamily: fontFamily
|
|
}
|
|
}
|
|
},
|
|
|
|
grid: {
|
|
borderColor: config.colors.borderColor,
|
|
strokeDashArray: 5,
|
|
|
|
xaxis: {
|
|
lines: {
|
|
show: true
|
|
}
|
|
},
|
|
|
|
yaxis: {
|
|
lines: {
|
|
show: false
|
|
}
|
|
},
|
|
|
|
padding: {
|
|
right: 55
|
|
}
|
|
},
|
|
|
|
legend: {
|
|
show: false
|
|
},
|
|
|
|
tooltip: {
|
|
custom: function({
|
|
series,
|
|
seriesIndex,
|
|
dataPointIndex,
|
|
w
|
|
}) {
|
|
|
|
const value =
|
|
series[seriesIndex][dataPointIndex];
|
|
|
|
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);
|
|
"
|
|
>
|
|
${label}:
|
|
|
|
<strong>
|
|
${value} petani
|
|
(${percentage}%)
|
|
</strong>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
};
|
|
|
|
const incomeChart = new ApexCharts(
|
|
incomeChartEl,
|
|
incomeChartConfig
|
|
);
|
|
|
|
incomeChart.render();
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
@endpush |