- bugfix: filter-form component not cacheable

- enhancement: changing chartData to protected to avoid livewire diff overhead on updates for large datasets

Author: Asharif88

resources/views/widgets/components/filter-form.blade.php

@@ -1,4 +1,4 @@
-@props(['width'])
+@props(['indicatorsCount','width'])
 
 @php
 	use Filament\Support\Enums\Width;
@@ -15,6 +15,19 @@ class="fi-icon-btn relative flex items-center justify-center rounded-lg outline-
             </span>
 
 			<x-filament::icon icon="heroicon-s-funnel" class="h-5 w-5" />
+			@if ($indicatorsCount > 0)
+				<div class="absolute start-full top-0 z-10 -ms-1 -translate-x-1/2 rounded-md bg-white dark:bg-gray-900">
+					<div
+							style="--c-50:var(--primary-50);--c-300:var(--primary-300);--c-400:var(--primary-400);--c-600:var(--primary-600);"
+							class="fi-badge flex items-center justify-center gap-x-1 whitespace-nowrap rounded-md  text-xs font-medium ring-1 ring-inset px-0.5 min-w-[theme(spacing.4)] tracking-tighter bg-custom-50 text-custom-600 ring-custom-600/10 dark:bg-custom-400/10 dark:text-custom-400 dark:ring-custom-400/30">
+
+                        <span>
+                            {{ $indicatorsCount }}
+                        </span>
+
+					</div>
+				</div>
+			@endif
 
 		</button>
 	</div>

resources/views/widgets/components/header.blade.php

@@ -1,4 +1,4 @@
-@props(['heading', 'subheading', 'width', 'filters', 'filterFormAccessible'])
+@props(['heading', 'subheading', 'width', 'indicatorsCount','filters', 'filterFormAccessible'])
 <div class="filament-plotly-header">
 	@if ($heading || $subheading || $filters || $filterFormAccessible)
 		<div class="sm:flex justify-between gap-4 py-2 relative">
@@ -31,9 +31,9 @@
 			</div>
 
 			@if ($this->filterFormAccessible)
-			<div class="123">
+			<div>
 
-				<x-filament-plotly::filter-form :width="$width">
+				<x-filament-plotly::filter-form :indicatorsCount="$indicatorsCount" :width="$width">
 					{{ $filterForm }}
 				</x-filament-plotly::filter-form>
 

src/Components/FilterForm.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace Asharif88\FilamentPlotly\Components;
+
+use Illuminate\View\Component;
+
+class FilterForm extends Component
+{
+    public function __construct(
+        public $indicatorsCount,
+        public $width
+    ) {}
+
+    /**
+     * Renders the view for the filter-form component.
+     */
+    public function render(): \Illuminate\Contracts\View\View
+    {
+        return view('filament-plotly::widgets.components.filter-form');
+    }
+}

src/Components/Header.php

@@ -10,6 +10,7 @@ public function __construct(
         public $heading,
         public $subheading,
         public $filters,
+        public $indicatorsCount,
         public $width,
         public $filterFormAccessible
     ) {}

src/Widgets/PlotlyWidget.php

@@ -34,7 +34,7 @@ class PlotlyWidget extends Widget implements HasSchemas
     // @phpstan-ignore-next-line
     protected string $view = 'filament-plotly::widgets.plotly-widget';
 
-    public ?array $chartData = null;
+    protected ?array $chartData = null;
 
     public ?array $chartConfig = null;