lunch/js/components/BarChart.js

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}
		 * ];
		 */

		var rows = [];
		if (this.props.data.length >= 1) {
			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;
			}

			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>
				));
			}
		} else {
			rows.push((
				<tr><td>No data</td></tr>
			));
		}

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