<template>
  <div>
  <input v-on:input="selected()" type="date" ref="dayPicked"/>


  <canvas ref="canvas" style="width: 100%; height: 1000em"></canvas>
</div>
</template>

<script>
import Chart from 'chart.js'
import numClicks from '../../data.json'

export default {
  data () {
    return {
      dataPoints: [],
      numOfClicks: []
    }
  },
  methods: {
    sorter: function () {
      numClicks.sort(function (a, b) {
        return (new Date(a[0]).getTime() - new Date(b[0]).getTime())
      })
      var dayTime = numClicks.map((daytime) => daytime[0])
      this.dataPoints = dayTime
      var click = numClicks.map((numClick) => numClick[1])
      this.numOfClicks = click
    },
    selected: function () {
        var datePart = this.$refs.dayPicked.value.match(/d+/g),
        year = datePart[0].substring(0,4), // (0,4) get 4 digits for year
        month = datePart[1], day = datePart[2];
        var day = month+'-'+day+'-'+year
        var allDays = numClicks.filter((dayPicked) => dayPicked[0].match(day))
        var dayTime = allDays.map((daytime) => daytime[0])
        this.dataPoints = dayTime
        var click = allDays.map((numClick) => numClick[1])
        this.numOfClicks = click


        let canvas = this.$refs.canvas

        let chart = new Chart(canvas, {
          type: 'horizontalBar',
          data: {
            labels: this.dataPoints,
            datasets: [{
              label: '# of Votes',
              data: this.numOfClicks
            }]
          },
          options: {
            scales: {
              yAxes: [{
                ticks: {
                  beginAtZero: true
                }
              }]
            }
          }
        })
      }
  },
  mounted() {
    this.sorter();
    let canvas = this.$refs.canvas

    let chart = new Chart(canvas, {
      type: 'horizontalBar',
      data: {
        labels: this.dataPoints,
        datasets: [{
          label: '# of Votes',
          data: this.numOfClicks
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    })
    console.log(chart)

  }
}
</script>