import React from 'react'
import D3Chart from '../D3Chart'
import PropTypes from 'prop-types'

class LineChart extends React.Component {
  render () {
    return (
      <D3Chart
        data={this.props.data}
        type='line'
        option={this.props.option} />
    )
  }
}

LineChart.propTypes = {
  data: PropTypes.any,
  option: PropTypes.object
}

// data: [ // array of object or single object
//   {
//     name: 'Reservation',
//     color: '#00AEEF', // will be randomed if null
//     data: [
//       {
//         y: 5, // value of y
//         x: new Date() // value of x (must be date object)
//       }
//     ]
//   }
// ],
// option: { // object
//   width: 1000,
//   height: 700,
//   margins: {
//     top: 50,
//     bottom: 50,
//     left: 50,
//     right: 20
//   },
//   showTooltip: true,
//   tooltipWidth: '100px', // will be 94px default
//   showLegend: true,
//   legendOption: {
//     position: 'bottom', // top, bottom, left, right
//     filterable: true,
//     width: 1000,
//     height: 30
//   },
//   showGrid: true,
//   showTick: true,
//   showArea: true,
//   timeFormat: '%d %b',
//   curve: 'monotoneX', // linear, step, stepBefore, stepAfter, basis, cardinal, monotoneX, catmullRom
//   xAxis: {
//     text: 'Tanggal',
//     range: {
//       max: '2017-07-31',
//       min: '2017-07-01'
//     }
//   },
//   yAxis: {
//     text: 'Total Reservasi',
//     range: { // optional, can be generated by data
//       max: 10,
//       min: 0
//     },
//     offset: { // offset to show from max and min data
//       max: 2,
//       min: 1
//     }
//   }
// }

export default LineChart