How to view PanAnalytics data in your Filament dashboard page

Pan is a lightweight and privacy-focused PHP product analytics library created by Nuno Maduro. After implementing it in this new version of my FilamentComponents.com website, I just wanted a way to view the reports in a friendly manner, since I use Filament. So let's dive in!

Before we begin, make sure you have the Pan library installed in your Laravel project. To do that, please follow the steps described in the Pan repository's README file.

# Creating the Widget

First of all, I have created a new widget for my Filament dashboard. To do this yourself, run the following command...

1php artisan make:filament-widget PanAnalytics

...and then select the 'Table' type in the choices list. This will create a new widget in the app/Filament/Widgets directory. The raw generated widget should look something like this:

 1<?php
 2 
 3namespace App\Filament\Widgets;
 4 
 5use Filament\Tables\Table;
 6use Filament\Widgets\TableWidget as BaseWidget;
 7 
 8class PanAnalytics extends BaseWidget
 9{
10    public function table(Table $table): Table
11    {
12        return $table
13            ->query(
14                //
15            )
16            ->columns([
17                //
18            ]);
19    }
20}

# Creating the PanAnalytics Model

Well, because the table widget needs an \Illuminate\Database\Eloquent\Builder, I've created a new model to help me fetch the data from the pan_analytics table. So, let's create the new model:

1php artisan make:model PanAnalytics

And that's it! Now we can retrieve the Pan Analytics data from the database.

# Adding the Pan Analytics Data

This step is pretty simple. I've just added the query and corresponding columns to the PanAnalytic widget table:

 1//...
 2public function table(Table $table): Table
 3{
 4    return $table
 5        ->query(\App\Models\PanAnalytics::query())
 6        ->columns([
 7            Tables\Columns\TextColumn::make('name'),
 8 
 9            Tables\Columns\TextColumn::make('impressions'),
10 
11            Tables\Columns\TextColumn::make('hovers'),
12 
13            Tables\Columns\TextColumn::make('clicks'),
14        ]);
15}

In the end, you'll get something like this in your Filament dashboard:

Over & out! Great achievements in everything you do! 🚀