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,16 @@
 # 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
+
 ## 1.0.0 - 2020-10-19
 
 - Initial Release

README.md

@@ -31,11 +31,13 @@ Livewire Charts supports out of the box the following types of charts
 - Line Chart (`LivewireLineChart` component)
 - Pie Chart (`LivewirePieChart` component)
 - Column Chart (`LivewireColumnChart` component)
+- Area Chart (`LivewireAreaChart` component)
 
 Each one comes with its own "model" class that allows you to define the chart's data and render behavior. 
 - `LivewireLineChart` uses `LineChartModel` to set up data points, markers, events and other ui customizations. 
 - `LivewirePieChart` uses `PieChartModel` to set up data slices, events and other ui customizations. 
 - `LivewireColumnChart` uses `ColumnChartModel` to set up data columns, events and other ui customizations.
+- `LivewireAreaChart` uses `AreaChartModel` to set up data points, events and other ui customizations.
 
 For example, to render a column chart, we can create an instance of `ColumnChartModel` and add some data to it
 ```php
@@ -153,6 +155,17 @@ for each type of chart.
 | addSlice(string $title, double $value, string $color, array $extras = []) | Adds a slice to the chart with the specified color. `$extras` is forwarded on click event |
 | withOnSliceClickEvent(string $eventName) | Event Name that will be fired when a column of the chart is clicked |
 
+#### LivewireAreaChart
+
+| Method | Description |
+|--------|-------------|
+| setTitle(string $title) | Sets chart title |
+| setAnimated(boolean $animated) | Enables/disables animation |
+| addPoint(string $title, double $value, array $extras = []) | Adds a point to the area chart. `$extras` is forwarded on click event |
+| withOnPointClickEvent(string $eventName) | Event Name that will be fired when a point of the chart is clicked |
+| setXAxisVisible(boolean $visible) | Shows/hides xAxis labels |
+| setYAxisVisible(boolean $visible) | Shows/hides yAxis labels |
+
 ## Testing
 
 ``` bash

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

@@ -0,0 +1,87 @@
+<div
+    class="w-full h-full"
+    x-data="{ ...areaChart() }"
+    x-init="drawChart(@this)"
+    x-on:draw-column-chart.window="drawChart(@this)"
+>
+    <div wire:ignore x-ref="container"></div>
+
+    <script>
+        function areaChart() {
+            return {
+                chart: null,
+
+                drawChart(component) {
+                    if (this.chart) {
+                        this.chart.destroy()
+                    }
+
+                    var options = {
+                        series: [{
+                            name: component.get('areaChartModel.title'),
+                            data: component.get('areaChartModel.data').map(item => item.value)
+                        }],
+                        chart: {
+                            type: 'area',
+                            height: '100%',
+
+                            zoom: { enabled: false },
+
+                            toolbar: { show: false },
+
+                            animations: {
+                                enabled: component.get('areaChartModel.animated') || false,
+                            },
+
+                            events: {
+                                markerClick: function(event, chartContext, { dataPointIndex }) {
+                                    const onPointClickEventName = component.get('areaChartModel.onPointClickEventName')
+                                    if (!onPointClickEventName) {
+                                        return
+                                    }
+
+                                    const point = component.get('areaChartModel.data')[dataPointIndex]
+                                    component.call('onPointClick', point)
+                                }
+                            }
+                        },
+
+                        dataLabels: {
+                            enabled: false
+                        },
+
+                        colors: [component.get('areaChartModel.color') || '#2E93fA'],
+
+                        stroke: {
+                            curve: 'straight'
+                        },
+
+                        title: {
+                            text: component.get('areaChartModel.title'),
+                            align: 'center'
+                        },
+
+                        labels: component.get('areaChartModel.data').map(item => item.title),
+
+                        xaxis: component.get('areaChartModel.xAxis') || {},
+
+                        yaxis: component.get('areaChartModel.yAxis') || {},
+
+                        grid: {
+                            padding: {
+                                left: 0,
+                                top: 0,
+                                right: 0,
+                                bottom: 0,
+                            }
+                        },
+                    };
+
+                    this.chart = new ApexCharts(this.$refs.container, options);
+                    this.chart.render();
+                }
+            }
+        }
+    </script>
+</div>
+

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/Charts/LivewireAreaChart.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace Asantibanez\LivewireCharts\Charts;
+
+use Asantibanez\LivewireCharts\Models\AreaChartModel;
+use Livewire\Component;
+
+/**
+ * Class LivewireAreaChart
+ * @package Asantibanez\LivewireCharts\Charts
+ */
+class LivewireAreaChart extends Component
+{
+    public $areaChartModel;
+
+    public function mount(AreaChartModel $areaChartModel)
+    {
+        $this->areaChartModel = $areaChartModel->toArray();
+    }
+
+    public function onPointClick($point)
+    {
+        $onPointClickEventName = data_get($this->areaChartModel, 'onPointClickEventName', null);
+
+        if ($onPointClickEventName === null) {
+            return;
+        }
+
+        $this->emit($onPointClickEventName, $point);
+    }
+
+    public function render()
+    {
+        return view('livewire-charts::livewire-area-chart');
+    }
+}

