Gauge.js

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;