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

---
 .../012a1d662de1d6e091232755fc22d6187f7576fe.php   | 63 ++++++++++++++++++++--
 1 file changed, 60 insertions(+), 3 deletions(-)

(limited to 'storage/framework/views')

diff --git a/storage/framework/views/012a1d662de1d6e091232755fc22d6187f7576fe.php b/storage/framework/views/012a1d662de1d6e091232755fc22d6187f7576fe.php
index fb7adbf..ec29da8 100644
--- a/storage/framework/views/012a1d662de1d6e091232755fc22d6187f7576fe.php
+++ b/storage/framework/views/012a1d662de1d6e091232755fc22d6187f7576fe.php
@@ -6,6 +6,10 @@
 
         <title>Bitcoin Price References</title>
 
+        <!-- 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">
 
@@ -29,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: <?php echo e($rates[0]->updated_at); ?><br>
                                     Current price reference:
                                 </div>
+                                    <div>
+                                      <select id="currency">
+                                        <?php $__currentLoopData = $rates; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $rate): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
+                                        <option value="<?php echo e($rate->currency->name); ?>"><?php echo e($rate->currency->name); ?></option>
+                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
+                                      </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>
@@ -48,7 +106,6 @@
                                         <tr>
                                           <td><?php echo e($rate->currency->name); ?></td>
                                           <td><?php echo e($rate->currency->unit); ?></td>
-                                          <td><?php echo e($rate->currency->description); ?></td>
                                           <td><?php echo e($rate->value); ?></td>
                                         </tr>
                                         <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
-- 
cgit v1.2.3