198 lines
9.2 KiB
PHP
198 lines
9.2 KiB
PHP
<x-app-layout>
|
|
<x-slot name="header">
|
|
<div class="flex items-center justify-between flex-wrap gap-4">
|
|
<div class="flex items-center gap-3">
|
|
<a href="{{ route('websites.index') }}" class="text-gray-400 hover:text-gray-600">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
|
|
</svg>
|
|
</a>
|
|
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
|
{{ $website->name }}
|
|
</h2>
|
|
<span class="text-sm text-gray-400">{{ $website->domain }}</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4">
|
|
{{-- Real-time indicator --}}
|
|
<div
|
|
x-data="realtimeWidget('{{ route('dashboard.realtime', $website) }}')"
|
|
x-init="start()"
|
|
class="flex items-center gap-2 rounded-md bg-green-50 px-3 py-1.5 text-sm"
|
|
>
|
|
<span class="relative flex h-2.5 w-2.5">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500"></span>
|
|
</span>
|
|
<span class="font-medium text-green-800">
|
|
<span x-text="count"></span> active now
|
|
</span>
|
|
</div>
|
|
|
|
<x-date-range-picker :website="$website" :from="$from" :to="$to" />
|
|
|
|
<div class="flex items-center gap-2">
|
|
<a href="{{ route('websites.snippet', $website) }}" class="text-sm text-gray-500 hover:text-gray-700">Snippet</a>
|
|
<a href="{{ route('websites.edit', $website) }}" class="text-sm text-gray-500 hover:text-gray-700">Settings</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</x-slot>
|
|
|
|
<div class="py-8">
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
|
|
|
|
{{-- Metric Cards --}}
|
|
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
|
|
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-5">
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Page Views</dt>
|
|
<dd class="mt-1 text-2xl font-bold text-gray-900">{{ number_format($metrics['page_views']) }}</dd>
|
|
</div>
|
|
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-5">
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Unique Visitors</dt>
|
|
<dd class="mt-1 text-2xl font-bold text-gray-900">{{ number_format($metrics['visitors']) }}</dd>
|
|
</div>
|
|
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-5">
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Sessions</dt>
|
|
<dd class="mt-1 text-2xl font-bold text-gray-900">{{ number_format($metrics['sessions']) }}</dd>
|
|
</div>
|
|
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-5">
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Bounce Rate</dt>
|
|
<dd class="mt-1 text-2xl font-bold text-gray-900">{{ $metrics['bounce_rate'] }}%</dd>
|
|
</div>
|
|
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-5">
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Avg. Duration</dt>
|
|
<dd class="mt-1 text-2xl font-bold text-gray-900">{{ gmdate('i:s', (int) $metrics['avg_duration']) }}</dd>
|
|
</div>
|
|
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-5">
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Pages / Session</dt>
|
|
<dd class="mt-1 text-2xl font-bold text-gray-900">{{ $metrics['avg_pages'] }}</dd>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Visitors Chart --}}
|
|
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-base font-semibold text-gray-900">Visitors & Page Views</h3>
|
|
<div class="flex items-center gap-4 text-xs text-gray-500">
|
|
<span class="flex items-center gap-1.5">
|
|
<span class="inline-block w-3 h-0.5 rounded bg-indigo-500"></span> Visitors
|
|
</span>
|
|
<span class="flex items-center gap-1.5">
|
|
<span class="inline-block w-3 h-0.5 rounded bg-emerald-500"></span> Page Views
|
|
</span>
|
|
<span class="flex items-center gap-1.5">
|
|
<span class="inline-block w-3 h-0.5 rounded bg-amber-400"></span> Sessions
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height: 320px;">
|
|
<canvas id="visitors-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const raw = @json($chartData);
|
|
const labels = raw.map(d => d.period);
|
|
const visitors = raw.map(d => d.visitors);
|
|
const pageViews = raw.map(d => d.page_views);
|
|
const sessions = raw.map(d => d.sessions);
|
|
|
|
new Chart(document.getElementById('visitors-chart'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [
|
|
{
|
|
label: 'Visitors',
|
|
data: visitors,
|
|
borderColor: 'rgb(99, 102, 241)',
|
|
backgroundColor: 'rgba(99, 102, 241, 0.08)',
|
|
fill: true,
|
|
tension: 0.3,
|
|
pointRadius: labels.length > 60 ? 0 : 3,
|
|
borderWidth: 2,
|
|
},
|
|
{
|
|
label: 'Page Views',
|
|
data: pageViews,
|
|
borderColor: 'rgb(16, 185, 129)',
|
|
backgroundColor: 'rgba(16, 185, 129, 0.05)',
|
|
fill: true,
|
|
tension: 0.3,
|
|
pointRadius: labels.length > 60 ? 0 : 3,
|
|
borderWidth: 2,
|
|
},
|
|
{
|
|
label: 'Sessions',
|
|
data: sessions,
|
|
borderColor: 'rgb(251, 191, 36)',
|
|
backgroundColor: 'rgba(251, 191, 36, 0.05)',
|
|
fill: true,
|
|
tension: 0.3,
|
|
pointRadius: labels.length > 60 ? 0 : 3,
|
|
borderWidth: 2,
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
interaction: { intersect: false, mode: 'index' },
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: {
|
|
backgroundColor: 'rgba(17, 24, 39, 0.9)',
|
|
padding: 12,
|
|
cornerRadius: 8,
|
|
titleFont: { size: 13 },
|
|
bodyFont: { size: 12 },
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
grid: { display: false },
|
|
ticks: {
|
|
maxTicksLimit: 12,
|
|
font: { size: 11 },
|
|
color: '#9ca3af',
|
|
},
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: { color: 'rgba(0,0,0,0.04)' },
|
|
ticks: {
|
|
font: { size: 11 },
|
|
color: '#9ca3af',
|
|
precision: 0,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
});
|
|
|
|
function realtimeWidget(url) {
|
|
return {
|
|
count: {{ $activeVisitors }},
|
|
start() {
|
|
setInterval(() => {
|
|
fetch(url)
|
|
.then(r => r.json())
|
|
.then(d => { this.count = d.active; })
|
|
.catch(() => {});
|
|
}, 30000);
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
@endpush
|
|
</x-app-layout>
|