diff options
Diffstat (limited to 'resources/views/welcome.blade.php')
| -rw-r--r-- | resources/views/welcome.blade.php | 60 |
1 files changed, 57 insertions, 3 deletions
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 |