fix chart width and height

lara-zeus · Feb 7, 2024 · a732eb0 · a732eb0
1 parent e870821
commit a732eb0
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 20 deletions.
diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md
@@ -45,8 +45,9 @@ Model::where('child_id',$this->record->id)
 
 ```php
 \LaraZeus\InlineChart\Tables\Columns\InlineChart::make('last activities')
-                        ->chart(MiniChart::class)
-                        ->maxWidth('!w-[150px]')
-                        ->description('description')
-                        ->toggleable(),
+    ->chart(MiniChart::class)
+    ->maxWidth(350)// int, default 200
+    ->maxHeight(90)// int, default 50
+    ->description('description')
+    ->toggleable(),
 ```
diff --git a/resources/views/tables/columns/inline-chart.blade.php b/resources/views/tables/columns/inline-chart.blade.php
@@ -2,6 +2,7 @@
     @php
         $getState = $getState();
         $getMaxWidth = $getMaxWidth();
+        $getMaxHeight = $getMaxHeight();
         $getIcon = $getIcon($getState);
         $descriptionAbove = $getDescriptionAbove();
         $descriptionBelow = $getDescriptionBelow();
@@ -21,8 +22,14 @@
         </p>
     @endif
 
-    <div wire:ignore>
-        @livewire($getChart, ['maxWidth' => $getMaxWidth, 'lazy' => true, 'record' => $getRecord], key("chart-{$getRecord->id}"))
+    <div
+        wire:ignore
+        style="
+            width: {{ $getMaxWidth }}px !important;
+            height: {{ $getMaxHeight }}px !important;
+           "
+    >
+        @livewire($getChart, ['maxWidth' => $getMaxWidth, 'maxHeight' => $getMaxHeight, 'lazy' => true, 'record' => $getRecord], key("chart-{$getRecord->id}"))
     </div>
 
     @if (filled($descriptionBelow))

diff --git a/resources/views/widgets/inline-chart.blade.php b/resources/views/widgets/inline-chart.blade.php
@@ -33,9 +33,10 @@ class="px-2"
             >
                 <canvas
                     x-ref="canvas"
-                    @if ($maxHeight = $this->getMaxHeight())
-                        style="width: {{ $maxWidth }}!important; height: {{ $maxHeight }}!important;"
-                    @endif
+                    style="
+                        width: {{ (int) $maxWidth }}px !important;
+                        height: {{ (int) $this->getMaxHeight() }}px !important;
+                    "
                 ></canvas>
 
                 <span
@@ -82,11 +83,7 @@ class="text-gray-200 dark:text-gray-800"
                     class="text-gray-500 dark:text-gray-400"
                 ></span>
 
-                <p
-                    @if ($maxHeight = $this->getMaxHeight())
-                        style="width: {{ $maxWidth }}!important;"
-                    @endif
-                    class="my-1 text-center tooltipElement text-sm text-gray-500 dark:text-gray-400"><br></p>
+                <p class="my-1 text-center tooltipElement text-sm text-gray-500 dark:text-gray-400"><br></p>
             </div>
         </div>
     </div>

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 = '70px';
-
     protected int | string | array $columnSpan = 'full';
 
     protected static ?string $heading = 'Chart';
 
-    public ?string $maxWidth = null;
+    public int $maxWidth = 200;
+
+    protected static ?string $maxHeight = '50';
 
     public Model $record;
 

diff --git a/src/Tables/Columns/InlineChart.php b/src/Tables/Columns/InlineChart.php
@@ -17,7 +17,9 @@ class InlineChart extends Column
 
     protected ?string $chart = null;
 
-    protected string $maxWidth = 'w-full';
+    protected int $maxWidth = 200;
+
+    protected int $maxHeight = 50;
 
     public function chart(string $chart): static
     {
@@ -35,15 +37,27 @@ public function getChart(): string
         return $this->chart;
     }
 
-    public function maxWidth(string $maxWidth): static
+    public function maxWidth(int $maxWidth): static
     {
         $this->maxWidth = $maxWidth;
 
         return $this;
     }
 
-    public function getMaxWidth(): string
+    public function getMaxWidth(): int
     {
         return $this->maxWidth;
     }
+
+    public function maxHeight(int $maxHeight): static
+    {
+        $this->maxHeight = $maxHeight;
+
+        return $this;
+    }
+
+    public function getMaxHeight(): int
+    {
+        return $this->maxHeight;
+    }
 }