Add URL Click Chart (#978)

app/Livewire/Chart/UrlClickChart.php

@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Livewire\Chart;
+
+use App\Models\Url;
+use App\Models\Visit;
+use Carbon\CarbonPeriod;
+use Filament\Widgets\ChartWidget;
+use Flowframe\Trend\Trend;
+use Flowframe\Trend\TrendValue;
+
+class UrlClickChart extends ChartWidget
+{
+    protected static ?string $maxHeight = '250px';
+
+    public Url $model;
+
+    protected function getData(): array
+    {
+        $startDate = now()->subQuarter();
+        $endDate = now();
+        $carbon = CarbonPeriod::create($startDate, $endDate)->toArray();
+        $label = collect($carbon)->map(fn ($date) => $date->format('M d'))
+            ->toArray();
+
+        $visitModel = Visit::where('url_id', $this->model->id);
+        $data = Trend::query($visitModel)
+            ->between(start: $startDate, end: $endDate)
+            ->perDay()
+            ->count();
+
+        return [
+            'datasets' => [
+                [
+                    'label' => 'Clicks',
+                    'data' => $data->map(fn (TrendValue $value) => $value->aggregate),
+                    'backgroundColor' => '#36A2EB',
+                    'borderColor' => '#9BD0F5',
+                ],
+            ],
+            'labels' => $label,
+        ];
+    }
+
+    protected function getType(): string
+    {
+        return 'line';
+    }
+
+    public function getDescription(): ?string
+    {
+        return 'Number of clicks on each day for 4 months';
+    }
+}

composer.json

@@ -9,6 +9,8 @@
         "blade-ui-kit/blade-icons": "^1.6",
         "embed/embed": "^4.4",
         "endroid/qr-code": "^5.0",
+        "filament/widgets": "^3.2",
+        "flowframe/laravel-trend": "^0.2.0",
         "laravel/fortify": "^1.20",
         "laravel/framework": "^11.0",
         "laravel/tinker": "^2.9",
@@ -56,7 +58,8 @@
     "scripts": {
         "post-autoload-dump": [
             "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
-            "@php artisan package:discover --ansi"
+            "@php artisan package:discover --ansi",
+            "@php artisan filament:upgrade"
         ],
         "post-update-cmd": [
             "@php artisan vendor:publish --tag=laravel-assets --ansi --force"

resources/views/frontend/short.blade.php

@@ -70,6 +70,11 @@
                         </div>
                     </div>
                 </div>
+
+                <div class="mt-20">
+                    @livewire(\App\Livewire\Chart\UrlClickChart::class, ['model' => $url])
+                </div>
+
             </div>
         </div>
     </div>

resources/views/layouts/frontend.blade.php

@@ -9,6 +9,7 @@
     <title>{{config('app.name').' - Simplify your links'}}</title>
 
     @livewireStyles
+    @filamentStyles
     @vite(['resources/css/main.css', 'resources/js/app.js'])
 </head>
 
@@ -18,6 +19,7 @@
     @yield('content')
 
     @livewireScripts
+    @filamentScripts
 </body>
 
 </html>

tailwind.config.js

@@ -10,6 +10,7 @@ export default {
         "./app/Livewire/**/*Table.php",
         "./vendor/power-components/livewire-powergrid/resources/views/**/*.php",
         "./vendor/power-components/livewire-powergrid/src/Themes/Tailwind.php",
+        './vendor/filament/**/*.blade.php',
     ],
     presets: [
         presetPowerGrid,