fix reactive column and UI

lara-zeus · Jan 31, 2024 · 5789383 · 5789383
1 parent 297cb2a
commit 5789383
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 29 deletions.
diff --git a/resources/views/tables/columns/inline-chart.blade.php b/resources/views/tables/columns/inline-chart.blade.php
@@ -7,6 +7,7 @@
         $descriptionBelow = $getDescriptionBelow();
         $canWrap = $canWrap();
         $getChart = $getChart();
+        $getRecord = $getRecord();
     @endphp
 
     @if (filled($descriptionAbove))
@@ -20,7 +21,9 @@
         </p>
     @endif
 
-    @livewire($getChart,['maxWidth' => $getMaxWidth, 'record' => $getRecord()])
+    <div wire:ignore>
+        @livewire($getChart, ['maxWidth' => $getMaxWidth, 'lazy' => true, 'record' => $getRecord], key("chart-{$getRecord->id}"))
+    </div>
 
     @if (filled($descriptionBelow))
         <p

diff --git a/resources/views/widgets/inline-chart.blade.php b/resources/views/widgets/inline-chart.blade.php
@@ -6,30 +6,14 @@
     $heading = $this->getHeading();
     $filters = $this->getFilters();
 @endphp
-<x-filament-widgets::widget class="fi-wi-chart">
+<x-filament-widgets::widget wire:ignore>
     <div
-        @class([
-            'px-2',
-            match ($maxWidth) {
-                MaxWidth::ExtraSmall, 'xs' => 'max-w-xs',
-                MaxWidth::Small, 'sm' => 'max-w-sm',
-                MaxWidth::Medium, 'md' => 'max-w-md',
-                MaxWidth::Large, 'lg' => 'max-w-lg',
-                MaxWidth::ExtraLarge, 'xl' => 'max-w-xl',
-                MaxWidth::TwoExtraLarge, '2xl' => 'max-w-2xl',
-                MaxWidth::ThreeExtraLarge, '3xl' => 'max-w-3xl',
-                MaxWidth::FourExtraLarge, '4xl' => 'max-w-4xl',
-                MaxWidth::FiveExtraLarge, '5xl' => '!max-w-5xl bord',
-                MaxWidth::SixExtraLarge, '6xl' => 'max-w-6xl',
-                MaxWidth::SevenExtraLarge, '7xl' => '!max-w-7xl bord',
-                null => 'w-[14rem]',
-                default => $maxWidth,
-            },
-        ])
+        wire:key="{{ $record->id }}"
+        class="px-2"
     >
         <div
             @if ($pollingInterval = $this->getPollingInterval())
-                    wire:poll.{{ $pollingInterval }}="updateChartData"
+                wire:poll.{{ $pollingInterval }}="updateChartData"
             @endif
         >
             <div
@@ -39,7 +23,7 @@
                     ax-load
                 @endif
                 ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('chart', 'filament/widgets') }}"
-                wire:ignore
+
                 x-data="chart({
                     cachedData: @js($this->getCachedData()),
                     options: @js($this->getOptions()),
@@ -48,10 +32,10 @@
                 x-ignore
             >
                 <canvas
-                        x-ref="canvas"
-                        @if ($maxHeight = $this->getMaxHeight())
-                                style="max-height: {{ $maxHeight }}"
-                        @endif
+                    x-ref="canvas"
+                    @if ($maxHeight = $this->getMaxHeight())
+                        style="width: {{ $maxWidth }}!important; max-height: {{ $maxHeight }}"
+                    @endif
                 ></canvas>
 
                 <span

diff --git a/src/InlineChartWidget.php b/src/InlineChartWidget.php
@@ -10,13 +10,13 @@ abstract class InlineChartWidget extends ChartWidget
 {
     protected static string $view = 'zeus-inline-chart::widgets.inline-chart';
 
-    protected static ?string $maxHeight = '50px';
+    protected static ?string $maxHeight = '70px';
 
     protected int | string | array $columnSpan = 'full';
 
     protected static ?string $heading = 'Chart';
 
-    public ?string $maxWidth = '!w-[150px]';
+    public ?string $maxWidth = null;
 
     public Model $record;
 

diff --git a/src/Tables/Columns/InlineChart.php b/src/Tables/Columns/InlineChart.php
@@ -17,7 +17,7 @@ class InlineChart extends Column
 
     protected ?string $chart = null;
 
-    protected string $maxWidth = '!w-[150px]';
+    protected string $maxWidth = 'w-full';
 
     public function chart(string $chart): static
     {