143 lines
6.4 KiB
PHP
143 lines
6.4 KiB
PHP
@extends('layouts.master')
|
|
|
|
@section('title', 'Aksi Perubahan Iklim')
|
|
|
|
@section('content')
|
|
<div class="container-fluid my-4" style="font-family: 'Inter', sans-serif;">
|
|
<div class="card shadow-sm border-0">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h5 class="mb-0 font-weight-bold text-teal">AKSI PERUBAHAN IKLIM</h5>
|
|
<small class="text-muted">
|
|
Last update: <span class="text-danger">{{ $today }}</span>
|
|
</small>
|
|
</div>
|
|
|
|
<!-- Statistik Atas -->
|
|
<div class="row text-center mb-4">
|
|
<div class="col-md-4 mb-4">
|
|
<div class="p-3 border rounded bg-light">
|
|
<h6 class="text-muted">TOTAL AKSI</h6>
|
|
<h2 class="text-success">{{ number_format($stats['total_aksi'], 0, ',', '.') }}</h2>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-4">
|
|
<div class="p-3 border rounded bg-light">
|
|
<h6 class="text-muted">TOTAL ALOKASI</h6>
|
|
<h2 class="text-success">{{ number_format($stats['total_anggaran']/1000000000, 1, ',', '.') }}</h2>
|
|
<small>MILIAR IDR</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-4">
|
|
<div class="p-3 border rounded bg-light">
|
|
<h6 class="text-muted">TOTAL REALISASI</h6>
|
|
<h2 class="text-success">{{ number_format($stats['total_alokasi']/1000000000, 1, ',', '.') }}</h2>
|
|
<small>MILIAR IDR</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@php
|
|
$colors = ['#a98ded', '#5ab4e5', '#f6d55c', '#ed6a5a', '#6cc070', '#ff8c42'];
|
|
$labelsAksi = collect($charts['aksi'])->pluck('sektor')->toArray();
|
|
$valuesAksi = collect($charts['aksi'])->pluck('persen')->toArray();
|
|
|
|
$labelsAnggaran = collect($charts['anggaran'])->pluck('sektor')->toArray();
|
|
$valuesAnggaran = collect($charts['anggaran'])->pluck('persen')->toArray();
|
|
|
|
$labelsAlokasi = collect($charts['alokasi'])->pluck('sektor')->toArray();
|
|
$valuesAlokasi = collect($charts['alokasi'])->pluck('persen')->toArray();
|
|
@endphp
|
|
|
|
<!-- Bagian Chart -->
|
|
<div class="row">
|
|
<!-- Chart Aksi -->
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-header bg-success text-white text-center">TOTAL AKSI</div>
|
|
<div class="card-body">
|
|
<canvas id="chartAksi"></canvas>
|
|
<div class="mt-4">
|
|
<small>
|
|
@foreach($charts['aksi'] as $i => $row)
|
|
<span class="d-block">
|
|
<span style="color: {{ $colors[$i % count($colors)] }};">
|
|
{{ $row['persen'] }}%
|
|
</span> {{ $row['sektor'] }}
|
|
</span>
|
|
@endforeach
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart Anggaran -->
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-header bg-success text-white text-center">TOTAL ALOKASI</div>
|
|
<div class="card-body">
|
|
<canvas id="chartAnggaran"></canvas>
|
|
<div class="mt-4">
|
|
<small>
|
|
@foreach($charts['anggaran'] as $i => $row)
|
|
<span class="d-block">
|
|
<span style="color: {{ $colors[$i % count($colors)] }};">
|
|
{{ $row['persen'] }}%
|
|
</span> {{ $row['sektor'] }}
|
|
</span>
|
|
@endforeach
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart Alokasi -->
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-header bg-success text-white text-center">TOTAL REALISASI</div>
|
|
<div class="card-body">
|
|
<canvas id="chartAlokasi"></canvas>
|
|
<div class="mt-4">
|
|
<small>
|
|
@foreach($charts['alokasi'] as $i => $row)
|
|
<span class="d-block">
|
|
<span style="color: {{ $colors[$i % count($colors)] }};">
|
|
{{ $row['persen'] }}%
|
|
</span> {{ $row['sektor'] }}
|
|
</span>
|
|
@endforeach
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('js')
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
const colors = @json($colors);
|
|
|
|
const configPie = (labels, data) => ({
|
|
type: 'pie',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
data: data,
|
|
backgroundColor: colors.slice(0, labels.length),
|
|
}]
|
|
}
|
|
});
|
|
|
|
new Chart(document.getElementById('chartAksi'), configPie(@json($labelsAksi), @json($valuesAksi)));
|
|
new Chart(document.getElementById('chartAnggaran'), configPie(@json($labelsAnggaran), @json($valuesAnggaran)));
|
|
new Chart(document.getElementById('chartAlokasi'), configPie(@json($labelsAlokasi), @json($valuesAlokasi)));
|
|
</script>
|
|
@endsection
|