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
}
]
}
},
}
}