Added build

Typo in README.md

.gitignore

@@ -5,3 +5,4 @@ docs
 vendor
 coverage
 .DS_STORE
+node_modules

README.md

@@ -18,6 +18,10 @@ 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.
+
 ## Requirements
 
 This package requires the following packages/libraries to work:
@@ -32,9 +36,9 @@ Please follow each package/library instructions on how to set them properly in y
 ## 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. 
@@ -64,6 +68,13 @@ 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)
@@ -151,8 +162,8 @@ for each type of chart.
 | setDataLabelsEnabled(boolean $enabled) | Enables/disables data labels |
 | withDataLabels() | Enables data labels |
 | withoutDataLabels() | Disables data labels |
-| withLegends() | Shows legends |
+| withLegend() | Shows legends |
-| withoutLegends() | Hides legends |
+| withoutLegend() | Hides legends |
 | setXAxisCategories(array $categories) | Enables custom categories for chart X Axis |
 | sparklined() | Enables Apex Charts sparkline feature |
 | setSparklineEnabled(boolean $isEnabled) | Enables/Disables Apex Charts sparkline feature |
@@ -196,6 +207,15 @@ for each type of chart.
 | 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

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

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,90 @@
+
+const areaChart = () => {
+    return {
+        chart: null,
+
+        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: {
+                    curve: 'straight'
+                },
+
+                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,84 @@
+
+const columnChart = () => {
+    return {
+        chart: null,
+
+        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 data = component.get('columnChartModel.data');
+            const sparkline = component.get('columnChartModel.sparkline');
+
+            const options = {
+                series: [{ data: data.map(item => item.value)}],
+
+                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: component.get('columnChartModel.legend') || {},
+
+                plotOptions: {
+                    bar: {
+                        horizontal: false,
+                        columnWidth: '40%',
+                        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
+                },
+            };
+
+            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart.render();
+        }
+    }
+}
+
+export default columnChart

resources/js/lineChart.js

@@ -0,0 +1,102 @@
+
+const lineChart = () => {
+    return {
+        chart: null,
+
+        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,87 @@
+
+const multiColumnChart = () => {
+    return {
+        chart: null,
+
+        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 data = component.get('columnChartModel.data');
+            const sparkline = component.get('columnChartModel.sparkline');
+
+            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')
+                : data[series[0].name].map(item => item.title)
+            ;
+
+            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: component.get('columnChartModel.legend'),
+
+                plotOptions: {
+                    bar: {
+                        horizontal: false,
+                        columnWidth: '50%',
+                    },
+                },
+
+                dataLabels: dataLabels,
+
+                xaxis: {
+                    categories: categories,
+                },
+
+                yaxis: {
+                    title: {
+                        text: component.get('columnChartModel.title'),
+                    }
+                },
+
+                fill: {
+                    opacity: component.get('columnChartModel.opacity'),
+                },
+            };
+
+            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart.render();
+        }
+    }
+}
+
+export default multiColumnChart

resources/js/multiLineChart.js

@@ -0,0 +1,79 @@
+
+const multiLineChart = () => {
+    return {
+        chart: null,
+
+        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') || {},
+            };
+
+            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart.render();
+        }
+    }
+}
+
+export default multiLineChart

resources/js/pieChart.js

@@ -0,0 +1,77 @@
+
+const pieChart = () => {
+    return {
+        chart: null,
+
+        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') || {},
+            };
+
+            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart.render();
+        }
+    }
+}
+
+export default pieChart

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

@@ -1,98 +1,8 @@
 <div
     style="width: 100%; height: 100%;"
-    x-data="{ ...areaChart() }"
+    x-data="{ ...livewireChartsAreaChart() }"
     x-init="drawChart(@this)"
 >
     <div wire:ignore x-ref="container"></div>
-
-    <script>
-        function areaChart() {
-            return {
-                chart: null,
-
-                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: {
-                            curve: 'straight'
-                        },
-
-                        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();
-                }
-            }
-        }
-    </script>
 </div>
 

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

@@ -1,92 +1,8 @@
 <div
     style="width: 100%; height: 100%;"
-    x-data="{ ...columnChart() }"
+    x-data="{ ...livewireChartsColumnChart() }"
     x-init="drawChart(@this)"
 >
     <div wire:ignore x-ref="container"></div>
