content: import React from 'react'
  import styles from './styles.js'
  import DonutLegend from '../../legends/donut/component/index.js'
  
  import { select } from 'd3-selection'
  
  import { slice_did_update } from '../viz/slice.js'
  
  import { Provider,
           connect } from 'react-redux'
  
  import { donut_did_mount,
           donut_did_update } from '../viz/donut_container.js'
  
  import { center_circle_did_mount,
           center_circle_did_update } from '../viz/center_circle.js'
  
  import { initialize_width,
           initialize_radius,
           initialize_margin,
           render_placeholder_div } from '../util.js'
  
  
  
  class App extends React.Component {
    constructor(props) {
      super(props)
    }
  
    componentDidMount() {
      styles()
      initialize_width(this.props.dispatch, this.props.options.default_width)
      donut_did_mount(this.props.width, this.props.data)
      center_circle_did_mount(this.props.width)
  
    }
  
    componentDidUpdate() {
      center_circle_did_update(this.props.width, this.props.data)
      donut_did_update(this.props.width, this.props.data)
      slice_did_update(this.props.width, this.props.data)
    }
  
    render() {
      const data = this.props.data[0].data.map(obj => obj.cat)
      const width = this.props.width
      const height = width * 0.9
  
      return (
        <div>
          <DonutLegend data={data} width={width}/>
          <svg className="svg-donutchart"
               height={height}
               width={width}></svg>
        </div>
      )
    }
  }
  
  export default App
  