fifi97
118 lines
2.4 KiB
Vue
118 lines
2.4 KiB
Vue
<template>
|
|
|
|
<div class="mx-auto rounded-lg">
|
|
<apexchart
|
|
width="500" type="bar"
|
|
:options="chartOptions" :series="series">
|
|
</apexchart>
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
const formatter = new Intl.NumberFormat('en-US', {
|
|
minimumFractionDigits: 2
|
|
});
|
|
|
|
export default {
|
|
name: 'Chart',
|
|
props:{
|
|
kodcaw: String
|
|
},
|
|
data: () => ({
|
|
|
|
series: [
|
|
{
|
|
name: 'Actual',
|
|
data: []
|
|
}
|
|
],
|
|
chartOptions: {
|
|
|
|
chart: {
|
|
id: 'pembiayaan-bulanan',
|
|
height: 350,
|
|
type: 'bar'
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
formatter: function (value) {
|
|
return 'RM ' + formatter.format(value);
|
|
}
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: '60%',
|
|
dataLabels: {
|
|
position: 'top',
|
|
},
|
|
}
|
|
},
|
|
colors: ['#3498db'],
|
|
dataLabels: {
|
|
enabled: true,
|
|
style: {
|
|
colors: ['#333']
|
|
},
|
|
offsetY: -30,
|
|
formatter: function (val, opt) {
|
|
let total = ((val - opt.w.globals.seriesGoals[0][opt.dataPointIndex][0]['value']) / opt.w.globals.seriesGoals[0][opt.dataPointIndex][0]['value']) * 100
|
|
|
|
if(isNaN(total))
|
|
{
|
|
return 0.00
|
|
}else{
|
|
return total.toFixed(2)
|
|
}
|
|
},
|
|
},
|
|
legend: {
|
|
show: true,
|
|
showForSingleSeries: true,
|
|
customLegendItems: ['Actual', 'Expected'],
|
|
markers: {
|
|
fillColors: ['#3498db', '#e74c3c']
|
|
}
|
|
}
|
|
},
|
|
}),
|
|
created() {
|
|
this.getDataPembiayaan()
|
|
|
|
},
|
|
methods: {
|
|
getDataPembiayaan () {
|
|
this.axios.get('http://localhost:8000/admin/pembiayaanBulanan', {
|
|
params: {
|
|
kodcaw: this.kodcaw
|
|
}
|
|
}).then(response => {
|
|
|
|
|
|
let pembiayaan = [];
|
|
|
|
pembiayaan = response.data
|
|
|
|
this.$apexcharts.exec('pembiayaan-bulanan', 'updateSeries', [{
|
|
data: pembiayaan
|
|
}])
|
|
|
|
}).catch(error => {
|
|
console.log(error)
|
|
})
|
|
|
|
}
|
|
},
|
|
mounted () {
|
|
var channel = this.$pusher.subscribe('gadai-notify');
|
|
|
|
channel.bind('trigger-gadai', ({ response }) => {
|
|
console.log(`${response}`);
|
|
this.getDataPembiayaan()
|
|
});
|
|
}
|
|
}
|
|
</script> |