Updated docs

- Added custom colors to pie chart

CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 2.3.0 - 2021-02-12
+- Added `init()` method for better boot and $wire hoisting
+- Added color customization for columns, multiline and pie chart
+
+## 2.2.0 - 2020-12-16
+- Added support for PHP 8
+- Updated docs 
+- Added base tests for components and CI
+
+## 2.1.0 - 2020-11-30
+- Added stroke width customization
+- Added stroke support for Area Chart
+
+## 2.0.0 - 2020-11-30
+- Added build system for JS charts code
+- Added Blade directive to include assets
+- Updated installation and advanced usage instructions
+
 ## 1.5.2 - 2020-11-09
 
 - Fixed infinite growing charts

README.md

@@ -20,7 +20,11 @@ composer require asantibanez/livewire-charts
 
 Next, you must export the package public scripts. To do this run `php artisan vendor:publish` 
 and export `livewire-charts:public`. This command will export a `vendor/livewire-charts` folder under the 
-`public` directory of your app.
+`public` directory of your app.  
+
+```bash
+php artisan vendor:publish --tag=livewire-charts:public
+```
 
 ## Requirements
 
@@ -164,6 +168,8 @@ for each type of chart.
 | withoutDataLabels() | Disables data labels |
 | withLegend() | Shows legends |
 | withoutLegend() | Hides legends |
+| setColors(array $colors) | Set colors for chart |
+| addColors(string $color) | Append $color to $colors set |
 | 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 |
@@ -184,6 +190,8 @@ for each type of chart.
 | Method | Description |
 |--------|-------------|
 | setOpacity(int $opacity) | Sets columns' opacity |
+| setColumnWidth(int $columnWidth) | Sets columns' width |
+| setHorizontal(boolean $value) | Sets columns or bars |
 | 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 |

resources/js/areaChart.js

