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

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

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

// data: [
//   { name: 'Walk-in', value: 17, color: '#00AEEF' }, // color is optional, generated by color range below if not specified
//   { name: 'Others', value: 17 }
// ]
// option: {
//   width: 340,
//   height: 340,
//   margins: {
//     top: 20,
//     bottom: 20,
//     left: 20,
//     right: 20
//   },
//   showTooltip: true,
//   tooltipWidth: '120px',
//   showLegend: true,
//   legendOption: {
//     position: 'right', // top, bottom, left, right
//     filterable: true,
//     width: 200,
//     height: 340,
//     showValue: false // show value beside name
//   },
//   color: {
//     domain: [], // auto generated if empty array
//     range: ['#5ec6d3', '#93c92d', '#f59f54', '#00adef'] // range of color to display
//   },
//   showLabel: true, // show label on each pieces
//   crispEdges: true,
//   padAngle: 0.06, // padding between each pieces
//   startDegree: -57 // starting degree to draw pieces
// }

export default DonutChart