Untitled

import moment from 'moment'
import BarChart from './BarChart.js'
import mydata from '~/store/data.json'
import information from '~/store/information.json'

const min = moment().subtract(1, 'd')
const max = moment()
const result = information.filter((d) => {
  const time = moment(d.date)
  return (min < time && time < max)
})
const priceinfo = result.map(({ floorprice }) => floorprice)[0]
const volumeinfo = result.map(({ volume }) => volume)[0]
const listedinfo = result.map(({ listed }) => listed)[0]

console.log(priceinfo)

export default {

  name: 'Header',
  components: {
    BarChart
  },
  data () {
    return {
      delayed: '',
      input: '',
      prix: '',
      min: moment().subtract(1, 'd'),
      buttonday: true,
      buttonweek: false,
      buttonmonth: false,
      buttonall: false,
      text: '1',
      datacollection: { labels: [], datasets: [] },
      barChartOptions: {
        radius: 5,
        maintainAspectRatio: false,
        responsive: true,
        legend: {
          display: false
        },
        title: {
          display: true,
          fontSize: 24,
          fontColor: '#6b7280'
        },
        animations: {
          onCompleted: () => {
            this.delayed = true
          },
          delay: (context) => {
            const delay = 0
            if (context.type === 'data' && context.mode === 'default' && !this.delayed) {
              this.delay = context.dataIndex * 300 + context.datasetIndex * 100
            }
            return delay
          }
        },
        tooltips: {
          backgroundColor: '#03dac5',
          mode: 'x-axis',
          position: 'nearest',
          yAlign: 'bottom',
          xAlign: 'center',
          bodyAlign: 'center',
          displayColors: false,
          callbacks: {
            label: (tooltipItems) => {
              this.prixtexte = tooltipItems.yLabel
              return tooltipItems.yLabel + ' EGLD'
            }
          }
        },
        scales: {
          xAxes: [
            {
              display: true,
              time: {
                unit: 'Areas'
              },
              gridLines: {
                display: false
              },
              ticks: {
                maxTicksLimit: 7,
                autoSkip: true,
                maxRotation: 0,
                autoSkipPadding: 6,
                display: true // this removed the labels on the x-axis
              }
            }
          ],
          yAxes: [
            {
              display: true,
              ticks: {
                max: 12,
                min: 0,
                display: true
              },
              gridLines: {
                display: false
              }
            }
          ]
        }
      }
    }
  },
  mounted () {
    this.date()
  },
  methods: {
    date (value) {
      if (value === 'day') {
        this.buttonday = true
        this.buttonmonth = false
        this.buttonweek = false
        this.buttonall = false
        this.min = moment().subtract(1, 'd')
      } else if (value === 'week') {
        this.buttonday = false
        this.buttonmonth = false
        this.buttonweek = true
        this.buttonall = false

        this.min = moment().subtract(1, 'w')
      } else if (value === 'month') {
        this.buttonday = false
        this.buttonmonth = true
        this.buttonweek = false
        this.buttonall = false
        this.min = moment().subtract(4, 'w')
      } else if (value === 'all') {
        this.buttonday = false
        this.buttonmonth = false
        this.buttonweek = false
        this.buttonall = true
        this.min = moment().subtract(1, 'y')
      }
      const max = moment()
      const result = information.filter((d) => {
        const time = moment(d.date)
        return (this.min < time && time < max)
      })
      const priceinfo = result.map(({ floorprice }) => floorprice)

      const resultdate = result.map(({ date }) => moment(date).format('DD MMM'))

      this.datacollection = {
        labels: resultdate,
        datasets: [
          {
            data: priceinfo,
            backgroundColor: '#bb86fc',
            pointBackgroundColor: 'white',
            pointBorderColor: 'white',
            pointHoverBackgroundColor: 'white',
            pointHoverBorderColor: 'white',
            borderColor: 'white',
            borderWidth: 2,
            tension: 0.5
          }
        ]
      }
    },
  }
}