288 lines
11 KiB
PHP
288 lines
11 KiB
PHP
@extends('layouts.master')
|
|
|
|
@section('content')
|
|
<div class="card shadow-sm" style="font-family: 'Inter', sans-serif;">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0 font-weight-bold">{{ @$title }}</h5>
|
|
<form
|
|
method="GET"
|
|
id="yearForm"
|
|
action="{{ route($route.'.index') }}"
|
|
class="d-inline"
|
|
>
|
|
<x-adaptation-year-select
|
|
:selectedYear="$selectedYear"
|
|
name="adaptationYear"
|
|
onchange="document.getElementById('yearForm').submit()"
|
|
/>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<!-- Alerts -->
|
|
|
|
<div class="row flex justify-content-end items-center ml-6 mb-4">
|
|
<div class="flex gap-2 mr-4">
|
|
<a href="{{ route('modules.formAdaptasi.create', ['reset' => 1]) }}">
|
|
<button class="button-action btn btn-success">Aksi Baru</button>
|
|
</a>
|
|
<a href="{{ route($route.'.aksi') }}">
|
|
<button class="button-action btn btn-primary">
|
|
Aksi Perubahan Iklim
|
|
</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<br/>
|
|
|
|
{{-- Charts Row --}}
|
|
<div class="row mb-5">
|
|
<div class="col-lg-4">
|
|
<p class="h6">AKSI</p>
|
|
<canvas id="aksiChart" height="100"></canvas>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<p class="h6">ALOKASI (Miliar Rupiah)</p>
|
|
<canvas id="anggaranChart" height="100"></canvas>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<p class="h6">REALISASI (Miliar Rupiah)</p>
|
|
<canvas id="realisasiChart" height="100"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Table --}}
|
|
<div class="table-responsive">
|
|
<table id="adaptasiTable" class="table table-bordered table-striped align-middle">
|
|
<thead class="table-info text-white text-center">
|
|
<tr>
|
|
<th>Nama Kegiatan</th>
|
|
<th>Tahun</th>
|
|
<th>Bidang PRK</th>
|
|
<th>Sub- Bidang PRK</th>
|
|
<th style="width:80px;">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($tableData as $a)
|
|
<tr>
|
|
<td>{{ $a->nama_kegiatan }}</td>
|
|
<td class="text-center">{{ $a->tahun_kegiatan }}</td>
|
|
<td>{{ $a->sektor }}</td>
|
|
<td>{{ $a->sub_sektor }}</td>
|
|
<td class="text-center">
|
|
<a href="{{ route($route.'adaptasi.view', $a->id) }}" class="text-secondary me-2">
|
|
<i class="ti ti-eye"></i>
|
|
</a>
|
|
<a href="{{ route($route.'adaptasi.edit', $a->id) }}" class="text-secondary">
|
|
<i class="ti ti-pencil"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<th></th>
|
|
<th></th>
|
|
<th></th>
|
|
<th></th>
|
|
<th></th>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('css')
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css"/>
|
|
<style>
|
|
#map { min-height: 600px; }
|
|
.leaflet-container { background: #fff; }
|
|
</style>
|
|
@endsection
|
|
|
|
@section('js')
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// === DataTables init ===
|
|
$('#adaptasiTable').DataTable({
|
|
pageLength: 10,
|
|
ordering: true,
|
|
searching: true,
|
|
lengthChange: true,
|
|
language: {
|
|
search: "Cari:",
|
|
lengthMenu: "Tampilkan _MENU_ data per halaman",
|
|
zeroRecords: "Tidak ada data ditemukan",
|
|
emptyTable: "Tidak ada data.",
|
|
info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
|
|
infoEmpty: "Tidak ada data tersedia",
|
|
infoFiltered: "(difilter dari _MAX_ total data)"
|
|
},
|
|
footerCallback: function (row, data, start, end, display) {
|
|
$(this.api().column(0).footer()).html('TOTAL (Semua Tahun {{ $selectedYear }})');
|
|
}
|
|
});
|
|
|
|
// === Util warna untuk dataset ===
|
|
function getColor(i) {
|
|
const palette = [
|
|
'rgba(255,99,132,0.6)',
|
|
'rgba(54,162,235,0.6)',
|
|
'rgba(255,206,86,0.6)',
|
|
'rgba(75,192,192,0.6)',
|
|
'rgba(153,102,255,0.6)',
|
|
'rgba(255,159,64,0.6)',
|
|
'rgba(199,199,199,0.6)',
|
|
'rgba(100,181,246,0.6)',
|
|
'rgba(76,175,80,0.6)',
|
|
'rgba(121,85,72,0.6)'
|
|
];
|
|
return palette[i % palette.length];
|
|
}
|
|
|
|
// === Formatter Miliar Rupiah (2 desimal, trailing zero dipangkas oleh Intl) ===
|
|
// function fmtMiliarFromBillion(b) {
|
|
// return new Intl.NumberFormat('id-ID', { maximumFractionDigits: 2 }).format(b) + ' M';
|
|
// }
|
|
function parseIdrToNumber(v) {
|
|
if (typeof v === 'number') return v;
|
|
if (v == null) return 0;
|
|
const s = String(v).replace(/\s/g,'').replace(/\./g,'').replace(',', '.');
|
|
const n = Number(s);
|
|
return isNaN(n) ? 0 : n;
|
|
}
|
|
function toBillion(v) { return parseIdrToNumber(v) / 1_000_000_000; }
|
|
function pickDecimals(maxAbs) {
|
|
if (maxAbs >= 1) return 2;
|
|
if (maxAbs >= 0.1) return 3;
|
|
if (maxAbs >= 0.01) return 4;
|
|
if (maxAbs >= 0.001) return 5;
|
|
return 6;
|
|
}
|
|
function fmtMiliar(v, d) {
|
|
return new Intl.NumberFormat('id-ID', { maximumFractionDigits: d }).format(v) + ' M';
|
|
}
|
|
|
|
// === Chart AKSI (bukan rupiah) ===
|
|
const barData = @json($barData);
|
|
const years = barData.map(d => d.year);
|
|
const sectors = barData.length ? Object.keys(barData[0].jumlah || {}) : [];
|
|
const aksiDatasets = sectors.map((sec, idx) => ({
|
|
label: sec,
|
|
data: years.map(y => {
|
|
const row = barData.find(d => d.year === y) || {};
|
|
return (row.jumlah && row.jumlah[sec]) ? row.jumlah[sec] : 0;
|
|
}),
|
|
backgroundColor: getColor(idx),
|
|
borderColor: getColor(idx).replace('0.6','1'),
|
|
borderWidth: 1
|
|
}));
|
|
|
|
new Chart(document.getElementById('aksiChart'), {
|
|
type: 'bar',
|
|
data: { labels: years, datasets: aksiDatasets },
|
|
options: {
|
|
plugins: {
|
|
legend: { position: 'top' },
|
|
tooltip: { callbacks: { label: ctx => `${ctx.dataset.label}: ${ctx.parsed.y}` } }
|
|
},
|
|
scales: {
|
|
x: { stacked: true },
|
|
y: { stacked: true, beginAtZero: true, title: { display: true, text: 'Jumlah Kegiatan' } }
|
|
}
|
|
}
|
|
});
|
|
|
|
// === Chart Anggaran & Realisasi (Rupiah → Miliar) ===
|
|
const budget = @json($budgetData);
|
|
const realisasi = @json($realisasiData);
|
|
const labels = ['APBN','APBD','Swasta','Lain-lain'];
|
|
|
|
const anggaranValuesB = [
|
|
toBillion(budget?.apbn), toBillion(budget?.apbd),
|
|
toBillion(budget?.swasta), toBillion(budget?.lainlain)
|
|
];
|
|
const realisasiValuesB = [
|
|
toBillion(realisasi?.apbn), toBillion(realisasi?.apbd),
|
|
toBillion(realisasi?.swasta), toBillion(realisasi?.lainlain)
|
|
];
|
|
|
|
// Tentukan jumlah desimal per chart berdasarkan nilai maksimum
|
|
const decAnggaran = pickDecimals(Math.max(...anggaranValuesB.map(Math.abs), 0));
|
|
const decRealisasi = pickDecimals(Math.max(...realisasiValuesB.map(Math.abs), 0));
|
|
|
|
const colors = ['#0575E6','#FFA500','#8A2BE2','#00BFA6'];
|
|
const realisasiColors = ['#7ed957','#ffd966','#bdb2ff','#80cbc4'];
|
|
|
|
function createBarChart(canvasId, datasetLabel, valuesB, colorsArr, decimals) {
|
|
const ctx = document.getElementById(canvasId).getContext('2d');
|
|
|
|
const datasets = labels.map((label, i) => ({
|
|
label: label,
|
|
data: [valuesB[i]], // satu nilai per kategori
|
|
backgroundColor: colorsArr[i],
|
|
datalabels: {
|
|
anchor: 'end',
|
|
align: 'right',
|
|
formatter: v => fmtMiliar(v, decimals),
|
|
clip: false
|
|
}
|
|
}));
|
|
|
|
new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: [datasetLabel], // cuma 1 kategori "Anggaran" atau "Realisasi"
|
|
datasets: datasets
|
|
},
|
|
options: {
|
|
indexAxis: 'y',
|
|
plugins: {
|
|
legend: { display: true, position: 'top' },
|
|
tooltip: {
|
|
callbacks: {
|
|
label: (ctx) => {
|
|
const v = ctx.parsed.x ?? ctx.parsed.y ?? 0;
|
|
return `${ctx.dataset.label}: ${fmtMiliar(v, decimals)}`;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
beginAtZero: true,
|
|
suggestedMax: Math.max(...valuesB) * 1.1 || 1,
|
|
title: { display: true, text: 'Miliar Rupiah (M)' },
|
|
ticks: {
|
|
callback: (value) => fmtMiliar(value, decimals)
|
|
}
|
|
},
|
|
y: { ticks: { autoSkip: false } }
|
|
}
|
|
},
|
|
plugins: [ ChartDataLabels ]
|
|
});
|
|
}
|
|
|
|
|
|
createBarChart('anggaranChart', '', anggaranValuesB, colors, decAnggaran);
|
|
createBarChart('realisasiChart', '', realisasiValuesB, realisasiColors, decRealisasi);
|
|
});
|
|
</script>
|
|
@endsection
|
|
|