Add charts for popular attendees/suggestions

js/components/AttendeeFrequencyChart.js

@@ -0,0 +1,23 @@
+var React = require('react');
+
+var BarChart = require('../components/BarChart');
+
+module.exports = React.createClass({
+	displayName: "AttendeeFrequencyChart",
+	render: function() {
+		var data = [];
+		for (var i = 0; i < this.props.popularAttendees.length; i++) {
+			var attendee = this.props.popularAttendees[i];
+			data.push({
+				'label': attendee.Name,
+				'value': attendee.Popularity
+			});
+		}
+
+		data.sort(function(a, b){return b.value - a.value;});
+
+		return (
+			<BarChart title="Attendee Frequency" data={data}/>
+		);
+	}
+});

js/components/BarChart.js

@@ -0,0 +1,52 @@
+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>
+		);
+	}
+});

js/components/LunchApp.js

@@ -9,6 +9,7 @@ var Modal = ReactBootstrap.Modal;
 var TopBarContainer = require('../containers/TopBarContainer');
 var RecordLunchContainer = require('../containers/RecordLunchContainer');
 var AccountSettingsModalContainer = require('../containers/AccountSettingsModalContainer');
+var LunchStats = require('../components/LunchStats');
 var NewUserForm = require('./NewUserForm');
 
 module.exports = React.createClass({
@@ -66,7 +67,8 @@ module.exports = React.createClass({
 						<Tab title="Record Lunch" eventKey={1} >
 							<RecordLunchContainer />
 						</Tab>
-						<Tab title="Statistics" eventKey={2} >stats will go here
+						<Tab title="Statistics" eventKey={2} >
+							<LunchStats />
 						</Tab>
 					</Tabs>);
 			else

js/components/LunchStats.js

@@ -0,0 +1,16 @@
+var React = require('react');
+
+var PopularSuggestionsContainer = require('../containers/PopularSuggestionsContainer');
+var AttendeeFrequencyContainer = require('../containers/AttendeeFrequencyContainer');
+
+module.exports = React.createClass({
+	displayName: "LunchStats",
+	render: function() {
+		return (
+			<div>
+				<AttendeeFrequencyContainer />
+				<PopularSuggestionsContainer />
+			</div>
+		);
+	}
+});

js/components/PopularSuggestionsChart.js

@@ -0,0 +1,23 @@
+var React = require('react');
+
+var BarChart = require('../components/BarChart');
+
+module.exports = React.createClass({
+	displayName: "PopularSuggestionsChart",
+	render: function() {
+		var data = [];
+		for (var i = 0; i < this.props.popularSuggestions.length; i++) {
+			var suggestion = this.props.popularSuggestions[i];
+			data.push({
+				'label': suggestion.RestaurantName,
+				'value': suggestion.Popularity
+			});
+		}
+
+		data.sort(function(a, b){return b.value - a.value;});
+
+		return (
+			<BarChart title="Suggestion Frequency" data={data}/>
+		);
+	}
+});

js/containers/AttendeeFrequencyContainer.js

@@ -0,0 +1,18 @@
+var connect = require('react-redux').connect;
+
+var AttendeeFrequencyChart = require('../components/AttendeeFrequencyChart');
+
+function mapStateToProps(state) {
+	return {
+		popularAttendees: state.popularAttendees
+	}
+}
+
+function mapDispatchToProps(dispatch) {
+	return {}
+}
+
+module.exports = connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(AttendeeFrequencyChart)

js/containers/PopularSuggestionsContainer.js

@@ -0,0 +1,18 @@
+var connect = require('react-redux').connect;
+
+var PopularSuggestionsChart = require('../components/PopularSuggestionsChart');
+
+function mapStateToProps(state) {
+	return {
+		popularSuggestions: state.popularSuggestions
+	}
+}
+
+function mapDispatchToProps(dispatch) {
+	return {}
+}
+
+module.exports = connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(PopularSuggestionsChart)