import React, {Component } from 'react'; import { Row, Col, } from 'react-bootstrap'; import { Slider, Card, CardContent, Typography, } from '@material-ui/core'; import { avgVolatility, netProfitArray, } from "../../utils/bsm"; import { daysTillExpiry, getCurrentDate, getMaxDate, } from "../../utils/date"; import LineChart from './lineChart'; import Positions from './positions'; // Component that handles analysis of options positions class Analysis extends Component { constructor(props) { super(props); this.state = { dateNum: 0, maxDateNum: 0, date: "", originalIV: 0, iv: 0, ivChange: 0, chartData: [], } } componentDidUpdate(prevProps, prevState) { if(this.props !== prevProps) { console.log("Calculating...") const originalIV = this.roundOne(avgVolatility(this.props.positions, this.props.quote) * 100); var date = new Date(); date.setHours(21,0,0,0); date = date.toString(); const prices = netProfitArray( this.props.positions, this.props.quote, this.props.quantity, date, 0 ); const maxDate = getMaxDate(this.props.positions.map(option => option.expiration_date)); const maxDateNum = Math.ceil(daysTillExpiry(date, maxDate)); var chartData = []; prices.forEach(obj => { chartData.push({ label: obj.underlying, profit: obj.profit, }) }) date = getCurrentDate(); this.setState({ chartData, originalIV, iv:originalIV, maxDateNum, date, ivChange:0 }); } } roundOne = (num) => { return Math.round((num + Number.EPSILON) * 10)/10; } setChartData = (arr) => { var chartData = []; arr.forEach(obj => { chartData.push({ label: obj.underlying, profit: obj.profit, }) }) return chartData; } handleIVChange = (event, newIV) => { var date = new Date(); date.setDate(date.getDate() + this.state.dateNum); const ivChange = newIV - this.state.originalIV; const prices = netProfitArray( this.props.positions, this.props.quote, this.props.quantity, date.toString(), ivChange/this.props.positions.length ); const chartData = this.setChartData(prices); this.setState({ iv:newIV, ivChange, chartData }); } handleDateChange = (event, dateNum) => { var date = new Date(); date.setDate(date.getDate() + dateNum); const dateString = date.getMonth() + 1 + '-' + date.getDate() + '-' + date.getFullYear(); const prices = netProfitArray( this.props.positions, this.props.quote, this.props.quantity, date.toString(), this.state.ivChange/this.props.positions.length ); const chartData = this.setChartData(prices); this.setState({dateNum, date:dateString, chartData}) } render() { return( <> <Positions positions={this.props.positions} quantity={this.props.quantity} quote={this.props.quote} /> <br /> <Row> <Col sm={{span:5, offset:1}}> <Card> <CardContent> <h6> Implied volatility: {this.state.iv}% (avg: {this.state.originalIV}%) </h6> <Slider defaultValue={this.state.originalIV} value={this.state.iv} onChange={this.handleIVChange} min={0} max={150} /> </CardContent> </Card> </Col> <Col sm={{span:5}}> <Card> <CardContent> <h6> Days till last option expiry: {this.state.maxDateNum - this.state.dateNum} ({this.state.date}) </h6> <Slider value={this.state.dateNum} onChange={this.handleDateChange} min={0} max={this.state.maxDateNum} /> </CardContent> </Card> </Col> </Row> <br /> <Row> <Col sm={{span:12}}> <LineChart data={this.state.chartData}/> </Col> </Row> </> ) } } export default Analysis;