From a7ef61652e188b60f047da081e48e4c37054e15d Mon Sep 17 00:00:00 2001
From: sharifcse57 <sharifcse57@gmail.com>
Date: Mon, 13 Feb 2023 09:18:11 +0600
Subject: [PATCH] Plot the rate history data in line chart

---
 .../bookings/forms/RateHistoriesComponent.vue | 36 ++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/resources/assets/vue/components/bookings/forms/RateHistoriesComponent.vue b/resources/assets/vue/components/bookings/forms/RateHistoriesComponent.vue
index 4e1c2627..54b8e721 100644
--- a/resources/assets/vue/components/bookings/forms/RateHistoriesComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/RateHistoriesComponent.vue
@@ -27,10 +27,12 @@
                     <!-- <button type="button" class="btn btn-lg btn-secondary fs-11" @click="resetSarch">Reset</button> -->
                 </div>
             </div>
-            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
+            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>           
             <div class="row" v-if="!isLoading && !hasError">
                 <div class="col">
-                    <p>{{ rateHistory }}</p>
+                    <div class="col-12 mx-auto p-0 " style="width: 800px; height:350px">
+                        <canvas id="currency-history-chart"></canvas>
+                    </div>
                 </div>
             </div>
             <div class="row" v-if="hasError">
@@ -59,7 +61,7 @@
 </template>
 
 <script>
-import Chart from "chart.js";
+import Chart from 'chart.js';
 
 export default {
     data() {
@@ -80,6 +82,8 @@ export default {
                 date_to: null,
                 date_from: null,
             },
+            chartLebels:[],
+            chartData: []
         };
     },
     computed: {
@@ -135,6 +139,30 @@ export default {
             this.hasError = true;
             // this.error = error.message;
         }
-    }
+    },
+    watch: {
+        rateHistory: function(newVal) {
+                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);
+            }
+        },
 }
 </script>