diff --git a/caseStudy/dsfsf b/caseStudy/dsfsf new file mode 100644 index 0000000..e69de29 diff --git a/caseStudy/ui/src/App.js b/caseStudy/ui/src/App.js index 1ca07f7..200afe9 100644 --- a/caseStudy/ui/src/App.js +++ b/caseStudy/ui/src/App.js @@ -16,7 +16,11 @@ 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 @@ -42,31 +46,42 @@ 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/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/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 diff --git a/caseStudy/ui/src/components/StockTicker.js b/caseStudy/ui/src/components/StockTicker.js index c018a3e..5bfa0e0 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,16 +47,32 @@ */ import React from 'react'; -//import {Typeahead} from 'react-bootstrap-typeahead'; UNCOMMENT this line if you are using the react-bootstrap-typeeahead component +import Select from 'react-select'; +//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 */ +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 @@ -71,17 +87,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 +120,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. @@ -118,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 @@ -128,24 +145,41 @@ class StockTicker extends React.Component { */ return ( +
-
-

Stock Ticker

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

Stock Ticker

+ { +