mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
working with plotting the rate history group by payment type
This commit is contained in:
@@ -85,9 +85,10 @@ export default {
|
||||
paymentMethodsConst: [],
|
||||
colors: [
|
||||
'red',
|
||||
'green',
|
||||
'pink',
|
||||
'blue',
|
||||
'yellow'
|
||||
'yellow',
|
||||
'black'
|
||||
]
|
||||
};
|
||||
},
|
||||
@@ -112,6 +113,61 @@ export default {
|
||||
if (inComplete) {
|
||||
this.resetSarch();
|
||||
}
|
||||
},
|
||||
rateHistory: function(newVal) {
|
||||
// Set current month and year
|
||||
const date = new Date();
|
||||
const currentMonth = date.getMonth() + 1;
|
||||
const currentYear = date.getFullYear();
|
||||
|
||||
// Group rates by payment method type
|
||||
const ratesByType = {};
|
||||
newVal.forEach(rate => {
|
||||
if (!ratesByType[rate.payment_method_type]) {
|
||||
ratesByType[rate.payment_method_type] = [];
|
||||
}
|
||||
ratesByType[rate.payment_method_type].push(rate);
|
||||
});
|
||||
|
||||
// Get rates for current month
|
||||
const ratesForMonth = {};
|
||||
Object.keys(ratesByType).forEach(type => {
|
||||
ratesForMonth[type] = [];
|
||||
for (let i = 1; i <= new Date(currentYear, currentMonth, 0).getDate(); i++) {
|
||||
const dateStr = `${i.toString().padStart(2, '0')}-${currentMonth.toString().padStart(2, '0')}-${currentYear}`;
|
||||
const rate = ratesByType[type].find(r => r.created_at === dateStr);
|
||||
console.log(dateStr);
|
||||
ratesForMonth[type].push(rate ? rate.rate : '');
|
||||
}
|
||||
});
|
||||
|
||||
// Generate labels for chart
|
||||
const labels = [];
|
||||
for (let i = 1; i <= new Date(currentYear, currentMonth, 0).getDate(); i++) {
|
||||
labels.push(`${i.toString().padStart(2, '0')}-${currentMonth.toString().padStart(2, '0')}-${currentYear}`);
|
||||
}
|
||||
|
||||
// Generate datasets for chart
|
||||
const datasets = [];
|
||||
Object.keys(ratesForMonth).forEach(type => {
|
||||
datasets.push({
|
||||
label: `${this.paymentMethodsConst[type]}`,
|
||||
data: ratesForMonth[type],
|
||||
borderColor: this.colors[type],
|
||||
fill: false
|
||||
});
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const ctx = document.getElementById("currency-history-chart");
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: datasets
|
||||
},
|
||||
});
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -156,61 +212,5 @@ export default {
|
||||
// this.error = error.message;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
rateHistory: function(newVal) {
|
||||
// Set current month and year
|
||||
const date = new Date();
|
||||
const currentMonth = date.getMonth() + 1;
|
||||
const currentYear = date.getFullYear();
|
||||
|
||||
// Group rates by payment method type
|
||||
const ratesByType = {};
|
||||
newVal.forEach(rate => {
|
||||
if (!ratesByType[rate.payment_method_type]) {
|
||||
ratesByType[rate.payment_method_type] = [];
|
||||
}
|
||||
ratesByType[rate.payment_method_type].push(rate);
|
||||
});
|
||||
|
||||
// Get rates for current month
|
||||
const ratesForMonth = {};
|
||||
Object.keys(ratesByType).forEach(type => {
|
||||
ratesForMonth[type] = [];
|
||||
for (let i = 1; i <= new Date(currentYear, currentMonth, 0).getDate(); i++) {
|
||||
const dateStr = `${i.toString().padStart(2, '0')}-${currentMonth.toString().padStart(2, '0')}-${currentYear}`;
|
||||
const rate = ratesByType[type].find(r => r.created_at === dateStr);
|
||||
ratesForMonth[type].push(rate ? rate.rate : '');
|
||||
}
|
||||
});
|
||||
|
||||
// Generate labels for chart
|
||||
const labels = [];
|
||||
for (let i = 1; i <= new Date(currentYear, currentMonth, 0).getDate(); i++) {
|
||||
labels.push(`${i.toString().padStart(2, '0')}-${currentMonth.toString().padStart(2, '0')}-${currentYear}`);
|
||||
}
|
||||
|
||||
// Generate datasets for chart
|
||||
const datasets = [];
|
||||
Object.keys(ratesForMonth).forEach(type => {
|
||||
datasets.push({
|
||||
label: `${this.paymentMethodsConst[type]}`,
|
||||
data: ratesForMonth[type],
|
||||
borderColor: `#${Math.floor(Math.random()*16777215).toString(16)}`,
|
||||
fill: false
|
||||
});
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const ctx = document.getElementById("currency-history-chart");
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: datasets
|
||||
},
|
||||
});
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user