-
-    <script>
-        function columnChart() {
-            return {
-                chart: null,
-
-                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 data = component.get('columnChartModel.data');
-                    const sparkline = component.get('columnChartModel.sparkline');
-
-                    const options = {
-                        series: [{ data: data.map(item => item.value)}],
-
-                        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: component.get('columnChartModel.legend') || {},
-
-                        plotOptions: {
-                            bar: {
-                                horizontal: false,
-                                columnWidth: '40%',
-                                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
-                        },
-                    };
-
-                    this.chart = new ApexCharts(this.$refs.container, options);
-                    this.chart.render();
-                }
-            }
-        }
-    </script>
 </div>
 

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

@@ -1,109 +1,8 @@
 <div
     style="width: 100%; height: 100%;"
-    x-data="{ ...lineChart() }"
+    x-data="{ ...livewireChartsLineChart() }"
     x-init="drawChart(@this)"
 >
     <div wire:ignore x-ref="container"></div>
-
-    <script>
-        function lineChart() {
-            return {
-                chart: null,
-
-                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();
-                }
-            }
-        }
-    </script>
 </div>
 

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

@@ -1,95 +1,8 @@
 <div
     style="width: 100%; height: 100%;"
-    x-data="{ ...multiColumnChart() }"
+    x-data="{ ...livewireChartsMultiColumnChart() }"
     x-init="drawChart(@this)"
 >
     <div wire:ignore x-ref="container"></div>
-
-    <script>
-        function multiColumnChart() {
-            return {
-                chart: null,
-
-                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 data = component.get('columnChartModel.data');
-                    const sparkline = component.get('columnChartModel.sparkline');
-
-                    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')
-                        : data[series[0].name].map(item => item.title)
-                    ;
-
-                    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: component.get('columnChartModel.legend'),
-
-                        plotOptions: {
-                            bar: {
-                                horizontal: false,
-                                columnWidth: '50%',
-                            },
-                        },
-
-                        dataLabels: dataLabels,
-
-                        xaxis: {
-                            categories: categories,
-                        },
-
-                        yaxis: {
-                            title: {
-                                text: component.get('columnChartModel.title'),
-                            }
-                        },
-
-                        fill: {
-                            opacity: component.get('columnChartModel.opacity'),
-                        },
-                    };
-
-                    this.chart = new ApexCharts(this.$refs.container, options);
-                    this.chart.render();
-                }
-            }
-        }
-    </script>
 </div>
 

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

@@ -1,87 +1,8 @@
 <div
     style="width: 100%; height: 100%;"
-    x-data="{ ...multiLineChart() }"
+    x-data="{ ...livewireChartsMultiLineChart() }"
     x-init="drawChart(@this)"
 >
     <div wire:ignore x-ref="container"></div>
-
-    <script>
-        function multiLineChart() {
-            return {
-                chart: null,
-
-                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') || {},
-                    };
-
-                    this.chart = new ApexCharts(this.$refs.container, options);
-                    this.chart.render();
-                }
-            }
-        }
-    </script>
 </div>
 

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

@@ -1,85 +1,8 @@
 <div
     style="width: 100%; height: 100%;"
-    x-data="{ ...pieChart() }"
+    x-data="{ ...livewireChartsPieChart() }"
     x-init="drawChart(@this)"
 >
     <div wire:ignore x-ref="container"></div>
-
-    <script>
-        function pieChart() {
-            return {
-                chart: null,
-
-                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') || {},
-                    };
-
-                    this.chart = new ApexCharts(this.$refs.container, options);
-                    this.chart.render();
-                }
-            }
-        }
-    </script>
 </div>
 

src/LivewireChartsServiceProvider.php

@@ -6,35 +6,65 @@ 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);
     }
 
-    /**
+    private function registerDirectives()
-     * Register the application services.
-     */
-    public function register()
     {
-        $this->app->bind('livewirecharts', LivewireCharts::class);
+        Blade::directive('livewireChartsScripts', function () {
+            $scriptsUrl = asset('/vendor/livewire-charts/app.js');
+            return <<<EOF
+<script src="$scriptsUrl"></script>
+EOF;
+        });
     }
 }

webpack.mix.js

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