Fix: Date range data show in chart

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(() => {