Villanueva

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 (
           <div className="page-display">
+
               <div className="input">
-              {/**
-               * 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!
+                   */}
+
+                  <StockTicker />
+
 
-                <div className="date-range">
 
-                </div>
+                <Charts  />
+                <LineChart dataOne={JohnData.data}  />
+
+                  <div className="date-range">
+                      <Date text="Start Date"/>
+                      <Date text="End Date"/>
+                  </div>
               </div>
 
 
-                 {/**
-                   *  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
+               */}
+
+
 
           </div>
       );

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,14 +77,20 @@ class Charts extends React.Component {
          *
          *  Don't forget to bind the helper method in the constructor!
          * */
-}
-    
+    }
+
     render() {
+
+        return (
+            <div>
+                <LineChart />
+            </div>
+        )
         /**
          * TODO
          * Render your LineChart component and pass the data for the chart to display via props
          */
     }
 }
 
-// Don't forget to export your component!
+export default Charts;

caseStudy/ui/src/components/Date.js

@@ -25,19 +25,21 @@
  * 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) {
         super(props)
         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 (
             <div className="date">
@@ -66,9 +73,12 @@ class Date extends React.Component {
                      *
                      */
                 }
+
                 <p><strong>{this.props.text}</strong></p>
-                <div className="date-input">
 
+                <div className="date-input">
+                    <DatePicker selected={this.state.date} onChange={this.handleChange}/>
+                    <p>{this.state.date.toString()}</p>
                 </div>
             </div>
         );
@@ -78,3 +88,4 @@ class Date extends React.Component {
 }
 
 // Don't forget to export your component!
+export default Date;

caseStudy/ui/src/components/StockTicker.js

@@ -39,24 +39,40 @@
  * 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/
  * https://github.com/ericgio/react-bootstrap-typeahead/blob/master/example/examples/BasicBehaviorsExample.react.js (note this is not ES2015)
  */
 
 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 (
+
             <div className="stockticker">
-                <div className="ticker-input">
-                    <p><strong>Stock Ticker</strong></p>
-                    <div className="stockticker-typeahead">
-                        {/* useful props if you decide to use react-bootstrap-typeahead
-                        <Typeahead
-                             align=
-                             filterBy=
-                             labelKey=
-                             onChange={this.handleChange}
-                             minLength=
-                             placeholder="Company Name/Ticker"
-                             options=
-                        />
-                        */}
-                    </div>
-                </div>
+                <p><strong> Stock Ticker   </strong></p>
+
                 {
+                    <Select
+                        className= "ticker-input"
+                        defaultInputValue={"Select Company"}
+                        value={selectedOption}
+                        onChange={this.handleChange}
+                        options={options}
+                        isMulti
+                    />
+                }
+
+
+                {
+                    <div>
+
+                        {/* {this.selectedOption= "Goldman Sachs" ? (
+                    <p>{this.state.company.symbol.toString()}</p>,
+                    <p>{this.state.company.name.toString()}</p>,
+                    <p>{this.state.company.state.toString()}</p>,
+                    <p>{this.state.company.city.toString()}</p>,
+                    <p>{this.state.company.industry.toString()}</p>
+
+                    ) : (
+                    <p> </p>
+              )} */}
+
+
+                    </div>
+
+
+
                     /**
                      *  TODO
                      *  Create a div element that shows a company information when the ticker changes. You will need to use a conditional here
@@ -160,4 +194,4 @@ class StockTicker extends React.Component {
 
 }
 
-//Don't forget to export your component!
+export default StockTicker;//Don't forget to export your component!