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

Added init method to all charts

Browse Source 
- Added custom colors to pie chart
This commit is contained in:
Andrés Santibáñez
2021-02-12 00:17:11 -05:00
parent 372d6ffcb0
commit 171a333044
11 changed files with 63 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/areaChart.js
View File

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

30
resources/js/columnChart.js
View File

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

6
resources/js/lineChart.js
View File

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

5
resources/js/multiColumnChart.js
View File

@@ -18,14 +18,13 @@ const multiColumnChart = () => {
const animated = component.get('columnChartModel.animated');
const onColumnClickEventName = component.get('columnChartModel.onColumnClickEventName')
const dataLabels = component.get('columnChartModel.dataLabels');
const data = component.get('columnChartModel.data');
const sparkline = component.get('columnChartModel.sparkline');
const legend = component.get('columnChartModel.legend')
const colors = component.get('columnChartModel.colors');
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,
@@ -91,6 +90,8 @@ const multiColumnChart = () => {
},
};
const colors = component.get('columnChartModel.colors');
if (colors && colors.length > 0) {
options['colors'] = colors
}

6
resources/js/multiLineChart.js
View File

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

12
resources/js/pieChart.js
View File

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

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

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

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

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

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

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

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

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

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

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