apoloz/livewire-charts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added build system and assets for js

Browse Source
This commit is contained in:
Andrés Santibáñez
2020-11-30 12:13:03 -05:00
parent fd4961d7ae
commit 76b64536d1
18 changed files with 22644 additions and 535 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

22043
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

16
package.json Normal file
View File

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

15
resources/js/app.js Normal file
View File

@@ -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

90
resources/js/areaChart.js Normal file
View File

@@ -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

84
resources/js/columnChart.js Normal file
View File

@@ -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

102
resources/js/lineChart.js Normal file
View File

@@ -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

87
resources/js/multiColumnChart.js Normal file
View File

@@ -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

79
resources/js/multiLineChart.js Normal file
View File

@@ -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

77
resources/js/pieChart.js Normal file
View File

@@ -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

92
resources/views/livewire-area-chart.blade.php
View File

@@ -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>

86
resources/views/livewire-column-chart.blade.php
View File

@@ -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>

103
resources/views/livewire-line-chart.blade.php
View File

@@ -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>

89
resources/views/livewire-multi-column-chart.blade.php
View File

@@ -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>

81
resources/views/livewire-multi-line-chart.blade.php
View File

@@ -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>

79
resources/views/livewire-pie-chart.blade.php
View File

@@ -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>

52
src/LivewireChartsServiceProvider.php
View File

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

3
webpack.mix.js Normal file
View File

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