working with plotting the rate history group by payment type

This commit is contained in:
sharifcse57
2023-02-17 14:32:04 +06:00
parent 1f461a750f
commit 08526296c6
@@ -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>