Merge pull request #2 from math-dot-random/featurebranch

Stock chart changes

Author: Cokane415

FEC/README.md

@@ -1,38 +1,20 @@
- Project Name
 
-> Project description
+> Dynamically generated stock price history chart using a mysql database
 
 ## Related Projects
 
-  - https://github.com/teamName/repo
-  - https://github.com/teamName/repo
-  - https://github.com/teamName/repo
-  - https://github.com/teamName/repo
+  - https://github.com/math-dot-random/earnings-chart
+  - https://github.com/math-dot-random/trade-panel
+  - https://github.com/math-dot-random/price-paid-chart
+  - https://github.com/math-dot-random/suggestions
 
-## Table of Contents
+  ## Directions
 
-1. [Usage](#Usage)
-1. [Requirements](#requirements)
-1. [Development](#development)
+ 1. To create mysql database execute this file from the command line by typing:
+  mysql -u root -p < schema.sql
 
-## Usage
+  2. To seed data  execute this file from the command line by typing:
+  mysql -u root -p < mysqldata.sql
 
-> Some usage instructions
 
-## Requirements
 
-An `nvmrc` file is included if using [nvm](https://github.com/creationix/nvm).
-
-- Node 6.13.0
-- etc
-
-## Development
-
-### Installing Dependencies
-
-From within the root directory:
-
-```sh
-npm install -g webpack
-npm install
-```

FEC/client/src/components/App.jsx

@@ -1,18 +1,45 @@
 import React from 'react';
 const $ = require('jquery');
-
+import StockChart from './StockChart.jsx';
 
 class App extends React.Component {
     constructor(props) {
         super(props);
-    }
+        this.state = {
+            priceData:[],
+            currentPrice: 0,
+            stockName: '',
+            date: new Date(),
+            stockData: [],
+            closingCost: 0,
+            type: '1D',
+            ticker: 'TSLA',
 
+        }
+        this.retrieveData = this.retrieveData.bind(this);
+        this.handleGraphTypeChange = this.handleGraphTypeChange.bind(this);
+        this.generateStockDataArray = this.generateStockDataArray.bind(this);
+    }
 
     componentDidMount() {
+        //retrieve the path and filename of current page
+        let pathName = window.location.pathname.match(/\/stocks\/(\w+)/i);
+        let ticker = pathName ? pathName[1] : null;
+        if (ticker) {
+           this.setState({ticker}, () => this.retrieveData());
+        }
+    }
+
+    //a function that makes an http GET request using the ticker and graph type 
+    retrieveData() {
         $.ajax({
-            url: '/api/stocks/prices',
+            url: `/api/stocks/${this.state.ticker}/prices/${this.state.type}`,
             type: 'GET',
             success: (data) => {
+                this.setState({
+                    priceData: data,
+                    stockName: data[0].name
+                }, () => this.generateStockDataArray())
                 console.log('GET request successful', data);
             },
             error: (err) => {
@@ -21,14 +48,104 @@ class App extends React.Component {
         })
     }
 
+    //a function that updates the type and data on the state when the graph type is changed
+    handleGraphTypeChange(event) {
+        event.preventDefault();
+        this.setState({
+            type: event.target.name
+        }, () => this.retrieveData())
+    }
+
+    //a function that creates a stock data object for each retrieved price data point
+    generateStockDataArray() {
+        let graphData = [];
+        let today = this.state.date;
+        let type = this.state.type;
+        let dd = String(today.getDate()).padStart(2, '0');
+        let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
+        let yyyy = today.getFullYear();
+        let month;
+        let schedule = ['9:00 AM', '9:30 AM', '10:00 AM', '10:30 AM', '11:30 AM', '12:00 PM', '12:30 PM', '1:00 PM', '1:30 PM', '2:00 PM', '2:30 PM', '3:00 PM', '3:30 PM', '4:00 PM', '4:30 PM', '5:00 PM']
+        if(mm === 0) {
+            month = 'JAN';
+        } else if (mm === 1) {
+            month = 'FEB';
+        }else if (mm === 2) {
+            month = 'MAR';
+        }else if (mm === 3) {
+            month = 'APR';
+        }else if (mm === 4) {
+            month = 'MAY';
+        }else if (mm === 5) {
+            month = 'JUN';
+        }else if (mm === 6) {
+            month = 'JUL';
+        }else if (mm === 7) {
+            month = 'AUG';
+        }else if (mm === 8) {
+            month = 'SEPT';
+        }else if (mm === 9) {
+            month = 'OCT';
+        }else if (mm === 10) {
+            month = 'NOV';
+        }else if (mm === 11) {
+            month = 'DEC'
+        }
+        const data = this.state.priceData.slice();
+        if (type === '1D') {
+            for (var i = 0; i < data.length; i++) {
+                    graphData.push({dateString: `${schedule[i]} ET`, x: i, y: data[i].price});
+            }
+            this.setState({
+                stockData: graphData
+            })
+        } else if (type === '1W') {
+            for (var i = 0; i < data.length; i++) {
+                graphData.push({dateString: `${schedule[i]}, ${month} ${dd} ET`, x: i, y: data[i].price});
+            }
+            this.setState({
+                stockData: graphData
+            })
+        } else if (type === '1M') {
+            for (var i = 0; i < data.length; i++) {
+                graphData.push({dateString: `${schedule[i]}, ${month} ${dd} ET`, x: i, y: data[i].price});
+            }
+            this.setState({
+                stockData: graphData
+            })
+        } else if (type ==='3M') {
+            for (var i = 0; i < data.length; i++) {
+                graphData.push({dateString: `${schedule[i]}, ${month} ${dd} ET`, x: i, y: data[i].price});
+            }
+            this.setState({
+                stockData: graphData
+            })
+        } else if (type === '1Y') {
+            for (var i = 0; i < data.length; i++) {
+                graphData.push({dateString: today, x: i, y: data[i].price});
+            }
+            this.setState({
+                stockData: graphData
+            })
+        } else if (type === '5Y') {
+            for (var i = 0; i < data.length; i++) {
+                graphData.push({dateString: today, x: i, y: data[i].price});
+            }
+            this.setState({
+                stockData: graphData
+            })
+        }
+    }
+
     render () {
         return (
             <div>
-               <h1> Robinhood.com </h1>
-               <h3> Stock Chart </h3>
+                <StockChart currentPrice={this.state.currentPrice} stockName={this.state.stockName} stockData={this.state.stockData} market={this.state.market} handleGraphTypeChange={this.handleGraphTypeChange} type={this.state.type}/>
             </div>
+
         )
     }
-}
+};
+
+export default App;
 
-export default App;

FEC/client/src/components/LineChart.jsx

@@ -0,0 +1,126 @@
+import React from 'react';
+
+class LineChart extends React.Component {
+    constructor(props) {
+        super(props);
+
+      this.state = {
+      }
+        this.getMinX = this.getMinX.bind(this);
+        this.getMaxX = this.getMaxX.bind(this);
+        this.getMinY = this.getMinY.bind(this);
+        this.getMaxY = this.getMaxY.bind(this);
+        this.getSvgX = this.getSvgX.bind(this);
+        this.getSvgY = this.getSvgY.bind(this);
+
+    }
+
+// GET MAX & MIN X
+//x min and max are the first and last values in the data array
+  getMinX() {
+    console.log('stockData', this.props.stockData);
+    const data = this.props.stockData;
+    if (data.length > 0) {
+      return data[0].x;
+    } else {
+      return;
+    }
+
+  }
+  getMaxX() {
+    const data = this.props.stockData;
+    if (data.length > 0) {
+      return data[data.length - 1].x;
+    } else {
+      return;
+    }
+  }
+
+// GET MAX & MIN Y
+//a function that reduces the input data array and returns a minimum y value
+  getMinY() {
+    const data = this.props.stockData;
+    if (data.length > 0) {
+      return data.reduce((min, p) => p.y < min ? p.y : min, data[0].y);
+    }
+  }
+
+  //a function that reduces the input data array and returns a maximum y value
+  getMaxY() {
+    const data = this.props.stockData;
+    if (data.length > 0) {
+    return data.reduce((max, p) => p.y > max ? p.y : max, data[0].y);
+    } else {
+      return;
+    }
+  }
+
+  //LINE CHART COORDINATE HELPER FUNCTIONS
+
+  //a function that creates an x coordinate point
+  getSvgX(x) {
+    const {svgWidth} = this.props;
+    return (x / this.getMaxX() * svgWidth);
+  }
+
+  //a function that creates an y coordinate point
+  getSvgY(y) {
+    const {svgHeight} = this.props;
+    return svgHeight - (y / this.getMaxY() * svgHeight);
+  }
+
+  //MAKE PATH
+  //a function that creates the svg line graph by generating the html path
+  makePath() {
+    const data = this.props.stockData;
+    if (!data.length) {
+      return;
+    } else {
+      const {color} = this.props;
+      let pathD = `M  ${this.getSvgX(data[0].x)} ${this.getSvgY(data[0].y)} `;
+      pathD += data.map((point) => {
+        return `L ${this.getSvgX(point.x)} ${this.getSvgY(point.y)} `;
+      });
+          return (
+              <path className="stock_chart_path" d={pathD} style={{stroke: color, strokeWidth: 3, fill: "none"}} />
+          );
+      }
+  }
+
+    //Create Data Point Line
+    makeDottedLine() {
+        const minX = this.getMinX();
+        const maxX = this.getMaxX();
+        const minY = this.getMinY();
+        return (
+          <g className="stock_chart_line">
+            <line
+              style={{stroke: "black", strokeWidth: 1, fill: "none", strokeDasharray:`1, ${676/(this.props.stockData.length)}`, strokeDashoffset: 0}}
+              x1={this.getSvgX(minX)} y1={this.getSvgY(minY)}
+              x2={this.getSvgX(maxX)} y2={this.getSvgY(minY)} />
+          </g>
+          );
+      }
+
+    render() {
+        const {svgHeight, svgWidth} = this.props;
+        const graph = this.props.stockData.length ? (<svg viewBox={`0 0 ${svgWidth} ${svgHeight}`} width="676" height="196">
+          {this.makePath()}
+          {this.makeDottedLine()}
+        </svg>) : (<div> Graph Currently Unavailable </div>);
+        return (
+            <div>
+              {graph}
+            </div>
+        )
+    }
+}
+
+LineChart.defaultProps = {
+  data: [],
+  color: '#21CE99',
+  svgHeight: 196,
+  svgWidth: 676
+}
+
+  export default LineChart;