arcs.jsx

buildPieChartArcs(data, radius): JSX.Element[] {
        const arc = d3Arc();

        // First, get total quantity
        const domainMax = this.props.data
            .map(dataPoint => dataPoint.value)
            .reduce((previous, current) => previous + current);

        let lastAngle = 0;
        const arcPaths = data.map(dataPoint => {
            const currentAngle = (dataPoint.value / domainMax) * 360;

            const path = arc({
                innerRadius: 0,
                outerRadius: radius,
                startAngle: lastAngle * Math.PI / 180,
                endAngle: (lastAngle + currentAngle) * Math.PI / 180,
                padAngle: 0,
            });

            const r = Math.floor(Math.random() * 256).toString(16);
            const g = Math.floor(Math.random() * 256).toString(16);
            const b = Math.floor(Math.random() * 256).toString(16);

            const color = `#${r}${g}${b}`;

            lastAngle = currentAngle + lastAngle;
            return <path {...{d: path, fill: color, stroke: 'none'}} style={{margin: 0, padding: 0}} />
        });

        return arcPaths;
    }

    render() {
        const transform = `translate(${this.props.radius}, ${this.props.radius})`;

        return (
            <g {...{transform}}>
                {this.buildPieChartArcs(this.props.data, this.props.radius)}
            </g>
        );
    }