From 9040e4fd9f51bde9d2bb42152d29bf0d1a4d1375 Mon Sep 17 00:00:00 2001 From: Aaron Lindsay Date: Tue, 3 Jan 2017 11:36:06 -0500 Subject: [PATCH] Add charts for popular attendees/suggestions --- js/components/AttendeeFrequencyChart.js | 23 +++++++++ js/components/BarChart.js | 52 ++++++++++++++++++++ js/components/LunchApp.js | 4 +- js/components/LunchStats.js | 16 ++++++ js/components/PopularSuggestionsChart.js | 23 +++++++++ js/containers/AttendeeFrequencyContainer.js | 18 +++++++ js/containers/PopularSuggestionsContainer.js | 18 +++++++ 7 files changed, 153 insertions(+), 1 deletion(-) create mode 100644 js/components/AttendeeFrequencyChart.js create mode 100644 js/components/BarChart.js create mode 100644 js/components/LunchStats.js create mode 100644 js/components/PopularSuggestionsChart.js create mode 100644 js/containers/AttendeeFrequencyContainer.js create mode 100644 js/containers/PopularSuggestionsContainer.js diff --git a/js/components/AttendeeFrequencyChart.js b/js/components/AttendeeFrequencyChart.js new file mode 100644 index 0000000..7d30d23 --- /dev/null +++ b/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 ( + + ); + } +}); diff --git a/js/components/BarChart.js b/js/components/BarChart.js new file mode 100644 index 0000000..eaed00c --- /dev/null +++ b/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 (
); + + 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(( + + {rowData.label + " (" + rowData.value + ")"} +
 
+ + )); + } + + return ( + + + {rows} +
+
+ ); + } +}); diff --git a/js/components/LunchApp.js b/js/components/LunchApp.js index 29e5ca5..f0acf6a 100644 --- a/js/components/LunchApp.js +++ b/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({ - stats will go here + + ); else diff --git a/js/components/LunchStats.js b/js/components/LunchStats.js new file mode 100644 index 0000000..f235152 --- /dev/null +++ b/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 ( +
+ + +
+ ); + } +}); diff --git a/js/components/PopularSuggestionsChart.js b/js/components/PopularSuggestionsChart.js new file mode 100644 index 0000000..a84aaf1 --- /dev/null +++ b/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 ( + + ); + } +}); diff --git a/js/containers/AttendeeFrequencyContainer.js b/js/containers/AttendeeFrequencyContainer.js new file mode 100644 index 0000000..514036a --- /dev/null +++ b/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) diff --git a/js/containers/PopularSuggestionsContainer.js b/js/containers/PopularSuggestionsContainer.js new file mode 100644 index 0000000..8382ba3 --- /dev/null +++ b/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)