286 lines
9.4 KiB
PHP
286 lines
9.4 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">Dasbor Mitigasi</h5>
|
|
<form
|
|
method="GET"
|
|
id="yearForm"
|
|
action="{{ route('modules.dashboard.mitigasi.index') }}"
|
|
class="d-inline"
|
|
>
|
|
<x-mitigation-year-select
|
|
:selectedYear="$selectedYear"
|
|
name="mitigationYear"
|
|
onchange="document.getElementById('yearForm').submit()"
|
|
/>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
|
|
<div class="row flex justify-content-end items-center ml-6 mb-4">
|
|
<div class="flex gap-2 mr-4">
|
|
<a href="{{ route('modules.formMitigasi.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 text-white hover:bg-green-700">
|
|
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="mitigasiTable" class="table table-bordered table-striped align-middle">
|
|
<thead class="table-info text-white text-center">
|
|
<tr>
|
|
<th>Tipe Kegiatan</th>
|
|
<th>Nama Kegiatan</th>
|
|
<th>Tahun</th>
|
|
<th>Sektor</th>
|
|
<th>Sub-Sektor</th>
|
|
<th>Kategori</th>
|
|
<th class="text-end">Penurunan Emisi</th>
|
|
<th class="text-center">Revisi</th>
|
|
<th style="width:80px;"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($tableData as $m)
|
|
<tr>
|
|
<td>{{ $m->tipe_kegiatan }}</td>
|
|
<td>{{ Str::limit($m->nama_kegiatan, 60) }}</td>
|
|
<td class="text-center">{{ $m->tahun_kegiatan }}</td>
|
|
<td>{{ $m->sektor }}</td>
|
|
<td>{{ $m->sub_sektor }}</td>
|
|
<td>{{ $m->kategori_perhitungan }}</td>
|
|
<td class="text-end">
|
|
{{ $m->emission_factor }}
|
|
</td>
|
|
<td class="text-center">{{ $m->revisi ?? '--' }}</td>
|
|
<td class="text-center">
|
|
<a href="{{ route($route.'.view', $m->id) }}" class="text-secondary me-2">
|
|
<i class="ti ti-eye"></i>
|
|
</a>
|
|
<a href="{{ route($route.'.edit', $m->id) }}" class="text-secondary">
|
|
<i class="ti ti-pencil"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('css')
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css"/>
|
|
@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 (unchanged) ===
|
|
$('#mitigasiTable').DataTable({
|
|
pageLength: 10, ordering: true, searching: true, lengthChange: true,
|
|
columnDefs: [
|
|
{ targets: 6, className: 'text-end' },
|
|
{ targets: 7, className: 'text-center' },
|
|
{ targets: 8, className: 'text-center', orderable: false, searchable: false }
|
|
],
|
|
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 () {
|
|
const api = this.api();
|
|
$(api.column(0).footer()).html('TOTAL (Semua Tahun {{ $selectedYear }})');
|
|
const parseIdNumber = (v) => {
|
|
if (typeof v === 'number') return v;
|
|
if (!v) return 0;
|
|
const s = String(v).replace(/\./g, '').replace(',', '.');
|
|
const n = parseFloat(s);
|
|
return isNaN(n) ? 0 : n;
|
|
};
|
|
const total = api.column(6, { search: 'applied' }).data().toArray()
|
|
.reduce((sum, val) => sum + parseIdNumber(val), 0);
|
|
const formatted = new Intl.NumberFormat('id-ID', { maximumFractionDigits: 6 }).format(total);
|
|
$(api.column(6).footer()).html(formatted);
|
|
}
|
|
});
|
|
|
|
// === Colors ===
|
|
function getColor(i) {
|
|
const p = [
|
|
'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 p[i % p.length];
|
|
}
|
|
|
|
// === Parser & Formatter (IDR → Miliar, desimal adaptif) ===
|
|
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
|
|
|
|
|