@@ -81,19 +81,125 @@ export default {
date_from: null,
},
chartLebels:[],
- chartData: []
+ chartData: [],
+ paymentMethodsConst: [],
+ colors: [
+ 'red',
+ 'pink',
+ 'blue',
+ 'purple',
+ 'black',
+ 'yellow'
+ ]
};
},
+ props:{
+ paymentMethods: {
+ type: Object
+ }
+ },
computed: {
pendingQueue() {
return this.$store.getters.isInCompleteQueue(this.section);
}
},
+ mounted(){
+ this.paymentMethodsConst = Object.entries(this.paymentMethods).reduce((acc, [key, value]) => {
+ acc[value] = key;
+ return acc;
+ }, {});
+ },
watch: {
pendingQueue(inComplete) {
if (inComplete) {
this.resetSarch();
}
+ },
+ rateHistory: function(newVal) {
+
+ const date_from_parts = this.filters.date_from.split("-");
+ const date_from_year = date_from_parts[2];
+ const date_from_month = date_from_parts[1] - 1; // Subtract 1 from month, since it's zero-based in Date objects
+ const date_from_day = date_from_parts[0];
+ const start = new Date(date_from_year, date_from_month, date_from_day);
+
+ const date_to_parts = this.filters.date_to.split("-");
+ const date_to_year = date_to_parts[2];
+ const date_to_month = date_to_parts[1] - 1; // Subtract 1 from month, since it's zero-based in Date objects
+ const date_to_day = date_to_parts[0];
+ const end = new Date(date_to_year, date_to_month, date_to_day);
+
+ // 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);
+ });
+
+ const startYear = start.getFullYear();
+ const startMonth = start.getMonth() + 1;
+ const endYear = end.getFullYear();
+ const endMonth = end.getMonth() + 1;
+
+ // Get rates for date range
+ const ratesForRange = {};
+ Object.keys(ratesByType).forEach(type => {
+ ratesForRange[type] = [];
+ for (let i = start.getDate(); i <= end.getDate(); i++) {
+ const dateStr = `${i.toString().padStart(2, '0')}-${startMonth.toString().padStart(2, '0')}-${startYear}`;
+ if (i === end.getDate() && startMonth !== endMonth) {
+ // Handle end month
+ const endMonthDays = new Date(endYear, endMonth, 0).getDate();
+ for (let j = 1; j <= end.getDate(); j++) {
+ const dateStr = `${j.toString().padStart(2, '0')}-${endMonth.toString().padStart(2, '0')}-${endYear}`;
+ const rate = ratesByType[type].find(r => r.created_at === dateStr);
+ ratesForRange[type].push(rate ? rate.rate : '');
+ }
+ } else {
+ // Handle start month and other months in range
+ const rate = ratesByType[type].find(r => r.created_at === dateStr);
+ ratesForRange[type].push(rate ? rate.rate : '');
+ }
+ }
+ });
+ // Generate labels for chart
+ const labels = [];
+ for (let i = start.getDate(); i <= end.getDate(); i++) {
+ if (i === end.getDate() && startMonth !== endMonth) {
+ // Handle end month
+ const endMonthDays = new Date(endYear, endMonth, 0).getDate();
+ for (let j = 1; j <= end.getDate(); j++) {
+ labels.push(`${j.toString().padStart(2, '0')}-${endMonth.toString().padStart(2, '0')}-${endYear}`);
+ }
+ } else {
+ // Handle start month and other months in range
+ labels.push(`${i.toString().padStart(2, '0')}-${startMonth.toString().padStart(2, '0')}-${startYear}`);
+ }
+ }
+
+ // Generate datasets for chart
+ const datasets = [];
+ Object.keys(ratesForRange).forEach(type => {
+ datasets.push({
+ label: `${this.paymentMethodsConst[type]}`,
+ data: ratesForRange[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() {
@@ -138,31 +244,5 @@ export default {
// this.error = error.message;
}
},
- watch: {
- rateHistory: function(newVal) {
- this.chartLebels = [];
- this.chartData = [];
- for (var i = 0; i < newVal.length; i++) {
- this.chartLebels.push(newVal[i].created_at.split("-")[0]);
- this.chartData.push(newVal[i]["rate"]);
- }
- setTimeout(() => {
- const ctx = document.getElementById("currency-history-chart");
- new Chart(ctx, {
- type: 'line',
- data: {
- labels: this.chartLebels,
- datasets: [{
- label: 'Currency Rate History',
- data: this.chartData,
- fill: false,
- borderColor: 'rgb(75, 192, 192)',
- tension: 0.1
- }]
- },
- });
- }, 300);
- }
- },
}
diff --git a/resources/views/pages/rate_histories.blade.php b/resources/views/pages/rate_histories.blade.php
index accb0591..4d19ef10 100644
--- a/resources/views/pages/rate_histories.blade.php
+++ b/resources/views/pages/rate_histories.blade.php
@@ -2,7 +2,7 @@
@section('inner_content')
@endsection
diff --git a/routes/web.php b/routes/web.php
index 3ab24076..b51c136a 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,26 +1,27 @@
with('paymentMethods', $paymentMethods);
})->name('currency_rate.history');