 Q = require 'q'
 React = require('react')
 Components = require('./components')
+
+# jump through some hoops to add clip-path since SVGDOMPropertyConfig is useless
+MUST_USE_ATTRIBUTE = require('react/lib/DOMProperty').MUST_USE_ATTRIBUTE
+require('react/lib/ReactInjection').DOMProperty.injectDOMPropertyConfig
+  Properties: clipPath: MUST_USE_ATTRIBUTE
+  DOMAttributeNames: clipPath: 'clip-path'
+
 
 clearExtent = (v) -> _.extend {}, v, {extent: null}
 setBrushing = (v) -> _.extend {}, v, {brushing: true}

      unless params.hideLegend
        legend = <LegendComponent targets={targets} mouseHandler={@}/>

      svg =
        <svg width={sizes.svgWidth} height={sizes.svgHeight}
          ref='svg'
          style={{'font-family': '"Helvetica Neue"', cursor: 'default', 'background-color': params.bgcolor}}
          onMouseMove={@onMouseMove}>
          {title}
          <g transform={"translate(#{sizes.margin.left},#{sizes.margin.top})"} ref="chartArea">
            {xAxis}
            {yAxis}

    yScale: React.PropTypes.func
    cursorPosition: React.PropTypes.object
    targetState: React.PropTypes.object
    clipPath: React.PropTypes.string

  getChildContext: ->
    context = _.pick(@state, Object.keys(@constructor.childContextTypes))
    context.targetState = @targetState
    context.clipPath = "url(#clipper)"
    context

  exportImage: ->
