Updated docs

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 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>
+

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,36 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+/**
+ * Class BaseChartModel
+ * @package Asantibanez\LivewireCharts\Models
+ */
+class BaseChartModel
+{
+    use HasAxisConfiguration;
+
+    public function __construct()
+    {
+        $this->setupAxis();
+    }
+
+    public function reactiveKey()
+    {
+        return md5(json_encode($this->toArray()));
+    }
+
+    public function toArray()
+    {
+        return [
+            'xAxis' => $this->xAxis,
+            'yAxis' => $this->yAxis,
+        ];
+    }
+
+    public function fromArray($array)
+    {
+        $this->setupAxis($array);
+    }
+}

src/Models/HasAxisConfiguration.php

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