aclindsa/lunch
1
0
Fork 0
Code Releases Activity

Add more reports

Browse Source
This commit is contained in:
Aaron Lindsay
2017-01-08 09:47:30 -05:00
parent 908e10736a
commit 4e547fe4fd
16 changed files with 357 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
js/components/AttendeeFrequencyChart.js
View File

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

16
js/components/BarChart.js
View File

@ -7,17 +7,17 @@ module.exports = React.createClass({
render: function() {
/* Expects 'this.props.data' to be in the form:
* var data = [
* {'label': 'foo', 'value': 1.4},
* {'label': 'bar', 'value': 8}
* {'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);
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);
var cur = parseFloat(this.props.data[i].Value);
if (cur > max)
max = cur;
if (cur < min)
@ -30,12 +30,12 @@ module.exports = React.createClass({
if ((max - min) == 0.0)
var percent = 100;
else if (min < 0)
var percent = 100*(parseFloat(rowData.value)-min)/(max-min);
var percent = 100*(parseFloat(rowData.Value)-min)/(max-min);
else
var percent = 100*parseFloat(rowData.value)/max;
var percent = 100*parseFloat(rowData.Value)/max;
rows.push((
<tr key={i}>
<td style={{'width': '20%'}}>{rowData.label + " (" + rowData.value + ")"}</td>
<td style={{'width': '20%'}}>{rowData.Label + " (" + rowData.Value + ")"}</td>
<td style={{'width': '80%'}}><div style={{'width': percent + "%", 'backgroundColor': 'steelblue'}}>&nbsp;</div></td>
</tr>
));

6
js/components/LunchApp.js
View File

@ -9,7 +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 LunchStatsContainer = require('../containers/LunchStatsContainer');
var NewUserForm = require('./NewUserForm');
module.exports = React.createClass({
@ -67,8 +67,8 @@ module.exports = React.createClass({
<Tab title="Record Lunch" eventKey={1} >
<RecordLunchContainer />
</Tab>
<Tab title="Statistics" eventKey={2} >
<LunchStats />
<Tab title="Reports" eventKey={2} >
<LunchStatsContainer />
</Tab>
</Tabs>);
else

43
js/components/LunchStats.js
View File

@ -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>
);
}

23
js/components/PopularSuggestionsChart.js
View File

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