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/geographic.blade.php
+153 -30
View File
@@ -1,57 +1,180 @@
<x-report-layout :website="$website" :from="$from" :to="$to" title="Geographic Report">
<x-slot name="scripts">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-geo@4/build/index.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', async function() {
const countriesData = @json($countries->map(fn($c) => ['country' => $c->country, 'visitors' => $c->visitors])->values());
if (countriesData.length > 0) {
// Bar chart
const barCtx = document.getElementById('countriesChart');
if (barCtx) {
new Chart(barCtx, {
type: 'bar',
data: {
labels: countriesData.slice(0, 10).map(d => d.country),
datasets: [{
label: 'Visitors',
data: countriesData.slice(0, 10).map(d => d.visitors),
backgroundColor: '#6366f1',
borderRadius: 6
}]
},
options: {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: { backgroundColor: 'rgba(17,24,39,0.95)', padding: 10, cornerRadius: 8 },
legend: { display: false }
},
scales: {
x: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.04)' } },
y: { grid: { display: false } }
}
}
});
}
// World map
const mapCtx = document.getElementById('worldMap');
if (mapCtx && window.ChartGeo) {
try {
const resp = await fetch('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json');
const topoData = await resp.json();
const countries110 = ChartGeo.topojson.feature(topoData, topoData.objects.countries).features;
const countryMap = {};
countriesData.forEach(d => { countryMap[d.country] = d.visitors; });
const maxVisitors = Math.max(...countriesData.map(d => d.visitors));
new Chart(mapCtx, {
type: 'choropleth',
data: {
labels: countries110.map(f => f.properties.name),
datasets: [{
label: 'Visitors',
outline: countries110,
data: countries110.map(f => ({
feature: f,
value: countryMap[f.properties.name] || 0
})),
}]
},
options: {
showOutline: true,
showGraticule: false,
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(17,24,39,0.95)',
padding: 10,
cornerRadius: 8,
callbacks: {
label: (ctx) => {
const val = ctx.raw?.value || 0;
return val > 0 ? `${ctx.label}: ${val.toLocaleString()} visitors` : `${ctx.label}: 0`;
}
}
}
},
scales: {
projection: {
axis: 'x',
projection: 'equalEarth',
},
color: {
axis: 'x',
quantize: 5,
legend: { display: false },
interpolate: (v) => {
const r = Math.round(99 + (255 - 99) * (1 - v));
const g = Math.round(102 + (255 - 102) * (1 - v));
const b = Math.round(241 + (255 - 241) * (1 - v));
return `rgb(${r},${g},${b})`;
},
}
}
}
});
} catch (e) {
document.getElementById('worldMapContainer')?.classList.add('hidden');
}
}
}
});
</script>
</x-slot>
<div class="space-y-6">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
{{-- World Map --}}
@if ($countries->isNotEmpty())
<div id="worldMapContainer" class="bg-white rounded-xl border border-gray-200 p-6">
<h3 class="text-base font-semibold text-gray-900 mb-4">World Map</h3>
<div style="height: 380px;"><canvas id="worldMap"></canvas></div>
</div>
@endif
{{-- Countries --}}
<div class="bg-white rounded-xl border border-gray-200 p-6">
<h3 class="text-base font-semibold text-gray-900 mb-4">Visitors by Country</h3>
@if ($countries->isEmpty())
<p class="text-sm text-gray-500 py-8 text-center">No geographic data available for this period.</p>
<x-empty-state icon="globe" message="No geographic data available for this period." />
@else
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Country</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Visitors</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">%</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
@php $totalCountry = $countries->sum('visitors'); @endphp
@foreach ($countries as $row)
<div class="grid gap-6 lg:grid-cols-2">
<div style="height: 320px;"><canvas id="countriesChart"></canvas></div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<td class="px-6 py-3 text-sm text-gray-900">{{ $row->country }}</td>
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ number_format($row->visitors) }}</td>
<td class="px-6 py-3 text-sm text-gray-500 text-right">{{ $totalCountry > 0 ? round(($row->visitors / $totalCountry) * 100, 1) : 0 }}%</td>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Country</th>
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Visitors</th>
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">%</th>
</tr>
@endforeach
</tbody>
</table>
</thead>
<tbody class="divide-y divide-gray-200">
@php $totalCountry = $countries->sum('visitors'); @endphp
@foreach ($countries as $row)
<tr>
<td class="px-4 py-2.5 text-sm text-gray-900">{{ $row->country }}</td>
<td class="px-4 py-2.5 text-sm text-gray-900 text-right tabular-nums">{{ number_format($row->visitors) }}</td>
<td class="px-4 py-2.5 text-sm text-gray-500 text-right tabular-nums">{{ $totalCountry > 0 ? round(($row->visitors / $totalCountry) * 100, 1) : 0 }}%</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
@endif
</div>
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
{{-- Cities --}}
<div class="bg-white rounded-xl border border-gray-200 p-6">
<h3 class="text-base font-semibold text-gray-900 mb-4">Visitors by City</h3>
@if ($cities->isEmpty())
<p class="text-sm text-gray-500 py-8 text-center">No city-level data available.</p>
<x-empty-state icon="globe" message="No city-level data available." />
@else
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">City</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Region</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Country</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Visitors</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">City</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Region</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Country</th>
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Visitors</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
@foreach ($cities as $row)
<tr>
<td class="px-6 py-3 text-sm text-gray-900">{{ $row->city }}</td>
<td class="px-6 py-3 text-sm text-gray-500">{{ $row->region }}</td>
<td class="px-6 py-3 text-sm text-gray-500">{{ $row->country }}</td>
<td class="px-6 py-3 text-sm text-gray-900 text-right">{{ number_format($row->visitors) }}</td>
<td class="px-4 py-2.5 text-sm text-gray-900">{{ $row->city }}</td>
<td class="px-4 py-2.5 text-sm text-gray-500">{{ $row->region }}</td>
<td class="px-4 py-2.5 text-sm text-gray-500">{{ $row->country }}</td>
<td class="px-4 py-2.5 text-sm text-gray-900 text-right tabular-nums">{{ number_format($row->visitors) }}</td>
</tr>
@endforeach
</tbody>
resources/views/reports/audience/language.blade.php
+2 -2
View File
@@ -1,6 +1,6 @@
<x-report-layout :website="$website" :from="$from" :to="$to" title="Language Report">
<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">Visitors by Language</h3>
@if ($languages->isNotEmpty())
@php $total = $languages->sum('visitors'); @endphp
@@ -18,7 +18,7 @@
@endforeach
</div>
@else
<p class="text-sm text-gray-500 py-8 text-center">No language data available for this period.</p>
<x-empty-state message="No language data available for this period." />
@endif
</div>
resources/views/reports/audience/new-vs-returning.blade.php
+53 -11
View File
@@ -1,19 +1,61 @@
<x-report-layout :website="$website" :from="$from" :to="$to" title="New vs Returning Visitors">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
<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 newCount = {{ $data['new'] }};
const returningCount = {{ $data['returning'] }};
if (newCount > 0 || returningCount > 0) {
const ctx = document.getElementById('newVsReturningChart');
if (ctx) {
new Chart(ctx, {
type: 'pie',
data: {
labels: ['New Visitors', 'Returning Visitors'],
datasets: [{
data: [newCount, returningCount],
backgroundColor: ['#6366f1', '#10b981'],
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="bg-white rounded-xl border border-gray-200 overflow-hidden p-6">
@if ($data['new'] === 0 && $data['returning'] === 0)
<p class="text-sm text-gray-500 py-8 text-center">No visitor data available for this period.</p>
<x-empty-state message="No visitor data available for this period." />
@else
<div class="grid gap-6 sm:grid-cols-2 max-w-lg mx-auto">
<div class="rounded-lg border-2 border-indigo-200 bg-indigo-50 p-6 text-center">
<div class="text-3xl font-bold text-indigo-700">{{ $data['new_pct'] }}%</div>
<div class="text-sm font-medium text-indigo-600 mt-1">New Visitors</div>
<div class="text-xs text-indigo-400 mt-0.5">{{ number_format($data['new']) }} visitors</div>
<div class="grid gap-6 lg:grid-cols-2">
<div class="h-64">
<canvas id="newVsReturningChart"></canvas>
</div>
<div class="rounded-lg border-2 border-emerald-200 bg-emerald-50 p-6 text-center">
<div class="text-3xl font-bold text-emerald-700">{{ $data['returning_pct'] }}%</div>
<div class="text-sm font-medium text-emerald-600 mt-1">Returning Visitors</div>
<div class="text-xs text-emerald-400 mt-0.5">{{ number_format($data['returning']) }} visitors</div>
<div class="grid gap-6 sm:grid-cols-2">
<div class="rounded-xl border-2 border-indigo-200 bg-indigo-50 p-6 text-center">
<div class="text-3xl font-bold text-indigo-700">{{ $data['new_pct'] }}%</div>
<div class="text-sm font-medium text-indigo-600 mt-1">New Visitors</div>
<div class="text-xs text-indigo-400 mt-0.5">{{ number_format($data['new']) }} visitors</div>
</div>
<div class="rounded-xl border-2 border-emerald-200 bg-emerald-50 p-6 text-center">
<div class="text-3xl font-bold text-emerald-700">{{ $data['returning_pct'] }}%</div>
<div class="text-sm font-medium text-emerald-600 mt-1">Returning Visitors</div>
<div class="text-xs text-emerald-400 mt-0.5">{{ number_format($data['returning']) }} visitors</div>
</div>
</div>
</div>
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>