From 0d2180d9b488219e570d354d11ec3782f1b46024 Mon Sep 17 00:00:00 2001
From: Calvin Morrison <calvin@fastmailteam.com>
Date: Tue, 2 Aug 2022 18:38:01 -0400
Subject: add a chart

---
 resources/views/welcome.blade.php | 60 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 57 insertions(+), 3 deletions(-)

(limited to 'resources/views')

diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index f3b6f33..eb1d802 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -8,6 +8,7 @@
 
         <!-- external scripts -->
         <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js" charset="utf-8"></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
         <!-- Fonts -->
         <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
@@ -32,18 +33,72 @@
 
                 <div class="mt-8 bg-white dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg">
                     <div class="grid grid-cols-1 md:grid-cols-2">
-                        <div class="p-6">
+                        <div class="p-3">
                             <div class="ml-2">
                                 <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                                   Last Update: {{$rates[0]->updated_at}}<br>
                                     Current price reference:
                                 </div>
+                                    <div>
+                                      <select id="currency">
+                                        @foreach ($rates as $rate)
+                                        <option value="{{$rate->currency->name}}">{{$rate->currency->name}}</option>
+                                        @endforeach
+                                      </select>
+
+                                      <canvas id="Chart" height="600" width="800"></canvas>
+                                      <script type="application/javascript">
+                                        $(document).ready(function() { 
+                                          UpdateChart();
+                                        });
+
+                                        $('select#currency').on('change', function() {
+                                          UpdateChart();
+                                        });
+
+                                        function UpdateChart() {
+                                          currency = $('select#currency')[0].value;
+
+                                          $.ajax({url: "api/rateseries/" + currency, success: function(result){
+                                             BuildChart($('select#currency')[0].value + " to BTC", result);
+                                          }});
+                                        }
+
+                                         function BuildChart(label, data) {
+                                           if(typeof myChart !== 'undefined') {
+                                             myChart.destroy();
+                                           }
+                                           const config = {
+                                             type: 'line',
+                                             label: 'test 1',
+                                             data: { 
+                                               labels: data.map(x => new Date(x.x * 1000).toISOString().slice(0, 19).replace('T', ' ')),
+                                               datasets: [ 
+                                                  { label: label, data: data, }]
+                                             },
+                                             options: {
+                                               scales: {
+                                                 x: {
+                                                 type: 'time',
+                                                 }
+                                               }
+                                             }
+                                           };
+                                           myChart = new Chart(
+                                             document.getElementById('Chart'),
+                                             config);
+                                         }
+                                      </script>
+
+
+
+
+                                    </div>
 
                                     <table class="text-gray-600 dark:text-gray-400  table">
                                       <thead>
                                       <th>Name</th>
                                       <th>Unit</th>
-                                      <th>Description</th>
                                       <th>Last Rate (to BTC)</th>
                                       </thead>
                                       <tbody>
@@ -51,7 +106,6 @@
                                         <tr>
                                           <td>{{$rate->currency->name}}</td>
                                           <td>{{$rate->currency->unit}}</td>
-                                          <td>{{$rate->currency->description}}</td>
                                           <td>{{$rate->value}}</td>
                                         </tr>
                                         @endforeach
-- 
cgit v1.2.3