ProgressPieChart.jsx

import React, { PropTypes } from 'react';

export default class ProgressPieChart extends React.Component {

  degrees() {
    return 360 * this.props.percent / 100;
  }

  render() {
    let gt50 = (this.props.percent > 50 ? 'gt-50' : '' );
    let full = (this.props.percent == 50 ? 'full' : '');
    return (
      <div className={`progress-pie-chart ${gt50}`}>
        <div className="ppc-progress">
          <div className="ppc-progress-fill" style={{transform: `rotate(${this.degrees()}deg)`}}></div>
        </div>
        <div className="ppc-percents">
          <div className="pcc-percents-wrapper">
            <span className={full}></span>
          </div>
        </div>
      </div>
    );
  }
}