188 lines
10 KiB
PHP
188 lines
10 KiB
PHP
|
<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">
|
||
|
|
{{-- 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())
|
||
|
|
<x-empty-state icon="globe" message="No geographic data available for this period." />
|
||
|
|
@else
|
||
|
|
<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>
|
||
|
|
<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>
|
||
|
|
</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>
|
||
|
|
|
||
|
|
{{-- 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())
|
||
|
|
<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-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-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>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</x-report-layout>
|