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

Extracted multi line chart Blade view

Browse Source
This commit is contained in:
Andrés Santibáñez
2020-11-03 07:16:51 -05:00
parent 5e7cabfd16
commit 22b72c1980
3 changed files with 121 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,28 +21,12 @@
const data = component.get('lineChartModel.data');
const onPointClickEventName = component.get('lineChartModel.onPointClickEventName');
let series = []
let categories = []
const series = [{
name: title,
data: data.map(item => item.value),
}]
if (isMultiLine) {
series = Object.keys(data).map(key => {
return {
name: key,
data: data[key].map(item => item.value),
}
})
categories = []
}
if (!isMultiLine) {
series = [{
name: title,
data: data.map(item => item.value),
}]
categories = data.map(item => item.title)
}
const categories = data.map(item => item.title)
const options = {
series: series,
@@ -60,15 +44,8 @@
enabled: animated,
},
events: {
markerClick: function(event, chartContext, { seriesIndex, dataPointIndex }) {
markerClick: function(event, chartContext, { dataPointIndex }) {
if (!onPointClickEventName) {
return
}
if (isMultiLine) {
const seriesName = Object.keys(data)[Object.keys(data).findIndex((el, index) => index === seriesIndex)]
const point = data[seriesName][dataPointIndex]
component.call('onPointClick', point)
return
}

111
resources/views/livewire-multi-line-chart.blade.php Normal file
View File

@@ -0,0 +1,111 @@
<div
class="w-full h-full"
x-data="{ ...multiLineChart() }"
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 isMultiLine = component.get('lineChartModel.isMultiLine')
const data = component.get('lineChartModel.data');
const onPointClickEventName = component.get('lineChartModel.onPointClickEventName');
const series = Object.keys(data).map(key => {
return {
name: key,
data: data[key].map(item => item.value),
}
})
const categories = []
const options = {
series: series,
chart: {
type: 'line',
height: '100%',
zoom: {
enabled: false
},
toolbar: {
show: false
},
animations: {
enabled: animated,
},
events: {
markerClick: function(event, chartContext, { seriesIndex, dataPointIndex }) {
if (!onPointClickEventName) {
return
}
const seriesName = Object.keys(data)[Object.keys(data).findIndex((el, index) => index === seriesIndex)]
const point = data[seriesName][dataPointIndex]
component.call('onPointClick', point)
}
}
},
dataLabels: {
enabled: false,
},
stroke: component.get('lineChartModel.stroke') || {},
title: {
text: title,
align: 'center'
},
xaxis: {
...component.get('lineChartModel.xAxis') || {},
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>

4
src/Charts/LivewireLineChart.php
View File

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