CircleGauge.jsx

import React from 'react';

export default class CircleGauge extends React.Component {
    constructor(props) {
        super(props);

        this.state = {};
    } // close constructor

    render () {
        const values = this.props.values || [ 15 , 35, 20, 30 ];
        const colors = this.props.colorMap || [ "#900", "#090", "#009", "#ff0" ]

        const startingOffset = 25;
        let currentSum = 0;
        const getOffset = function(value) {
            let thisOffset;
            if (currentSum == 0) {
                thisOffset = startingOffset;
            } else {
                thisOffset = (100 - currentSum) + startingOffset;
            }
            currentSum += value;
            return thisOffset;
        } // close getOffset

        function generateQuickGuid() {
            return Math.random().toString(36).substring(2, 15) +
                Math.random().toString(36).substring(2, 15);
        } // close generateQuickGuid

        const thisID = this.props.id || generateQuickGuid();

        return (
            <svg id={ thisID } width="100%" height="100%" viewBox="0 0 42 42" className="donut">
                <circle className="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
                <circle className="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" strokeWidth="3"></circle>

                {
                    values.map( (value, index) => {
                        const thisOffset = getOffset(value);
                        return (
                            <circle key={ thisID + "-" + index }  className="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent"
                                strokeWidth="3"
                                style={{
                                    stroke: colors[index],
                                    strokeDasharray: value + " " + (100 - value),
                                    strokeDashoffset: thisOffset
                                }}
                            />
                        )
                    })
                }
            </svg>
        ); // return
    } // close render
} // close CircleGauge