From ad061baa8775db7c7471ec8bc5c52d5365ed9a67 Mon Sep 17 00:00:00 2001
From: Adam Weston <adam@awcodes.com>
Date: Tue, 16 May 2023 13:39:34 -0400
Subject: [PATCH] Feature: support shorthand counts and tooltips with actual
 count

---
 README.md                        | 27 +++++++++++++++++++++++++--
 config/overlook.php              |  2 ++
 resources/dist/overlook.css      |  2 +-
 resources/views/widget.blade.php | 10 ++++++++--
 src/Overlook.php                 | 30 +++++++++++++++++++++++++++---
 5 files changed, 63 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 108aae6..6d85cae 100644
--- a/README.md
+++ b/README.md
@@ -28,7 +28,7 @@ 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:
 
@@ -36,7 +36,11 @@ By default, Overlook will display any resource registered with Filament, while s
 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.
diff --git a/config/overlook.php b/config/overlook.php
index 77b1ee4..15c1751 100644
--- a/config/overlook.php
+++ b/config/overlook.php
@@ -7,4 +7,6 @@
     'excludes' => [
         // App\Filament\Resources\Blog\AuthorResource::class,
     ],
+    'should_convert_count' => true,
+    'enable_convert_tooltip' => true,
 ];
diff --git a/resources/dist/overlook.css b/resources/dist/overlook.css
index 24e5993..790d305 100644
--- a/resources/dist/overlook.css
+++ b/resources/dist/overlook.css
@@ -1 +1 @@
-.bottom-4{bottom:1rem}.right-4{right:1rem}.top-8{top:2rem}.-my-8{margin-top:-2rem;margin-bottom:-2rem}.h-24{height:6rem}.w-auto{width:auto}.bg-gradient-to-tr{background-image:linear-gradient(to top right,var(--tw-gradient-stops))}.from-gray-100{--tw-gradient-from:#f3f4f6;--tw-gradient-to:#f3f4f600;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-white{--tw-gradient-to:#fff0;--tw-gradient-stops:var(--tw-gradient-from),#fff,var(--tw-gradient-to)}.to-white{--tw-gradient-to:#fff}.opacity-20{opacity:.2}.focus\:ring-2:focus,.hover\:ring-2:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.group:hover .group-hover\:-rotate-12{--tw-rotate:-12deg}.group:hover .group-hover\:-rotate-12,.group:hover .group-hover\:scale-110{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1}.group:hover .group-hover\:opacity-40{opacity:.4}.dark .dark\:from-gray-900{--tw-gradient-from:#111827;--tw-gradient-to:#11182700;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark .dark\:via-gray-800{--tw-gradient-to:#1f293700;--tw-gradient-stops:var(--tw-gradient-from),#1f2937,var(--tw-gradient-to)}.dark .dark\:to-gray-800{--tw-gradient-to:#1f2937}.dark .dark\:opacity-20{opacity:.2}.dark .group:hover .dark\:group-hover\:opacity-80{opacity:.8}
\ No newline at end of file
+.bottom-3{bottom:.75rem}.right-4{right:1rem}.top-8{top:2rem}.-my-8{margin-top:-2rem;margin-bottom:-2rem}.h-24{height:6rem}.w-auto{width:auto}.bg-gradient-to-tr{background-image:linear-gradient(to top right,var(--tw-gradient-stops))}.from-gray-100{--tw-gradient-from:#f3f4f6;--tw-gradient-to:#f3f4f600;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-white{--tw-gradient-to:#fff0;--tw-gradient-stops:var(--tw-gradient-from),#fff,var(--tw-gradient-to)}.to-white{--tw-gradient-to:#fff}.opacity-20{opacity:.2}.focus\:ring-2:focus,.hover\:ring-2:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.group:hover .group-hover\:-rotate-12{--tw-rotate:-12deg}.group:hover .group-hover\:-rotate-12,.group:hover .group-hover\:scale-110{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1}.group:hover .group-hover\:opacity-40{opacity:.4}.dark .dark\:border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity))}.dark .dark\:from-gray-900{--tw-gradient-from:#111827;--tw-gradient-to:#11182700;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark .dark\:via-gray-800{--tw-gradient-to:#1f293700;--tw-gradient-stops:var(--tw-gradient-from),#1f2937,var(--tw-gradient-to)}.dark .dark\:to-gray-800{--tw-gradient-to:#1f2937}.dark .dark\:text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.dark .dark\:text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.dark .dark\:opacity-20{opacity:.2}.dark .group:hover .dark\:group-hover\:opacity-80{opacity:.8}
\ No newline at end of file
diff --git a/resources/views/widget.blade.php b/resources/views/widget.blade.php
index e1ad10f..ed26133 100644
--- a/resources/views/widget.blade.php
+++ b/resources/views/widget.blade.php
@@ -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
diff --git a/src/Overlook.php b/src/Overlook.php
index 3769da3..023be7b 100644
--- a/src/Overlook.php
+++ b/src/Overlook.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');
+    }
 }