Skip to content

Instantly share code, notes, and snippets.

@adammark
Last active July 12, 2017 02:41
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adammark/556f7709be52bb51a31d302ddb54453b to your computer and use it in GitHub Desktop.
Save adammark/556f7709be52bb51a31d302ddb54453b to your computer and use it in GitHub Desktop.
var Gauge = function (props) {
var {
percent = 0, // a number between 0 and 1, inclusive
width = 100, // the overall width
height = 10, // the overall height
color = "#0078bc", // the fill color
animate = false, // if true, animate when the percent changes
label = null // a label to describe the contents (for accessibility)
} = props;
var w = Math.min(width, percent * width);
var e = 5;
var s = 2;
var n = Math.floor(width / (e + 2));
var p = (width - (e * n)) / (n - 1);
var x = 0;
var style = animate ? { "transition": "width 500ms, fill 250ms" } : null;
var path = "";
for (var i = 0; i < n; i++) {
path += "M" + x + ",0 h" + e + " v" + height + " h-" + e + " z ";
x += (e + p);
}
return (
<svg width={width} height={height} aria-label={label} data-tooltip={label}>
<defs>
<mask id="_mask">
<path d={path} fill="white"/>
</mask>
</defs>
<rect width={width} height={height} fill="#ccc" mask="url(#_mask)"/>
<rect width={w} height={height} fill={color} style={style} mask="url(#_mask)"/>
</svg>
);
};
module.exports = Gauge;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment