Bubble.js

var Bubble = function (props) {
  var {
    percent = 0,        // a number between 0 and 1, inclusive
    size = 20,          // the width and height of the bubble
    color = "#0078bc",  // the fill color
    label = null        // a label to describe the contents (for accessibility)
  } = props;

  var c = size / 2;
  var r = Math.sqrt(Math.pow(c, 2) * percent);

  return (
    <svg width={size} height={size} aria-label={label} data-tooltip={label}>
      <circle cx={c} cy={c} r={c} fill="#ddd"/>
      <circle cx={c} cy={c} r={r} fill={color}/>
    </svg>
  );
};

module.exports = Bubble;