From 08526296c6557f72a1342e8917a1a9c56f9c8763 Mon Sep 17 00:00:00 2001
From: sharifcse57 <sharifcse57@gmail.com>
Date: Fri, 17 Feb 2023 14:32:04 +0600
Subject: [PATCH] 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);
-            }
-        },
 }
 </script>