From c29449739957b70f6089ce0036112f7131053a0b Mon Sep 17 00:00:00 2001 From: Jesus Maximino Hernandez Date: Mon, 13 May 2019 16:57:16 -0400 Subject: [PATCH 1/8] TestMAX --- caseStudy/testmax | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 caseStudy/testmax diff --git a/caseStudy/testmax b/caseStudy/testmax new file mode 100644 index 0000000..e69de29 From 0653ac62806bf5f6dd22b259f724e8c606624320 Mon Sep 17 00:00:00 2001 From: Gerry Ascencio Date: Mon, 13 May 2019 17:01:14 -0400 Subject: [PATCH 2/8] test --- ex.txt | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 ex.txt diff --git a/ex.txt b/ex.txt new file mode 100644 index 0000000..e69de29 From f71eaf6769648d813d9d36c983fadb260ad06993 Mon Sep 17 00:00:00 2001 From: Gerry Ascencio Date: Mon, 13 May 2019 17:02:05 -0400 Subject: [PATCH 3/8] test2 --- ex.txt | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 ex.txt diff --git a/ex.txt b/ex.txt deleted file mode 100644 index e69de29..0000000 From 780f17a7ba463d1b148a0a5f4c5f8b7786fba878 Mon Sep 17 00:00:00 2001 From: Date: Tue, 14 May 2019 11:42:53 -0400 Subject: [PATCH 4/8] testmax removed --- caseStudy/testmax | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 caseStudy/testmax diff --git a/caseStudy/testmax b/caseStudy/testmax deleted file mode 100644 index e69de29..0000000 From 87eb70955d08cab54157001432765704700301a0 Mon Sep 17 00:00:00 2001 From: Kevin Villanueva Date: Wed, 15 May 2019 10:39:58 -0400 Subject: [PATCH 5/8] fdsfsd --- caseStudy/dsfsf | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 caseStudy/dsfsf diff --git a/caseStudy/dsfsf b/caseStudy/dsfsf new file mode 100644 index 0000000..e69de29 From c381c3e81daeb0c512948422ef209271fa3bee66 Mon Sep 17 00:00:00 2001 From: Kevin Villanueva Date: Wed, 15 May 2019 18:04:41 -0400 Subject: [PATCH 6/8] Built the functionality in Date.js --- caseStudy/ui/src/App.js | 49 ++++++++++++++++++----------- caseStudy/ui/src/components/Date.js | 19 ++++++++--- 2 files changed, 45 insertions(+), 23 deletions(-) diff --git a/caseStudy/ui/src/App.js b/caseStudy/ui/src/App.js index 1ca07f7..0da2185 100644 --- a/caseStudy/ui/src/App.js +++ b/caseStudy/ui/src/App.js @@ -16,6 +16,7 @@ import React from 'react'; import './style/App.css'; +import Date from './components/Date.js'; /** * TODO: @@ -42,31 +43,41 @@ class App extends React.Component{ render () { return (
+
- {/** - * TODO - * Render the StockTicker and Date components. You can use the date component twice - * for both the start and end dates. - * Add onChange props to the StockTicker and both Date components. - * These props methods should set state and help determine if the - * highchart should be displayed by changing the state of that boolean. - * Don't forget to bind these methods! - */} + {/** + * TODO + * Render the StockTicker and Date components. You can use the date component twice + * for both the start and end dates. + * Add onChange props to the StockTicker and both Date components. + * These props methods should set state and help determine if the + * highchart should be displayed by changing the state of that boolean. + * Don't forget to bind these methods! + */} + -
+
+ +                   + +
+ + {/*
*/} + {/* /!**!/*/} + {/* */} + {/*
*/} -
- {/** - * TODO - * Create a div element that shows a highchart when the ticker, start date, end date - * states ALL have values and nothing (null) otherwise. You will need to use a conditional here - * to help control rendering and pass these states as props to the component. This conditional can - * be maintained as a state object. - * http://reactpatterns.com/#conditional-rendering - */} + {/** + * TODO + * Create a div element that shows a highchart when the ticker, start date, end date + * states ALL have values and nothing (null) otherwise. You will need to use a conditional here + * to help control rendering and pass these states as props to the component. This conditional can + * be maintained as a state object. + * http://reactpatterns.com/#conditional-rendering + */}
); diff --git a/caseStudy/ui/src/components/Date.js b/caseStudy/ui/src/components/Date.js index 3034872..7d66a27 100644 --- a/caseStudy/ui/src/components/Date.js +++ b/caseStudy/ui/src/components/Date.js @@ -25,12 +25,12 @@ * https://www.npmjs.com/package/react-datepicker * https://hacker0x01.github.io/react-datepicker/ */ - +// import createFragment from 'react-addons-create-fragment'; import React from 'react'; -//import DatePicker from 'react-datepicker'; UNCOMMENT this line if you are using the DatePicker component +import DatePicker from 'react-datepicker';// UNCOMMENT this line if you are using the DatePicker component import moment from 'moment'; -//import 'react-datepicker/dist/react-datepicker.css'; UNCOMMENT this line if you are using the DatePicker component +import 'react-datepicker/dist/react-datepicker.css';// UNCOMMENT this line if you are using the DatePicker component class Date extends React.Component { constructor (props) { @@ -38,6 +38,8 @@ class Date extends React.Component { this.state = { date: moment() }; + // onChange = this.onChange() + this.handleChange = this.handleChange.bind(this); } @@ -52,8 +54,13 @@ class Date extends React.Component { * to propagate the change to App component, which will handle it via its * own onChange prop. */ + this.setState({date: date}); } + // onChange() { + // + // } + render() { return (
@@ -66,9 +73,12 @@ class Date extends React.Component { * */ } +

