Rev.registerComponent 'RadarChart',
  propTypes:
    data: React.PropTypes.array.isRequired
    options: React.PropTypes.object
    width: React.PropTypes.number
    height: React.PropTypes.number
    title: React.PropTypes.string

  getDefaultProps: ->
    title: "Radar Chart"
    width: 300
    height: 300

  componentDidMount: ->
    ctx = @refs.canvas.getDOMNode().getContext('2d')
    @_chart = @renderChart(ctx)

  componentWillUnmount: ->
    @_chart.destroy()

  renderChart: (ctx) ->
    new Chart(ctx).Radar(@props.data, @getDefaultOptions())

  getDefaultOptions: ->
    defaultOptions =
      # Whether to show lines for each scale point
      scaleShowLine : true
      # Whether we show the angle lines out of the radar
      angleShowLineOut : true
      scaleShowLabels : false
      scaleBeginAtZero : true
      # Colour of the angle line
      angleLineColor : "rgba(0,0,0,.1)"
      # Pixel width of the angle line
      angleLineWidth : 1
      pointLabelFontFamily : "'Arial'"
      pointLabelFontStyle : "normal"
      pointLabelFontSize : 10
      pointLabelFontColor : "#666"
      pointDot : true
      pointDotRadius : 3
      pointDotStrokeWidth : 1
      # amount extra to add to the radius to cater for hit detection outside the drawn point
      pointHitDetectionRadius : 20
      datasetStroke : true
      datasetStrokeWidth : 2
      datasetFill : true

    defaultOptions = Object.assign(defaultOptions, @props.options)

  render: ->
    <div>
      <h3 className="ChartTitle">{ @props.title }</h3>
      <canvas
        ref="canvas"
        width={ @props.width }
        height={ @props.height }
      />
    </div>