root/analytics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

phase 8 and 9

Browse Source
This commit is contained in:
Stefanescu Mihai
2026-03-19 18:42:19 +02:00
parent d75cabfeec
commit 82ebb697f3
94 changed files with 4498 additions and 749 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/reports/audience/technology.blade.php
+58 -20
View File
@@ -1,28 +1,68 @@
<x-report-layout :website="$website" :from="$from" :to="$to" title="Technology Report">
<x-slot name="scripts">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const devicesData = @json($devices->map(fn($d) => ['label' => $d->device_type ?? 'Unknown', 'visitors' => $d->visitors])->values());
if (devicesData.length > 0) {
const ctx = document.getElementById('deviceChart');
if (ctx) {
const colors = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#14b8a6'];
new Chart(ctx, {
type: 'doughnut',
data: {
labels: devicesData.map(d => d.label),
datasets: [{
data: devicesData.map(d => d.visitors),
backgroundColor: colors.slice(0, devicesData.length),
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: {
backgroundColor: 'rgba(17,24,39,0.95)',
padding: 10,
cornerRadius: 8
}
}
}
});
}
}
});
</script>
</x-slot>
<div class="space-y-6">
{{-- Device Type --}}
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden p-6">
<h3 class="text-base font-semibold text-gray-900 mb-4">Device Type</h3>
@if ($devices->isNotEmpty())
@php $totalDevices = $devices->sum('visitors'); @endphp
<div class="grid gap-4 sm:grid-cols-3 mb-4">
@foreach ($devices as $row)
<div class="rounded-lg border border-gray-200 p-4 text-center">
<div class="text-2xl font-bold text-gray-900">{{ $totalDevices > 0 ? round(($row->visitors / $totalDevices) * 100, 1) : 0 }}%</div>
<div class="text-sm text-gray-500 capitalize mt-1">{{ $row->device_type ?? 'Unknown' }}</div>
<div class="text-xs text-gray-400">{{ number_format($row->visitors) }} visitors</div>
</div>
@endforeach
<div class="grid gap-6 lg:grid-cols-2">
<div class="h-64">
<canvas id="deviceChart"></canvas>
</div>
<div class="grid gap-4 sm:grid-cols-3">
@foreach ($devices as $row)
<div class="rounded-xl border border-gray-200 p-4 text-center">
<div class="text-2xl font-bold text-gray-900">{{ $totalDevices > 0 ? round(($row->visitors / $totalDevices) * 100, 1) : 0 }}%</div>
<div class="text-sm text-gray-500 capitalize mt-1">{{ $row->device_type ?? 'Unknown' }}</div>
<div class="text-xs text-gray-400">{{ number_format($row->visitors) }} visitors</div>
</div>
@endforeach
</div>
</div>
@else
<p class="text-sm text-gray-500 py-4 text-center">No device data available.</p>
<x-empty-state message="No device data available." />
@endif
</div>
<div class="grid gap-6 lg:grid-cols-2">
{{-- Browsers --}}
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden p-6">
<h3 class="text-base font-semibold text-gray-900 mb-4">Browsers</h3>
@if ($browsers->isNotEmpty())
@php $totalBrowsers = $browsers->sum('visitors'); @endphp
@@ -40,12 +80,11 @@
@endforeach
</div>
@else
<p class="text-sm text-gray-500 py-4 text-center">No browser data available.</p>
<x-empty-state message="No browser data available." />
@endif
</div>
{{-- Operating Systems --}}
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden p-6">
<h3 class="text-base font-semibold text-gray-900 mb-4">Operating Systems</h3>
@if ($operatingSystems->isNotEmpty())
@php $totalOS = $operatingSystems->sum('visitors'); @endphp
@@ -63,13 +102,12 @@
@endforeach
</div>
@else
<p class="text-sm text-gray-500 py-4 text-center">No OS data available.</p>
<x-empty-state message="No OS data available." />
@endif
</div>
</div>
{{-- Screen Resolutions --}}
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden p-6">
<h3 class="text-base font-semibold text-gray-900 mb-4">Screen Resolutions</h3>
@if ($resolutions->isNotEmpty())
<div class="overflow-x-auto">
@@ -91,7 +129,7 @@
</table>
</div>
@else
<p class="text-sm text-gray-500 py-4 text-center">No screen resolution data available.</p>
<x-empty-state message="No screen resolution data available." />
@endif
</div>
</div>