Top Pages

<livewire:artisanpack-analytics::top-pages />

<livewire:artisanpack-analytics::top-pages
    :limit="25"
/>

<livewire:artisanpack-analytics::top-pages
    date-range-preset="thisMonth"
    :limit="15"
/>

<livewire:artisanpack-analytics::top-pages
    :site-id="$site->id"
/>

[
    'path' => '/products/widget',
    'title' => 'Widget Product Page',
    'views' => 1234,           // Total page views
    'unique_views' => 890,     // Unique visitors
    'avg_time' => 45,          // Average time on page (seconds)
    'bounce_rate' => 35.5,     // Bounce rate percentage
]

$this->loadData();

php artisan vendor:publish --tag=analytics-views

<div class="overflow-x-auto">
    <table class="table table-zebra">
        <thead>
            <tr>
                <th>Page</th>
                <th class="text-right">Views</th>
                <th class="text-right">Unique</th>
                <th class="text-right">Bounce Rate</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($pages as $page)
                <tr>
                    <td>
                        <div class="font-medium">{{ $page['title'] ?: $page['path'] }}</div>
                        <div class="text-sm text-gray-500">{{ $page['path'] }}</div>
                    </td>
                    <td class="text-right">{{ number_format($page['views']) }}</td>
                    <td class="text-right">{{ number_format($page['unique_views']) }}</td>
                    <td class="text-right">{{ number_format($page['bounce_rate'], 1) }}%</td>
                </tr>
            @empty
                <tr>
                    <td colspan="4" class="text-center text-gray-500">
                        No page views recorded
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

// In a custom component extending TopPages
public int $perPage = 10;

public function loadData(): void
{
    $this->pages = $this->getAnalyticsQuery()
        ->getTopPages($this->getDateRange(), $this->perPage, $this->getFilters());
}

<div>
    <input
        type="text"
        wire:model.live.debounce.300ms="search"
        placeholder="Filter pages..."
        class="input input-bordered w-full mb-4"
    />

    <livewire:artisanpack-analytics::top-pages />
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div class="card bg-base-100 shadow">
        <div class="card-body">
            <h3 class="card-title">Top Pages</h3>
            <livewire:artisanpack-analytics::top-pages :limit="5" />
        </div>
    </div>

    <div class="card bg-base-100 shadow">
        <div class="card-body">
            <h3 class="card-title">Traffic Sources</h3>
            <livewire:artisanpack-analytics::traffic-sources :limit="5" />
        </div>
    </div>
</div>

@foreach ($pages as $page)
    <tr class="hover:bg-base-200 cursor-pointer"
        onclick="window.open('{{ $page['path'] }}', '_blank')">
        <td>{{ $page['title'] }}</td>
        <td>{{ $page['views'] }}</td>
    </tr>
@endforeach

use ArtisanPackUI\Analytics\Http\Livewire\Widgets\TopPages;

class CustomTopPages extends TopPages
{
    public string $sortBy = 'views';
    public string $sortDirection = 'desc';

    public function sortBy(string $column): void
    {
        if ($this->sortBy === $column) {
            $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
        } else {
            $this->sortBy = $column;
            $this->sortDirection = 'desc';
        }

        $this->loadData();
    }
}