hafifierahman
147 lines
3.5 KiB
Vue
147 lines
3.5 KiB
Vue
<template>
|
|
|
|
<div class="mx-auto rounded-lg">
|
|
<!-- <content-placeholders v-show="dataready === false">
|
|
<content-placeholders-heading :img="true" />
|
|
<content-placeholders-text :lines="3" />
|
|
</content-placeholders> -->
|
|
<apexchart
|
|
type="bar"
|
|
:options="chartOptions" :series="series">
|
|
</apexchart>
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
const formatter = new Intl.NumberFormat('en-US', {
|
|
minimumFractionDigits: 2
|
|
});
|
|
|
|
let self = this;
|
|
export default {
|
|
name: 'Chart',
|
|
// props:{
|
|
// kodcaw: String
|
|
// },
|
|
data: () => ({
|
|
series: [
|
|
{
|
|
name: 'Actual',
|
|
data: []
|
|
}
|
|
],
|
|
chartOptions: {
|
|
chart: {
|
|
id:'keuntungan-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{
|
|
if(isFinite(total))
|
|
{
|
|
if(total == -100)
|
|
{
|
|
return 0.00
|
|
}else{
|
|
return total.toFixed(2)
|
|
}
|
|
}else{
|
|
return 0.00
|
|
}
|
|
}
|
|
},
|
|
},
|
|
legend: {
|
|
show: true,
|
|
showForSingleSeries: true,
|
|
customLegendItems: ['Actual', 'Expected'],
|
|
markers: {
|
|
fillColors: ['#3498db', '#e74c3c']
|
|
}
|
|
}
|
|
},
|
|
dataready : false,
|
|
}),
|
|
|
|
created() {
|
|
|
|
this.getDatakeuntungan()
|
|
|
|
},
|
|
methods: {
|
|
getDatakeuntungan () {
|
|
this.axios.get(this.$hostname + '/admin/keuntunganBulanan', {
|
|
params: {
|
|
kodcaw: this.$kodcaw,
|
|
year: this.$tahun
|
|
}
|
|
}).then(response => {
|
|
|
|
|
|
let keuntungan = [];
|
|
|
|
keuntungan = response.data
|
|
|
|
this.$apexcharts.exec('keuntungan-bulanan', 'updateSeries', [{
|
|
data: keuntungan
|
|
}])
|
|
|
|
this.dataready = true;
|
|
|
|
}).catch(error => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
},
|
|
mounted () {
|
|
var channel = this.$pusher.subscribe('keuntungan-notify');
|
|
|
|
channel.bind('trigger-keuntungan', ({ cawangan }) => {
|
|
// console.log(`${response}`);
|
|
if(cawangan == this.$kodcaw)
|
|
this.getDatakeuntungan()
|
|
});
|
|
|
|
var channel2 = this.$pusher.subscribe('tebus-notify');
|
|
|
|
channel2.bind('trigger-tebus', ({ cawangan }) => {
|
|
// console.log(`${response}`);
|
|
if(cawangan == this.$kodcaw)
|
|
this.getDatakeuntungan()
|
|
});
|
|
}
|
|
|
|
}
|
|
</script>
|