Frontend coins and charts
This commit is contained in:
@ -1,5 +1,220 @@
|
||||
@extends('layout.base')
|
||||
|
||||
@section('page_content')
|
||||
Home
|
||||
<h3>
|
||||
Home
|
||||
</h3>
|
||||
|
||||
<div class="ui top attached tabular menu" id="coins_menu">
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('page_scripts')
|
||||
<script type="text/javascript">
|
||||
const types = ['month', 'months', 'year']
|
||||
const coins_menu = $('#coins_menu')
|
||||
const f = Intl.DateTimeFormat()
|
||||
let active = false
|
||||
class Coin {
|
||||
constructor(data) {
|
||||
this.data = data
|
||||
this.values = {
|
||||
month: [],
|
||||
months: [],
|
||||
year: []
|
||||
}
|
||||
}
|
||||
getValues(api_url) {
|
||||
const base_url = api_url + '/coin/' + this.data.id + '/values/'
|
||||
let promises = []
|
||||
$.each(types, (i, t) => {
|
||||
let url = base_url + t
|
||||
promises.push($.getJSON(url, (data) => {
|
||||
this.values[t] = data.values
|
||||
}))
|
||||
})
|
||||
Promise.all(promises).then(() => {
|
||||
this.draw()
|
||||
})
|
||||
}
|
||||
size() {
|
||||
let sum = 0
|
||||
$.each(types, (i, t) => {
|
||||
sum += this.values[t].length
|
||||
})
|
||||
return sum
|
||||
}
|
||||
draw() {
|
||||
if (this.size() == 0) {
|
||||
return
|
||||
}
|
||||
const m = $('<div></div>').attr('class', 'item').attr('data-tab', this.data.code).html(this.data.name)
|
||||
coins_menu.append(m)
|
||||
const tabs = $('<div></div>').attr('class', 'ui top attached tabular menu')
|
||||
const column = $('<div></div>').attr('class', 'eight wide column').append(tabs)
|
||||
let active2 = false
|
||||
$.each(types, (i, t) => {
|
||||
if (this.values[t].length == 0) {
|
||||
return
|
||||
}
|
||||
const canvas = $('<canvas></canvas>').attr('id', 'canvas_' + t + '_' + this.data.code).attr('width', '200').attr('height', '200')
|
||||
const tab = $('<div></div>').attr('class', 'item').attr('data-tab', this.data.code + t).html(t.toLowerCase().split(' ').map(function(word) {
|
||||
return (word.charAt(0)).toUpperCase() + word.slice(1)
|
||||
}).join(' '))
|
||||
tabs.append(tab)
|
||||
const sg = $('<div></div>').attr('class', 'ui bottom attached tab segment').attr('data-tab', this.data.code + t).append(
|
||||
$('<div></div>').attr('class', 'content').append(canvas)
|
||||
)
|
||||
column.append(sg)
|
||||
if (!active2) {
|
||||
tab.addClass('active')
|
||||
sg.addClass('active')
|
||||
active2 = true
|
||||
}
|
||||
|
||||
let labels = []
|
||||
let values = []
|
||||
$.each(this.values[t], (k, val) => {
|
||||
const d = new Date(val.date_time)
|
||||
labels.push(f.format(d))
|
||||
values.push(val.value)
|
||||
})
|
||||
const min = Math.min(...values)
|
||||
const max = Math.max(...values)
|
||||
const range = max - min
|
||||
const chart = new Chart(canvas[0], {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: this.data.name,
|
||||
data: values,
|
||||
fill: false,
|
||||
borderWidth: 1,
|
||||
tension: 0.1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
min: min - range / 2,
|
||||
max: max + range / 2
|
||||
}/*,
|
||||
x: {
|
||||
display: false
|
||||
}*/
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
const seg = $('<div></div>').attr('class', 'ui bottom attached tab segment').attr('data-tab', this.data.code).append(
|
||||
$('<div></div>').attr('class', 'ui centered grid').append(column)
|
||||
)
|
||||
coins_menu.after(seg)
|
||||
if (!active) {
|
||||
m.addClass('active')
|
||||
seg.addClass('active')
|
||||
active = true
|
||||
}
|
||||
m.tab()
|
||||
tabs.find('.item').tab()
|
||||
}
|
||||
}
|
||||
const coins = {
|
||||
data: [],
|
||||
urls: {
|
||||
api: '{{$urls->api}}'
|
||||
},
|
||||
getCoins: function() {
|
||||
const url = this.urls.api + '/coins'
|
||||
$.getJSON(url, (data) => {
|
||||
$.each(data.coins, (i, el) => {
|
||||
const c = new Coin(el)
|
||||
c.getValues(this.urls.api)
|
||||
})
|
||||
})
|
||||
},
|
||||
getValues: function() {
|
||||
let p = []
|
||||
$.each(this.data, (i, el) => {
|
||||
const url = this.urls.api + '/coin/' + el.id + '/values/months'
|
||||
p.push($.getJSON(url, (data) => {
|
||||
this.data[i].values = data.values
|
||||
}))
|
||||
})
|
||||
Promise.all(p).then(() => {
|
||||
this.draw()
|
||||
})
|
||||
},
|
||||
draw: function() {
|
||||
const menu = $('#coin_menu')
|
||||
const f = Intl.DateTimeFormat()
|
||||
let active = false
|
||||
$.each(this.data, (i, el) => {
|
||||
if (el.values.length == 0) {
|
||||
return
|
||||
}
|
||||
const m = $('<div></div>').attr('class', 'item').attr('data-tab', el.code).html(el.name)
|
||||
menu.append(m)
|
||||
const canvas = $('<canvas></canvas>').attr('id', 'canvas' + el.code).attr('width', '200').attr('height', '200')
|
||||
const seg = $('<div></div>').attr('class', 'ui bottom attached tab segment').attr('data-tab', el.code).append(
|
||||
$('<div></div>').attr('class', 'ui centered grid').append(
|
||||
$('<div></div>').attr('class', 'eight wide column').append(canvas)
|
||||
)
|
||||
)
|
||||
menu.after(seg)
|
||||
if (!active) {
|
||||
m.addClass('active')
|
||||
seg.addClass('active')
|
||||
active = true
|
||||
}
|
||||
m.tab()
|
||||
let labels = []
|
||||
let values = []
|
||||
$.each(el.values, (k, val) => {
|
||||
const d = new Date(val.date_time)
|
||||
labels.push(f.format(d))
|
||||
values.push(val.value)
|
||||
})
|
||||
const min = Math.min(...values)
|
||||
const max = Math.max(...values)
|
||||
const range = max - min
|
||||
const chart = new Chart(canvas[0], {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: el.name,
|
||||
data: values,
|
||||
fill: false,
|
||||
borderWidth: 1,
|
||||
tension: 0.1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
min: min - range / 2,
|
||||
max: max + range / 2
|
||||
}/*,
|
||||
x: {
|
||||
display: false
|
||||
}*/
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
setup: function() {
|
||||
this.getCoins()
|
||||
}
|
||||
}
|
||||
$(document).ready(() => {
|
||||
coins.setup()
|
||||
})
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
Reference in New Issue
Block a user