Merge pull request #174 from Lercerss/bug-172

[#172] Fixed issue with X-axis on window resize
Lercerss · Feb 5, 2020 · 8fe9914 · 8fe9914
2 parents 4a9248a + 9b9baa4
commit 8fe9914
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git 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
@@ -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<WithStyles, State> {
+    /**
+     * @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<WithStyles, State> {
         }).finally(() => {
             this.setState({ loadingInstruments: false });
         });
+
+        window.addEventListener('resize', this.handleResize);
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
@@ -94,10 +109,13 @@ class OrderBookSnapshot extends Component<WithStyles, State> {
         }
     }
 
+    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<any>) => {
         this.setState(
@@ -120,7 +138,7 @@ class OrderBookSnapshot extends Component<WithStyles, State> {
      * @returns {number}
      */
     getNumDataPoints = (): number => {
-        return Math.trunc(window.screen.width * NUM_DATA_POINTS_RATIO);
+        return Math.trunc(window.innerWidth * NUM_DATA_POINTS_RATIO);
     };
 
     /**