513 lines
27 KiB
PHP
513 lines
27 KiB
PHP
@extends('layout.main')
|
|
@section('styles')
|
|
<style>
|
|
/* Animasi sederhana yang Anda pilih */
|
|
.fade-in { animation: fadeIn 0.4s ease-in-out; }
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Tambahan styling untuk peta interaktif */
|
|
.map-polygon {
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
.map-polygon:hover {
|
|
fill-opacity: 0.5;
|
|
stroke-width: 2;
|
|
}
|
|
.map-point {
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
.map-point:hover {
|
|
r: 4;
|
|
stroke: #1f2937;
|
|
stroke-width: 1.5;
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@push('scripts-head')
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="container-xxl flex-grow-1 container-p-y">
|
|
<div class="content-body fade-in space-y-6">
|
|
|
|
<!-- Header Section -->
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-gray-800">Resiliensi & Produksi Pertanian</h2>
|
|
<p class="text-gray-500 text-sm mt-1">Pengembangan Agroforestry Polikultur Adaptif Iklim & Praktik GAP</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button class="bg-white border border-gray-200 text-gray-600 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 flex items-center gap-2 shadow-sm">
|
|
<i data-lucide="map" class="w-4 h-4"></i> Mode Pemetaan
|
|
</button>
|
|
<button class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-green-700 flex items-center gap-2 shadow-sm">
|
|
<i data-lucide="plus" class="w-4 h-4"></i> Tambah Data Lahan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4 KPI Cards (Berdasarkan ToC Outcome & Output Indicators) -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
|
|
<!-- KPI 1: Adopsi Praktik -->
|
|
<div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100 relative overflow-hidden">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<p class="text-sm font-semibold text-gray-500">Adopsi Iklim Cerdas</p>
|
|
<div class="p-2 rounded-md bg-green-50 text-green-600"><i data-lucide="sprout" class="w-5 h-5"></i></div>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-gray-800">78%</h3>
|
|
<p class="text-xs text-gray-400 mt-1">Target ToC: 85% Petani Menerapkan GAP</p>
|
|
<div class="mt-4 flex items-center gap-2 text-sm text-green-600 font-medium">
|
|
<i data-lucide="trending-up" class="w-4 h-4"></i> +12% dari tahun lalu
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPI 2: Petani Dilatih -->
|
|
<div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100 relative overflow-hidden">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<p class="text-sm font-semibold text-gray-500">Petani Dilatih GAP</p>
|
|
<div class="p-2 rounded-md bg-blue-50 text-blue-600"><i data-lucide="users" class="w-5 h-5"></i></div>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-gray-800">1,245 <span class="text-base font-normal text-gray-500">Orang</span></h3>
|
|
<p class="text-xs text-gray-400 mt-1">Output Indicator: Target 1,500 Petani</p>
|
|
<div class="w-full bg-gray-100 rounded-full h-1.5 mt-4">
|
|
<div class="h-1.5 rounded-full bg-blue-500" style="width: 83%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPI 3: Bibit Ditanam -->
|
|
<div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100 relative overflow-hidden">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<p class="text-sm font-semibold text-gray-500">Bibit & Pohon Pelindung</p>
|
|
<div class="p-2 rounded-md bg-amber-50 text-amber-600"><i data-lucide="trees" class="w-5 h-5"></i></div>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-gray-800">45.2K <span class="text-base font-normal text-gray-500">Pohon</span></h3>
|
|
<p class="text-xs text-gray-400 mt-1">Output Indicator: Didistribusikan & Ditanam</p>
|
|
<div class="w-full bg-gray-100 rounded-full h-1.5 mt-4">
|
|
<div class="h-1.5 rounded-full bg-amber-500" style="width: 90%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPI 4: Infrastruktur Konservasi -->
|
|
<div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100 relative overflow-hidden">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<p class="text-sm font-semibold text-gray-500">Unit Infrastruktur Air</p>
|
|
<div class="p-2 rounded-md bg-cyan-50 text-cyan-600"><i data-lucide="droplet" class="w-5 h-5"></i></div>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-gray-800">34 <span class="text-base font-normal text-gray-500">Unit</span></h3>
|
|
<p class="text-xs text-gray-400 mt-1">Output: Irigasi mikro & panen air</p>
|
|
<div class="w-full bg-gray-100 rounded-full h-1.5 mt-4">
|
|
<div class="h-1.5 rounded-full bg-cyan-500" style="width: 68%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Pemetaan Spasial Section (Fitur Utama M&E Lapangan) -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
|
|
<!-- Peta -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 lg:col-span-2 flex flex-col">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-bold text-gray-800 flex items-center gap-2">
|
|
<i data-lucide="map" class="w-5 h-5 text-blue-600"></i> Peta Interaktif Sebaran Lahan & Tanaman
|
|
</h3>
|
|
<span class="bg-blue-50 text-blue-600 text-xs px-2 py-1 rounded font-medium">Live M&E</span>
|
|
</div>
|
|
<p class="text-sm text-gray-500 mb-4">Peta spasial tingkat lahan. Klik pada poligon hijau/biru untuk melihat data KK, atau klik titik tanaman untuk melihat riwayat intervensi.</p>
|
|
|
|
<div class="flex-1 bg-[#f8fafc] rounded-lg border border-gray-200 relative overflow-hidden flex items-center justify-center min-h-[400px]">
|
|
<!-- Canvas SVG Mockup untuk Poligon & Titik -->
|
|
<svg viewBox="0 0 200 120" class="w-full h-full max-h-[400px]" id="map-svg-resiliensi">
|
|
<pattern id="grid-pattern" width="10" height="10" patternUnits="userSpaceOnUse">
|
|
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="#e2e8f0" stroke-width="0.5" />
|
|
</pattern>
|
|
<rect width="100%" height="100%" fill="url(#grid-pattern)" />
|
|
<!-- Area akan di-generate via JavaScript -->
|
|
</svg>
|
|
|
|
<!-- Legenda Peta -->
|
|
<div class="absolute bottom-3 left-3 bg-white/95 p-3 rounded-lg text-xs border border-gray-200 shadow-sm backdrop-blur-sm">
|
|
<div class="font-bold text-gray-700 mb-2">Legenda Tanaman:</div>
|
|
<div class="grid grid-cols-2 gap-x-4 gap-y-2">
|
|
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-[#6F4E37] rounded-full shadow-sm"></div> Kopi</div>
|
|
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-[#eab308] rounded-full shadow-sm"></div> Vanili</div>
|
|
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-[#D2691E] rounded-full shadow-sm"></div> Kakao</div>
|
|
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-[#9ca3af] rounded-full shadow-sm"></div> Kemiri</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Detail Panel -->
|
|
<div class="bg-gray-50 p-0 rounded-xl shadow-sm border border-gray-200 flex flex-col overflow-hidden">
|
|
<div class="bg-white p-5 border-b border-gray-200">
|
|
<h3 class="text-lg font-bold text-gray-800 flex items-center gap-2">
|
|
<i data-lucide="file-search" class="w-5 h-5 text-gray-600"></i> Detail Inspeksi Lahan
|
|
</h3>
|
|
</div>
|
|
<div class="flex-1 p-5 overflow-y-auto" id="map-detail-panel">
|
|
<!-- Default Empty State -->
|
|
<div class="h-full flex flex-col items-center justify-center text-gray-400 text-center space-y-3 mt-10">
|
|
<div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-2">
|
|
<i data-lucide="mouse-pointer-click" class="w-8 h-8 text-gray-300"></i>
|
|
</div>
|
|
<p class="text-sm">Pilih poligon lahan atau titik tanaman pada peta untuk memuat data evaluasi kesejahteraan & intervensi.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Charts Row: Produktivitas & Distribusi Bibit -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
|
|
<!-- Chart 1: Produktivitas Lahan -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
|
|
<h3 class="text-lg font-bold text-gray-800 mb-1">Tingkat Produktivitas per Ha (Outcome)</h3>
|
|
<p class="text-xs text-gray-500 mb-6">Peningkatan tonase pasca adopsi Agroforestri Iklim Cerdas</p>
|
|
<div class="h-64 w-full relative">
|
|
<canvas id="chart-productivity"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart 2: Capaian Distribusi Bibit -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
|
|
<h3 class="text-lg font-bold text-gray-800 mb-1">Distribusi Bibit & Pohon Pelindung (Output)</h3>
|
|
<p class="text-xs text-gray-500 mb-6">Akumulasi tanaman yang didistribusikan per komoditas utama</p>
|
|
<div class="h-64 w-full relative">
|
|
<canvas id="chart-seedlings"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Tabel Logbook Desa -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
|
<div class="p-6 border-b border-gray-100 flex justify-between items-center">
|
|
<div>
|
|
<h3 class="text-lg font-bold text-gray-800">Capaian Intervensi per Desa</h3>
|
|
<p class="text-sm text-gray-500">Rincian agregat tingkat desa untuk komponen resiliensi (MoA/FAO framework).</p>
|
|
</div>
|
|
<button class="text-sm text-green-600 font-medium hover:text-green-700">Lihat Semua Data →</button>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="bg-gray-50 text-gray-500 text-sm">
|
|
<th class="p-4 font-semibold border-b border-gray-100">Nama Desa</th>
|
|
<th class="p-4 font-semibold border-b border-gray-100">Total Petani GAP</th>
|
|
<th class="p-4 font-semibold border-b border-gray-100">Luas Agroforestri (Ha)</th>
|
|
<th class="p-4 font-semibold border-b border-gray-100 text-center">Infrastruktur Air</th>
|
|
<th class="p-4 font-semibold border-b border-gray-100 text-center">Indeks Tanah</th>
|
|
<th class="p-4 font-semibold border-b border-gray-100">Status Hama</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-sm text-gray-700">
|
|
<tr class="hover:bg-gray-50 border-b border-gray-50">
|
|
<td class="p-4 font-medium text-gray-900">Radabata</td>
|
|
<td class="p-4">450 Orang</td>
|
|
<td class="p-4">320 Ha</td>
|
|
<td class="p-4 text-center">12 Unit</td>
|
|
<td class="p-4 text-center"><span class="text-green-600 font-bold">Baik (+0.8)</span></td>
|
|
<td class="p-4"><span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs font-semibold">Menurun</span></td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50 border-b border-gray-50">
|
|
<td class="p-4 font-medium text-gray-900">Ubedolumolo</td>
|
|
<td class="p-4">385 Orang</td>
|
|
<td class="p-4">215 Ha</td>
|
|
<td class="p-4 text-center">8 Unit</td>
|
|
<td class="p-4 text-center"><span class="text-green-600 font-bold">Cukup (+0.4)</span></td>
|
|
<td class="p-4"><span class="px-2 py-1 bg-amber-100 text-amber-700 rounded text-xs font-semibold">Terkendali</span></td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50 border-b border-gray-50">
|
|
<td class="p-4 font-medium text-gray-900">Beja</td>
|
|
<td class="p-4">210 Orang</td>
|
|
<td class="p-4">150 Ha</td>
|
|
<td class="p-4 text-center">14 Unit</td>
|
|
<td class="p-4 text-center"><span class="text-amber-600 font-bold">Sedang (0.0)</span></td>
|
|
<td class="p-4"><span class="px-2 py-1 bg-red-100 text-red-700 rounded text-xs font-semibold">Waspada</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
// 1. Inisialisasi Icons
|
|
if(typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// 2. Data Spasial Lahan (Mockup JSON untuk Peta)
|
|
const spatialData = [
|
|
{
|
|
id: 'L-001', owner: 'Yosef Neta', familySize: 5, area: '1.2 Ha', village: 'Radabata',
|
|
polygon: "15,25 75,15 90,85 20,70", fill: "rgba(34, 197, 94, 0.15)", stroke: "#16a34a",
|
|
plants: [
|
|
{ id: 'P-01', type: 'Kopi', cx: 35, cy: 35, planted: 'Mei 2021', status: 'Produktif', intervensi: 'Pemupukan Organik (Okt 2023)', panen: '45 kg/musim', color: '#6F4E37' },
|
|
{ id: 'P-02', type: 'Vanili', cx: 65, cy: 45, planted: 'Jan 2022', status: 'Berbunga', intervensi: 'Pelatihan Polinasi (Feb 2024)', panen: 'Belum panen', color: '#eab308' },
|
|
{ id: 'P-03', type: 'Kopi', cx: 50, cy: 65, planted: 'Mei 2021', status: 'Produktif', intervensi: 'Pemangkasan (Nov 2023)', panen: '40 kg/musim', color: '#6F4E37' },
|
|
]
|
|
},
|
|
{
|
|
id: 'L-002', owner: 'Maria Goreti', familySize: 3, area: '0.8 Ha', village: 'Ubedolumolo',
|
|
polygon: "110,40 170,15 190,65 125,85", fill: "rgba(59, 130, 246, 0.15)", stroke: "#2563eb",
|
|
plants: [
|
|
{ id: 'P-04', type: 'Kemiri', cx: 140, cy: 45, planted: 'Agu 2018', status: 'Produktif', intervensi: 'Pembersihan Gulma', panen: '120 kg/musim', color: '#9ca3af' },
|
|
{ id: 'P-05', type: 'Kakao', cx: 165, cy: 55, planted: 'Okt 2020', status: 'Terserang Hama', intervensi: 'Penyemprotan Bio-pestisida (Jan 2024)', panen: '20 kg/musim', color: '#D2691E' },
|
|
]
|
|
}
|
|
];
|
|
|
|
// 3. Render Peta Interaktif
|
|
function renderMap() {
|
|
const svg = document.getElementById('map-svg-resiliensi');
|
|
let htmlContent = svg.innerHTML; // Keep grid pattern
|
|
|
|
spatialData.forEach((lahan, lIdx) => {
|
|
let groupHtml = `<g class="group">`;
|
|
|
|
// Render Polygon
|
|
groupHtml += `
|
|
<polygon
|
|
points="${lahan.polygon}"
|
|
fill="${lahan.fill}"
|
|
stroke="${lahan.stroke}"
|
|
stroke-width="1.5"
|
|
class="map-polygon"
|
|
onclick="handleMapClick('lahan', ${lIdx}, null, event)">
|
|
</polygon>`;
|
|
|
|
// Render Label Pemilik
|
|
const firstCoord = lahan.polygon.split(' ')[0].split(',');
|
|
groupHtml += `<text x="${firstCoord[0]}" y="${firstCoord[1] - 4}" font-size="5" font-weight="bold" fill="#374151" class="pointer-events-none drop-shadow-sm">${lahan.owner}</text>`;
|
|
|
|
// Render Titik Tanaman
|
|
lahan.plants.forEach((plant, pIdx) => {
|
|
groupHtml += `
|
|
<circle
|
|
cx="${plant.cx}" cy="${plant.cy}" r="2.5"
|
|
fill="${plant.color}" stroke="#ffffff" stroke-width="0.8"
|
|
class="map-point"
|
|
onclick="handleMapClick('plant', ${lIdx}, ${pIdx}, event)">
|
|
<title>${plant.type} - ${plant.status}</title>
|
|
</circle>`;
|
|
});
|
|
|
|
groupHtml += `</g>`;
|
|
htmlContent += groupHtml;
|
|
});
|
|
svg.innerHTML = htmlContent;
|
|
}
|
|
|
|
// Expose function to global scope for onclick handler
|
|
window.handleMapClick = function(type, lahanIdx, plantIdx, event) {
|
|
event.stopPropagation();
|
|
const panel = document.getElementById('map-detail-panel');
|
|
const lahan = spatialData[lahanIdx];
|
|
|
|
if (type === 'lahan') {
|
|
// Tampilan Data Lahan (Keluarga & Daftar Komoditas)
|
|
let komoditasHtml = '';
|
|
lahan.plants.forEach(p => {
|
|
const statusBadge = p.status === 'Produktif' ? 'bg-green-100 text-green-700' : (p.status === 'Berbunga' ? 'bg-blue-100 text-blue-700' : 'bg-red-100 text-red-700');
|
|
komoditasHtml += `
|
|
<div class="flex justify-between items-center py-2 border-b border-gray-50 last:border-0">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2.5 h-2.5 rounded-full" style="background-color: ${p.color}"></div>
|
|
<span class="text-sm font-medium text-gray-700">${p.type}</span>
|
|
</div>
|
|
<span class="text-xs px-2 py-1 rounded-full ${statusBadge}">${p.status}</span>
|
|
</div>`;
|
|
});
|
|
|
|
panel.innerHTML = `
|
|
<div class="fade-in">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-700">
|
|
<i data-lucide="user" class="w-5 h-5"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-gray-900">${lahan.owner}</h4>
|
|
<p class="text-xs text-gray-500 flex items-center gap-1"><i data-lucide="map-pin" class="w-3 h-3"></i> Desa ${lahan.village}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-3 mb-5">
|
|
<div class="bg-gray-50 p-3 rounded-lg border border-gray-100">
|
|
<span class="text-xs text-gray-500 block mb-1">Luas Poligon Lahan</span>
|
|
<span class="font-bold text-gray-800">${lahan.area}</span>
|
|
</div>
|
|
<div class="bg-gray-50 p-3 rounded-lg border border-gray-100">
|
|
<span class="text-xs text-gray-500 block mb-1">Tanggungan Anggota KK</span>
|
|
<span class="font-bold text-gray-800">${lahan.familySize} Jiwa</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h5 class="text-sm font-bold text-gray-800 mb-2 border-b border-gray-100 pb-2">Diversifikasi Tanaman (Polikultur)</h5>
|
|
<div class="bg-white rounded-lg border border-gray-100 p-2">
|
|
${komoditasHtml}
|
|
</div>
|
|
</div>
|
|
`;
|
|
} else if (type === 'plant') {
|
|
// Tampilan Detail Tanaman (Riwayat Intervensi)
|
|
const plant = lahan.plants[plantIdx];
|
|
const statusBg = plant.status === 'Produktif' ? 'bg-green-50' : (plant.status === 'Berbunga' ? 'bg-blue-50' : 'bg-red-50');
|
|
const statusText = plant.status === 'Produktif' ? 'text-green-700' : (plant.status === 'Berbunga' ? 'text-blue-700' : 'text-red-700');
|
|
|
|
panel.innerHTML = `
|
|
<div class="fade-in">
|
|
<div class="p-4 rounded-lg mb-4 flex justify-between items-start border border-gray-100 ${statusBg}">
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<div class="w-3 h-3 rounded-full" style="background-color: ${plant.color}"></div>
|
|
<h4 class="font-bold text-gray-900">Tanaman ${plant.type}</h4>
|
|
</div>
|
|
<p class="text-xs text-gray-600">Pemilik Lahan: ${lahan.owner}</p>
|
|
</div>
|
|
<span class="text-xs font-bold px-2 py-1 bg-white rounded-md shadow-sm ${statusText}">${plant.status}</span>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<p class="text-xs text-gray-500 mb-1 uppercase tracking-wider font-semibold">Profil Tanaman</p>
|
|
<div class="bg-white p-3 rounded-lg border border-gray-100 flex justify-between items-center">
|
|
<span class="text-sm text-gray-600">Bulan/Tahun Tanam</span>
|
|
<span class="text-sm font-bold text-gray-900">${plant.planted}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="text-xs text-gray-500 mb-1 uppercase tracking-wider font-semibold">Riwayat Intervensi M&E</p>
|
|
<div class="bg-white p-3 rounded-lg border border-gray-100 border-l-4 border-l-green-500">
|
|
<p class="text-sm font-medium text-gray-800">${plant.intervensi}</p>
|
|
<p class="text-xs text-gray-400 mt-1">Sesuai standar Good Agricultural Practices</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="text-xs text-gray-500 mb-1 uppercase tracking-wider font-semibold">Kinerja Panen Terakhir</p>
|
|
<div class="bg-white p-3 rounded-lg border border-gray-100 flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center text-amber-600">
|
|
<i data-lucide="scale" class="w-5 h-5"></i>
|
|
</div>
|
|
<div>
|
|
<span class="block text-xl font-bold text-gray-900">${plant.panen}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
lucide.createIcons(); // re-init ikon untuk konten baru
|
|
};
|
|
|
|
renderMap(); // Jalankan render awal
|
|
|
|
// 4. Inisialisasi Chart.js
|
|
|
|
// Chart 1: Tren Produktivitas Lahan (Line Chart)
|
|
const ctxProd = document.getElementById('chart-productivity');
|
|
if (ctxProd) {
|
|
new Chart(ctxProd, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['2021 (Baseline)', '2022', '2023', '2024 (Target)'],
|
|
datasets: [
|
|
{
|
|
label: 'Kopi',
|
|
data: [0.5, 0.7, 1.1, 1.5],
|
|
borderColor: '#6F4E37',
|
|
backgroundColor: '#6F4E37',
|
|
tension: 0.3,
|
|
borderWidth: 2
|
|
},
|
|
{
|
|
label: 'Vanili',
|
|
data: [0.1, 0.15, 0.3, 0.5],
|
|
borderColor: '#eab308',
|
|
backgroundColor: '#eab308',
|
|
tension: 0.3,
|
|
borderWidth: 2
|
|
},
|
|
{
|
|
label: 'Kakao',
|
|
data: [0.4, 0.5, 0.8, 1.2],
|
|
borderColor: '#D2691E',
|
|
backgroundColor: '#D2691E',
|
|
tension: 0.3,
|
|
borderWidth: 2
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true, maintainAspectRatio: false,
|
|
interaction: { mode: 'index', intersect: false },
|
|
scales: {
|
|
y: { title: { display: true, text: 'Ton per Hektar (Ton/Ha)' }, grid: { color: '#f3f4f6' } },
|
|
x: { grid: { display: false } }
|
|
},
|
|
plugins: {
|
|
legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 8 } }
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Chart 2: Distribusi Bibit & Pohon (Bar Chart)
|
|
const ctxSeed = document.getElementById('chart-seedlings');
|
|
if (ctxSeed) {
|
|
new Chart(ctxSeed, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Kopi Arabika', 'Vanili Alor', 'Kakao Klon', 'Kemiri Sunan', 'Pohon Pelindung (Lamtoro/Sengon)'],
|
|
datasets: [
|
|
{
|
|
label: 'Jumlah Bibit Didistribusikan',
|
|
data: [15000, 5200, 8000, 7000, 10000],
|
|
backgroundColor: [
|
|
'rgba(111, 78, 55, 0.8)', // Kopi
|
|
'rgba(234, 179, 8, 0.8)', // Vanili
|
|
'rgba(210, 105, 30, 0.8)', // Kakao
|
|
'rgba(156, 163, 175, 0.8)', // Kemiri
|
|
'rgba(34, 197, 94, 0.8)' // Pelindung (Hijau)
|
|
],
|
|
borderRadius: 4
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true, maintainAspectRatio: false,
|
|
scales: {
|
|
y: { beginAtZero: true, grid: { color: '#f3f4f6' } },
|
|
x: { grid: { display: false } }
|
|
},
|
|
plugins: {
|
|
legend: { display: false }, // Disembunyikan karena label sudah jelas di X axis
|
|
tooltip: { callbacks: { label: function(ctx) { return ctx.raw.toLocaleString('id-ID') + ' Bibit'; } } }
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
});
|
|
</script>
|
|
@endpush |