{this.props.text}

-
+
+ +

{this.state.date.toString()}

); @@ -78,3 +88,4 @@ class Date extends React.Component { } // Don't forget to export your component! +export default Date; \ No newline at end of file From 6571214944c6fe03f9ab9f06f9d1aa7eee00f494 Mon Sep 17 00:00:00 2001 From: Kevin Villanueva Date: Wed, 15 May 2019 18:29:31 -0400 Subject: [PATCH 7/8] Stock ticker update --- caseStudy/ui/src/App.js | 4 ++- caseStudy/ui/src/components/StockTicker.js | 39 ++++++++++++++++------ 2 files changed, 31 insertions(+), 12 deletions(-) diff --git a/caseStudy/ui/src/App.js b/caseStudy/ui/src/App.js index 0da2185..b92dd4b 100644 --- a/caseStudy/ui/src/App.js +++ b/caseStudy/ui/src/App.js @@ -17,6 +17,7 @@ import React from 'react'; import './style/App.css'; import Date from './components/Date.js'; +import StockTicker from "./components/StockTicker"; /** * TODO: @@ -55,7 +56,7 @@ class App extends React.Component{ * Don't forget to bind these methods! */} - +
                  @@ -67,6 +68,7 @@ class App extends React.Component{ {/* */} {/*
*/} +
diff --git a/caseStudy/ui/src/components/StockTicker.js b/caseStudy/ui/src/components/StockTicker.js index c018a3e..1f1cffd 100644 --- a/caseStudy/ui/src/components/StockTicker.js +++ b/caseStudy/ui/src/components/StockTicker.js @@ -39,7 +39,7 @@ * https://www.npmjs.com/package/react-select * http://jedwatson.github.io/react-select/ * https://github.com/JedWatson/react-select - * + * * react-boostrap-typeahead * https://www.npmjs.com/package/react-bootstrap-typeahead * http://ericgio.github.io/react-bootstrap-typeahead/ @@ -47,10 +47,11 @@ */ import React from 'react'; + //import {Typeahead} from 'react-bootstrap-typeahead'; UNCOMMENT this line if you are using the react-bootstrap-typeeahead component -/* If you chose to use react-boostrap-typeahead, look at AsyncTypeahead for a component that - * provides auto-complete suggestions as you type. This would require adding a search handler +/* If you chose to use react-boostrap-typeahead, look at AsyncTypeahead for a component that + * provides auto-complete suggestions as you type. This would require adding a search handler * method for an onSearch prop. * https://github.com/ericgio/react-bootstrap-typeahead/blob/master/example/examples/AsyncExample.react.js */ @@ -71,17 +72,18 @@ class StockTicker extends React.Component { * If you are having difficulty with this, you may hard code the options array from the company data provided for the * services. */ + constructor(props) { super(props); this.state = { showcompanyinfo: false, //TODO: Use this boolean to determine if the company information should be rendered company : { - symbol: '', - name: '', - city: '', - state: '', + symbol: 'GS', + name: 'Goldman Sachs', + city: 'SDCM', + state: 'NJ', sector: '', - industry: '' + industry: 'IB' } /** * TODO @@ -103,8 +105,8 @@ class StockTicker extends React.Component { * to handle errors). If you successfully retrieve this information, you can set the state objects * and render it. */ - this.setState({showinfo: true}); - + this.setState({showcompanyinfo: true}); + this.props.onChange(event); //this.props.onChange(..); Call this.props.onChange with the selected symbol to propagate it // to the App component, which will handle it via its own onChane prop, // ultimately used to fetch the data for the LineChart component. @@ -131,6 +133,7 @@ class StockTicker extends React.Component {

Stock Ticker

+
{/* useful props if you decide to use react-bootstrap-typeahead
{ +
+ {this.state.showcompanyInfo ? ( +

{this.state.company.symbol.toString()}

, +

{this.state.company.name.toString()}

, +

{this.state.company.state.toString()}

, +

{this.state.company.city.toString()}

, +

{this.state.company.industry.toString()}

+ + ) : ( +

Enter Info

+ )} + + +
/** * TODO * Create a div element that shows a company information when the ticker changes. You will need to use a conditional here @@ -160,4 +177,4 @@ class StockTicker extends React.Component { } -//Don't forget to export your component! +export default StockTicker;//Don't forget to export your component! \ No newline at end of file From d8690cc4d8df02ddbb2361651e362ec036aa2c9b Mon Sep 17 00:00:00 2001 From: Kevin Villanueva Date: Thu, 16 May 2019 00:20:39 -0400 Subject: [PATCH 8/8] combined front end components --- caseStudy/ui/src/App.js | 20 ++--- caseStudy/ui/src/components/Charts.js | 17 ++++- caseStudy/ui/src/components/StockTicker.js | 75 ++++++++++++------- .../ui/src/components/charts/LineChart.js | 52 +++++++++++-- .../ui/src/components/charts/StartDate.js | 0 .../ui/src/components/data/john_posts.json | 3 + 6 files changed, 119 insertions(+), 48 deletions(-) create mode 100644 caseStudy/ui/src/components/charts/StartDate.js create mode 100644 caseStudy/ui/src/components/data/john_posts.json diff --git a/caseStudy/ui/src/App.js b/caseStudy/ui/src/App.js index b92dd4b..200afe9 100644 --- a/caseStudy/ui/src/App.js +++ b/caseStudy/ui/src/App.js @@ -18,7 +18,9 @@ import React from 'react'; import './style/App.css'; import Date from './components/Date.js'; import StockTicker from "./components/StockTicker"; - +import LineChart from './components/charts/LineChart'; +import Charts from './components/Charts'; +import JohnData from './components/data/john_posts.json'; /** * TODO: * Import your components @@ -57,18 +59,16 @@ class App extends React.Component{ */} + + + + + +
-                  
- - {/*
*/} - {/* /!**!/*/} - {/* */} - {/*
*/} - -
@@ -81,6 +81,8 @@ class App extends React.Component{ * http://reactpatterns.com/#conditional-rendering */} + +
); } diff --git a/caseStudy/ui/src/components/Charts.js b/caseStudy/ui/src/components/Charts.js index b062c24..df18e46 100644 --- a/caseStudy/ui/src/components/Charts.js +++ b/caseStudy/ui/src/components/Charts.js @@ -16,11 +16,14 @@ import React from 'react'; import LineChart from './charts/LineChart'; +//import JohnData from './components/data/john_posts.json'; class Charts extends React.Component { constructor(props) { super(props); this.state = { + + /** * TODO * Initialize a state object to store a JavaScript object returned from the helper method. @@ -37,7 +40,7 @@ class Charts extends React.Component { dataSourceHelper(props) { props = props || this.props; - + /** * TODO * Write a helper method to make an AJAX HTTP request to your service for the @@ -74,9 +77,15 @@ class Charts extends React.Component { * * Don't forget to bind the helper method in the constructor! * */ -} - + } + render() { + + return ( +
+ +
+ ) /** * TODO * Render your LineChart component and pass the data for the chart to display via props @@ -84,4 +93,4 @@ class Charts extends React.Component { } } -// Don't forget to export your component! +export default Charts; \ No newline at end of file diff --git a/caseStudy/ui/src/components/StockTicker.js b/caseStudy/ui/src/components/StockTicker.js index 1f1cffd..5bfa0e0 100644 --- a/caseStudy/ui/src/components/StockTicker.js +++ b/caseStudy/ui/src/components/StockTicker.js @@ -47,17 +47,32 @@ */ import React from 'react'; +import Select from 'react-select'; +//import {Typeahead} from 'react-bootstrap-typeahead'; -//import {Typeahead} from 'react-bootstrap-typeahead'; UNCOMMENT this line if you are using the react-bootstrap-typeeahead component + +//UNCOMMENT this line if you are using the react-bootstrap-typeeahead component /* If you chose to use react-boostrap-typeahead, look at AsyncTypeahead for a component that * provides auto-complete suggestions as you type. This would require adding a search handler * method for an onSearch prop. * https://github.com/ericgio/react-bootstrap-typeahead/blob/master/example/examples/AsyncExample.react.js */ +const options = [ + { value: 'goldman sachs', label: 'Goldman Sachs' }, + { value: 'jpmorgan chase', label: 'JPMorgan Chase' }, + { value: 'morgan stanley', label: 'Morgan Stanley' }, + { value: 'marcus', label: 'Marcus' } +]; class StockTicker extends React.Component { - + state = { + selectedOption: null, + } + handleChange = (selectedOption) => { + this.setState({ selectedOption }); + console.log(`Option selected:`, selectedOption); + } /** * TODO * Prefetch the data required to display options fo the typeahead component. Initialize a state array with @@ -120,7 +135,7 @@ class StockTicker extends React.Component { render() { - + const { selectedOption } = this.state; /** * TODO * Render a typeahead component that uses the data prefetched from your service to display a list of companies or @@ -130,39 +145,41 @@ class StockTicker extends React.Component { */ return ( +
-
-

Stock Ticker

- -
- {/* useful props if you decide to use react-bootstrap-typeahead - - */} -
-
+

Stock Ticker

+ + { +