Updated docs

- Added custom colors to pie chart

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @asantibanez

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,26 @@
+---
+name: Bug report
+about: Create a report to help us improve
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. '...'
+2. '...'
+3. '...'
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Additional context**
+Add any other context about the problem here.
+
+**Solution Ideas**
+Initial thoughts or details about how this could be fixed

.github/ISSUE_TEMPLATE/feature.md

@@ -0,0 +1,14 @@
+---
+name: Feature
+about: New feature idea
+
+---
+
+### Summary
+What's the new feature about? What should it do?
+
+### Proposal
+How should it work? API ideas?
+
+### Additional Notes
+Reference links or comments 

.github/PULL_REQUEST_TEMPLATE

@@ -0,0 +1,18 @@
+## Summary
+
+[Provide a summary of the change.]
+
+## Issue
+
+[If exists, provide a link to the corresponding issue(s).]
+
+## Type of Change
+
+- [ ] :rocket: New Feature
+- [ ] :bug: Bug Fix
+- [ ] :hammer: Refactor
+- [ ] :question: [Other]
+
+## Screenshot/Video
+
+[Provide a screenshot or video that describes the change if applicable]

.github/workflows/phpunit.yml

@@ -0,0 +1,29 @@
+name: PHPUnit
+
+on: [push]
+
+jobs:
+  phpunit:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Cancel Previous Run
+        uses: styfle/cancel-workflow-action@0.6.0
+        with:
+          access_token: ${{ github.token }}
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '7.4'
+          extensions: dom, curl, libxml, mbstring, zip, pcntl, pdo, sqlite, pdo_sqlite, gd, exif, imagick, bcmath
+          coverage: none
+
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Install Composer dependencies
+        run: composer install --ignore-platform-reqs
+
+      - name: Run tests
+        run: ./vendor/bin/phpunit

.gitignore

@@ -6,3 +6,4 @@ vendor
 coverage
 .DS_STORE
 node_modules
+.phpunit.result.cache

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

@@ -22,6 +22,10 @@ Next, you must export the package public scripts. To do this run `php artisan ve
 and export `livewire-charts:public`. This command will export a `vendor/livewire-charts` folder under the 
 `public` directory of your app.  
 
+```bash
+php artisan vendor:publish --tag=livewire-charts:public
+```
+
 ## Requirements
 
 This package requires the following packages/libraries to work:
@@ -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,10 +190,13 @@ 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 |
 | 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 |
+| addSeriesColumn(string $seriesName, string $title, double $value, array $extras = []) | Adds a column to a multicolumn chart. `$extras` is forwarded on click event |
 | onColumnClickEventName(string $eventName) | Event Name that will be fired when a column of the chart is clicked |
 
 #### LivewirePieChart

composer.json

@@ -16,7 +16,7 @@
         }
     ],
     "require": {
-        "php": "^7.2|^7.3|^7.4",
+        "php": "^7.2|^7.3|^7.4|^8.0",
         "illuminate/support": "^7.0|^8.0",
         "livewire/livewire": "^2.3"
     },

phpunit.xml.dist

@@ -22,7 +22,7 @@
     <logging>
         <log type="tap" target="build/report.tap"/>
         <log type="junit" target="build/report.junit.xml"/>
-        <log type="coverage-html" target="build/coverage" charset="UTF-8" yui="true" highlight="true"/>
+        <log type="coverage-html" target="build/coverage"/>
         <log type="coverage-text" target="build/coverage.txt"/>
         <log type="coverage-clover" target="build/logs/clover.xml"/>
     </logging>

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,
+                        horizontal: horizontal,
-                        columnWidth: '40%',
+                        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,
+                        horizontal: horizontal,
-                        columnWidth: '50%',
+                        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,
+        ];
+    }
+}

tests/ExampleTest.php

@@ -1,21 +0,0 @@
-<?php
-
-namespace Asantibanez\LivewireCharts\Tests;
-
-use Orchestra\Testbench\TestCase;
-use Asantibanez\LivewireCharts\LivewireChartsServiceProvider;
-
-class ExampleTest extends TestCase
-{
-
-    protected function getPackageProviders($app)
-    {
-        return [LivewireChartsServiceProvider::class];
-    }
-    
-    /** @test */
-    public function true_is_true()
-    {
-        $this->assertTrue(true);
-    }
-}

tests/LivewireAreaChartTest.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace Asantibanez\LivewireCharts\Tests;
+
+use Asantibanez\LivewireCharts\Charts\LivewireAreaChart;
+use Livewire\Livewire;
+use Livewire\Testing\TestableLivewire;
+
+class LivewireAreaChartTest extends TestCase
+{
+    private function buildComponent() : TestableLivewire
+    {
+        return Livewire::test(LivewireAreaChart::class);
+    }
+
+    /** @test */
+    public function can_build_component()
+    {
+        //Act
+        $component = $this->buildComponent();
+
+        //Assert
+        $this->assertNotNull($component);
+    }
+}

tests/LivewireColumnChartTest.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace Asantibanez\LivewireCharts\Tests;
+
+use Asantibanez\LivewireCharts\Charts\LivewireColumnChart;
+use Livewire\Livewire;
+use Livewire\Testing\TestableLivewire;
+
+class LivewireColumnChartTest extends TestCase
+{
+    private function buildComponent() : TestableLivewire
+    {
+        return Livewire::test(LivewireColumnChart::class);
+    }
+
+    /** @test */
+    public function can_build_component()
+    {
+        //Act
+        $component = $this->buildComponent();
+
+        //Assert
+        $this->assertNotNull($component);
+    }
+}

tests/LivewireLineChartTest.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace Asantibanez\LivewireCharts\Tests;
+
+use Asantibanez\LivewireCharts\Charts\LivewireLineChart;
+use Livewire\Livewire;
+use Livewire\Testing\TestableLivewire;
+
+class LivewireLineChartTest extends TestCase
+{
+    private function buildComponent() : TestableLivewire
+    {
+        return Livewire::test(LivewireLineChart::class);
+    }
+
+    /** @test */
+    public function can_build_component()
+    {
+        //Act
+        $component = $this->buildComponent();
+
+        //Assert
+        $this->assertNotNull($component);
+    }
+}

tests/LivewirePieChartTest.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace Asantibanez\LivewireCharts\Tests;
+
+use Asantibanez\LivewireCharts\Charts\LivewirePieChart;
+use Livewire\Livewire;
+use Livewire\Testing\TestableLivewire;
+
+class LivewirePieChartTest extends TestCase
+{
+    private function buildComponent() : TestableLivewire
+    {
+        return Livewire::test(LivewirePieChart::class);
+    }
+
+    /** @test */
+    public function can_build_component()
+    {
+        //Act
+        $component = $this->buildComponent();
+
+        //Assert
+        $this->assertNotNull($component);
+    }
+}

tests/TestCase.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace Asantibanez\LivewireCharts\Tests;
+
+use Asantibanez\LivewireCharts\LivewireChartsServiceProvider;
+use Livewire\LivewireServiceProvider;
+use Orchestra\Testbench\TestCase as BaseTestCase;
+
+class TestCase extends BaseTestCase
+{
+
+    protected function getPackageProviders($app)
+    {
+        return [
+            LivewireServiceProvider::class,
+            LivewireChartsServiceProvider::class
+        ];
+    }
+
+    protected function getEnvironmentSetUp($app)
+    {
+        $app['config']->set('app.key', 'base64:Hupx3yAySikrM2/edkZQNQHslgDWYfiBfCuSThJ5SK8=');
+    }
+
+}