crypto/frontend/resources/views/home.blade.php

@extends('layout.base')

@section('page_content')
  <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