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