Add more reports

js/components/LunchStats.js

@@ -1,15 +1,50 @@
 var React = require('react');
 
-var PopularSuggestionsContainer = require('../containers/PopularSuggestionsContainer');
-var AttendeeFrequencyContainer = require('../containers/AttendeeFrequencyContainer');
+var ReactBootstrap = require('react-bootstrap');
+var ButtonGroup = ReactBootstrap.ButtonGroup;
+var DropdownButton = ReactBootstrap.DropdownButton;
+var MenuItem = ReactBootstrap.MenuItem;
+
+var BarChart = require('../components/BarChart');
 
 module.exports = React.createClass({
 	displayName: "LunchStats",
+	getInitialState: function() {
+		return {
+			selectedReportId: null
+		};
+	},
+	selectReport: function(reportId) {
+		this.props.fetchReport(reportId);
+		this.setState({
+			selectedReportId: reportId
+		});
+	},
 	render: function() {
+		var chart = (<div>Please select a report from above</div>);
+		if (this.state.selectedReportId &&
+				this.props.reports.hasOwnProperty(this.state.selectedReportId)) {
+			var report = this.props.reports[this.state.selectedReportId];
+			var data = report.Data;
+			data.sort(function(a, b){return b.Value - a.Value;});
+			var chart=(<BarChart title={report.Title} data={data}/>);
+		}
+
 		return (
 			<div>
-				<AttendeeFrequencyContainer />
-				<PopularSuggestionsContainer />
+				<ButtonGroup bsClass="lunch-report-dropdown">
+				<DropdownButton
+						title="Select Report"
+						id="lunch-report-selection-dropdown"
+						onSelect={this.selectReport}>
+					<MenuItem eventKey="suggestions">Suggestion Frequency</MenuItem>
+					<MenuItem eventKey="non-vetoed-suggestions">Non-Vetoed Suggestions</MenuItem>
+					<MenuItem eventKey="vetoed-suggestions">Vetoed Suggestions</MenuItem>
+					<MenuItem eventKey="attendees">Attendee Frequency</MenuItem>
+				</DropdownButton>
+				</ButtonGroup>
+
+				{chart}
 			</div>
 		);
 	}