262 lines
9.7 KiB
PHP
262 lines
9.7 KiB
PHP
@extends('Admin.layouts.app')
|
|
|
|
@section('title', 'Statistik Sistem')
|
|
|
|
@section('page-title', 'Statistik Sistem')
|
|
|
|
@section('content')
|
|
<!-- Page Header -->
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-gray-900 mb-2">Statistik Sistem</h1>
|
|
<p class="text-gray-600">Pantau performa dan statistik sistem klasifikasi tomat</p>
|
|
</div>
|
|
|
|
<!-- Summary Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<!-- Total Klasifikasi Card -->
|
|
<div class="stat-card bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
|
|
<i class="fas fa-chart-bar text-blue-600 text-xl"></i>
|
|
</div>
|
|
<span class="text-xs text-green-600 font-medium bg-green-50 px-2 py-1 rounded-full">
|
|
+12.5%
|
|
</span>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-1">8,456</h3>
|
|
<p class="text-sm text-gray-600">Total Klasifikasi</p>
|
|
</div>
|
|
|
|
<!-- Klasifikasi Hari Ini Card -->
|
|
<div class="stat-card bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
|
|
<i class="fas fa-calendar-day text-green-600 text-xl"></i>
|
|
</div>
|
|
<span class="text-xs text-green-600 font-medium bg-green-50 px-2 py-1 rounded-full">
|
|
+8.2%
|
|
</span>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-1">142</h3>
|
|
<p class="text-sm text-gray-600">Klasifikasi Hari Ini</p>
|
|
</div>
|
|
|
|
<!-- Akurasi Rata-rata Card -->
|
|
<div class="stat-card bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
|
|
<i class="fas fa-bullseye text-purple-600 text-xl"></i>
|
|
</div>
|
|
<span class="text-xs text-green-600 font-medium bg-green-50 px-2 py-1 rounded-full">
|
|
+2.1%
|
|
</span>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-1">94.8%</h3>
|
|
<p class="text-sm text-gray-600">Akurasi Rata-rata</p>
|
|
</div>
|
|
|
|
<!-- Pengguna Aktif Admin Card -->
|
|
<div class="stat-card bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
|
|
<i class="fas fa-users text-orange-600 text-xl"></i>
|
|
</div>
|
|
<span class="text-xs text-gray-600 font-medium bg-gray-50 px-2 py-1 rounded-full">
|
|
0%
|
|
</span>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-1">12</h3>
|
|
<p class="text-sm text-gray-600">Pengguna Aktif Admin</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Section -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
|
<!-- Bar Chart - Jumlah Klasifikasi Harian -->
|
|
<div class="chart-card bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
|
|
<div class="mb-6">
|
|
<h2 class="text-lg font-semibold text-gray-900 mb-2">Jumlah Klasifikasi Harian</h2>
|
|
<p class="text-sm text-gray-600">Statistik klasifikasi per hari dalam 7 hari terakhir</p>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="barChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Line Chart - Tren Klasifikasi Bulanan -->
|
|
<div class="chart-card bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
|
|
<div class="mb-6">
|
|
<h2 class="text-lg font-semibold text-gray-900 mb-2">Tren Klasifikasi Bulanan</h2>
|
|
<p class="text-sm text-gray-600">Perkembangan klasifikasi per bulan</p>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="lineChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Donut Chart Section -->
|
|
<div class="chart-card bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
|
|
<div class="mb-6">
|
|
<h2 class="text-lg font-semibold text-gray-900 mb-2">Distribusi Kematangan Tomat</h2>
|
|
<p class="text-sm text-gray-600">Persentase hasil klasifikasi berdasarkan kategori kematangan</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div class="chart-container">
|
|
<canvas id="donutChart"></canvas>
|
|
</div>
|
|
<div class="flex items-center justify-center">
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<div class="w-4 h-4 bg-green-500 rounded-full mr-3"></div>
|
|
<span class="text-sm text-gray-700">Mentah</span>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-900">35%</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<div class="w-4 h-4 bg-yellow-500 rounded-full mr-3"></div>
|
|
<span class="text-sm text-gray-700">Setengah Matang</span>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-900">40%</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<div class="w-4 h-4 bg-pink-500 rounded-full mr-3"></div>
|
|
<span class="text-sm text-gray-700">Matang</span>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-900">25%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script>
|
|
// Bar Chart - Jumlah Klasifikasi Harian
|
|
const barCtx = document.getElementById('barChart').getContext('2d');
|
|
new Chart(barCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min'],
|
|
datasets: [{
|
|
label: 'Jumlah Klasifikasi',
|
|
data: [145, 189, 167, 198, 234, 178, 156],
|
|
backgroundColor: 'rgba(239, 68, 68, 0.8)',
|
|
borderColor: 'rgba(239, 68, 68, 1)',
|
|
borderWidth: 2,
|
|
borderRadius: 8,
|
|
barThickness: 40
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: 'rgba(0, 0, 0, 0.05)',
|
|
drawBorder: false
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false,
|
|
drawBorder: false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Line Chart - Tren Klasifikasi Bulanan
|
|
const lineCtx = document.getElementById('lineChart').getContext('2d');
|
|
new Chart(lineCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
|
|
datasets: [{
|
|
label: 'Jumlah Klasifikasi',
|
|
data: [1200, 1350, 1100, 1450, 1600, 1750, 1900, 1850, 2000, 2100, 1950, 2200],
|
|
borderColor: 'rgba(239, 68, 68, 1)',
|
|
backgroundColor: 'rgba(239, 68, 68, 0.1)',
|
|
borderWidth: 3,
|
|
fill: true,
|
|
tension: 0.4,
|
|
pointBackgroundColor: 'rgba(239, 68, 68, 1)',
|
|
pointBorderColor: '#fff',
|
|
pointBorderWidth: 2,
|
|
pointRadius: 6,
|
|
pointHoverRadius: 8
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: 'rgba(0, 0, 0, 0.05)',
|
|
drawBorder: false
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false,
|
|
drawBorder: false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Donut Chart - Distribusi Kematangan Tomat
|
|
const donutCtx = document.getElementById('donutChart').getContext('2d');
|
|
new Chart(donutCtx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['Mentah', 'Setengah Matang', 'Matang'],
|
|
datasets: [{
|
|
data: [35, 40, 25],
|
|
backgroundColor: [
|
|
'rgba(34, 197, 94, 0.8)',
|
|
'rgba(250, 204, 21, 0.8)',
|
|
'rgba(236, 72, 153, 0.8)'
|
|
],
|
|
borderColor: [
|
|
'rgba(34, 197, 94, 1)',
|
|
'rgba(250, 204, 21, 1)',
|
|
'rgba(236, 72, 153, 1)'
|
|
],
|
|
borderWidth: 2
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
cutout: '70%'
|
|
}
|
|
});
|
|
</script>
|
|
@endsection
|