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

Extracted radar chart js to file

Browse Source
This commit is contained in:
asantibanez
2022-02-14 12:49:47 -05:00
parent 202591954d
commit 52abe77e7e
4 changed files with 102 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/app.js
View File

File diff suppressed because one or more lines are too long

2
resources/js/app.js
View File

@@ -5,6 +5,7 @@ import multiColumnChart from "./multiColumnChart";
import lineChart from "./lineChart"
import multiLineChart from "./multiLineChart"
import pieChart from "./pieChart"
import radarChart from "./radarChart"
window.ApexCharts = ApexCharts
window.livewireChartsAreaChart = areaChart
@@ -13,3 +14,4 @@ window.livewireChartsLineChart = lineChart
window.livewireChartsMultiLineChart = multiLineChart
window.livewireChartsPieChart = pieChart
window.livewireChartsMultiColumnChart = multiColumnChart
window.livewireChartsRadarChart = radarChart

97
resources/js/radarChart.js Normal file
View File

@@ -0,0 +1,97 @@
const radarChart = () => {
return {
chart: null,
init() {
setTimeout(() => {
this.drawChart(this.$wire)
}, 0)
},
drawChart(component) {
if (this.chart) {
this.chart.destroy()
}
const title = component.get('radarChartModel.title');
const animated = component.get('radarChartModel.animated');
const onPointClickEventName = component.get('areaChartModel.onPointClickEventName');
const dataLabels = component.get('radarChartModel.dataLabels');
const data = component.get('radarChartModel.data');
const sparkline = component.get('radarChartModel.sparkline');
const colors = component.get('radarChartModel.colors');
const series = Object.keys(data)
.map(seriesName => ({
name: seriesName,
data: data[seriesName].map(item => item.value)
}))
const categories = component.get('radarChartModel.xAxis.categories').length > 0
? component.get('radarChartModel.xAxis.categories')
: data[series[0].name].map(item => item.title)
;
const options = {
series: series,
chart: {
type: 'radar',
height: '100%',
...sparkline,
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)
},
}
},
legend: component.get('radarChartModel.legend'),
plotOptions: {
bar: {
horizontal: false,
columnWidth: '50%',
},
},
dataLabels: dataLabels,
xaxis: {
categories: categories,
},
title: { text: title },
fill: {
opacity: component.get('radarChartModel.opacity'),
},
colors: colors,
markers: {
size: 4
},
};
this.chart = new ApexCharts(this.$refs.container, options);
this.chart.render();
}
}
}
export default radarChart

99
resources/views/livewire-radar-chart.blade.php
View File

@@ -1,102 +1,7 @@
<div
style="width: 100%; height: 100%;"
x-data="{ ...radarChart() }"
x-init="drawChart(@this)"
x-data="{ ...livewireChartsRadarChart() }"
x-init="init()"
>
<div wire:ignore x-ref="container"></div>
<script>
function radarChart() {
return {
chart: null,
drawChart(component) {
if (this.chart) {
this.chart.destroy()
}
const animated = component.get('radarChartModel.animated');
const onPointClickEventName = component.get('areaChartModel.onPointClickEventName');
const dataLabels = component.get('radarChartModel.dataLabels');
const data = component.get('radarChartModel.data');
const sparkline = component.get('radarChartModel.sparkline');
const colors = component.get('radarChartModel.colors');
const series = Object.keys(data)
.map(seriesName => ({
name: seriesName,
data: data[seriesName].map(item => item.value)
}))
const categories = component.get('radarChartModel.xAxis.categories').length > 0
? component.get('radarChartModel.xAxis.categories')
: data[series[0].name].map(item => item.title)
;
const options = {
series: series,
chart: {
type: 'radar',
height: '100%',
...sparkline,
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)
},
}
},
legend: component.get('radarChartModel.legend'),
plotOptions: {
bar: {
horizontal: false,
columnWidth: '50%',
},
},
dataLabels: dataLabels,
xaxis: {
categories: categories,
},
title: {
text: component.get('radarChartModel.title'),
},
fill: {
opacity: component.get('radarChartModel.opacity'),
},
colors: colors,
markers: {
size: 4
},
};
this.chart = new ApexCharts(this.$refs.container, options);
this.chart.render();
}
}
}
</script>
</div>