cief/izyim
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/izyim.git synced 2026-08-19 04:24:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dashboard report

Browse Source
This commit is contained in:
Kawlll Maxso
2019-03-20 19:30:35 +08:00
parent d94eaee693
commit e1ec1db1b0
1 changed files with 28 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/vue/components/dashboard/elements/CbmVsOrdersChartComponent.vue
+28 -47
View File
@@ -34,58 +34,49 @@
},
mounted() {
{
this.monthInit();
this.fetchData();
}
},
methods: {
fetchData() {
this.isLoading = true;
fetch(route('api.report.order')).then(response => response.json())
.then(response => {
this.orders = response;
//turn off loading animation
this.isLoading = false;
})
.catch(error => console.log(error));
fetch(route('api.report.cbm')).then(response => response.json())
.then(response => {
this.cbm = response;
//turn off loading animation
// this.isLoading = false;
this.createChart(this.id, this.chartConfig());
})
.catch(error => console.log(error));
},
chartConfig() {
const date = new Date();
let urls = [route('api.report.cbm'), route('api.report.order')];
//replace with api call
Promise.all(urls.map(url => fetch(url).then(response => response.json()))).then(response => {
this.cbm = response[0];
this.orders = response[1];
this.isLoading = false;
this.createChart();
});
},
monthInit() {
const date = new Date();
//replace with api call in future
for (let i = 1; i <= new Date(date.getFullYear(), date.getMonth()+1, 0).getDate(); i++) {
this.months.push(i);
}
let chartData = {
type: 'line',
data: {
},
createChart() {
new Chart(this.id, {
type : 'line',
data : {
labels: this.months,
datasets: [{
label: "CBM",
data: this.cbm,
borderColor: '#ea336b',
fill: false
}, {
label: 'Orders',
data: this.orders,
borderColor: '#69b6f3',
fill: false
'label' : "CBM",
'data' : this.cbm,
'borderColor' : '#ea336b',
'fill' : false
},{
'label' : "Orders",
'data' : this.orders,
'borderColor' : '#69b6f3',
'fill' : false
}]
},
options: {
options : {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: false
}
@@ -100,17 +91,7 @@
}]
}
}
};
return chartData;
},
createChart(chartId, chartData) {
const ctx = document.getElementById(chartId);
new Chart(ctx, {
type: chartData.type,
data: chartData.data,
options: chartData.options,
});
})
}
}
}