Skip to content

Instantly share code, notes, and snippets.

@CodeVachon

CodeVachon/CircleGauge.jsx

Last active February 7, 2017 14:48
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save CodeVachon/108f30bacca3d11251467e7af8fefed0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save CodeVachon/108f30bacca3d11251467e7af8fefed0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Christopher Vachon revised this gist Feb 7, 2017. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions CircleGauge.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -8,8 +8,6 @@ export default class CircleGauge extends React.Component {
    } // close constructor

    render () {

    //const offset = (100 − 75 + 25);
    const values = this.props.values || [ 15 , 35, 20, 30 ];
    const colors = this.props.colorMap || [ "#900", "#090", "#009", "#ff0" ]

  2. Christopher Vachon created this gist Feb 7, 2017.
    59 changes: 59 additions & 0 deletions CircleGauge.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    import React from 'react';

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

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

    render () {

    //const offset = (100 − 75 + 25);
    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