phase 4
This commit is contained in:
@@ -92,6 +92,44 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Goal Completions --}}
|
||||
@if ($goalConversions->isNotEmpty())
|
||||
<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">Goal Completions</h3>
|
||||
<div class="flex items-center gap-3">
|
||||
<a href="{{ route('reports.conversions', [$website] + request()->only(['range', 'from', 'to'])) }}" class="text-sm text-indigo-600 hover:text-indigo-800">View report</a>
|
||||
<a href="{{ route('goals.index', $website) }}" class="text-sm text-gray-500 hover:text-gray-700">Manage goals</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
@foreach ($goalConversions->where('is_active', true)->take(6) as $goal)
|
||||
<div class="rounded-lg border border-gray-200 p-4">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="text-sm font-medium text-gray-900 truncate">{{ $goal->name }}</span>
|
||||
<span class="text-xs text-gray-500">{{ $goal->conversion_rate }}%</span>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-gray-900">{{ number_format($goal->completions) }}</div>
|
||||
@if ($goal->total_value)
|
||||
<div class="text-xs text-gray-500 mt-0.5">${{ number_format($goal->total_value, 2) }} value</div>
|
||||
@endif
|
||||
<div class="mt-2 w-full bg-gray-100 rounded-full h-1.5">
|
||||
<div class="bg-emerald-500 h-1.5 rounded-full" style="width: {{ min($goal->conversion_rate, 100) }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{{-- Sparkline chart --}}
|
||||
@if ($goalChartData->sum('completions') > 0)
|
||||
<div class="mt-4" style="height: 120px;">
|
||||
<canvas id="goal-sparkline"></canvas>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Quick Report Links --}}
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
|
||||
<h3 class="text-base font-semibold text-gray-900 mb-4">Reports</h3>
|
||||
@@ -123,9 +161,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Events</h4>
|
||||
<h4 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Events & Conversions</h4>
|
||||
<div class="space-y-1">
|
||||
<a href="{{ route('reports.events', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Events Overview</a>
|
||||
<a href="{{ route('reports.conversions', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Conversions</a>
|
||||
<a href="{{ route('goals.index', $website) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Manage Goals</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -218,6 +258,36 @@
|
||||
});
|
||||
});
|
||||
|
||||
// Goal sparkline
|
||||
const goalCanvas = document.getElementById('goal-sparkline');
|
||||
if (goalCanvas) {
|
||||
const goalRaw = @json($goalChartData);
|
||||
new Chart(goalCanvas, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: goalRaw.map(d => d.period),
|
||||
datasets: [{
|
||||
data: goalRaw.map(d => d.completions),
|
||||
borderColor: 'rgb(16, 185, 129)',
|
||||
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
pointRadius: 0,
|
||||
borderWidth: 2,
|
||||
}],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { legend: { display: false }, tooltip: { enabled: false } },
|
||||
scales: {
|
||||
x: { display: false },
|
||||
y: { display: false, beginAtZero: true },
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function realtimeWidget(url) {
|
||||
return {
|
||||
count: {{ $activeVisitors }},
|
||||
|
||||
Reference in New Issue
Block a user