From 1f461a750ff16321b76f0d311f37c1ebd4cb9e93 Mon Sep 17 00:00:00 2001 From: sharifcse57 Date: Fri, 17 Feb 2023 14:25:18 +0600 Subject: [PATCH 1/3] working with plotting the rate history group by payment type --- .../bookings/forms/RateHistoriesComponent.vue | 80 +++++++++++++++---- .../views/pages/rate_histories.blade.php | 2 +- routes/web.php | 28 ++++--- 3 files changed, 80 insertions(+), 30 deletions(-) diff --git a/resources/assets/vue/components/bookings/forms/RateHistoriesComponent.vue b/resources/assets/vue/components/bookings/forms/RateHistoriesComponent.vue index b55d39c9..f0721f83 100644 --- a/resources/assets/vue/components/bookings/forms/RateHistoriesComponent.vue +++ b/resources/assets/vue/components/bookings/forms/RateHistoriesComponent.vue @@ -29,8 +29,8 @@
-
- +
+
@@ -81,14 +81,32 @@ export default { date_from: null, }, chartLebels:[], - chartData: [] + chartData: [], + paymentMethodsConst: [], + colors: [ + 'red', + 'green', + 'blue', + '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) { @@ -140,25 +158,55 @@ export default { }, 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"]); + // 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: this.chartLebels, - datasets: [{ - label: 'Currency Rate History', - data: this.chartData, - fill: false, - borderColor: 'rgb(75, 192, 192)', - tension: 0.1 - }] + labels: labels, + datasets: datasets }, }); }, 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 35ad7015..053c500e 100644 --- a/routes/web.php +++ b/routes/web.php @@ -1,26 +1,27 @@ with('paymentMethods', $paymentMethods); })->name('currency_rate.history'); From 08526296c6557f72a1342e8917a1a9c56f9c8763 Mon Sep 17 00:00:00 2001 From: sharifcse57 Date: Fri, 17 Feb 2023 14:32:04 +0600 Subject: [PATCH 2/3] working with plotting the rate history group by payment type --- .../bookings/forms/RateHistoriesComponent.vue | 116 +++++++++--------- 1 file changed, 58 insertions(+), 58 deletions(-) diff --git a/resources/assets/vue/components/bookings/forms/RateHistoriesComponent.vue b/resources/assets/vue/components/bookings/forms/RateHistoriesComponent.vue index f0721f83..18845a78 100644 --- a/resources/assets/vue/components/bookings/forms/RateHistoriesComponent.vue +++ b/resources/assets/vue/components/bookings/forms/RateHistoriesComponent.vue @@ -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); - } - }, } From 209df3f3f7ab6186285367d56ecaa16f62e3e234 Mon Sep 17 00:00:00 2001 From: sharifcse57 Date: Fri, 17 Feb 2023 20:29:36 +0600 Subject: [PATCH 3/3] Fix: Date range data show in chart --- .../bookings/forms/RateHistoriesComponent.vue | 80 +++++++++++++------ 1 file changed, 56 insertions(+), 24 deletions(-) diff --git a/resources/assets/vue/components/bookings/forms/RateHistoriesComponent.vue b/resources/assets/vue/components/bookings/forms/RateHistoriesComponent.vue index 18845a78..290d18ba 100644 --- a/resources/assets/vue/components/bookings/forms/RateHistoriesComponent.vue +++ b/resources/assets/vue/components/bookings/forms/RateHistoriesComponent.vue @@ -87,8 +87,9 @@ export default { 'red', 'pink', 'blue', - 'yellow', - 'black' + 'purple', + 'black', + 'yellow' ] }; }, @@ -115,10 +116,18 @@ export default { } }, rateHistory: function(newVal) { - // Set current month and year - const date = new Date(); - const currentMonth = date.getMonth() + 1; - const currentYear = date.getFullYear(); + + 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 = {}; @@ -126,36 +135,59 @@ export default { if (!ratesByType[rate.payment_method_type]) { ratesByType[rate.payment_method_type] = []; } - ratesByType[rate.payment_method_type].push(rate); + ratesByType[rate.payment_method_type].push(rate); }); - // Get rates for current month - const ratesForMonth = {}; + 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 => { - 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}`; + 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); - console.log(dateStr); - ratesForMonth[type].push(rate ? rate.rate : ''); + ratesForRange[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}`); + 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(ratesForMonth).forEach(type => { - datasets.push({ - label: `${this.paymentMethodsConst[type]}`, - data: ratesForMonth[type], - borderColor: this.colors[type], - fill: false - }); + Object.keys(ratesForRange).forEach(type => { + datasets.push({ + label: `${this.paymentMethodsConst[type]}`, + data: ratesForRange[type], + borderColor: this.colors[type], + fill: false + }); }); setTimeout(() => {