diff options
Diffstat (limited to 'storage/framework/views/012a1d662de1d6e091232755fc22d6187f7576fe.php')
-rw-r--r-- | storage/framework/views/012a1d662de1d6e091232755fc22d6187f7576fe.php | 63 |
1 files changed, 60 insertions, 3 deletions
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(); ?> |