Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment