372 lines
18 KiB
PHP
372 lines
18 KiB
PHP
<?php $__env->startSection('title', 'Dasbor'); ?>
|
|
|
|
<?php $__env->startSection('content'); ?>
|
|
<div class="card shadow-sm">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0 font-weight-bold">Dasbor</h5>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<!-- Alerts -->
|
|
<?php if($errors->has('error')): ?>
|
|
<div class="alert alert-danger">
|
|
<?php echo e($errors->first('error')); ?>
|
|
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if(session('success')): ?>
|
|
<div class="alert alert-success">
|
|
<?php echo e(session('success')); ?>
|
|
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<!-- Filter Tahun Inventory -->
|
|
<div class="row justify-content-end mb-4">
|
|
<div class="col-md-2">
|
|
<?php if (isset($component)) { $__componentOriginal34b98c40fdc1747242e7ced1095ca83b = $component; } ?>
|
|
<?php if (isset($attributes)) { $__attributesOriginal34b98c40fdc1747242e7ced1095ca83b = $attributes; } ?>
|
|
<?php $component = App\View\Components\InventoryYearSelect::resolve(['selectedYear' => $inventoryYear] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
|
|
<?php $component->withName('inventory-year-select'); ?>
|
|
<?php if ($component->shouldRender()): ?>
|
|
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
|
|
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
|
|
<?php $attributes = $attributes->except(\App\View\Components\InventoryYearSelect::ignoredParameterNames()); ?>
|
|
<?php endif; ?>
|
|
<?php $component->withAttributes([]); ?>
|
|
<?php echo $__env->renderComponent(); ?>
|
|
<?php endif; ?>
|
|
<?php if (isset($__attributesOriginal34b98c40fdc1747242e7ced1095ca83b)): ?>
|
|
<?php $attributes = $__attributesOriginal34b98c40fdc1747242e7ced1095ca83b; ?>
|
|
<?php unset($__attributesOriginal34b98c40fdc1747242e7ced1095ca83b); ?>
|
|
<?php endif; ?>
|
|
<?php if (isset($__componentOriginal34b98c40fdc1747242e7ced1095ca83b)): ?>
|
|
<?php $component = $__componentOriginal34b98c40fdc1747242e7ced1095ca83b; ?>
|
|
<?php unset($__componentOriginal34b98c40fdc1747242e7ced1095ca83b); ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cards -->
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-2 col-md-4 mb-4">
|
|
<div class="card h-100 text-center border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 class="card-title text-muted">Total Emisi</h6>
|
|
<p class="card-text" style="font-size: 20px;" id="totalEmisi">
|
|
<?php echo e(getFormattedValue($cardData['totalEmisi'], 2)); ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-md-4 mb-4">
|
|
<div class="card h-100 text-center border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 class="card-title text-muted">Emisi Sektor IPPU</h6>
|
|
<p class="card-text" style="font-size: 20px;" id="emisiIppu">
|
|
<?php echo e(getFormattedValue($cardData['emisiIppu'], 2)); ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-md-4 mb-4">
|
|
<div class="card h-100 text-center border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 class="card-title text-muted">Emisi Sektor Energi</h6>
|
|
<p class="card-text" style="font-size: 20px;" id="emisiEnergi">
|
|
<?php echo e(getFormattedValue($cardData['emisiEnergi'], 2)); ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-md-4 mb-4">
|
|
<div class="card h-100 text-center border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 class="card-title text-muted">Emisi Sektor Pertanian</h6>
|
|
<p class="card-text" style="font-size: 20px;" id="emisiPertanian">
|
|
<?php echo e(getFormattedValue($cardData['emisiPertanian'], 2)); ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-md-4 mb-4">
|
|
<div class="card h-100 text-center border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 class="card-title text-muted">Emisi Sektor Lahan</h6>
|
|
<p class="card-text" style="font-size: 20px;" id="emisiLahan">
|
|
<?php echo e(getFormattedValue($cardData['emisiLahan'], 2)); ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 col-md-4 mb-4">
|
|
<div class="card h-100 text-center border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 class="card-title text-muted">Emisi Sektor Limbah</h6>
|
|
<p class="card-text" style="font-size: 20px;" id="emisiLimbah">
|
|
<?php echo e(getFormattedValue($cardData['emisiLimbah'], 2)); ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<!-- Charts Row -->
|
|
<div class="row mb-4">
|
|
<!-- Bar Chart -->
|
|
<div class="col-lg-6 mb-4">
|
|
<canvas id="barEmissionChart" height="160"></canvas>
|
|
</div>
|
|
|
|
<!-- Pie Chart -->
|
|
<div class="col-lg-6 mb-4">
|
|
<canvas id="pieEmissionChart" height="80"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Emissions Table -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-striped">
|
|
<thead class="bg-header text-white text-center">
|
|
<tr>
|
|
<th style="width: 10px;"></th>
|
|
<th class="align-middle">Emissions</th>
|
|
<th width="120">CO<sub>2</sub> Eq<br>(Gg)</th>
|
|
<th width="120">CO<sub>2</sub><br>(Gg)</th>
|
|
<th width="120">CH<sub>4</sub><br>(Gg)</th>
|
|
<th width="120">N<sub>2</sub>O<br>(Gg)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php
|
|
$totalCo2eq = 0;
|
|
$totalCo2 = 0;
|
|
$totalCh4 = 0;
|
|
$totalN2o = 0;
|
|
$no = 1;
|
|
?>
|
|
<?php $__currentLoopData = $tableData; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $sector => $emissions): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
|
<?php
|
|
$totalCo2eq += $emissions['co2eq'];
|
|
$totalCo2 += $emissions['co2'];
|
|
$totalCh4 += $emissions['ch4'];
|
|
$totalN2o += $emissions['n2o'];
|
|
?>
|
|
<tr class="text-right">
|
|
<td class="text-left"><?php echo e($no++); ?></td>
|
|
<td class="text-left"><?php echo e($sector); ?></td>
|
|
<td><?php echo e(getFormattedValue($emissions['co2eq'], 2)); ?></td>
|
|
<td><?php echo e(getFormattedValue($emissions['co2'], 2)); ?></td>
|
|
<td><?php echo e(getFormattedValue($emissions['ch4'], 2)); ?></td>
|
|
<td><?php echo e(getFormattedValue($emissions['n2o'], 2)); ?></td>
|
|
</tr>
|
|
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
|
|
<tr class="text-right">
|
|
<td class="text-left"></td>
|
|
<td class="text-left"><strong>TOTAL</strong></td>
|
|
<td><strong><?php echo e(getFormattedValue($totalCo2eq, 2)); ?></strong></td>
|
|
<td><strong><?php echo e(getFormattedValue($totalCo2, 2)); ?></strong></td>
|
|
<td><strong><?php echo e(getFormattedValue($totalCh4, 2)); ?></strong></td>
|
|
<td><strong><?php echo e(getFormattedValue($totalN2o, 2)); ?></strong></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php $__env->stopSection(); ?>
|
|
|
|
<?php $__env->startPush('scripts'); ?>
|
|
<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>
|
|
$(document).ready(function() {
|
|
$('#inventoryYear').select2({
|
|
placeholder: 'Pilih Tahun',
|
|
width: '100%'
|
|
});
|
|
|
|
$('#inventoryYear').on('change', function() {
|
|
var selectedYear = $(this).val();
|
|
window.location.href = '<?php echo e(url()->current()); ?>?year=' + selectedYear;
|
|
});
|
|
|
|
// Define color palette
|
|
function getColor(index) {
|
|
const colors = [
|
|
'rgba(255, 99, 132, 0.6)', // Red
|
|
'rgba(54, 162, 235, 0.6)', // Blue
|
|
'rgba(255, 206, 86, 0.6)', // Yellow
|
|
'rgba(75, 192, 192, 0.6)', // Green
|
|
'rgba(153, 102, 255, 0.6)', // Purple
|
|
'rgba(205, 159, 64, 0.6)', // Orange
|
|
'rgba(199, 199, 199, 0.6)', // Gray
|
|
'rgba(0, 255, 0, 0.6)', // Light Green
|
|
'rgba(83, 102, 120, 0.6)', // Dark Gray
|
|
|
|
];
|
|
return colors[index % colors.length];
|
|
}
|
|
|
|
// Prepare data for the bar chart
|
|
var emissionsByYear = <?php echo json_encode($barData, 15, 512) ?>;
|
|
|
|
var labels = emissionsByYear.map(function(e) {
|
|
return e.year;
|
|
});
|
|
|
|
var data = {
|
|
labels: labels,
|
|
datasets: []
|
|
};
|
|
|
|
var yearTotalMap = {};
|
|
emissionsByYear.forEach(function(yearData) {
|
|
yearTotalMap[yearData.year] = yearData.total;
|
|
});
|
|
|
|
// Collecting sector keys (categories) for chart labels
|
|
var sectorKeys = Object.keys(emissionsByYear[0].emisi);
|
|
|
|
sectorKeys.forEach(function(key, index) {
|
|
var sectorData = emissionsByYear.map(function(e) {
|
|
return e.emisi[key] || 0;
|
|
});
|
|
|
|
data.datasets.push({
|
|
label: key.charAt(0).toUpperCase() + key.slice(1),
|
|
data: sectorData,
|
|
backgroundColor: getColor(index),
|
|
borderColor: getColor(index).replace('0.6', '1'),
|
|
borderWidth: 1
|
|
});
|
|
});
|
|
|
|
var ctx = document.getElementById('barEmissionChart').getContext('2d');
|
|
var barChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: data,
|
|
options: {
|
|
scales: {
|
|
x: {
|
|
stacked: true,
|
|
},
|
|
y: {
|
|
stacked: true,
|
|
}
|
|
},
|
|
plugins: {
|
|
tooltip: {
|
|
callbacks: {
|
|
title: function(tooltipItems) {
|
|
// Use the first tooltip item to get the year
|
|
return 'Year: ' + tooltipItems[0].label;
|
|
},
|
|
label: function(context) {
|
|
var label = context.dataset.label || '';
|
|
var value = context.raw.toFixed(2);
|
|
var year = labels[context.dataIndex];
|
|
var total = yearTotalMap[year].toFixed(2);
|
|
|
|
return [
|
|
label + ': ' + value + ' Gg CO2',
|
|
'Total: ' + total + ' Gg CO2'
|
|
];
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
position: 'top',
|
|
align: 'start',
|
|
usePointStyle: true,
|
|
labels: {
|
|
boxWidth: 20,
|
|
},
|
|
},
|
|
|
|
},
|
|
responsive: true,
|
|
layout: {
|
|
padding: {
|
|
left: 40 // Adjust this value to create space above the chart to avoid overlap with y-axis labels
|
|
}
|
|
},
|
|
// maintainAspectRatio: false
|
|
}
|
|
});
|
|
|
|
var pieEmissions = <?php echo json_encode($pieData, 15, 512) ?>;
|
|
|
|
var pieData = {
|
|
labels: Object.keys(pieEmissions),
|
|
datasets: [{
|
|
data: Object.values(pieEmissions),
|
|
backgroundColor: Object.keys(pieEmissions).map((_, index) => getColor(index)),
|
|
borderColor: Object.keys(pieEmissions).map((_, index) => getColor(index).replace(
|
|
'0.6', '1')),
|
|
borderWidth: 1
|
|
}]
|
|
};
|
|
|
|
var pieCtx = document.getElementById('pieEmissionChart').getContext('2d');
|
|
var pieChart = new Chart(pieCtx, {
|
|
type: 'doughnut',
|
|
data: pieData,
|
|
// plugins: [ChartDataLabels],
|
|
options: {
|
|
plugins: {
|
|
// datalabels: {
|
|
// formatter: (value, context) => {
|
|
// var total = context.chart.data.datasets[0].data.reduce((acc, cur) =>
|
|
// acc + cur, 0);
|
|
// var percentage = ((value / total) * 100).toFixed(2) + '%';
|
|
// return percentage;
|
|
// },
|
|
// color: '#000', // Set the text color
|
|
// font: {
|
|
// weight: 'bold',
|
|
// size: 10
|
|
// },
|
|
// anchor: 'center', // Position the label in the center of the slice
|
|
// align: 'center' // Align the label to the middle of the slice
|
|
// },
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
var label = context.label || '';
|
|
var value = context.raw.toFixed(2);
|
|
var total = Object.values(pieEmissions).reduce((acc, cur) => acc +
|
|
cur, 0).toFixed(2);
|
|
var percentage = ((context.raw / total) * 100).toFixed(2);
|
|
|
|
return [
|
|
label + ': ' + value + ' Gg CO2 (' + percentage + '%)',
|
|
'Total: ' + total + ' Gg CO2'
|
|
];
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
position: 'right',
|
|
labels: {
|
|
boxWidth: 20,
|
|
usePointStyle: true,
|
|
}
|
|
}
|
|
},
|
|
layout: {
|
|
padding: {
|
|
right: 40 // Adjust this value to create space above the chart to avoid overlap with y-axis labels
|
|
}
|
|
},
|
|
cutout: '50%',
|
|
responsive: true,
|
|
maintainAspectRatio: false
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<?php $__env->stopPush(); ?>
|
|
|
|
<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/sigd/resources/views/auth/dashboard.blade.php ENDPATH**/ ?>
|