Updated CHANGELOG

- Refactored component to use BaseChartModel and traits

.gitignore

@@ -4,3 +4,4 @@ composer.lock
 docs
 vendor
 coverage
+.DS_STORE

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 1.2.0 - 2020-10-25
+
+- Fixed column chart growing infinitely 
+- Improved customization API
+- Added Legend configuration
+- Refactored configuration traits
+
 ## 1.1.0 - 2020-10-20
 
 - Added Area Chart

resources/views/livewire-column-chart.blade.php

@@ -1,5 +1,5 @@
 <div
-    class="w-full h-full relative"
+    class="w-full h-full"
     x-data="{ ...columnChart() }"
     x-init="drawChart(@this)"
     x-on:draw-column-chart.window="drawChart(@this)"
@@ -58,6 +58,8 @@
                             },
                         },
 
+                        legend: component.get('columnChartModel.legend') || {},
+
                         plotOptions: {
                             bar: {
                                 horizontal: false,

resources/views/livewire-line-chart.blade.php

@@ -2,7 +2,6 @@
     class="w-full h-full"
     x-data="{ ...lineChart() }"
     x-init="drawChart(@this)"
-    x-on:draw-column-chart.window="drawChart(@this)"
 >
     <div wire:ignore x-ref="container"></div>
 
@@ -12,10 +11,6 @@
                 chart: null,
 
                 drawChart(component) {
-                    this.renderApex(component)
-                },
-
-                renderApex(component) {
                     if (this.chart) {
                         this.chart.destroy()
                     }
@@ -25,6 +20,7 @@
                             name: component.get('lineChartModel.title'),
                             data: component.get('lineChartModel.data').map(item => item.value),
                         }],
+
                         chart: {
                             type: 'line',
                             height: '100%',
@@ -49,19 +45,25 @@
                                 }
                             }
                         },
+
                         dataLabels: {
                             enabled: false
                         },
-                        stroke: {
-                            curve: 'straight'
-                        },
+
+                        stroke: component.get('lineChartModel.stroke') || {},
+
                         title: {
                             text: component.get('lineChartModel.title'),
                             align: 'center'
                         },
+
                         xaxis: {
+                            ...component.get('lineChartModel.xAxis') || {},
                             categories: component.get('lineChartModel.data').map(item => item.title),
                         },
