var React = require('react');

var Panel = require('react-bootstrap').Panel;

module.exports = React.createClass({
	displayName: "BarChart",
	render: function() {
		/* Expects 'this.props.data' to be in the form:
		 * var data = [
		 * 	{'Label': 'foo', 'Value': 1.4},
		 * 	{'Label': 'bar', 'Value': 8}
		 * ];
		 */
		if (this.props.data.length < 1)
			return (<div />);

		var max = parseFloat(this.props.data[0].Value);
		var min = parseFloat(this.props.data[0].Value);
		for (var i = 0; i < this.props.data.length; i++) {
			var cur = parseFloat(this.props.data[i].Value);
			if (cur > max)
				max = cur;
			if (cur < min)
				min = cur;
		}

		var rows = [];
		for (var i = 0; i < this.props.data.length; i++) {
			var rowData = this.props.data[i];
			if ((max - min) == 0.0)
				var percent = 100;
			else if (min < 0)
				var percent = 100*(parseFloat(rowData.Value)-min)/(max-min);
			else
				var percent = 100*parseFloat(rowData.Value)/max;
			rows.push((
				<tr key={i}>
					<td style={{'width': '20%'}}>{rowData.Label + " (" + rowData.Value + ")"}</td>
					<td style={{'width': '80%'}}><div style={{'width': percent + "%", 'backgroundColor': 'steelblue'}}>&nbsp;</div></td>
				</tr>
			));
		}

		return (
			<Panel header={this.props.title}>
			<table style={{'width': '100%'}}><tbody>
				{rows}
			</tbody></table>
			</Panel>
		);
	}
});