first commit from hostslim
This commit is contained in:
@@ -0,0 +1,187 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user