+
+                        yaxis: component.get('lineChartModel.yAxis') || {},
+
                         annotations: {
                             points: component.get('lineChartModel.markers').map(item => {
                                     return {

resources/views/livewire-pie-chart.blade.php

@@ -2,7 +2,6 @@
     class="w-full h-full"
     x-data="{ ...pieChart() }"
     x-init="drawChart(@this)"
-    x-on:draw-column-chart.window="drawChart(@this)"
 >
     <div wire:ignore x-ref="container"></div>
 
@@ -12,10 +11,6 @@
                 chart: null,
 
                 drawChart(component) {
-                    this.renderApex(component)
-                },
-
-                renderApex(component) {
                     if (this.chart) {
                         this.chart.destroy()
                     }
@@ -73,6 +68,8 @@
                                 }
                             }
                         ],
+
+                        legend: component.get('pieChartModel.legend') || {},
                     };
 
                     this.chart = new ApexCharts(this.$refs.container, options);

src/Models/BaseChartModel.php

@@ -9,11 +9,15 @@ namespace Asantibanez\LivewireCharts\Models;
  */
 class BaseChartModel
 {
-    use HasAxisConfiguration;
+    use HasAxis;
+    use HasStroke;
+    use HasLegend;
 
     public function __construct()
     {
-        $this->setupAxis();
+        $this->initAxis();
+        $this->initStroke();
+        $this->initLegend();
     }
 
     public function reactiveKey()
@@ -23,14 +27,17 @@ class BaseChartModel
 
     public function toArray()
     {
-        return [
-            'xAxis' => $this->xAxis,
-            'yAxis' => $this->yAxis,
-        ];
+        return array_merge(
+            $this->axisToArray(),
+            $this->strokeToArray(),
+            $this->legendToArray()
+        );
     }
 
     public function fromArray($array)
     {
-        $this->setupAxis($array);
+        $this->axisFromArray($array);
+        $this->strokeFromArray($array);
+        $this->legendFromArray($array);
     }
 }

src/Models/ColumnChartModel.php

@@ -3,13 +3,11 @@
 
 namespace Asantibanez\LivewireCharts\Models;
 
-use Ramsey\Uuid\Uuid;
-
 /**
  * Class ColumnChartModel
  * @package Asantibanez\LivewireCharts\Models
  */
-class ColumnChartModel
+class ColumnChartModel extends BaseChartModel
 {
     public $title;
 
@@ -23,6 +21,8 @@ class ColumnChartModel
 
     public function __construct()
     {
+        parent::__construct();
+
         $this->title = '';
 
         $this->animated = false;
@@ -76,17 +76,19 @@ class ColumnChartModel
 
     public function toArray()
     {
-        return [
+        return array_merge(parent::toArray(), [
             'title' => $this->title,
             'animated' => $this->animated,
             'onColumnClickEventName' => $this->onColumnClickEventName,
             'opacity' => $this->opacity,
             'data' => $this->data->toArray(),
-        ];
+        ]);
     }
 
     public function fromArray($array)
     {
+        parent::fromArray($array);
+
         $this->title = data_get($array, 'title', '');
 
         $this->animated = data_get($array, 'animated', false);
@@ -97,10 +99,4 @@ class ColumnChartModel
 
         $this->data = collect(data_get($array, 'data', []));
     }
-
-    public function reactiveKey()
-    {
-        return md5(json_encode($this->toArray()));
-    }
-
 }

src/Models/HasAxis.php

@@ -4,31 +4,16 @@
 namespace Asantibanez\LivewireCharts\Models;
 
 
-trait HasAxisConfiguration
+trait HasAxis
 {
     private $xAxis;
 
     private $yAxis;
 
-    public function setXAxisVisible($visible)
+    public function initAxis()
     {
-        data_set($this->xAxis, 'labels.show', $visible);
-
-        return $this;
-    }
-
-    public function setYAxisVisible($visible)
-    {
-        data_set($this->yAxis, 'show', $visible);
-
-        return $this;
-    }
-
-    protected function setupAxis($array = [])
-    {
-        $this->xAxis = data_get($array, 'xAxis', $this->defaultXAxis());
-
-        $this->yAxis = data_get($array, 'yAxis', $this->defaultYAxis());
+        $this->xAxis = $this->defaultXAxis();
+        $this->yAxis = $this->defaultYAxis();
     }
 
     private function defaultXAxis()
@@ -46,4 +31,33 @@ trait HasAxisConfiguration
             'show' => true,
         ];
     }
+
+    public function setXAxisVisible($visible)
+    {
+        data_set($this->xAxis, 'labels.show', $visible);
+
+        return $this;
+    }
+
+    public function setYAxisVisible($visible)
+    {
+        data_set($this->yAxis, 'show', $visible);
+
+        return $this;
+    }
+
+    protected function axisFromArray($array)
+    {
+        $this->xAxis = data_get($array, 'xAxis', $this->defaultXAxis());
+
+        $this->yAxis = data_get($array, 'yAxis', $this->defaultYAxis());
+    }
+
+    protected function axisToArray()
+    {
+        return [
+            'xAxis' => $this->xAxis,
+            'yAxis' => $this->yAxis,
+        ];
+    }
 }

src/Models/HasLegend.php

@@ -0,0 +1,102 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+
+trait HasLegend
+{
+    private $legend;
+
+    public function initLegend()
+    {
+        $this->legend = $this->defaultLegend();
+    }
+
+    private function defaultLegend()
+    {
+        return [
+            'show' => true,
+            'position' => 'bottom',
+            'horizontalAlign' => 'center',
+        ];
+    }
+
+    public function setLegendVisibility($visible)
+    {
+        data_set($this->legend, 'show', $visible);
+
+        return $this;
+    }
+
+    public function setLegendPosition($position)
+    {
+        data_set($this->legend, 'position', $position);
+
+        return $this;
+    }
+
+    public function setLegendHorizontalAlign($horizontalAlign)
+    {
+        data_set($this->legend, 'horizontalAlign', $horizontalAlign);
+
+        return $this;
+    }
+
+    public function withoutLegend()
+    {
+        return $this->setLegendVisibility(false);
+    }
+
+    public function withLegend()
+    {
+        return $this->setLegendVisibility(true);
+    }
+
+    public function legendPositionTop()
+    {
+        return $this->setLegendPosition('top');
+    }
+
+    public function legendPositionLeft()
+    {
+        return $this->setLegendPosition('left');
+    }
+
+    public function legendPositionRight()
+    {
+        return $this->setLegendPosition('right');
+    }
+
+    public function legendPositionBottom()
+    {
+        return $this->setLegendPosition('bottom');
+    }
+
+    public function legendHorizontallyAlignedLeft()
+    {
+        return $this->setLegendHorizontalAlign('left');
+    }
+
+    public function legendHorizontallyAlignedCenter()
+    {
+        return $this->setLegendHorizontalAlign('center');
+    }
+
+    public function legendHorizontallyAlignedRight()
+    {
+        return $this->setLegendHorizontalAlign('right');
+    }
+
+    protected function legendToArray()
+    {
+        return [
+            'legend' => $this->legend,
+        ];
+    }
+
+    protected function legendFromArray($array)
+    {
+        $this->legend = data_get($array, 'legend', $this->defaultLegend());
+    }
+}