src/LivewireChartsServiceProvider.php

@@ -2,6 +2,7 @@
 
 namespace Asantibanez\LivewireCharts;
 
+use Asantibanez\LivewireCharts\Charts\LivewireAreaChart;
 use Asantibanez\LivewireCharts\Charts\LivewireColumnChart;
 use Asantibanez\LivewireCharts\Charts\LivewireLineChart;
 use Asantibanez\LivewireCharts\Charts\LivewirePieChart;
@@ -26,6 +27,7 @@ class LivewireChartsServiceProvider extends ServiceProvider
         Livewire::component('livewire-line-chart', LivewireLineChart::class);
         Livewire::component('livewire-column-chart', LivewireColumnChart::class);
         Livewire::component('livewire-pie-chart', LivewirePieChart::class);
+        Livewire::component('livewire-area-chart', LivewireAreaChart::class);
     }
 
     /**

src/Models/AreaChartModel.php

@@ -0,0 +1,101 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+/**
+ * Class AreaChartModel
+ * @package Asantibanez\LivewireCharts\Models
+ */
+class AreaChartModel extends BaseChartModel
+{
+    public $title;
+
+    public $animated;
+
+    public $color;
+
+    public $data;
+
+    public $onPointClickEventName;
+
+    public function __construct()
+    {
+        parent::__construct();
+
+        $this->title = '';
+
+        $this->animated = false;
+
+        $this->color = '#90cdf4';
+
+        $this->onPointClickEventName = null;
+
+        $this->data = collect();
+    }
+
+    public function setTitle($title)
+    {
+        $this->title = $title;
+
+        return $this;
+    }
+
+    public function setAnimated($animated)
+    {
+        $this->animated = $animated;
+
+        return $this;
+    }
+
+    public function setColor($color)
+    {
+        $this->color = $color;
+
+        return $this;
+    }
+
+    public function addPoint($title, $value, $extras = [])
+    {
+        $this->data->push([
+            'title' => $title,
+            'value' => $value,
+            'extras' => $extras,
+        ]);
+
+        return $this;
+    }
+
+    public function withOnPointClickEvent($onPointClickEventName)
+    {
+        $this->onPointClickEventName = $onPointClickEventName;
+
+        return $this;
+    }
+
+    public function toArray()
+    {
+        return array_merge(parent::toArray(), [
+            'title' => $this->title,
+            'animated' => $this->animated,
+            'color' => $this->color,
+            'onPointClickEventName' => $this->onPointClickEventName,
+            'data' => $this->data->toArray(),
+        ]);
+    }
+
+    public function fromArray($array)
+    {
+        parent::fromArray($array);
+
+        $this->title = data_get($array, 'title', '');
+
+        $this->animated = data_get($array, 'animated', false);
+
+        $this->color = data_get($array, 'color', '#90cdf4');
+
+        $this->onPointClickEventName = data_get($array, 'onPointClickEventName', null);
+
+        $this->data = collect(data_get($array, 'data', []));
+    }
+}

src/Models/BaseChartModel.php

@@ -0,0 +1,43 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+/**
+ * Class BaseChartModel
+ * @package Asantibanez\LivewireCharts\Models
+ */
+class BaseChartModel
+{
+    use HasAxis;
+    use HasStroke;
+    use HasLegend;
+
+    public function __construct()
+    {
+        $this->initAxis();
+        $this->initStroke();
+        $this->initLegend();
+    }
+
+    public function reactiveKey()
+    {
+        return md5(json_encode($this->toArray()));
+    }
+
+    public function toArray()
+    {
+        return array_merge(
+            $this->axisToArray(),
+            $this->strokeToArray(),
+            $this->legendToArray()
+        );
+    }
+
+    public function fromArray($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

@@ -0,0 +1,63 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+
+trait HasAxis
+{
+    private $xAxis;
+
+    private $yAxis;
+
+    public function initAxis()
+    {
+        $this->xAxis = $this->defaultXAxis();
+        $this->yAxis = $this->defaultYAxis();
+    }
+
+    private function defaultXAxis()
+    {
+        return [
+            'labels' => [
+                'show' => true,
+            ],
+        ];
+    }
+
+    private function defaultYAxis()
+    {
+        return [
+            '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()));
-    }
 }