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

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

CHANGELOG.md

@@ -1,5 +1,59 @@
 # 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
+
+## 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 
+- Added Data Labels configuration for all charts
+- Refactored title and animation to traits
+
+## 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

@@ -1,11 +1,15 @@
-# Livewire Charts
+[![GitHub release](https://img.shields.io/github/release/asantibanez/livewire-charts.svg)](https://github.com/asantibanez/livewire-charts/releases/)
 
-Neat Livewire Charts for your Laravel projects.
+![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
 
 ![preview](https://github.com/asantibanez/livewire-charts/raw/master/preview.gif)
 
+## Demo
+
+https://github.com/asantibanez/livewire-charts-demo
+
 ## Installation
 
 You can install the package via composer:
@@ -14,6 +18,14 @@ You can install the package via composer:
 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.  
+
+```bash
+php artisan vendor:publish --tag=livewire-charts:public
+```
+
 ## Requirements
 
 This package requires the following packages/libraries to work:
@@ -23,19 +35,21 @@ This package requires the following packages/libraries to work:
 
 Please follow each package/library instructions on how to set them properly in your project.
 
-> Note: At the moment, `Apex Charts` is only supported for drawing charts.  
+>Note: At the moment, `Apex Charts` is only supported for drawing charts.  
 
 ## Usage
 
 Livewire Charts supports out of the box the following types of charts
-- Line Chart (`LivewireLineChart` component)
+- Line/Multi Line Chart (`LivewireLineChart` component)
 - Pie Chart (`LivewirePieChart` component)
-- Column Chart (`LivewireColumnChart` component)
+- Column/Multi Line 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
@@ -48,7 +62,7 @@ $columnChartModel =
     ;
 ``` 
 
-> Note: Chart model methods are chainable 💪 
+>Note: Chart model methods are chainable 💪 
 
 With `$columnChartModel` at hand, we pass it to our `LivewireColumnChart` component in our Blade template. 
 
@@ -58,13 +72,33 @@ With `$columnChartModel` at hand, we pass it to our `LivewireColumnChart` compon
 />
 ``` 
 
+Next, include the `@livewireChartsScripts` directive next to your other app scripts
+
+```html
+<livewire:scripts />
+@livewireChartsScripts
+```
+
 And that's it! You have a beautiful rendered chart in seconds. 👌
 
 ![column chart example](https://github.com/asantibanez/livewire-charts/raw/master/column-chart-example.png)
 
-> Note: You can use these charts inside other Livewire components too. Just render them in your Blade template and you
+>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 
@@ -123,36 +157,87 @@ The parent component renders the charts as follows
 For each chart, a specific model class needs to be used. Here, it is detailed the api available
 for each type of chart.
 
-#### LivewireLineChart
+#### All
 
 | 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 line chart. `$extras` is forwarded on click event |
-| addMarker(string $title, double $value) | Adds a marker point to the line chart. Markers are used to emphasize particular points in the chart |
+| setDataLabelsEnabled(boolean $enabled) | Enables/disables data labels |
+| withDataLabels() | Enables data labels |
+| 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 |
+
+#### LivewireLineChart
+
+| Method | Description |
+|--------|-------------|
+| multiLine() | Adds multiline support for line chart |
+| singleLine() | Adds single support for line chart |
+| addPoint(string $title, double $value, array $extras = []) | Adds a point to a single line chart. `$extras` is forwarded on click event |
+| addSeriesPoint(string $seriesName, string $title, double $value, array $extras = []) | Adds a point to series to a multi line chart. `$extras` is forwarded on click event |
+| addMarker(string $title, double $value) | Adds a marker point to the line chart. Markers are used to emphasize particular points in the chart (singleLine only) |
 | withOnPointClickEvent(string $eventName) | Event Name that will be fired when a point/marker of the chart is clicked |
 
 #### LivewireColumnChart
 
 | Method | Description |
 |--------|-------------|
-| setTitle(string $title) | Sets chart title |
-| setAnimated(boolean $animated) | Enables/disables animation |
 | 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
 
 | Method | Description |
 |--------|-------------|
-| setTitle(string $title) | Sets chart title |
-| setAnimated(boolean $animated) | Enables/disables animation |
 | setOpacity(int $opacity) | Sets slices' opacity |
 | 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 |
+|--------|-------------|
+| 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 |
+
+## Advanced Usage - Integrating Scripts
+
+The directive `@livewireChartsScripts` adds a `script` tag that includes `public/vendor/livewire-charts/app.js`.
+If you want to include this script in your build system, you can export the package scripts 
+with `php artisan vendor:publish` and selecting `livewire-charts:scripts`. This will export `js/vendor/livewire-charts`
+inside your resources folder. You can then adjust imports as you see fit in your project.
+
+>Note: You must remove @livewireChartsScripts directive so it doesn't clash with the scripts in your build system. 
+
+## Troubleshooting
+
+Chart components must be placed inside a container with fixed height. This is because the chart will use all the given
+vertical space. A fixed height is needed to render properly.
+
+ ```blade
+<div style="height: 32rem;">
+    <livewire:livewire-column-chart .../>
+</div>
+ ``` 
+
+>Note: if a fixed height is not given, the chart will grow vertically infinitely. That's not what we want, right?
+
 ## Testing
 
 ``` bash

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"
     },

mix-manifest.json

@@ -0,0 +1,3 @@
+{
+    "/public/app.js": "/public/app.js"
+}

package.json

@@ -0,0 +1,16 @@
+{
+    "scripts": {
+        "dev": "npm run development",
+        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch": "npm run development -- --watch",
+        "watch-poll": "npm run watch -- --watch-poll",
+        "prod": "npm run production",
+        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    },
+    "devDependencies": {
+        "apexcharts": "^3.22.2",
+        "cross-env": "^7.0.2",
+        "laravel-mix": "^5.0.9",
+        "vue-template-compiler": "^2.6.12"
+    }
+}

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>

public/app.js.LICENSE.txt

@@ -0,0 +1,13 @@
+/*!
+ * ApexCharts v3.22.2
+ * (c) 2018-2020 Juned Chhipa
+ * Released under the MIT License.
+ */
+
+/*! svg.draggable.js - v2.2.2 - 2019-01-08
+* https://github.com/svgdotjs/svg.draggable.js
+* Copyright (c) 2019 Wout Fierens; Licensed MIT */
+
+/*! svg.filter.js - v2.0.2 - 2016-02-24
+* https://github.com/wout/svg.filter.js
+* Copyright (c) 2016 Wout Fierens; Licensed MIT */

resources/js/app.js

@@ -0,0 +1,15 @@
+import ApexCharts from 'apexcharts'
+import areaChart from "./areaChart"
+import columnChart from "./columnChart"
+import multiColumnChart from "./multiColumnChart";
+import lineChart from "./lineChart"
+import multiLineChart from "./multiLineChart"
+import pieChart from "./pieChart"
+
+window.ApexCharts = ApexCharts
+window.livewireChartsAreaChart = areaChart
+window.livewireChartsColumnChart = columnChart
+window.livewireChartsLineChart = lineChart
+window.livewireChartsMultiLineChart = multiLineChart
+window.livewireChartsPieChart = pieChart
+window.livewireChartsMultiColumnChart = multiColumnChart

resources/js/areaChart.js

@@ -0,0 +1,94 @@
+
+const areaChart = () => {
+    return {
+        chart: null,
+
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
+        drawChart(component) {
+            if (this.chart) {
+                this.chart.destroy()
+            }
+
+            const title = component.get('areaChartModel.title');
+            const animated = component.get('areaChartModel.animated') || false;
+            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')
+                : data.map(item => item.title)
+            ;
+
+            var options = {
+                series: [{
+                    name: title,
+                    data: data.map(item => item.value)
+                }],
+                chart: {
+                    type: 'area',
+                    height: '100%',
+
+                    ...sparkline,
+
+                    zoom: { enabled: false },
+
+                    toolbar: { show: false },
+
+                    animations: { enabled: animated },
+
+                    events: {
+                        markerClick: function(event, chartContext, { dataPointIndex }) {
+                            if (!onPointClickEventName) {
+                                return
+                            }
+
+                            const point = data[dataPointIndex]
+                            component.call('onPointClick', point)
+                        }
+                    }
+                },
+
+                dataLabels: dataLabels,
+
+                colors: [component.get('areaChartModel.color') || '#2E93fA'],
+
+                stroke: component.get('areaChartModel.stroke') || {},
+
+                title: {
+                    text: title,
+                    align: 'center'
+                },
+
+                labels: data.map(item => item.title),
+
+                xaxis: {
+                    labels: component.get('areaChartModel.xAxis.labels'),
+                    categories: categories,
+                },
+
+                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();
+        }
+    }
+}
+
+export default areaChart

resources/js/columnChart.js

@@ -0,0 +1,104 @@
+
+const columnChart = () => {
+    return {
+        chart: null,
+
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
+        drawChart(component) {
+            if (this.chart) {
+                this.chart.destroy()
+            }
+
+            const animated = component.get('columnChartModel.animated') || false;
+            const onColumnClickEventName = component.get('columnChartModel.onColumnClickEventName')
+            const dataLabels = component.get('columnChartModel.dataLabels') || {};
+            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: series,
+
+                chart: {
+                    type: 'bar',
+                    height: '100%',
+
+                    ...sparkline,
+
+                    toolbar: { show: false },
+
+                    animations: { enabled: animated },
+
+                    events: {
+                        dataPointSelection: function(event, chartContext, config) {
+                            if (!onColumnClickEventName) {
+                                return
+                            }
+
+                            const { dataPointIndex } = config
+                            const column = data[dataPointIndex]
+                            component.call('onColumnClick', column)
+                        },
+                    }
+                },
+
+                colors: data.map(item => item.color),
+
+                labels: {
+                    style: {
+                        colors: data.map(item => item.color),
+                    },
+                },
+
+                legend: legend,
+
+                grid: grid,
+
+                plotOptions: {
+                    bar: {
+                        horizontal: horizontal,
+                        columnWidth: `${columnWidth}%`,
+                        distributed: true,
+                    },
+                },
+
+                dataLabels: dataLabels,
+
+                xaxis: {
+                    categories: data.map(item => item.title),
+                },
+
+                yaxis: {
+                    title: {
+                        text: component.get('columnChartModel.title'),
+                    }
+                },
+
+                fill: {
+                    opacity: component.get('columnChartModel.opacity') || 0.5
+                },
+            };
+
+            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();
+        }
+    }
+}
+
+export default columnChart

resources/js/lineChart.js

@@ -0,0 +1,108 @@
+
+const lineChart = () => {
+    return {
+        chart: null,
+
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
+        drawChart(component) {
+            if (this.chart) {
+                this.chart.destroy()
+            }
+
+            const title = component.get('lineChartModel.title');
+            const animated = component.get('lineChartModel.animated') || false;
+            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,
+                data: data.map(item => item.value),
+            }]
+
+            const categories = component.get('lineChartModel.xAxis.categories').length > 0
+                ? component.get('lineChartModel.xAxis.categories')
+                : data.map(item => item.title)
+
+            const options = {
+                series: series,
+
+                chart: {
+                    type: 'line',
+                    height: '100%',
+
+                    ...sparkline,
+
+                    zoom: { enabled: false },
+
+                    toolbar: { show: false },
+
+                    animations: { enabled: animated },
+
+                    events: {
+                        markerClick: function(event, chartContext, { dataPointIndex }) {
+                            if (!onPointClickEventName) {
+                                return
+                            }
+
+                            const point = data[dataPointIndex]
+                            component.call('onPointClick', point)
+                        }
+                    }
+                },
+
+                dataLabels: dataLabels,
+
+                stroke: component.get('lineChartModel.stroke') || {},
+
+                title: {
+                    text: title,
+                    align: 'center'
+                },
+
+                xaxis: {
+                    labels: component.get('lineChartModel.xAxis.labels'),
+                    categories: categories,
+                },
+
+                yaxis: component.get('lineChartModel.yAxis') || {},
+
+                annotations: {
+                    points: component.get('lineChartModel.markers').map(item => {
+                            return {
+                                x: item.title,
+                                y: item.value,
+                                marker: {
+                                    size: 6,
+                                    fillColor: '#fff',
+                                    strokeColor: item.strokeColor,
+                                    radius: 2,
+                                },
+                                label: {
+                                    offsetY: 0,
+                                    style: {
+                                        color: item.textColor,
+                                        background: item.textBackgroundColor,
+                                    },
+                                    text: item.text || '',
+                                }
+                            }
+                        }
+                    )
+                },
+            };
+
+            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart.render();
+        }
+    }
+}
+
+
+export default lineChart

resources/js/multiColumnChart.js

@@ -0,0 +1,105 @@
+
+const multiColumnChart = () => {
+    return {
+        chart: null,
+
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
+        drawChart(component) {
+            if (this.chart) {
+                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 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,
+                    data: data[seriesName].map(item => item.value)
+                }))
+
+            const categories = component.get('columnChartModel.xAxis.categories').length > 0
+                ? component.get('columnChartModel.xAxis.categories')
+                : []
+            ;
+
+            const options = {
+                series: series,
+
+                chart: {
+                    type: 'bar',
+                    height: '100%',
+                    stacked: stacked,
+
+                    ...sparkline,
+
+                    toolbar: { show: false },
+
+                    animations: { enabled: animated },
+
+                    events: {
+                        dataPointSelection: function(event, chartContext, {seriesIndex, dataPointIndex}) {
+                            if (!onColumnClickEventName) {
+                                return
+                            }
+
+                            const column = data[series[seriesIndex].name][dataPointIndex]
+                            component.call('onColumnClick', column)
+                        },
+                    }
+                },
+
+                legend: legend,
+
+                grid: grid,
+
+                plotOptions: {
+                    bar: {
+                        horizontal: horizontal,
+                        columnWidth: `${columnWidth}%`,
+                    },
+                },
+
+                dataLabels: dataLabels,
+
+                xaxis: {
+                    categories: categories,
+                },
+
+                yaxis: {
+                    title: {
+                        text: component.get('columnChartModel.title'),
+                    }
+                },
+
+                fill: {
+                    opacity: component.get('columnChartModel.opacity'),
+                },
+            };
+
+            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();
+        }
+    }
+}
+
+export default multiColumnChart

resources/js/multiLineChart.js

@@ -0,0 +1,91 @@
+
+const multiLineChart = () => {
+    return {
+        chart: null,
+
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
+        drawChart(component) {
+            if (this.chart) {
+                this.chart.destroy()
+            }
+
+            const title = component.get('lineChartModel.title');
+            const animated = component.get('lineChartModel.animated') || false;
+            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 {
+                    name: key,
+                    data: data[key].map(item => item.value),
+                }
+            })
+
+            const categories = component.get('lineChartModel.xAxis.categories').length > 0
+                ? component.get('lineChartModel.xAxis.categories')
+                : data[series[0].name].map(item => item.title)
+
+            const options = {
+                series: series,
+
+                chart: {
+                    type: 'line',
+                    height: '100%',
+
+                    ...sparkline,
+
+                    zoom: { enabled: false },
+
+                    toolbar: { show: false },
+
+                    animations: { enabled: animated },
+
+                    events: {
+                        markerClick: function(event, chartContext, { seriesIndex, dataPointIndex }) {
+                            if (!onPointClickEventName) {
+                                return
+                            }
+
+                            const point = data[series[seriesIndex].name][dataPointIndex]
+                            component.call('onPointClick', point)
+                        }
+                    }
+                },
+
+                dataLabels: dataLabels,
+
+                stroke: component.get('lineChartModel.stroke') || {},
+
+                title: {
+                    text: title,
+                    align: 'center'
+                },
+
+                xaxis: {
+                    labels: component.get('lineChartModel.xAxis.labels'),
+                    categories: categories,
+                },
+
+                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();
+        }
+    }
+}
+
+export default multiLineChart

resources/js/pieChart.js

@@ -0,0 +1,89 @@
+
+const pieChart = () => {
+    return {
+        chart: null,
+
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
+        drawChart(component) {
+            if (this.chart) {
+                this.chart.destroy()
+            }
+
+            const title = component.get('pieChartModel.title');
+            const animated = component.get('pieChartModel.animated') || false
+            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),
+
+                chart: {
+                    height: '100%',
+                    type: 'pie',
+
+                    ...sparkline,
+
+                    animations: { enabled: animated },
+
+                    events: {
+                        dataPointSelection: function(event, chartContext, config) {
+                            if (!onSliceClickEventName) {
+                                return
+                            }
+
+                            const { dataPointIndex } = config
+                            const slice = data[dataPointIndex]
+                            component.call('onSliceClick', slice)
+                        },
+                    }
+                },
+
+                labels: data.map(item => item.title),
+
+                dataLabels: dataLabels,
+
+                colors: data.map(item => item.color),
+
+                fill: {
+                    opacity: component.get('pieChartModel.opacity'),
+                },
+
+                title: {
+                    text: title,
+                    align: 'center',
+                },
+
+                responsive: [
+                    {
+                        breakpoint: 600,
+                        options: {
+                            legend: {
+                                position: 'bottom'
+                            }
+                        }
+                    }
+                ],
+
+                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();
+        }
+    }
+}
+
+export default pieChart

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

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

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

@@ -1,95 +1,8 @@
 <div
-    class="w-full h-full relative"
-    x-data="{ ...columnChart() }"
-    x-init="drawChart(@this)"
-    x-on:draw-column-chart.window="drawChart(@this)"
+    style="width: 100%; height: 100%;"
+    x-data="{ ...livewireChartsColumnChart() }"
+    x-init="init()"
 >
     <div wire:ignore x-ref="container"></div>
-
-    <script>
-        function columnChart() {
-            return {
-                chart: null,
-
-                drawChart(component) {
-                    this.renderApex(component)
-                },
-
-                renderApex(component) {
-                    if (this.chart) {
-                        this.chart.destroy()
-                    }
-
-                    const options = {
-                        series: [{ data: component.get('columnChartModel.data').map(item => item.value)}],
-
-                        chart: {
-                            type: 'bar',
-                            height: '100%',
-
-                            toolbar: {
-                                show: false
-                            },
-
-                            animations: {
-                                enabled: component.get('columnChartModel.animated') || false,
-                            },
-
-                            events: {
-                                dataPointSelection: function(event, chartContext, config) {
-                                    const onColumnClickEventName = component.get('columnChartModel.onColumnClickEventName')
-
-                                    if (!onColumnClickEventName) {
-                                        return
-                                    }
-
-                                    const { dataPointIndex } = config
-                                    const column = component.get('columnChartModel.data')[dataPointIndex]
-                                    component.call('onColumnClick', column)
-                                },
-                            }
-                        },
-
-                        colors: component.get('columnChartModel.data').map(item => item.color),
-
-                        labels: {
-                            style: {
-                                colors: component.get('columnChartModel.data').map(item => item.color),
-                            },
-                        },
-
-                        plotOptions: {
-                            bar: {
-                                horizontal: false,
-                                columnWidth: '40%',
-                                distributed: true,
-                            },
-                        },
-
-                        dataLabels: {
-                            enabled: false,
-                        },
-
-                        xaxis: {
-                            categories: component.get('columnChartModel.data').map(item => item.title),
-                        },
-
-                        yaxis: {
-                            title: {
-                                text: component.get('columnChartModel.title'),
-                            }
-                        },
-
-                        fill: {
-                            opacity: component.get('columnChartModel.opacity') || 0.5
-                        },
-                    };
-
-                    this.chart = new ApexCharts(this.$refs.container, options);
-                    this.chart.render();
-                }
-            }
-        }
-    </script>
 </div>
 

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

@@ -1,97 +1,8 @@
 <div
-    class="w-full h-full"
-    x-data="{ ...lineChart() }"
-    x-init="drawChart(@this)"
-    x-on:draw-column-chart.window="drawChart(@this)"
+    style="width: 100%; height: 100%;"
+    x-data="{ ...livewireChartsLineChart() }"
+    x-init="init()"
 >
     <div wire:ignore x-ref="container"></div>
-
-    <script>
-        function lineChart() {
-            return {
-                chart: null,
-
-                drawChart(component) {
-                    this.renderApex(component)
-                },
-
-                renderApex(component) {
-                    if (this.chart) {
-                        this.chart.destroy()
-                    }
-
-                    const options = {
-                        series: [{
-                            name: component.get('lineChartModel.title'),
-                            data: component.get('lineChartModel.data').map(item => item.value),
-                        }],
-                        chart: {
-                            type: 'line',
-                            height: '100%',
-                            zoom: {
-                                enabled: false
-                            },
-                            toolbar: {
-                                show: false
-                            },
-                            animations: {
-                                enabled: component.get('lineChartModel.animated') || false,
-                            },
-                            events: {
-                                markerClick: function(event, chartContext, { dataPointIndex }) {
-                                    const onPointClickEventName = component.get('lineChartModel.onPointClickEventName')
-                                    if (!onPointClickEventName) {
-                                        return
-                                    }
-
-                                    const point = component.get('lineChartModel.data')[dataPointIndex]
-                                    component.call('onPointClick', point)
-                                }
-                            }
-                        },
-                        dataLabels: {
-                            enabled: false
-                        },
-                        stroke: {
-                            curve: 'straight'
-                        },
-                        title: {
-                            text: component.get('lineChartModel.title'),
-                            align: 'center'
-                        },
-                        xaxis: {
-                            categories: component.get('lineChartModel.data').map(item => item.title),
-                        },
-                        annotations: {
-                            points: component.get('lineChartModel.markers').map(item => {
-                                    return {
-                                        x: item.title,
-                                        y: item.value,
-                                        marker: {
-                                            size: 6,
-                                            fillColor: '#fff',
-                                            strokeColor: item.strokeColor,
-                                            radius: 2,
-                                        },
-                                        label: {
-                                            offsetY: 0,
-                                            style: {
-                                                color: item.textColor,
-                                                background: item.textBackgroundColor,
-                                            },
-                                            text: item.text || '',
-                                        }
-                                    }
-                                }
-                            )
-                        },
-                    };
-
-                    this.chart = new ApexCharts(this.$refs.container, options);
-                    this.chart.render();
-                }
-            }
-        }
-    </script>
 </div>
 

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

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

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

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

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

@@ -1,85 +1,8 @@
 <div
-    class="w-full h-full"
-    x-data="{ ...pieChart() }"
-    x-init="drawChart(@this)"
-    x-on:draw-column-chart.window="drawChart(@this)"
+    style="width: 100%; height: 100%;"
+    x-data="{ ...livewireChartsPieChart() }"
+    x-init="init()"
 >
     <div wire:ignore x-ref="container"></div>
-
-    <script>
-        function pieChart() {
-            return {
-                chart: null,
-
-                drawChart(component) {
-                    this.renderApex(component)
-                },
-
-                renderApex(component) {
-                    if (this.chart) {
-                        this.chart.destroy()
-                    }
-
-                    const options = {
-                        series: component.get('pieChartModel.data').map(item => item.value),
-
-                        chart: {
-                            height: '100%',
-                            type: 'pie',
-
-                            animations: {
-                                enabled: component.get('pieChartModel.animated') || false,
-                            },
-
-                            events: {
-                                dataPointSelection: function(event, chartContext, config) {
-                                    const onSliceClickEventName = component.get('pieChartModel.onSliceClickEventName')
-
-                                    if (!onSliceClickEventName) {
-                                        return
-                                    }
-
-                                    const { dataPointIndex } = config
-                                    const slice = component.get('pieChartModel.data')[dataPointIndex]
-                                    component.call('onSliceClick', slice)
-                                },
-                            }
-                        },
-
-                        labels: component.get('pieChartModel.data').map(item => item.title),
-
-                        dataLabels: {
-                            enabled: false,
-                        },
-
-                        colors: component.get('pieChartModel.data').map(item => item.color),
-
-                        fill: {
-                            opacity: component.get('pieChartModel.opacity'),
-                        },
-
-                        title: {
-                            text: component.get('pieChartModel.title'),
-                            align: 'center',
-                        },
-
-                        responsive: [
-                            {
-                                breakpoint: 600,
-                                options: {
-                                    legend: {
-                                        position: 'bottom'
-                                    }
-                                }
-                            }
-                        ],
-                    };
-
-                    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/Charts/LivewireColumnChart.php

@@ -31,6 +31,10 @@ class LivewireColumnChart extends Component
 
     public function render()
     {
+        if ($this->columnChartModel['isMultiColumn']) {
+            return view('livewire-charts::livewire-multi-column-chart');
+        }
+
         return view('livewire-charts::livewire-column-chart');
     }
 }

src/Charts/LivewireLineChart.php

@@ -31,6 +31,10 @@ class LivewireLineChart extends Component
 
     public function render()
     {
+        if ($this->lineChartModel['isMultiLine']) {
+            return view('livewire-charts::livewire-multi-line-chart');
+        }
+
         return view('livewire-charts::livewire-line-chart');
     }
 }

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

@@ -2,37 +2,69 @@
 
 namespace Asantibanez\LivewireCharts;
 
+use Asantibanez\LivewireCharts\Charts\LivewireAreaChart;
 use Asantibanez\LivewireCharts\Charts\LivewireColumnChart;
 use Asantibanez\LivewireCharts\Charts\LivewireLineChart;
 use Asantibanez\LivewireCharts\Charts\LivewirePieChart;
+use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\ServiceProvider;
 use Livewire\Livewire;
 
 class LivewireChartsServiceProvider extends ServiceProvider
 {
-    /**
-     * Bootstrap the application services.
-     */
     public function boot()
     {
-         $this->loadViewsFrom(__DIR__.'/../resources/views', 'livewire-charts');
+         $this->registerViews();
 
+        $this->registerPublishables();
+
+        $this->registerComponents();
+
+        $this->registerDirectives();
+    }
+
+    public function register()
+    {
+        $this->app->bind('livewirecharts', LivewireCharts::class);
+    }
+
+    private function registerViews()
+    {
+        $this->loadViewsFrom(__DIR__.'/../resources/views', 'livewire-charts');
+    }
+
+    private function registerPublishables()
+    {
         if ($this->app->runningInConsole()) {
             $this->publishes([
                 __DIR__.'/../resources/views' => resource_path('views/vendor/livewire-charts'),
-            ], 'livewire-charts-views');
-        }
+            ], 'livewire-charts:views');
 
+            $this->publishes([
+                __DIR__.'/../resources/js' => resource_path('js/vendor/livewire-charts'),
+            ], 'livewire-charts:scripts');
+
+            $this->publishes([
+                __DIR__.'/../public' => public_path('vendor/livewire-charts'),
+            ], 'livewire-charts:public');
+        }
+    }
+
+    private function registerComponents()
+    {
         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);
     }
 
-    /**
-     * Register the application services.
-     */
-    public function register()
+    private function registerDirectives()
     {
-        //
+        Blade::directive('livewireChartsScripts', function () {
+            $scriptsUrl = asset('/vendor/livewire-charts/app.js');
+            return <<<EOF
+<script src="$scriptsUrl"></script>
+EOF;
+        });
     }
 }

src/Models/AreaChartModel.php

@@ -0,0 +1,73 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+/**
+ * Class AreaChartModel
+ * @package Asantibanez\LivewireCharts\Models
+ */
+class AreaChartModel extends BaseChartModel
+{
+    public $color;
+
+    public $data;
+
+    public $onPointClickEventName;
+
+    public function __construct()
+    {
+        parent::__construct();
+
+        $this->color = '#90cdf4';
+
+        $this->onPointClickEventName = null;
+
+        $this->data = collect();
+    }
+
+    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(), [
+            'color' => $this->color,
+            'onPointClickEventName' => $this->onPointClickEventName,
+            'data' => $this->data->toArray(),
+        ]);
+    }
+
+    public function fromArray($array)
+    {
+        parent::fromArray($array);
+
+        $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,67 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+/**
+ * Class BaseChartModel
+ * @package Asantibanez\LivewireCharts\Models
+ */
+class BaseChartModel
+{
+    use HasTitle;
+    use HasAnimation;
+    use HasAxis;
+    use HasStroke;
+    use HasLegend;
+    use HasDataLabels;
+    use HasSparkline;
+    use HasGrid;
+    use HasColors;
+
+    public function __construct()
+    {
+        $this->initTitle();
+        $this->initAnimation();
+        $this->initAxis();
+        $this->initStroke();
+        $this->initLegend();
+        $this->initDataLabels();
+        $this->initSparkline();
+        $this->initGrid();
+        $this->initColors();
+    }
+
+    public function reactiveKey()
+    {
+        return md5(json_encode($this->toArray()));
+    }
+
+    public function toArray()
+    {
+        return array_merge(
+            $this->titleToArray(),
+            $this->animationToArray(),
+            $this->axisToArray(),
+            $this->strokeToArray(),
+            $this->legendToArray(),
+            $this->dataLabelsToArray(),
+            $this->sparklineToArray(),
+            $this->gridToArray(),
+            $this->colorsToArray()
+        );
+    }
+
+    public function fromArray($array)
+    {
+        $this->titleFromArray($array);
+        $this->animationFromArray($array);
+        $this->axisFromArray($array);
+        $this->strokeFromArray($array);
+        $this->legendFromArray($array);
+        $this->dataLabelsFromArray($array);
+        $this->sparklineFromArray($array);
+        $this->gridFromArray($array);
+        $this->colorsFromArray($array);
+    }
+}

src/Models/ColumnChartModel.php

@@ -3,47 +3,78 @@
 
 namespace Asantibanez\LivewireCharts\Models;
 
-use Ramsey\Uuid\Uuid;
-
 /**
  * Class ColumnChartModel
  * @package Asantibanez\LivewireCharts\Models
+ * @property boolean $isMultiColumn
+ * @property boolean $isStacked
  */
-class ColumnChartModel
+class ColumnChartModel extends BaseChartModel
 {
-    public $title;
-
-    public $animated;
-
     public $opacity;
 
+    public $columnWidth;
+
+    public $horizontal;
+
+    public $isMultiColumn;
+
+    public $isStacked;
+
     public $onColumnClickEventName;
 
     public $data;
 
     public function __construct()
     {
-        $this->title = '';
-
-        $this->animated = false;
+        parent::__construct();
 
         $this->onColumnClickEventName = null;
 
-        $this->opacity = 0.5;
+        $this->opacity = 0.75;
+
+        $this->columnWidth = 70;
+
+        $this->horizontal = false;
+
+        $this->isMultiColumn = false;
+
+        $this->isStacked = false;
 
         $this->data = collect();
     }
 
-    public function setTitle($title)
+    public function multiColumn()
     {
-        $this->title = $title;
+        $this->isMultiColumn = true;
 
         return $this;
     }
 
-    public function setAnimated($animated)
+    public function singleColumn()
     {
-        $this->animated = $animated;
+        $this->isMultiColumn = false;
+
+        return $this;
+    }
+
+    public function stacked()
+    {
+        $this->isStacked = true;
+
+        return $this;
+    }
+
+    public function setHorizontal($value)
+    {
+        $this->horizontal = $value;
+
+        return $this;
+    }
+
+    public function setColumnWidth($value)
+    {
+        $this->columnWidth = $value;
 
         return $this;
     }
@@ -74,33 +105,51 @@ class ColumnChartModel
         return $this;
     }
 
+    public function addSeriesColumn($seriesName, $title, $value, $extras = [])
+    {
+        $series = $this->data->get($seriesName, collect());
+
+        $series->push([
+            'seriesName' => $seriesName,
+            'title' => $title,
+            'value' => $value,
+            'extras' => $extras,
+        ]);
+
+        $this->data->put($seriesName, $series);
+
+        return $this;
+    }
+
     public function toArray()
     {
-        return [
-            'title' => $this->title,
-            'animated' => $this->animated,
+        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(),
-        ];
+        ]);
     }
 
     public function fromArray($array)
     {
-        $this->title = data_get($array, 'title', '');
-
-        $this->animated = data_get($array, 'animated', false);
+        parent::fromArray($array);
 
         $this->onColumnClickEventName = data_get($array, 'onColumnClickEventName', null);
 
         $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);
+
         $this->data = collect(data_get($array, 'data', []));
     }
-
-    public function reactiveKey()
-    {
-        return md5(json_encode($this->toArray()));
-    }
-
 }

src/Models/HasAnimation.php

@@ -0,0 +1,39 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+
+trait HasAnimation
+{
+    private $animated;
+
+    public function setAnimated($animated)
+    {
+        $this->animated = $animated;
+
+        return $this;
+    }
+
+    protected function initAnimation()
+    {
+        $this->animated = $this->defaultAnimated();
+    }
+
+    private function defaultAnimated()
+    {
+        return false;
+    }
+
+    protected function animationFromArray($array)
+    {
+        $this->animated = data_get($array, 'animated', $this->defaultAnimated());
+    }
+
+    protected function animationToArray()
+    {
+        return [
+            'animated' => $this->animated,
+        ];
+    }
+}

src/Models/HasAxis.php

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

@@ -0,0 +1,55 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+
+trait HasDataLabels
+{
+    private $dataLabels;
+
+    public function setDataLabelsEnabled($enabled)
+    {
+        data_set($this->dataLabels, 'enabled', $enabled);
+
+        return $this;
+    }
+
+    public function withDataLabels()
+    {
+        data_set($this->dataLabels, 'enabled', true);
+
+        return $this;
+    }
+
+    public function withoutDataLabels()
+    {
+        data_set($this->dataLabels, 'enabled', false);
+
+        return $this;
+    }
+
+    protected function initDataLabels()
+    {
+        $this->dataLabels = $this->defaultDataLabels();
+    }
+
+    private function defaultDataLabels()
+    {
+        return [
+            'enabled' => false,
+        ];
+    }
+
+    protected function dataLabelsFromArray($array)
+    {
+        $this->dataLabels = data_get($array, 'dataLabels', $this->defaultDataLabels());
+    }
+
+    protected function dataLabelsToArray()
+    {
+        return [
+            'dataLabels' => $this->dataLabels,
+        ];
+    }
+}

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,
+        ];
+    }
+}

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/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,
+        ];
+    }
+}

src/Models/HasStroke.php

@@ -0,0 +1,57 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+
+trait HasStroke
+{
+    private $stroke;
+    private $width;
+
+    public function initStroke()
+    {
+        $this->stroke = $this->defaultStroke();
+    }
+
+    private function defaultStroke()
+    {
+        return [
+            'curve' => 'straight',
+            'width' => 4
+        ];
+    }
+
+    public function setSmoothCurve()
+    {
+        data_set($this->stroke, 'curve', 'smooth');
+
+        return $this;
+    }
+
+    public function setStraightCurve()
+    {
+        data_set($this->stroke, 'curve', 'straight');
+
+        return $this;
+    }
+
+    public function setStrokeWidth($width)
+    {
+        data_set($this->stroke, 'width', $width);
+
+        return $this;
+    }
+
+    protected function strokeToArray()
+    {
+        return [
+            'stroke' => $this->stroke,
+        ];
+    }
+
+    protected function strokeFromArray($array)
+    {
+        $this->stroke = data_get($array, 'stroke', $this->defaultStroke());
+    }
+}

src/Models/HasTitle.php

@@ -0,0 +1,39 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+
+trait HasTitle
+{
+    private $title;
+
+    public function setTitle($title)
+    {
+        $this->title = $title;
+
+        return $this;
+    }
+
+    protected function initTitle()
+    {
+        $this->title = $this->defaultTitle();
+    }
+
+    private function defaultTitle()
+    {
+        return '';
+    }
+
+    protected function titleFromArray($array)
+    {
+        $this->title = data_get($array, 'title', $this->defaultTitle());
+    }
+
+    protected function titleToArray()
+    {
+        return [
+            'title' => $this->title,
+        ];
+    }
+}

src/Models/LineChartModel.php

@@ -3,15 +3,16 @@
 
 namespace Asantibanez\LivewireCharts\Models;
 
+use Illuminate\Support\Collection;
+
 /**
  * Class LineChartModel
  * @package Asantibanez\LivewireCharts\Models
+ * @property boolean $isMultiLine
  */
-class LineChartModel
+class LineChartModel extends BaseChartModel
 {
-    public $title;
-
-    public $animated;
+    public $isMultiLine;
 
     public $data;
 
@@ -21,9 +22,9 @@ class LineChartModel
 
     public function __construct()
     {
-        $this->title = '';
+        parent::__construct();
 
-        $this->animated = false;
+        $this->isMultiLine = false;
 
         $this->onPointClickEventName = null;
 
@@ -32,16 +33,20 @@ class LineChartModel
         $this->markers = collect();
     }
 
-    public function setTitle($title)
+    public function multiLine()
     {
-        $this->title = $title;
+        $this->isMultiLine = true;
+
+        $this->data = collect();
 
         return $this;
     }
 
-    public function setAnimated($animated)
+    public function singleLine()
     {
-        $this->animated = $animated;
+        $this->isMultiLine = false;
+
+        $this->data = collect();
 
         return $this;
     }
@@ -57,6 +62,22 @@ class LineChartModel
         return $this;
     }
 
+    public function addSeriesPoint($seriesName, $title, $value, $extras = [])
+    {
+        $series = $this->data->get($seriesName, collect());
+
+        $series->push([
+            'seriesName' => $seriesName,
+            'title' => $title,
+            'value' => $value,
+            'extras' => $extras,
+        ]);
+
+        $this->data->put($seriesName, $series);
+
+        return $this;
+    }
+
     public function addMarker($title,
                               $value,
                               $strokeColor = 'green',
@@ -85,20 +106,19 @@ class LineChartModel
 
     public function toArray()
     {
-        return [
-            'title' => $this->title,
-            'animated' => $this->animated,
+        return array_merge(parent::toArray(), [
+            'isMultiLine' => $this->isMultiLine,
             'onPointClickEventName' => $this->onPointClickEventName,
             'data' => $this->data->toArray(),
             'markers' => $this->markers->toArray(),
-        ];
+        ]);
     }
 
     public function fromArray($array)
     {
-        $this->title = data_get($array, 'title', '');
+        parent::fromArray($array);
 
-        $this->animated = data_get($array, 'animated', false);
+        $this->isMultiLine = data_get($array, 'isMultiLine', false);
 
         $this->onPointClickEventName = data_get($array, 'onPointClickEventName', null);
 
@@ -106,9 +126,4 @@ class LineChartModel
 
         $this->markers = collect(data_get($array, 'markers', []));
     }
-
-    public function reactiveKey()
-    {
-        return md5(json_encode($this->toArray()));
-    }
 }

src/Models/PieChartModel.php

@@ -7,12 +7,8 @@ namespace Asantibanez\LivewireCharts\Models;
  * Class PieChartModel
  * @package Asantibanez\LivewireCharts\Models
  */
-class PieChartModel
+class PieChartModel extends BaseChartModel
 {
-    public $title;
-
-    public $animated;
-
     public $onSliceClickEventName;
 
     public $opacity;
@@ -21,9 +17,7 @@ class PieChartModel
 
     public function __construct()
     {
-        $this->title = '';
-
-        $this->animated = false;
+        parent::__construct();
 
         $this->onSliceClickEventName = null;
 
@@ -32,20 +26,6 @@ class PieChartModel
         $this->data = collect();
     }
 
-    public function setTitle($title)
-    {
-        $this->title = $title;
-
-        return $this;
-    }
-
-    public function setAnimated($animated)
-    {
-        $this->animated = $animated;
-
-        return $this;
-    }
-
     public function setOpacity($opacity)
     {
         $this->opacity = $opacity;
@@ -74,20 +54,16 @@ class PieChartModel
 
     public function toArray()
     {
-        return [
-            'title' => $this->title,
-            'animated' => $this->animated,
+        return array_merge(parent::toArray(), [
             'onSliceClickEventName' => $this->onSliceClickEventName,
             'opacity' => $this->opacity,
             'data' => $this->data->toArray(),
-        ];
+        ]);
     }
 
     public function fromArray($array)
     {
-        $this->title = data_get($array, 'title', '');
-
-        $this->animated = data_get($array, 'animated', false);
+        parent::fromArray($array);
 
         $this->onSliceClickEventName = data_get($array, 'onSliceClickEventName', null);
 
@@ -95,9 +71,4 @@ class PieChartModel
 
         $this->data = collect(data_get($array, 'data', []));
     }
-
-    public function reactiveKey()
-    {
-        return md5(json_encode($this->toArray()));
-    }
 }

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=');
+    }
+
+}

webpack.mix.js

@@ -0,0 +1,3 @@
+let mix = require('laravel-mix')
+
+mix.js('resources/js/app.js', 'public/')