- configuration of the minimum, maximum, tick amount of the y-axis

ArielMejiaDev · Feb 13, 2024 · 0b33318 · 0b33318
1 parent 5461a65
commit 0b33318
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 40 deletions.
diff --git a/src/LarapexChart.php b/src/LarapexChart.php
@@ -41,6 +41,10 @@ class LarapexChart
     protected string $dataLabels;
     protected string $theme = 'light';
     protected string $sparkline;
+    protected bool $yAxisShow = false;
+    protected ?int $yAxisMin = null;
+    protected ?int $yAxisMax = null;
+    protected ?int $yAxisTickAmount = null;
     private string $chartLetters = 'abcdefghijklmnopqrstuvwxyz';
 
     /*
@@ -201,6 +205,16 @@ public function setXAxis(array $categories) :LarapexChart
         return $this;
     }
 
+    public function setYAxis(int $min, int $max, ?int $tickAmount = null, bool $show = true) :self
+    {
+        $this->yAxisMin = $min;
+        $this->yAxisMax = $max;
+        $this->yAxisTickAmount = $tickAmount ?? $max;
+        $this->yAxisShow = $show;
+
+        return $this;
+    }
+
     public function setGrid($color = '#e5e5e5', $opacity = 0.1) :LarapexChart
     {
         $this->grid = json_encode([
@@ -429,6 +443,24 @@ public function showLegend(): string
         return $this->showLegend ? 'true' : 'false';
     }
 
+    public function yAxis(): ?array
+    {
+        if (
+            $this->yAxisMin === null ||
+            $this->yAxisMax === null ||
+            $this->yAxisTickAmount === null
+        ) {
+            return null;
+        }
+
+        return [
+            'show' => $this->yAxisShow ? 'true' : 'false',
+            'min' => $this->yAxisMin,
+            'max' => $this->yAxisMax,
+            'tickAmount' => $this->yAxisTickAmount
+        ];
+    }
+
     /*
     |--------------------------------------------------------------------------
     | JSON Options Builder
@@ -483,6 +515,10 @@ public function toJson(): \Illuminate\Http\JsonResponse
             $options['stroke'] = json_decode($this->stroke());
         }
 
+        if($this->yAxis() !== null) {
+            $options['yaxis'] = $this->yAxis();
+        }
+
         return response()->json([
             'id' => $this->id(),
             'options' => $options,
@@ -540,6 +576,10 @@ public function toVue() :array
             $options['stroke'] = json_decode($this->stroke());
         }
 
+        if($this->yAxis() !== null) {
+            $options['yaxis'] = $this->yAxis();
+        }
+
         return [
             'height' => $this->height(),
             'width' => $this->width(),

diff --git a/stubs/resources/views/chart/script.blade.php b/stubs/resources/views/chart/script.blade.php
@@ -1,46 +1,47 @@
 <script>
     var options =
-    {
-        chart: {
-            type: '{!! $chart->type() !!}',
-            height: {!! $chart->height() !!},
-            width: '{!! $chart->width() !!}',
-            toolbar: {!! $chart->toolbar() !!},
-            zoom: {!! $chart->zoom() !!},
-            fontFamily: '{!! $chart->fontFamily() !!}',
-            foreColor: '{!! $chart->foreColor() !!}',
-            sparkline: {!! $chart->sparkline() !!},
-            @if($chart->stacked())
-            stacked: {!! $chart->stacked() !!},
-            @endif
-        },
-        plotOptions: {
-            bar: {!! $chart->horizontal() !!}
-        },
-        colors: {!! $chart->colors() !!},
-        series: {!! $chart->dataset() !!},
-        dataLabels: {!! $chart->dataLabels() !!},
-        @if($chart->labels())
+        {
+            chart: {
+                type: '{!! $chart->type() !!}',
+                height: {!! $chart->height() !!},
+                width: '{!! $chart->width() !!}',
+                toolbar: {!! $chart->toolbar() !!},
+                zoom: {!! $chart->zoom() !!},
+                fontFamily: '{!! $chart->fontFamily() !!}',
+                foreColor: '{!! $chart->foreColor() !!}',
+                sparkline: {!! $chart->sparkline() !!},
+                @if($chart->stacked())
+                stacked: {!! $chart->stacked() !!},
+                @endif
+            },
+            plotOptions: {
+                bar: {!! $chart->horizontal() !!}
+            },
+            colors: {!! $chart->colors() !!},
+            series: {!! $chart->dataset() !!},
+            dataLabels: {!! $chart->dataLabels() !!},
+            @if($chart->labels())
             labels: {!! json_encode($chart->labels(), true) !!},
-        @endif
-        title: {
-            text: "{!! $chart->title() !!}"
-        },
-        subtitle: {
-            text: '{!! $chart->subtitle() !!}',
-            align: '{!! $chart->subtitlePosition() !!}'
-        },
-        xaxis: {
-            categories: {!! $chart->xAxis() !!}
-        },
-        grid: {!! $chart->grid() !!},
-        markers: {!! $chart->markers() !!},
-        @if($chart->stroke())
-            stroke: {!! $chart->stroke() !!},
-        @endif
-        legend: {
-            show: {!! $chart->showLegend() !!}
-        }
+            @endif
+            title: {
+                text: "{!! $chart->title() !!}"
+            },
+            subtitle: {
+                text: '{!! $chart->subtitle() !!}',
+                align: '{!! $chart->subtitlePosition() !!}'
+            },
+            xaxis: {
+                categories: {!! $chart->xAxis() !!}
+            },
+            yaxis: {!! json_encode($chart->yAxis(), true) !!},
+            grid: {!! $chart->grid() !!},
+            markers: {!! $chart->markers() !!},
+            @if($chart->stroke())
+              stroke: {!! $chart->stroke() !!},
+            @endif
+            legend: {
+                show: {!! $chart->showLegend() !!}
+            }
     }
 
     var chart = new ApexCharts(document.querySelector("#{!! $chart->id() !!}"), options);