179 lines
7.8 KiB
PHP
179 lines
7.8 KiB
PHP
@extends('layouts.admintemplate')
|
|
@section('content')
|
|
<div class="pcoded-main-container">
|
|
<div class="pcoded-wrapper">
|
|
<div class="pcoded-content">
|
|
<!-- Page-header start -->
|
|
<div class="page-header">
|
|
<div class="page-block">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-8">
|
|
<div class="page-header-title">
|
|
<h5 class="m-b-10">Peramalan Penjualan</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pcoded-inner-content">
|
|
<div class="main-body">
|
|
<div class="page-wrapper">
|
|
<div class="page-body">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Peramalan Penjualan</h5>
|
|
</div>
|
|
<div class="card-block table-border-style">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered">
|
|
<tbody>
|
|
<tr>
|
|
<td width="250px">Tanggal Awal</td>
|
|
<td> : {{ tanggal($tanggal_awal) }} </td>
|
|
</tr>
|
|
<tr>
|
|
<td width="250px">Tanggal Akhir</td>
|
|
<td> : {{ tanggal($tanggal_akhir) }} </td>
|
|
</tr>
|
|
<tr>
|
|
<td width="250px">Level / Periode</td>
|
|
<td> : {{ tanggal($periode) }} </td>
|
|
</tr>
|
|
<tr>
|
|
<td width="250px">Produk</td>
|
|
<td> : {{ $namaproduk }} </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-block table-border-style">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th class="text-center">Bulan</th>
|
|
<th class="text-center">Total Penjualan</th>
|
|
<th class="text-center">Moving Average ({{ $periode }} Bulan)</th>
|
|
<th class="text-center">MAPE (%)</th>
|
|
<th class="text-center">Akurasi</th>
|
|
</tr>
|
|
<?php
|
|
|
|
|
|
|
|
|
|
function mape($mape) {
|
|
if ($mape < 10) {
|
|
return "Sangat Baik"; // MAPE < 10%
|
|
} elseif ($mape >= 10 && $mape < 20) {
|
|
return "Baik"; // MAPE antara 10% dan 20%
|
|
} elseif ($mape >= 20 && $mape < 50) {
|
|
return "Cukup Baik"; // MAPE antara 20% dan 50%
|
|
} else {
|
|
return "Buruk"; // MAPE >= 50%
|
|
}
|
|
}
|
|
?>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($moving_averages as $key => $value)
|
|
<tr>
|
|
<td>{{ date('M Y', strtotime($value['tanggal'])) }}</td>
|
|
<td>
|
|
{{ isset($data_penjualan[$key + ($periode - 1)]['jumlahtotal'])
|
|
? $data_penjualan[$key + ($periode - 1)]['jumlahtotal'] : '-' }}
|
|
</td>
|
|
<td>{{ $value['rata2'] }}</td>
|
|
<td>{{ $value['error'] !== null ? $value['error'] . '%' : '-' }}
|
|
</td>
|
|
<td>
|
|
{{ $value['error'] !== null ? mape($value['error']) : '-' }}
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
<br>
|
|
<p><strong>Mean Absolute Percentage Error (MAPE):</strong> {{ round($mape, 2)
|
|
}}%</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grafik -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Grafik Peramalan</h5>
|
|
</div>
|
|
<div class="card-block">
|
|
<canvas id="grafik"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Chart.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
var ctx = document.getElementById('grafik').getContext('2d');
|
|
var data = @json($grafik);
|
|
|
|
var bulan = data.map(item => item.bulan);
|
|
var jumlah = data.map(item => item.jumlah);
|
|
var prediksi = data.map(item => item.prediksi);
|
|
|
|
var chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: bulan,
|
|
datasets: [{
|
|
label: 'Total Penjualan',
|
|
data: jumlah,
|
|
borderColor: 'blue',
|
|
fill: false
|
|
},
|
|
{
|
|
label: 'Prediksi Penjualan',
|
|
data: prediksi,
|
|
borderColor: 'red',
|
|
borderDash: [5, 5],
|
|
fill: false
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
title: {
|
|
display: true,
|
|
text: 'Grafik Peramalan Penjualan'
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'Bulan'
|
|
}
|
|
},
|
|
y: {
|
|
title: {
|
|
display: true,
|
|
text: 'Jumlah Penjualan'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
@endsection
|