Add suggestion veto ratio report

js/components/LunchStats.js

@@ -6,6 +6,7 @@ var DropdownButton = ReactBootstrap.DropdownButton;
 var MenuItem = ReactBootstrap.MenuItem;
 
 var BarChart = require('../components/BarChart');
+var RatioBarChart = require('../components/RatioBarChart');
 
 module.exports = React.createClass({
 	displayName: "LunchStats",
@@ -15,7 +16,12 @@ module.exports = React.createClass({
 		};
 	},
 	selectReport: function(reportId) {
-		this.props.fetchReport(reportId);
+		if (reportId == "suggestion-veto-ratio") {
+			this.props.fetchReport("suggestions");
+			this.props.fetchReport("vetoed-suggestions");
+		} else {
+			this.props.fetchReport(reportId);
+		}
 		this.setState({
 			selectedReportId: reportId
 		});
@@ -27,7 +33,14 @@ module.exports = React.createClass({
 			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}/>);
+			chart=(<BarChart title={report.Title} data={data}/>);
+		} else if (this.state.selectedReportId == "suggestion-veto-ratio" &&
+				this.props.reports.hasOwnProperty("suggestions") &&
+				this.props.reports.hasOwnProperty("vetoed-suggestions")) {
+			chart=(<RatioBarChart
+				title="Suggestion Veto Ratio"
+				numerator={this.props.reports['vetoed-suggestions'].Data}
+				denominator={this.props.reports['suggestions'].Data}/>);
 		}
 
 		return (
@@ -40,6 +53,7 @@ module.exports = React.createClass({
 					<MenuItem eventKey="suggestions">Suggestion Frequency</MenuItem>
 					<MenuItem eventKey="non-vetoed-suggestions">Non-Vetoed Suggestions</MenuItem>
 					<MenuItem eventKey="vetoed-suggestions">Vetoed Suggestions</MenuItem>
+					<MenuItem eventKey="suggestion-veto-ratio">Veto Ratio</MenuItem>
 					<MenuItem eventKey="attendees">Attendee Frequency</MenuItem>
 				</DropdownButton>
 				</ButtonGroup>

js/components/RatioBarChart.js

@@ -0,0 +1,38 @@
+var React = require('react');
+
+var BarChart = require('../components/BarChart')
+
+module.exports = React.createClass({
+	displayName: "RatioBarChart",
+	render: function() {
+		/* Expects 'this.props.numerator' and '.denominator' to be in the form:
+		 * [
+		 * 	{'Label': 'foo', 'Value': 1.4},
+		 * 	{'Label': 'bar', 'Value': 8}
+		 * ]
+		 */
+		if (this.props.denominator.length < 1)
+			return (<div />);
+
+		var numeratorMap = {};
+		for (var i = 0; i < this.props.numerator.length; i++) {
+			var val = this.props.numerator[i];
+			numeratorMap[val.Label] = val.Value;
+		}
+
+		var data = []
+		for (var i = 0; i < this.props.denominator.length; i++) {
+			var val = this.props.denominator[i];
+			if (numeratorMap.hasOwnProperty(val.Label)) {
+				data.push({'Label': val.Label, 'Value': 1.0*numeratorMap[val.Label]/val.Value});
+			} else {
+				data.push({'Label': val.Label, 'Value': 0});
+			}
+		}
+		data.sort(function(a, b){return b.Value - a.Value;});
+
+		return (
+			<BarChart title={this.props.title} data={data} />
+		);
+	}
+});