Untitled

 avatar
unknown
javascript
3 years ago
3.4 kB
4
Indexable
import moment from 'moment'
import BarChart from './BarChart.js'
import mydata from '~/store/data.json'
import information from '~/store/information.json'

export default {

  name: 'Header',
  components: {
    BarChart
  },
  data () {
    return {
      formvalid: true,
      input: '',
      prixtexte: '',
      min: moment().subtract(1, 'd'),
      text: '1',
      prix: 'test',
      link: '',
      active: false,
      datacollection: { labels: [], datasets: [] },
      barChartOptions: {
        maintainAspectRatio: false,
        responsive: true,
        legend: {
          display: false
        },
        title: {
          display: true,
          fontSize: 24,
          fontColor: '#6b7280'
        },
        tooltips: {
          backgroundColor: '#17BF62',
          mode: 'x-axis',
          position: 'nearest',
          yAlign: 'bottom',
          xAlign: 'center',
          bodyAlign: 'center',
          displayColors: false,
          callbacks: {
            label (tooltipItems, data) {
              this.prixtexte = tooltipItems.yLabel
              return tooltipItems.yLabel + ' €'
            }
          }
        },
        scales: {
          xAxes: [
            {
              display: true,
              time: {
                unit: 'Areas'
              },
              gridLines: {
                display: false
              },
              ticks: {
                maxTicksLimit: 8,
                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.min = moment().subtract(1, 'd')
      } else if (value === 'week') {
        this.min = moment().subtract(1, 'w')
      } else if (value === 'month') {
        this.min = moment().subtract(4, 'w')
      } else if (value === 'all') {
        this.min = moment().subtract(1, 'y')
      }

      const mintobig = information.sort(function (a, b) {
        return new Date(a.date) - new Date(b.date)
      })
      const priceinfo = mintobig.map(({ floorprice }) => floorprice)
      const max = moment()
      const result = information.filter((d) => {
        const time = new Date(d.date).getTime()
        return (this.min < time && time < max)
      })
      const resultdate = result.map(({ date }) => moment(date).format('DD MMM'))

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

  }
}