Added chart type option

README.md

@@ -131,12 +131,14 @@ The `line()` method allows you to add a value line to the metric. You can add mu
 ```php
 line(
     array|Closure $line,
-    string|array|Closure $color = '#7843E9'
+    string|array|Closure $color = '#7843E9',
+    string|array|Closure $type = 'line',    
 )
 ```
 
 - `$line` - values for charting,
-- `$color` - line color.
+- `$color` - line color,
+- `$type` - chart type (line, area, column)
 
 ```php
 use MoonShine\Apexcharts\Components\LineChartMetric;
@@ -148,14 +150,14 @@ LineChartMetric::make('Orders')
             ->groupBy('date')
             ->pluck('sum','date')
             ->toArray()
-    ])
+    ], type: fn() => 'area')
     ->line([
         'Avg' => Order::query()
             ->selectRaw('AVG(price) as avg, DATE_FORMAT(created_at, "%d.%m.%Y") as date')
             ->groupBy('date')
             ->pluck('avg','date')
             ->toArray()
-    ], '#EC4176') 
+    ], '#EC4176', 'line'); 
 ```
 
 <picture>
@@ -181,7 +183,9 @@ LineChartMetric::make('Orders')
             ->toArray()
     ],[
         'red', 'blue'
-    ])
+    ], [
+        type: ['area', 'line']
+    ]);
 ```
 
 ### Sorting keys

resources/views/components/metrics/line.blade.php

@@ -3,6 +3,7 @@
     'lines' => [],
     'colors' => [],
     'labels' => [],
+    'types',
 ])
 <div
     {{ $attributes->merge(['class' => 'chart']) }}
@@ -13,6 +14,7 @@
                     {
                         name: '{{ $label }}',
                         data: {{ json_encode(array_values($values)) }},
+                        type: '{{ $types[$loop->parent->index % count($types)][$loop->index % count($types[$loop->parent->index])] }}',
                     },
                     @endforeach
                 @endforeach

resources/views/components/metrics/wrapped/line-chart.blade.php

@@ -5,6 +5,7 @@
     'colors' => [],
     'columnSpanValue' => 12,
     'adaptiveColumnSpanValue' => 12,
+    'types' => [],
 ])
 <x-moonshine::layout.column
     :colSpan="$columnSpanValue"
@@ -17,6 +18,7 @@
             :colors="$colors"
             :labels="$labels"
             :title="$label"
+            :types="$types"
         />
     </x-moonshine::layout.box>
 </x-moonshine::layout.column>

src/Components/LineChartMetric.php

@@ -17,6 +17,8 @@ class LineChartMetric extends Metric
 
     protected array $colors = [];
 
+    protected array $types = [];
+
     protected bool $withoutSortKeys = false;
 
     protected function assets(): array
@@ -32,9 +34,11 @@ protected function assets(): array
      */
     public function line(
         array|Closure $line,
-        string|array|Closure $color = '#7843E9'
+        string|array|Closure $color = '#7843E9',
+        string|array|Closure $type = 'line'
     ): static {
-        $this->lines[] = $line instanceof Closure ? $line() : $line;
+        $lines = $line instanceof Closure ? $line() : $line;
+        $this->lines[] = $lines;
 
         $color = $color instanceof Closure ? $color() : $color;
 
@@ -44,12 +48,15 @@ public function line(
             $this->colors = $color;
         }
 
-        return $this;
-    }
+        $type = $type instanceof Closure ? $type() : $type;
 
-    public function getColor(int $index): string
-    {
-        return $this->colors[$index];
+        if (is_string($type)) {
+            $this->types[][] = $type;
+        } else {
+            $this->types[] = $type;
+        }
+
+        return $this;
     }
 
     public function getColors(): array
@@ -72,6 +79,11 @@ public function getLines(): array
         return $this->lines;
     }
 
+    public function getTypes(): array
+    {
+        return $this->types;
+    }
+
     public function withoutSortKeys(): static
     {
         $this->withoutSortKeys = true;
@@ -93,6 +105,7 @@ protected function viewData(): array
             'labels' => $this->getLabels(),
             'lines' => $this->getLines(),
             'colors' => $this->getColors(),
+            'types' => $this->getTypes(),
         ];
     }
 }