Merge pull request #13 from awcodes/feat/shorthand-counts

Feature: support shorthand counts and tooltips with actual count

Author: awcodes

README.md

@@ -28,15 +28,19 @@ Then add the widget to your dashboard class or the Filament config file.
 ],
 ```
 
-## Usage
+## Configuration
 
 By default, Overlook will display any resource registered with Filament, while still honoring the `canViewAny` policy. This can be undesired and also slow down the dashboard. To prevent this behavior publish the config file with:
 
 ```bash
 php artisan vendor:publish --tag="overlook-config"
 ```
 
-Inside the config you will have options to either "include" or "exclude" resources from being displayed.
+Inside the config you will have options to either "include" or "exclude" resources from being displayed. These are not meant to work together, you should use one of the other.
+
+You can also choose to convert the count to a human-readable format. For example, 1000 will be converted to 1k. This is the default behavior. 
+
+Converted counts will also have a tooltip that displays the full count. This can be disabled by setting `enable_convert_tooltip` to false.
 
 ```php
 return [
@@ -48,9 +52,28 @@ return [
     'excludes' => [
 //        App\Filament\Resources\Blog\AuthorResource::class,
     ],
+    'should_convert_count' => true,
+    'enable_convert_tooltip' => true,
 ];
 ```
 
+## Reordering & Polling
+
+Should you need to reorder the location of the widget or want to enable polling, you can make your own version of the Overlook widget and register it instead.
+
+```php
+namespace App\Filament\Widgets;
+
+use Awcodes\Overlook\Overlook;
+
+class CustomOverlookWidget extends Overlook
+{
+    protected static ?int $sort = 10;
+
+    protected static ?string $pollingInterval = '10s';
+}
+```
+
 ## Changelog
 
 Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

config/overlook.php

@@ -7,4 +7,6 @@
     'excludes' => [
         // App\Filament\Resources\Blog\AuthorResource::class,
     ],
+    'should_convert_count' => true,
+    'enable_convert_tooltip' => true,
 ];

resources/dist/overlook.css

@@ -2,13 +2,19 @@
     @if($data)
         <ul class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
             @foreach($data as $resource)
-                <li class="rounded-xl border border-gray-200 dark:border-gray-800 relative h-24 bg-gradient-to-tr from-gray-100 via-white to-white dark:from-gray-900 dark:via-gray-800 dark:to-gray-800" wire:key="{{ $resource['name'] }}">
+                <li
+                    class="rounded-xl border border-gray-200 dark:border-gray-800 relative h-24 bg-gradient-to-tr from-gray-100 via-white to-white dark:from-gray-900 dark:via-gray-800 dark:to-gray-800"
+                    wire:key="{{ $resource['name'] }}"
+                    @if($this->shouldShowTooltip($resource['raw_count']))
+                        x-data x-tooltip="'{{ $resource['raw_count'] }}'"
+                    @endif
+                >
                     <a href="{{ $resource['url'] }}" class="overflow-hidden absolute inset-0 py-2 px-3 text-gray-600 font-medium rounded-xl ring-primary-500 dark:text-gray-400 group hover:ring-2 focus:ring-2">
                         @if ($resource['icon'])
                             <x-dynamic-component :component="$resource['icon']" class="w-auto h-24 absolute left-0 top-8 text-primary-500 opacity-20 dark:opacity-20 transition group-hover:scale-110 group-hover:-rotate-12 group-hover:opacity-40 dark:group-hover:opacity-80" />
                         @endif
                         {{ $resource['name'] }}
-                        <span class="text-gray-600 dark:text-gray-300 absolute bottom-4 right-4 text-3xl font-bold">{{ $resource['count'] }}</span>
+                        <span class="text-gray-600 dark:text-gray-300 absolute leading-none bottom-3 right-4 text-3xl font-bold">{{ $resource['count'] }}</span>
                     </a>
                 </li>
             @endforeach

resources/views/widget.blade.php

@@ -3,9 +3,7 @@
 namespace Awcodes\Overlook;
 
 use Filament\Facades\Filament;
-use Filament\Resources\Resource;
 use Filament\Widgets\Widget;
-use Illuminate\Support\Str;
 
 class Overlook extends Widget
 {
@@ -44,11 +42,13 @@ public function getData(): array
             return ! in_array($resource, $this->getExcludes());
         })->transform(function ($resource) {
             $res = app($resource);
+            $rawCount = $res::getEloquentQuery()->count();
 
             if ($res->canViewAny()) {
                 return [
                     'name' => ucfirst($res->getPluralModelLabel()),
-                    'count' => $res::getEloquentQuery()->count(),
+                    'raw_count' => $this->formatRawCount($rawCount),
+                    'count' => $this->convertCount($rawCount),
                     'icon' => invade($res)->getNavigationIcon(),
                     'url' => $res->getUrl('index'),
                 ];
@@ -61,4 +61,28 @@ public function getData(): array
             ->values()
             ->toArray();
     }
+
+    public function formatRawCount($number): string
+    {
+        return number_format($number);
+    }
+
+    public function convertCount($number): string
+    {
+        if (config('overlook.should_convert_count')) {
+            return match(true) {
+                strlen($number) >= 10 => substr($number, 0, -9) . 'B',
+                strlen($number) >= 7 => substr($number, 0, -6) . 'M',
+                strlen($number) >= 4 => substr($number, 0, -3) . 'K',
+                default => $number
+            };
+        }
+
+        return $number;
+    }
+
+    public function shouldShowTooltip($number): bool
+    {
+        return strlen($number) >= 4 && config('overlook.should_convert_count') && config('overlook.enable_convert_tooltip');
+    }
 }