import React from 'react'
import ReactEcharts from 'echarts-for-react'
import echarts from 'echarts/lib/echarts'
import PropTypes from 'prop-types'
import { getDateWithHour, getFullDate } from '../../utils/FunctionUtils'
class LineChart extends React.Component {
getData() {
const chartsDateFormat = 'YYYY/MM/DD HH:mm:ss'
return this.props.stationMeausres.map(measure => {
return {
value: [getDateWithHour(measure.date, measure.hour).format(chartsDateFormat), measure.value.toFixed(2)],
name: this.props.title
}
})
}
getOptions() {
const series = this.getData()
return {
legend: {
data: 'Measures'
},
tooltip: {
trigger: 'axis',
formatter: (params) => {
const title = getFullDate(params[0].value[0])
const lines = params.filter(param => param.value || param.value === 0).map(param => {
return ' ' + param.name + ' : ' + param.value[1]
})
return [].concat(title, lines).join('')
},
axisPointer: {
type: 'shadow',
animation: false
}
},
grid: {
top: '4%',
left: '3%',
right: '4%',
bottom: '5%',
containLabel: true,
height: 250
},
xAxis: {
type: 'time',
splitLine: {
show: true
}
},
yAxis: {
type: 'value',
boundaryGap: false,
inverse: false,
splitLine: {
show: true
},
},
series: [{
data: series,
type: 'line',
showSymbol: false,
}],
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
filterMode: 'empty'
},
{
type: 'inside',
xAxisIndex: 0,
filterMode: 'empty'
},
],
color: ['black']
}
}
render() {
return (
)
}
}
LineChart.propTypes = {
stationMeausres: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string
}
export default LineChart