import React from 'react';

/**
 * Usage:
 * <StatusBar
 *   height={20}
 *   data={[
 *    {
 *      key: '#FFF',
 *      value: 20,
 *      className: 'status'
 *    }, {
 *      key: '#000',
 *      value: 30,
 *      className: 'failed'
 *    }
 *  ]} />
 */
class StatusBar extends React.Component {
  constructor() {
    super(...arguments);
  }

  static get defaultProps() {
    return {
      className: 'status-bar',
      height: 10
    };
  }

  getBars(total) {
    let offset = 0;
    return function (status) {
      let {value, key, className} = status;
      let width = value / total * 100;
      let bar = (
        <rect
          x={offset}
          y="0"
          key={key}
          height="100%"
          width={width}
          className={className} />
      );
      offset += width;
      return bar;
    };
  }

  render() {
    let {height, data, className} = this.props;
    if (!data) {
      return null;
    }
    let total = data.reduce(function (sum, item) {
      return sum + item.value;
    }, 0);

    data = data.map(this.getBars(total));

    return (
      <svg
        className={className}
        preserveAspectRatio="none"
        viewBox={`0 0 100 ${height}`} >
        {data}
      </svg>
    );
  }
}

StatusBar.propTypes = {
  className: React.PropTypes.string,
  data: React.PropTypes.arrayOf(
    React.PropTypes.shape({
      className: React.PropTypes.number.isRequired.isRequired,
      key: React.PropTypes.string.isRequired,
      value: React.PropTypes.number.isRequired
    })
  ).isRequired,
  height: React.PropTypes.number
};

module.exports = StatusBar;

@@ -515,16 +515,23 @@
  (status
+, index
 ) %7B%0A    
@@ -547,13 +547,8 @@
 lue,
- key,
  cla
@@ -565,16 +565,88 @@
 status;%0A
+      if (!className) %7B%0A        className = %60element-$%7Bindex%7D%60;%0A      %7D%0A
       le
@@ -760,19 +760,21 @@
    key=%7B
-key
+index
 %7D%0A      
@@ -1271,17 +1271,36 @@
 100 
-$
+10%60%7D%0A        height=
 %7Bheight%7D
 %60%7D %3E
@@ -1295,18 +1295,16 @@
 %7Bheight%7D
-%60%7D
  %3E%0A     
@@ -1499,82 +1499,14 @@
 pes.
-number.isRequired.isRequired,%0A      key: React.PropTypes.string.isRequired
+string
 ,%0A  

Add feedback from comments