circular-progress.jsx

import React from 'react'
import * as d3 from 'd3'


export default class CircularProgress extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            aProgress: props.min
        }
    }

    componentDidMount() {
        let { min = 0, progress} = this.props
        d3.select(this)
            .transition()
            .duration(1000)
            .tween(`progress-tween`, () => {
                var i = d3.interpolateNumber(min, progress);
                return (t) => {
                    this.setState({ aProgress: i(t) });
                };
            });
    }

    render() {
        let {width, height, min = 0, max = 100, progressColor = '#fff100', children, innerRadiusRatio = .8} = this.props
        let {aProgress} = this.state

        let r = Math.min(width, height) / 2;
        var arc = d3.arc()
            .innerRadius(innerRadiusRatio * r)
            .outerRadius(r);

        var data = [aProgress - min, max - aProgress];
        var arcs = d3.pie().sort(null)(data);
        arcs[0].color = progressColor;
        arcs[1].color = '#2B388F';
        arcs[1].opacity = .5;

        return (
            <svg width={width} height={height}>
                <g transform={`translate(${width/2},${height/2})`}>
                    {arcs.map((d, i) => <path key={i} d={arc(d)} fill={d.color} opacity={d.opacity} />)}
                    {children}
                </g>
            </svg>
        )
    }
}