diff --git a/app/package.json b/app/package.json index 0c3a063c..168eba5b 100644 --- a/app/package.json +++ b/app/package.json @@ -26,6 +26,7 @@ "dateformat": "^3.0.3", "enzyme": "^3.10.0", "enzyme-adapter-react-16": "^1.15.1", + "lodash": "^4.17.15", "moment": "^2.24.0", "nano-date": "^4.1.0", "react": "^16.9.0", diff --git a/app/src/components/OrderBookSnapshot.tsx b/app/src/components/OrderBookSnapshot.tsx index cf8870e3..5db6c058 100644 --- a/app/src/components/OrderBookSnapshot.tsx +++ b/app/src/components/OrderBookSnapshot.tsx @@ -9,6 +9,7 @@ import { WithStyles, createStyles } from '@material-ui/core/styles'; import MomentUtils from '@date-io/moment'; import { MuiPickersUtilsProvider, KeyboardDatePicker } from '@material-ui/pickers'; import bigInt from 'big-integer'; +import { debounce } from 'lodash'; import moment from 'moment'; import { Styles } from '../styles/OrderBookSnapshot'; @@ -51,6 +52,18 @@ interface State { } class OrderBookSnapshot extends Component { + /** + * @desc Handles window resizing and requests a new number of data points appropriate for the new window width + */ + handleResize = debounce(() => { + const { selectedDateNano } = this.state; + if (selectedDateNano.neq(0)) { + const startTime = selectedDateNano.plus(NANOSECONDS_IN_NINE_AND_A_HALF_HOURS); + const endTime = selectedDateNano.plus(NANOSECONDS_IN_SIXTEEN_HOURS); + this.updateGraphData(startTime, endTime); + } + }, 100); + constructor(props) { super(props); @@ -85,6 +98,8 @@ class OrderBookSnapshot extends Component { }).finally(() => { this.setState({ loadingInstruments: false }); }); + + window.addEventListener('resize', this.handleResize); } componentDidUpdate(prevProps, prevState, snapshot) { @@ -94,10 +109,13 @@ class OrderBookSnapshot extends Component { } } + componentWillUnmount() { + window.removeEventListener('resize', this.handleResize); + } + /** * @desc Handles the change in instrument * @param event menu item that triggered change - * @param child */ handleInstrumentChange = (event: React.ChangeEvent) => { this.setState( @@ -120,7 +138,7 @@ class OrderBookSnapshot extends Component { * @returns {number} */ getNumDataPoints = (): number => { - return Math.trunc(window.screen.width * NUM_DATA_POINTS_RATIO); + return Math.trunc(window.innerWidth * NUM_DATA_POINTS_RATIO); }; /**