src/Models/HasStroke.php

@@ -0,0 +1,48 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+
+trait HasStroke
+{
+    private $stroke;
+
+    public function initStroke()
+    {
+        $this->stroke = $this->defaultStroke();
+    }
+
+    private function defaultStroke()
+    {
+        return [
+            'curve' => 'straight',
+        ];
+    }
+
+    public function setSmoothCurve()
+    {
+        data_set($this->stroke, 'curve', 'smooth');
+
+        return $this;
+    }
+
+    public function setStraightCurve()
+    {
+        data_set($this->stroke, 'curve', 'straight');
+
+        return $this;
+    }
+
+    protected function strokeToArray()
+    {
+        return [
+            'stroke' => $this->stroke,
+        ];
+    }
+
+    protected function strokeFromArray($array)
+    {
+        $this->stroke = data_get($array, 'stroke', $this->defaultStroke());
+    }
+}

src/Models/LineChartModel.php

@@ -7,7 +7,7 @@ namespace Asantibanez\LivewireCharts\Models;
  * Class LineChartModel
  * @package Asantibanez\LivewireCharts\Models
  */
-class LineChartModel
+class LineChartModel extends BaseChartModel
 {
     public $title;
 
@@ -21,6 +21,8 @@ class LineChartModel
 
     public function __construct()
     {
+        parent::__construct();
+
         $this->title = '';
 
         $this->animated = false;
@@ -85,17 +87,19 @@ class LineChartModel
 
     public function toArray()
     {
-        return [
+        return array_merge(parent::toArray(), [
             'title' => $this->title,
             'animated' => $this->animated,
             'onPointClickEventName' => $this->onPointClickEventName,
             'data' => $this->data->toArray(),
             'markers' => $this->markers->toArray(),
-        ];
+        ]);
     }
 
     public function fromArray($array)
     {
+        parent::fromArray($array);
+
         $this->title = data_get($array, 'title', '');
 
         $this->animated = data_get($array, 'animated', false);
@@ -106,9 +110,4 @@ class LineChartModel
 
         $this->markers = collect(data_get($array, 'markers', []));
     }
-
-    public function reactiveKey()
-    {
-        return md5(json_encode($this->toArray()));
-    }
 }

src/Models/PieChartModel.php

@@ -7,7 +7,7 @@ namespace Asantibanez\LivewireCharts\Models;
  * Class PieChartModel
  * @package Asantibanez\LivewireCharts\Models
  */
-class PieChartModel
+class PieChartModel extends BaseChartModel
 {
     public $title;
 
@@ -21,6 +21,8 @@ class PieChartModel
 
     public function __construct()
     {
+        parent::__construct();
+
         $this->title = '';
 
         $this->animated = false;
@@ -74,17 +76,19 @@ class PieChartModel
 
     public function toArray()
     {
-        return [
+        return array_merge(parent::toArray(), [
             'title' => $this->title,
             'animated' => $this->animated,
             'onSliceClickEventName' => $this->onSliceClickEventName,
             'opacity' => $this->opacity,
             'data' => $this->data->toArray(),
-        ];
+        ]);
     }
 
     public function fromArray($array)
     {
+        parent::fromArray($array);
+
         $this->title = data_get($array, 'title', '');
 
         $this->animated = data_get($array, 'animated', false);
@@ -95,9 +99,4 @@ class PieChartModel
 
         $this->data = collect(data_get($array, 'data', []));
     }
-
-    public function reactiveKey()
-    {
-        return md5(json_encode($this->toArray()));
-    }
 }