Skip to content

Instantly share code, notes, and snippets.

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