109 lines
3.9 KiB
PHP
109 lines
3.9 KiB
PHP
@extends('layouts.admintemplate')
|
|
@section('content')
|
|
<div class="pcoded-content">
|
|
<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">Selamat Datang Di Dashboard</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="row">
|
|
<div class="col-md-6">
|
|
<div class="card bg-c-green total-card">
|
|
<div class="card-block">
|
|
<div class="text-left">
|
|
<h4>{{ $jumlahbarang }}</h4>
|
|
<p class="m-0">Data Barang</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card bg-c-green total-card">
|
|
<div class="card-block">
|
|
<div class="text-left">
|
|
<h4>{{ $jumlahtransaksi }}</h4>
|
|
<p class="m-0">Jumlah Transaksi</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
@section('script')
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
const salesData = @json($sales);
|
|
const monthNames = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
|
|
const labels = monthNames;
|
|
const data = [];
|
|
for (let i = 0; i < 12; i++) {
|
|
data.push(salesData[i + 1] || 0);
|
|
}
|
|
|
|
const ctx = document.getElementById('salesChart').getContext('2d');
|
|
new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'Total Penjualan',
|
|
data: data,
|
|
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
|
borderColor: 'rgba(75, 192, 192, 1)',
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: { beginAtZero: true }
|
|
}
|
|
}
|
|
});
|
|
|
|
// Data produk terlaris untuk Pie Chart
|
|
const produkLabels = @json($produkTerlaris->pluck('namabarang'));
|
|
const produkData = @json($produkTerlaris->pluck('total_terjual'));
|
|
const pieColors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'];
|
|
|
|
const pieCtx = document.getElementById('salesPieChart').getContext('2d');
|
|
const pieChart = new Chart(pieCtx, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: produkLabels,
|
|
datasets: [{
|
|
label: 'Penjualan Produk',
|
|
data: produkData,
|
|
backgroundColor: pieColors,
|
|
}]
|
|
}
|
|
});
|
|
|
|
// Tampilkan label di bawah pie chart
|
|
const pieLabelsDiv = document.getElementById('pieLabels');
|
|
produkLabels.forEach((label, index) => {
|
|
let color = pieColors[index % pieColors.length];
|
|
pieLabelsDiv.innerHTML += `
|
|
<span style="display: inline-block; width: 15px; height: 15px; background-color: ${color}; margin-right: 5px;"></span>
|
|
${label} <br>
|
|
`;
|
|
});
|
|
</script>
|
|
@endsection
|