@@ -3,6 +3,12 @@ const areaChart = () => {
     return {
         chart: null,
 
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
         drawChart(component) {
             if (this.chart) {
                 this.chart.destroy()

resources/js/columnChart.js

@@ -3,6 +3,12 @@ const columnChart = () => {
     return {
         chart: null,
 
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
         drawChart(component) {
             if (this.chart) {
                 this.chart.destroy()
@@ -11,11 +17,17 @@ const columnChart = () => {
             const animated = component.get('columnChartModel.animated') || false;
             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 legend = component.get('columnChartModel.legend')
+            const grid = component.get('columnChartModel.grid');
+            const columnWidth = component.get('columnChartModel.columnWidth');
+            const horizontal = component.get('columnChartModel.horizontal');
+
+            const data = component.get('columnChartModel.data');
+            const series = [{ data: data.map(item => item.value)}]
 
             const options = {
-                series: [{ data: data.map(item => item.value)}],
+                series: series,
 
                 chart: {
                     type: 'bar',
@@ -48,12 +60,14 @@ const columnChart = () => {
                     },
                 },
 
-                legend: component.get('columnChartModel.legend') || {},
+                legend: legend,
+
+                grid: grid,
 
                 plotOptions: {
                     bar: {
-                        horizontal: false,
-                        columnWidth: '40%',
+                        horizontal: horizontal,
+                        columnWidth: `${columnWidth}%`,
                         distributed: true,
                     },
                 },
@@ -75,6 +89,12 @@ const columnChart = () => {
                 },
             };
 
+            const colors = component.get('columnChartModel.colors');
+
+            if (colors && colors.length > 0) {
+                options['colors'] = colors
+            }
+
             this.chart = new ApexCharts(this.$refs.container, options);
             this.chart.render();
         }

resources/js/lineChart.js

@@ -3,6 +3,12 @@ const lineChart = () => {
     return {
         chart: null,
 
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
         drawChart(component) {
             if (this.chart) {
                 this.chart.destroy()

resources/js/multiColumnChart.js

@@ -3,6 +3,12 @@ const multiColumnChart = () => {
     return {
         chart: null,
 
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
         drawChart(component) {
             if (this.chart) {
                 this.chart.destroy()
@@ -12,9 +18,13 @@ const multiColumnChart = () => {
             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 legend = component.get('columnChartModel.legend')
+            const grid = component.get('columnChartModel.grid');
+            const columnWidth = component.get('columnChartModel.columnWidth');
+            const horizontal = component.get('columnChartModel.horizontal');
 
+            const data = component.get('columnChartModel.data');
             const series = Object.keys(data)
                 .map(seriesName => ({
                     name: seriesName,
@@ -23,7 +33,7 @@ const multiColumnChart = () => {
 
             const categories = component.get('columnChartModel.xAxis.categories').length > 0
                 ? component.get('columnChartModel.xAxis.categories')
-                : data[series[0].name].map(item => item.title)
+                : []
             ;
 
             const options = {
@@ -52,12 +62,14 @@ const multiColumnChart = () => {
                     }
                 },
 
-                legend: component.get('columnChartModel.legend'),
+                legend: legend,
+
+                grid: grid,
 
                 plotOptions: {
                     bar: {
-                        horizontal: false,
-                        columnWidth: '50%',
+                        horizontal: horizontal,
+                        columnWidth: `${columnWidth}%`,
                     },
                 },
 
@@ -78,6 +90,12 @@ const multiColumnChart = () => {
                 },
             };
 
+            const colors = component.get('columnChartModel.colors');
+
+            if (colors && colors.length > 0) {
+                options['colors'] = colors
+            }
+
             this.chart = new ApexCharts(this.$refs.container, options);
             this.chart.render();
         }

resources/js/multiLineChart.js

@@ -3,6 +3,12 @@ const multiLineChart = () => {
     return {
         chart: null,
 
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
         drawChart(component) {
             if (this.chart) {
                 this.chart.destroy()
@@ -70,6 +76,12 @@ const multiLineChart = () => {
                 yaxis: component.get('lineChartModel.yAxis') || {},
             };
 
+            const colors = component.get('lineChartModel.colors');
+
+            if (colors && colors.length > 0) {
+                options['colors'] = colors
+            }
+
             this.chart = new ApexCharts(this.$refs.container, options);
             this.chart.render();
         }

resources/js/pieChart.js

@@ -3,6 +3,12 @@ const pieChart = () => {
     return {
         chart: null,
 
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
         drawChart(component) {
             if (this.chart) {
                 this.chart.destroy()
@@ -68,6 +74,12 @@ const pieChart = () => {
                 legend: component.get('pieChartModel.legend') || {},
             };
 
+            const colors = component.get('pieChartModel.colors');
+
+            if (colors && colors.length > 0) {
+                options['colors'] = colors
+            }
+
             this.chart = new ApexCharts(this.$refs.container, options);
             this.chart.render();
         }

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

@@ -1,7 +1,7 @@
 <div
     style="width: 100%; height: 100%;"
     x-data="{ ...livewireChartsAreaChart() }"
-    x-init="drawChart(@this)"
+    x-init="init()"
 >
     <div wire:ignore x-ref="container"></div>
 </div>

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

@@ -1,7 +1,7 @@
 <div
     style="width: 100%; height: 100%;"
     x-data="{ ...livewireChartsColumnChart() }"
-    x-init="drawChart(@this)"
+    x-init="init()"
 >
     <div wire:ignore x-ref="container"></div>
 </div>

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

@@ -1,7 +1,7 @@
 <div
     style="width: 100%; height: 100%;"
     x-data="{ ...livewireChartsLineChart() }"
-    x-init="drawChart(@this)"
+    x-init="init()"
 >
     <div wire:ignore x-ref="container"></div>
 </div>

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

@@ -1,7 +1,7 @@
 <div
     style="width: 100%; height: 100%;"
     x-data="{ ...livewireChartsMultiColumnChart() }"
-    x-init="drawChart(@this)"
+    x-init="init()"
 >
     <div wire:ignore x-ref="container"></div>
 </div>

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

@@ -1,7 +1,7 @@
 <div
     style="width: 100%; height: 100%;"
     x-data="{ ...livewireChartsMultiLineChart() }"
-    x-init="drawChart(@this)"
+    x-init="init()"
 >
     <div wire:ignore x-ref="container"></div>
 </div>

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

@@ -1,7 +1,7 @@
 <div
     style="width: 100%; height: 100%;"
     x-data="{ ...livewireChartsPieChart() }"
-    x-init="drawChart(@this)"
+    x-init="init()"
 >
     <div wire:ignore x-ref="container"></div>
 </div>

src/Models/BaseChartModel.php

@@ -16,6 +16,8 @@ class BaseChartModel
     use HasLegend;
     use HasDataLabels;
     use HasSparkline;
+    use HasGrid;
+    use HasColors;
 
     public function __construct()
     {
@@ -26,6 +28,8 @@ class BaseChartModel
         $this->initLegend();
         $this->initDataLabels();
         $this->initSparkline();
+        $this->initGrid();
+        $this->initColors();
     }
 
     public function reactiveKey()
@@ -42,7 +46,9 @@ class BaseChartModel
             $this->strokeToArray(),
             $this->legendToArray(),
             $this->dataLabelsToArray(),
-            $this->sparklineToArray()
+            $this->sparklineToArray(),
+            $this->gridToArray(),
+            $this->colorsToArray()
         );
     }
 
@@ -55,5 +61,7 @@ class BaseChartModel
         $this->legendFromArray($array);
         $this->dataLabelsFromArray($array);
         $this->sparklineFromArray($array);
+        $this->gridFromArray($array);
+        $this->colorsFromArray($array);
     }
 }

src/Models/ColumnChartModel.php

@@ -13,6 +13,10 @@ class ColumnChartModel extends BaseChartModel
 {
     public $opacity;
 
+    public $columnWidth;
+
+    public $horizontal;
+
     public $isMultiColumn;
 
     public $isStacked;
@@ -27,7 +31,11 @@ class ColumnChartModel extends BaseChartModel
 
         $this->onColumnClickEventName = null;
 
-        $this->opacity = 0.5;
+        $this->opacity = 0.75;
+
+        $this->columnWidth = 70;
+
+        $this->horizontal = false;
 
         $this->isMultiColumn = false;
 
@@ -57,6 +65,20 @@ class ColumnChartModel extends BaseChartModel
         return $this;
     }
 
+    public function setHorizontal($value)
+    {
+        $this->horizontal = $value;
+
+        return $this;
+    }
+
+    public function setColumnWidth($value)
+    {
+        $this->columnWidth = $value;
+
+        return $this;
+    }
+
     public function setOpacity($opacity)
     {
         $this->opacity = $opacity;
@@ -104,6 +126,8 @@ class ColumnChartModel extends BaseChartModel
         return array_merge(parent::toArray(), [
             'onColumnClickEventName' => $this->onColumnClickEventName,
             'opacity' => $this->opacity,
+            'horizontal' => $this->horizontal,
+            'columnWidth' => $this->columnWidth,
             'isMultiColumn' => $this->isMultiColumn,
             'isStacked' => $this->isStacked,
             'data' => $this->data->toArray(),
@@ -118,6 +142,10 @@ class ColumnChartModel extends BaseChartModel
 
         $this->opacity = data_get($array, 'opacity', 0.5);
 
+        $this->columnWidth = data_get($array, 'columnWidth', 70);
+
+        $this->horizontal = data_get($array, 'horizontal', false);
+
         $this->isMultiColumn = data_get($array, 'isMultiColumn', false);
 
         $this->isStacked = data_get($array, 'isStacked', false);

src/Models/HasColors.php

@@ -0,0 +1,46 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+
+trait HasColors
+{
+    private $colors;
+
+    public function setColors($colors)
+    {
+        $this->colors = $colors;
+
+        return $this;
+    }
+
+    public function addColor($color)
+    {
+        $this->colors[] = $color;
+
+        return $this;
+    }
+
+    protected function initColors()
+    {
+        $this->colors = $this->defaultColors();
+    }
+
+    private function defaultColors()
+    {
+        return [];
+    }
+
+    protected function colorsFromArray($array)
+    {
+        $this->colors = data_get($array, 'colors', $this->defaultColors());
+    }
+
+    protected function colorsToArray()
+    {
+        return [
+            'colors' => $this->colors,
+        ];
+    }
+}

src/Models/HasGrid.php

@@ -0,0 +1,66 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+
+trait HasGrid
+{
+    private $grid;
+
+    public function setGridVisible($visible)
+    {
+        data_set($this->grid, 'show', $visible);
+
+        return $this;
+    }
+
+    public function withGrid()
+    {
+        data_set($this->grid, 'show', true);
+
+        return $this;
+    }
+
+    public function withoutGrid()
+    {
+        data_set($this->grid, 'show', false);
+
+        return $this;
+    }
+
+    protected function initGrid()
+    {
+        $this->grid = $this->defaultGrid();
+    }
+
+    private function defaultGrid()
+    {
+        return [
+            'show' => false,
+            'position' => 'back',
+            'xaxis' => [
+                'lines' => [
+                    'show' => true,
+                ],
+            ],
+            'yaxis' => [
+                'lines' => [
+                    'show' => true,
+                ],
+            ],
+        ];
+    }
+
+    protected function gridFromArray($array)
+    {
+        $this->grid = data_get($array, 'grid', $this->defaultGrid());
+    }
+
+    protected function gridToArray()
+    {
+        return [
+            'grid' => $this->grid,
+        ];
+    }
+}