I am using livewire component and in component blade file I am using script,
@assets
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
@endassets
@script
<script>
var options = {
series: [],
legend: {
show: false
},
chart: {
height: '650px',
type: 'treemap'
},
dataLabels: {
enabled: true,
style: {
fontSize: '12px',
},
formatter: function(text, op) {
return [text, op.value]
},
offsetY: -4
},
plotOptions: {
treemap: {
enableShades: true,
shadeIntensity: 0.5,
reverseNegativeShade: true,
colorScale: {
ranges: [{
from: -6,
to: 0,
color: '#CD363A'
},
{
from: 0.001,
to: 6,
color: '#52B12C'
}
]
}
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
$wire.on('dataUpdated', (data) => {
const dataArray = data[0];
// Map the data to format it properly
const mappedData = dataArray.map(item => ({
x: item.asset_symbol,
y: item.pchange
}));
mappedData.sort((a, b) => b.y - a.y);
chart.updateSeries([{
data: mappedData
}]);
console.log(dataArray);
console.log('updated');
});
</script>
@endscript
But when the page loads, it throws an error
livewire.js?id=5d8beb2e:1243 **Uncaught SyntaxError: Unexpected token 'var'**
at new AsyncFunction (<anonymous>)
at safeAsyncFunction (livewire.js?id=5d8beb2e:1243:21)
at generateFunctionFromString (livewire.js?id=5d8beb2e:1253:16)
at generateEvaluatorFromString (livewire.js?id=5d8beb2e:1258:16)
at normalEvaluator (livewire.js?id=5d8beb2e:1223:111)
at evaluateLater (livewire.js?id=5d8beb2e:1213:12)
at Object.evaluate (livewire.js?id=5d8beb2e:1209:5)
at livewire.js?id=5d8beb2e:8592:28
at Object.dontAutoEvaluateFunctions (livewire.js?id=5d8beb2e:1203:18)
at livewire.js?id=5d8beb2e:8591:26
If I move var options.... after $wire.on function then it loads correctly,
Why component script does not recognise var or const?
