Fixed infinite growing charts

CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 1.5.2 - 2020-11-09
+
+- Fixed infinite growing charts
+
+## 1.5.1 - 2020-11-09
+
+- Removed unused Alpine directives
+
+## 1.5.0 - 2020-11-09
+
+- Added `LivewireCharts` facade to create any chart model
+- Added `sparklined` Apex Chart feature to all charts (https://apexcharts.com/javascript-chart-demos/sparklines/basic/)
+
+## 1.4.0 - 2020-11-07
+
+- Added Multi Column Chart 
+- Added Stacked Multi Column Chart 
+- Added support for custom X Axis categories
+
 ## 1.3.0 - 2020-11-03
 
 - Added Multi Line Chart 

README.md

@@ -1,3 +1,5 @@
+[![GitHub release](https://img.shields.io/github/release/asantibanez/livewire-charts.svg)](https://github.com/asantibanez/livewire-charts/releases/)
+
 ![Livewire Charts](https://banners.beyondco.de/Livewire%20Charts.png?theme=light&packageName=asantibanez%2Flivewire-charts&pattern=graphPaper&style=style_1&description=Neat+Livewire+Charts+for+your+Laravel+projects&md=1&fontSize=100px&images=chart-square-bar)
 
 ## Preview
@@ -69,6 +71,19 @@ And that's it! You have a beautiful rendered chart in seconds. 👌
 >Note: You can use these charts inside other Livewire components too. Just render them in your Blade template and you
 are good to go. 👍 
 
+## LivewireCharts facade
+
+Chart models can also be created using the `LivewireCharts` facade.
+
+```php
+LivewireCharts::lineChartModel();
+LivewireCharts::multiLineChartModel();
+LivewireCharts::columnChartModel();
+LivewireCharts::multiColumnChartModel();
+LivewireCharts::pieChartModel();
+LivewireCharts::areaChartModel();
+```
+
 ## Enabling Interactions
 
 To enable click events, you must use the `with[XXX]ClickEvent($eventName)` method present in every model class and 
@@ -138,6 +153,9 @@ for each type of chart.
 | withoutDataLabels() | Disables data labels |
 | withLegends() | Shows legends |
 | withoutLegends() | Hides legends |
+| setXAxisCategories(array $categories) | Enables custom categories for chart X Axis |
+| sparklined() | Enables Apex Charts sparkline feature |
+| setSparklineEnabled(boolean $isEnabled) | Enables/Disables Apex Charts sparkline feature |
 
 #### LivewireLineChart
 
@@ -155,6 +173,9 @@ for each type of chart.
 | Method | Description |
 |--------|-------------|
 | setOpacity(int $opacity) | Sets columns' opacity |
+| multiColumn() | Sets chart to display multiple column series |
+| singleColumn() | Sets chart to display a single column series |
+| stacked() | Sets chart to display column series stacked |
 | addColumn(string $title, double $value, string $color, array $extras = []) | Adds a column to the chart with the specified color. `$extras` is forwarded on click event |
 | onColumnClickEventName(string $eventName) | Event Name that will be fired when a column of the chart is clicked |
 

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

@@ -1,8 +1,7 @@
 <div
-    class="w-full h-full"
+    style="width: 100%; height: 100%;"
     x-data="{ ...areaChart() }"
     x-init="drawChart(@this)"
-    x-on:draw-column-chart.window="drawChart(@this)"
 >
     <div wire:ignore x-ref="container"></div>
 
@@ -21,6 +20,7 @@
                     const dataLabels = component.get('areaChartModel.dataLabels') || {};
                     const onPointClickEventName = component.get('areaChartModel.onPointClickEventName')
                     const data = component.get('areaChartModel.data');
+                    const sparkline = component.get('areaChartModel.sparkline');
 
                     const categories = component.get('areaChartModel.xAxis.categories').length > 0
                         ? component.get('areaChartModel.xAxis.categories')
@@ -36,13 +36,13 @@
                             type: 'area',
                             height: '100%',
 
+                            ...sparkline,
+
                             zoom: { enabled: false },
 
                             toolbar: { show: false },
 
-                            animations: {
+                            animations: { enabled: animated },
-                                enabled: animated,
-                            },
 
                             events: {
                                 markerClick: function(event, chartContext, { dataPointIndex }) {

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

@@ -1,8 +1,7 @@
 <div
-    class="w-full h-full"
+    style="width: 100%; height: 100%;"
     x-data="{ ...columnChart() }"
     x-init="drawChart(@this)"
-    x-on:draw-column-chart.window="drawChart(@this)"
 >
     <div wire:ignore x-ref="container"></div>
 
@@ -20,6 +19,7 @@
                     const onColumnClickEventName = component.get('columnChartModel.onColumnClickEventName')
                     const dataLabels = component.get('columnChartModel.dataLabels') || {};
                     const data = component.get('columnChartModel.data');
+                    const sparkline = component.get('columnChartModel.sparkline');
 
                     const options = {
                         series: [{ data: data.map(item => item.value)}],
@@ -28,13 +28,11 @@
                             type: 'bar',
                             height: '100%',
 
-                            toolbar: {
+                            ...sparkline,
-                                show: false
-                            },
 
-                            animations: {
+                            toolbar: { show: false },
-                                enabled: animated,
+
-                            },
+                            animations: { enabled: animated },
 
                             events: {
                                 dataPointSelection: function(event, chartContext, config) {

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

@@ -1,5 +1,5 @@
 <div
-    class="w-full h-full"
+    style="width: 100%; height: 100%;"
     x-data="{ ...lineChart() }"
     x-init="drawChart(@this)"
 >
@@ -20,6 +20,7 @@
                     const dataLabels = component.get('lineChartModel.dataLabels') || {};
                     const data = component.get('lineChartModel.data');
                     const onPointClickEventName = component.get('lineChartModel.onPointClickEventName');
+                    const sparkline = component.get('lineChartModel.sparkline');
 
                     const series = [{
                         name: title,
@@ -36,15 +37,15 @@
                         chart: {
                             type: 'line',
                             height: '100%',
-                            zoom: {
+
-                                enabled: false
+                            ...sparkline,
-                            },
+
-                            toolbar: {
+                            zoom: { enabled: false },
-                                show: false
+
-                            },
+                            toolbar: { show: false },
-                            animations: {
+
-                                enabled: animated,
+                            animations: { enabled: animated },
-                            },
+
                             events: {
                                 markerClick: function(event, chartContext, { dataPointIndex }) {
                                     if (!onPointClickEventName) {

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

@@ -1,8 +1,7 @@
 <div
-    class="w-full h-full"
+    style="width: 100%; height: 100%;"
     x-data="{ ...multiColumnChart() }"
     x-init="drawChart(@this)"
-    x-on:draw-column-chart.window="drawChart(@this)"
 >
     <div wire:ignore x-ref="container"></div>
 
@@ -16,10 +15,12 @@
                         this.chart.destroy()
                     }
 
+                    const stacked = component.get('columnChartModel.isStacked');
                     const animated = component.get('columnChartModel.animated');
                     const onColumnClickEventName = component.get('columnChartModel.onColumnClickEventName')
                     const dataLabels = component.get('columnChartModel.dataLabels');
                     const data = component.get('columnChartModel.data');
+                    const sparkline = component.get('columnChartModel.sparkline');
 
                     const series = Object.keys(data)
                         .map(seriesName => ({
@@ -38,6 +39,9 @@
                         chart: {
                             type: 'bar',
                             height: '100%',
+                            stacked: stacked,
+
+                            ...sparkline,
 
                             toolbar: { show: false },
 

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

@@ -1,5 +1,5 @@
 <div
-    class="w-full h-full"
+    style="width: 100%; height: 100%;"
     x-data="{ ...multiLineChart() }"
     x-init="drawChart(@this)"
 >
@@ -20,6 +20,7 @@
                     const dataLabels = component.get('lineChartModel.dataLabels') || {};
                     const data = component.get('lineChartModel.data');
                     const onPointClickEventName = component.get('lineChartModel.onPointClickEventName');
+                    const sparkline = component.get('lineChartModel.sparkline');
 
                     const series = Object.keys(data).map(key => {
                         return {
@@ -38,15 +39,15 @@
                         chart: {
                             type: 'line',
                             height: '100%',
-                            zoom: {
+
-                                enabled: false
+                            ...sparkline,
-                            },
+
-                            toolbar: {
+                            zoom: { enabled: false },
-                                show: false
+
-                            },
+                            toolbar: { show: false },
-                            animations: {
+
-                                enabled: animated,
+                            animations: { enabled: animated },
-                            },
+
                             events: {
                                 markerClick: function(event, chartContext, { seriesIndex, dataPointIndex }) {
                                     if (!onPointClickEventName) {

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

@@ -1,5 +1,5 @@
 <div
-    class="w-full h-full"
+    style="width: 100%; height: 100%;"
     x-data="{ ...pieChart() }"
     x-init="drawChart(@this)"
 >
@@ -20,6 +20,7 @@
                     const dataLabels = component.get('pieChartModel.dataLabels') || {}
                     const onSliceClickEventName = component.get('pieChartModel.onSliceClickEventName')
                     const data = component.get('pieChartModel.data')
+                    const sparkline = component.get('pieChartModel.sparkline')
 
                     const options = {
                         series: data.map(item => item.value),
@@ -28,9 +29,9 @@
                             height: '100%',
                             type: 'pie',
 
-                            animations: {
+                            ...sparkline,
-                                enabled: animated,
+
-                            },
+                            animations: { enabled: animated },
 
                             events: {
                                 dataPointSelection: function(event, chartContext, config) {

src/Facades/LivewireCharts.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace Asantibanez\LivewireCharts\Facades;
+
+use Asantibanez\LivewireCharts\Models\AreaChartModel;
+use Asantibanez\LivewireCharts\Models\ColumnChartModel;
+use Asantibanez\LivewireCharts\Models\LineChartModel;
+use Asantibanez\LivewireCharts\Models\PieChartModel;
+use Illuminate\Support\Facades\Facade;
+
+/**
+ * Class LivewireCharts
+ * @package Asantibanez\LivewireCharts\Facades
+ * @method static LineChartModel lineChartModel()
+ * @method static LineChartModel multiLineChartModel()
+ * @method static ColumnChartModel columnChartModel()
+ * @method static ColumnChartModel multiColumnChartModel()
+ * @method static AreaChartModel areaChartModel()
+ * @method static PieChartModel pieChartModel()
+ */
+class LivewireCharts extends Facade
+{
+    protected static function getFacadeAccessor()
+    {
+        return 'livewirecharts';
+    }
+}

src/LivewireCharts.php

@@ -0,0 +1,47 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts;
+
+
+use Asantibanez\LivewireCharts\Models\AreaChartModel;
+use Asantibanez\LivewireCharts\Models\ColumnChartModel;
+use Asantibanez\LivewireCharts\Models\LineChartModel;
+use Asantibanez\LivewireCharts\Models\PieChartModel;
+
+class LivewireCharts
+{
+    public function lineChartModel()
+    {
+        return (new LineChartModel)
+            ->singleLine();
+    }
+
+    public function multiLineChartModel()
+    {
+        return (new LineChartModel)
+            ->multiLine();
+    }
+
+    public function columnChartModel()
+    {
+        return (new ColumnChartModel)
+            ->singleColumn();
+    }
+
+    public function multiColumnChartModel()
+    {
+        return (new ColumnChartModel)
+            ->multiColumn();
+    }
+
+    public function areaChartModel()
+    {
+        return new AreaChartModel;
+    }
+
+    public function pieChartModel()
+    {
+        return new PieChartModel;
+    }
+}

src/LivewireChartsServiceProvider.php

@@ -35,6 +35,6 @@ class LivewireChartsServiceProvider extends ServiceProvider
      */
     public function register()
     {
-        //
+        $this->app->bind('livewirecharts', LivewireCharts::class);
     }
 }

src/Models/BaseChartModel.php

@@ -15,6 +15,7 @@ class BaseChartModel
     use HasStroke;
     use HasLegend;
     use HasDataLabels;
+    use HasSparkline;
 
     public function __construct()
     {
@@ -24,6 +25,7 @@ class BaseChartModel
         $this->initStroke();
         $this->initLegend();
         $this->initDataLabels();
+        $this->initSparkline();
     }
 
     public function reactiveKey()
@@ -39,7 +41,8 @@ class BaseChartModel
             $this->axisToArray(),
             $this->strokeToArray(),
             $this->legendToArray(),
-            $this->dataLabelsToArray()
+            $this->dataLabelsToArray(),
+            $this->sparklineToArray()
         );
     }
 
@@ -51,5 +54,6 @@ class BaseChartModel
         $this->strokeFromArray($array);
         $this->legendFromArray($array);
         $this->dataLabelsFromArray($array);
+        $this->sparklineFromArray($array);
     }
 }

src/Models/ColumnChartModel.php

@@ -7,6 +7,7 @@ namespace Asantibanez\LivewireCharts\Models;
  * Class ColumnChartModel
  * @package Asantibanez\LivewireCharts\Models
  * @property boolean $isMultiColumn
+ * @property boolean $isStacked
  */
 class ColumnChartModel extends BaseChartModel
 {
@@ -14,6 +15,8 @@ class ColumnChartModel extends BaseChartModel
 
     public $isMultiColumn;
 
+    public $isStacked;
+
     public $onColumnClickEventName;
 
     public $data;
@@ -28,6 +31,8 @@ class ColumnChartModel extends BaseChartModel
 
         $this->isMultiColumn = false;
 
+        $this->isStacked = false;
+
         $this->data = collect();
     }
 
@@ -45,6 +50,13 @@ class ColumnChartModel extends BaseChartModel
         return $this;
     }
 
+    public function stacked()
+    {
+        $this->isStacked = true;
+
+        return $this;
+    }
+
     public function setOpacity($opacity)
     {
         $this->opacity = $opacity;
@@ -93,6 +105,7 @@ class ColumnChartModel extends BaseChartModel
             'onColumnClickEventName' => $this->onColumnClickEventName,
             'opacity' => $this->opacity,
             'isMultiColumn' => $this->isMultiColumn,
+            'isStacked' => $this->isStacked,
             'data' => $this->data->toArray(),
         ]);
     }
@@ -107,6 +120,8 @@ class ColumnChartModel extends BaseChartModel
 
         $this->isMultiColumn = data_get($array, 'isMultiColumn', false);
 
+        $this->isStacked = data_get($array, 'isStacked', false);
+
         $this->data = collect(data_get($array, 'data', []));
     }
 }

src/Models/HasSparkline.php

@@ -0,0 +1,48 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+
+trait HasSparkline
+{
+    private $sparkline;
+
+    public function setSparklineEnabled($isEnabled)
+    {
+        data_set($this->sparkline, 'sparkline.enabled', $isEnabled);
+
+        return $this;
+    }
+
+    public function sparklined()
+    {
+        return $this->setSparklineEnabled(true);
+    }
+
+    protected function initSparkline()
+    {
+        $this->sparkline = $this->defaultSparkline();
+    }
+
+    private function defaultSparkline()
+    {
+        return [
+            'sparkline' => [
+                'enabled' => false,
+            ],
+        ];
+    }
+
+    protected function sparklineFromArray($array)
+    {
+        $this->sparkline = data_get($array, 'sparkline', $this->defaultSparkline());
+    }
+
+    protected function sparklineToArray()
+    {
+        return [
+            'sparkline' => $this->sparkline,
+        ];
+    }
+}