phase 8 and 9
This commit is contained in:
Stefanescu Mihai
@@ -1,306 +1,222 @@
|
||||
<x-app-layout>
|
||||
<x-slot name="header">
|
||||
<div class="flex items-center justify-between flex-wrap gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<a href="{{ route('websites.index') }}" class="text-gray-400 hover:text-gray-600">
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
</a>
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
||||
{{ $website->name }}
|
||||
</h2>
|
||||
<span class="text-sm text-gray-400">{{ $website->domain }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
{{-- Real-time indicator --}}
|
||||
<div
|
||||
x-data="realtimeWidget('{{ route('dashboard.realtime', $website) }}')"
|
||||
x-init="start()"
|
||||
class="flex items-center gap-2 rounded-md bg-green-50 px-3 py-1.5 text-sm"
|
||||
>
|
||||
<span class="relative flex h-2.5 w-2.5">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500"></span>
|
||||
</span>
|
||||
<span class="font-medium text-green-800">
|
||||
<span x-text="count"></span> active now
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<x-date-range-picker :website="$website" :from="$from" :to="$to" />
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<a href="{{ route('websites.snippet', $website) }}" class="text-sm text-gray-500 hover:text-gray-700">Snippet</a>
|
||||
<a href="{{ route('websites.edit', $website) }}" class="text-sm text-gray-500 hover:text-gray-700">Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
<x-analytics-layout :website="$website" :from="$from" :to="$to" title="Dashboard">
|
||||
<x-slot name="headerActions">
|
||||
<div
|
||||
x-data="realtimeWidget('{{ route('dashboard.realtime', $website) }}', {{ $activeVisitors }})"
|
||||
x-init="start()"
|
||||
class="hidden sm:flex items-center gap-2 rounded-full bg-emerald-50 px-3 py-1.5 text-sm ring-1 ring-emerald-200"
|
||||
>
|
||||
<span class="relative flex h-2 w-2">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
|
||||
</span>
|
||||
<span class="font-medium text-emerald-800"><span x-text="count"></span> online</span>
|
||||
</div>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-8">
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
|
||||
<div class="space-y-6">
|
||||
{{-- Metric cards --}}
|
||||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
|
||||
<x-metric-card label="Page Views" :value="$metrics['page_views']" :previousValue="$prevMetrics['page_views']" />
|
||||
<x-metric-card label="Unique Visitors" :value="$metrics['visitors']" :previousValue="$prevMetrics['visitors']" />
|
||||
<x-metric-card label="Sessions" :value="$metrics['sessions']" :previousValue="$prevMetrics['sessions']" />
|
||||
<x-metric-card label="Bounce Rate" :value="$metrics['bounce_rate']" :previousValue="$prevMetrics['bounce_rate']" format="percent" />
|
||||
<x-metric-card label="Avg. Duration" :value="$metrics['avg_duration']" :previousValue="$prevMetrics['avg_duration']" format="duration" />
|
||||
<x-metric-card label="Pages / Session" :value="$metrics['avg_pages']" :previousValue="$prevMetrics['avg_pages']" />
|
||||
</div>
|
||||
|
||||
{{-- Metric Cards --}}
|
||||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-5">
|
||||
<dt class="text-sm font-medium text-gray-500 truncate">Page Views</dt>
|
||||
<dd class="mt-1 text-2xl font-bold text-gray-900">{{ number_format($metrics['page_views']) }}</dd>
|
||||
</div>
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-5">
|
||||
<dt class="text-sm font-medium text-gray-500 truncate">Unique Visitors</dt>
|
||||
<dd class="mt-1 text-2xl font-bold text-gray-900">{{ number_format($metrics['visitors']) }}</dd>
|
||||
</div>
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-5">
|
||||
<dt class="text-sm font-medium text-gray-500 truncate">Sessions</dt>
|
||||
<dd class="mt-1 text-2xl font-bold text-gray-900">{{ number_format($metrics['sessions']) }}</dd>
|
||||
</div>
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-5">
|
||||
<dt class="text-sm font-medium text-gray-500 truncate">Bounce Rate</dt>
|
||||
<dd class="mt-1 text-2xl font-bold text-gray-900">{{ $metrics['bounce_rate'] }}%</dd>
|
||||
</div>
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-5">
|
||||
<dt class="text-sm font-medium text-gray-500 truncate">Avg. Duration</dt>
|
||||
<dd class="mt-1 text-2xl font-bold text-gray-900">{{ gmdate('i:s', (int) $metrics['avg_duration']) }}</dd>
|
||||
</div>
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-5">
|
||||
<dt class="text-sm font-medium text-gray-500 truncate">Pages / Session</dt>
|
||||
<dd class="mt-1 text-2xl font-bold text-gray-900">{{ $metrics['avg_pages'] }}</dd>
|
||||
{{-- Visitors chart --}}
|
||||
<div class="bg-white rounded-xl border border-gray-200 p-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-base font-semibold text-gray-900">Visitors & Page Views</h3>
|
||||
<div class="flex items-center gap-4 text-xs text-gray-500">
|
||||
<span class="flex items-center gap-1.5"><span class="inline-block w-3 h-0.5 rounded bg-indigo-500"></span>Visitors</span>
|
||||
<span class="flex items-center gap-1.5"><span class="inline-block w-3 h-0.5 rounded bg-emerald-500"></span>Page Views</span>
|
||||
<span class="flex items-center gap-1.5"><span class="inline-block w-3 h-0.5 rounded bg-amber-400"></span>Sessions</span>
|
||||
</div>
|
||||
</div>
|
||||
@if (collect($chartData)->sum('page_views') > 0)
|
||||
<div style="height: 300px;"><canvas id="visitors-chart"></canvas></div>
|
||||
@else
|
||||
<x-empty-state message="No traffic data for this period." compact />
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- Visitors Chart --}}
|
||||
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
|
||||
{{-- Two-column: Top Pages + Top Sources --}}
|
||||
<div class="grid gap-6 lg:grid-cols-2">
|
||||
{{-- Top pages --}}
|
||||
<div class="bg-white rounded-xl border border-gray-200 p-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-base font-semibold text-gray-900">Visitors & Page Views</h3>
|
||||
<div class="flex items-center gap-4 text-xs text-gray-500">
|
||||
<span class="flex items-center gap-1.5">
|
||||
<span class="inline-block w-3 h-0.5 rounded bg-indigo-500"></span> Visitors
|
||||
</span>
|
||||
<span class="flex items-center gap-1.5">
|
||||
<span class="inline-block w-3 h-0.5 rounded bg-emerald-500"></span> Page Views
|
||||
</span>
|
||||
<span class="flex items-center gap-1.5">
|
||||
<span class="inline-block w-3 h-0.5 rounded bg-amber-400"></span> Sessions
|
||||
</span>
|
||||
</div>
|
||||
<h3 class="text-base font-semibold text-gray-900">Top Pages</h3>
|
||||
<a href="{{ route('reports.pages', [$website] + request()->only(['range', 'from', 'to'])) }}" class="text-sm text-indigo-600 hover:text-indigo-800">View all</a>
|
||||
</div>
|
||||
|
||||
<div style="height: 320px;">
|
||||
<canvas id="visitors-chart"></canvas>
|
||||
</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>
|
||||
@if ($topPages->isEmpty())
|
||||
<x-empty-state message="No page data yet." compact />
|
||||
@else
|
||||
<div class="space-y-3">
|
||||
@php $maxViews = $topPages->max('views') ?: 1; @endphp
|
||||
@foreach ($topPages as $page)
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-1">
|
||||
<span class="text-gray-700 truncate font-mono text-xs" title="{{ $page->path }}">{{ Str::limit($page->path, 50) }}</span>
|
||||
<span class="text-gray-500 tabular-nums ml-2 shrink-0">{{ number_format($page->views) }}</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 class="w-full bg-gray-100 rounded-full h-1.5">
|
||||
<div class="bg-indigo-500 h-1.5 rounded-full transition-all" style="width: {{ ($page->views / $maxViews) * 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>
|
||||
@php $q = request()->only(['range', 'from', 'to']); @endphp
|
||||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div>
|
||||
<h4 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Audience</h4>
|
||||
<div class="space-y-1">
|
||||
<a href="{{ route('reports.geographic', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Geographic</a>
|
||||
<a href="{{ route('reports.technology', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Technology</a>
|
||||
<a href="{{ route('reports.language', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Language</a>
|
||||
<a href="{{ route('reports.new-vs-returning', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">New vs Returning</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Acquisition</h4>
|
||||
<div class="space-y-1">
|
||||
<a href="{{ route('reports.sources', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Traffic Sources</a>
|
||||
<a href="{{ route('reports.campaigns', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Campaigns</a>
|
||||
<a href="{{ route('reports.referrers', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Referrers</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Behavior</h4>
|
||||
<div class="space-y-1">
|
||||
<a href="{{ route('reports.pages', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Pages</a>
|
||||
<a href="{{ route('reports.landing-pages', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Landing Pages</a>
|
||||
<a href="{{ route('reports.exit-pages', [$website] + $q) }}" class="block text-sm text-indigo-600 hover:text-indigo-800">Exit Pages</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- Top sources --}}
|
||||
<div class="bg-white rounded-xl border border-gray-200 p-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-base font-semibold text-gray-900">Traffic Sources</h3>
|
||||
<a href="{{ route('reports.sources', [$website] + request()->only(['range', 'from', 'to'])) }}" class="text-sm text-indigo-600 hover:text-indigo-800">View all</a>
|
||||
</div>
|
||||
@if ($topSources->isEmpty())
|
||||
<x-empty-state message="No traffic source data yet." compact />
|
||||
@else
|
||||
<div class="flex gap-6">
|
||||
<div class="w-40 h-40 shrink-0"><canvas id="sources-donut"></canvas></div>
|
||||
<div class="flex-1 space-y-2 min-w-0">
|
||||
@php $maxSess = $topSources->max('sessions') ?: 1; @endphp
|
||||
@foreach ($topSources as $src)
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-700 truncate">{{ $src->source }}</span>
|
||||
<span class="text-gray-500 tabular-nums ml-2 shrink-0">{{ number_format($src->sessions) }}</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Goal completions --}}
|
||||
@if ($goalConversions->isNotEmpty())
|
||||
<div class="bg-white rounded-xl border border-gray-200 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</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>
|
||||
@if ($goalChartData->sum('completions') > 0)
|
||||
<div class="mt-4" style="height: 100px;"><canvas id="goal-sparkline"></canvas></div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
|
||||
<script>
|
||||
const chartDefaults = {
|
||||
font: { family: 'Inter, system-ui, sans-serif' },
|
||||
color: '#9ca3af',
|
||||
};
|
||||
|
||||
Chart.defaults.font = chartDefaults.font;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const raw = @json($chartData);
|
||||
const labels = raw.map(d => d.period);
|
||||
const visitors = raw.map(d => d.visitors);
|
||||
const pageViews = raw.map(d => d.page_views);
|
||||
const sessions = raw.map(d => d.sessions);
|
||||
if (raw.some(d => d.page_views > 0)) {
|
||||
new Chart(document.getElementById('visitors-chart'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: raw.map(d => d.period),
|
||||
datasets: [
|
||||
{ label: 'Visitors', data: raw.map(d => d.visitors), borderColor: '#6366f1', backgroundColor: 'rgba(99,102,241,0.06)', fill: true, tension: 0.35, pointRadius: raw.length > 60 ? 0 : 3, borderWidth: 2 },
|
||||
{ label: 'Page Views', data: raw.map(d => d.page_views), borderColor: '#10b981', backgroundColor: 'rgba(16,185,129,0.04)', fill: true, tension: 0.35, pointRadius: raw.length > 60 ? 0 : 3, borderWidth: 2 },
|
||||
{ label: 'Sessions', data: raw.map(d => d.sessions), borderColor: '#f59e0b', backgroundColor: 'rgba(245,158,11,0.04)', fill: true, tension: 0.35, pointRadius: raw.length > 60 ? 0 : 3, borderWidth: 2 },
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: { intersect: false, mode: 'index' },
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: { backgroundColor: 'rgba(17,24,39,0.95)', padding: 12, cornerRadius: 8, titleFont: { size: 13 }, bodyFont: { size: 12 } },
|
||||
},
|
||||
scales: {
|
||||
x: { grid: { display: false }, ticks: { maxTicksLimit: 12, font: { size: 11 }, color: '#9ca3af' } },
|
||||
y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.04)' }, ticks: { font: { size: 11 }, color: '#9ca3af', precision: 0 } },
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
new Chart(document.getElementById('visitors-chart'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Visitors',
|
||||
data: visitors,
|
||||
borderColor: 'rgb(99, 102, 241)',
|
||||
backgroundColor: 'rgba(99, 102, 241, 0.08)',
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
pointRadius: labels.length > 60 ? 0 : 3,
|
||||
borderWidth: 2,
|
||||
},
|
||||
{
|
||||
label: 'Page Views',
|
||||
data: pageViews,
|
||||
borderColor: 'rgb(16, 185, 129)',
|
||||
backgroundColor: 'rgba(16, 185, 129, 0.05)',
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
pointRadius: labels.length > 60 ? 0 : 3,
|
||||
borderWidth: 2,
|
||||
},
|
||||
{
|
||||
label: 'Sessions',
|
||||
data: sessions,
|
||||
borderColor: 'rgb(251, 191, 36)',
|
||||
backgroundColor: 'rgba(251, 191, 36, 0.05)',
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
pointRadius: labels.length > 60 ? 0 : 3,
|
||||
borderWidth: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: { intersect: false, mode: 'index' },
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(17, 24, 39, 0.9)',
|
||||
padding: 12,
|
||||
cornerRadius: 8,
|
||||
titleFont: { size: 13 },
|
||||
bodyFont: { size: 12 },
|
||||
},
|
||||
// Sources donut
|
||||
const sourcesCanvas = document.getElementById('sources-donut');
|
||||
if (sourcesCanvas) {
|
||||
const srcData = @json($topSources);
|
||||
const colors = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#14b8a6'];
|
||||
new Chart(sourcesCanvas, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: srcData.map(s => s.source),
|
||||
datasets: [{ data: srcData.map(s => s.sessions), backgroundColor: colors.slice(0, srcData.length), borderWidth: 0, spacing: 2 }],
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: { display: false },
|
||||
ticks: {
|
||||
maxTicksLimit: 12,
|
||||
font: { size: 11 },
|
||||
color: '#9ca3af',
|
||||
},
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: { color: 'rgba(0,0,0,0.04)' },
|
||||
ticks: {
|
||||
font: { size: 11 },
|
||||
color: '#9ca3af',
|
||||
precision: 0,
|
||||
},
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
cutout: '65%',
|
||||
plugins: { legend: { display: false }, tooltip: { backgroundColor: 'rgba(17,24,39,0.95)', padding: 10, cornerRadius: 8 } },
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 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: '#10b981', backgroundColor: 'rgba(16,185,129,0.08)', fill: true, tension: 0.35, 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 } },
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 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) {
|
||||
function realtimeWidget(url, initial) {
|
||||
return {
|
||||
count: {{ $activeVisitors }},
|
||||
count: initial,
|
||||
start() {
|
||||
setInterval(() => {
|
||||
fetch(url)
|
||||
.then(r => r.json())
|
||||
.then(d => { this.count = d.active; })
|
||||
.catch(() => {});
|
||||
fetch(url).then(r => r.json()).then(d => { this.count = d.active; }).catch(() => {});
|
||||
}, 30000);
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
</x-app-layout>
|
||||
</x-analytics-layout>
|
||||
|
||||
Reference in New Issue
Block a user