include window size in the redux store

assets/src/scripts/components/hydrograph/index.js

@@ -287,7 +287,7 @@ const attachToNode = function (node, {siteno} = {}) {
             }));
 
     window.onresize = function() {
-        store.dispatch(Actions.resizeTimeseriesPlot(node.offsetWidth));
+        store.dispatch(Actions.resizeTimeseriesPlot(window.innerWidth, node.offsetWidth));
     };
     store.dispatch(Actions.retrieveTimeseries(siteno));
 };

assets/src/scripts/components/hydrograph/index.spec.js

@@ -167,6 +167,7 @@ describe('Hydrograph charting module', () => {
                 title: 'My Title',
                 desc: 'My Description',
                 showMedianStatsLabel: false,
+                windowWidth: 400,
                 width: 400,
                 currentParameterCode: '00060'
             });
@@ -217,7 +218,7 @@ describe('Hydrograph charting module', () => {
         });
 
         it('should not have tooltips for the select series table when the screen is large', () => {
-            store.dispatch(Actions.resizeTimeseriesPlot(800));
+            store.dispatch(Actions.resizeUI(800, 800));
             expect(selectAll('table .tooltip-table').size()).toBe(0);
         });
     });

assets/src/scripts/components/hydrograph/layout.js

@@ -17,20 +17,25 @@ const SPARK_LINE_DIM = {
     height: 30
 }
 
+const SMALL_SCREEN_WIDTH = 481; // size of a small screen as defined in uswds style sheets
+
 /*
  * @param {Object} state - Redux store
  * @return {Object} containing width and height properties.
  */
 const layoutSelector = createSelector(
     (state) => state.width,
-    (width) => {
+    (state) => state.windowWidth,
+    (width, windowWidth) => {
         return {
             width: width,
-            height: width * ASPECT_RATIO
+            height: width * ASPECT_RATIO,
+            windowWidth: windowWidth
         };
     }
 );
 
-module.exports = {ASPECT_RATIO, ASPECT_RATIO_PERCENT, MARGIN, CIRCLE_RADIUS, layoutSelector, SPARK_LINE_DIM};
+module.exports = {ASPECT_RATIO, ASPECT_RATIO_PERCENT, MARGIN, CIRCLE_RADIUS, layoutSelector, SPARK_LINE_DIM,
+    SMALL_SCREEN_WIDTH};
 
 

assets/src/scripts/components/hydrograph/layout.spec.js

@@ -3,9 +3,10 @@ const { layoutSelector, ASPECT_RATIO } = require('./layout');
 
 describe('points module', () => {
     it('Should return the width and height with the predefined ASPECT_RATIO', () => {
-        let layout = layoutSelector({width: 200});
+        let layout = layoutSelector({width: 200, windowWidth: 600});
         expect(layout.width).toEqual(200);
         expect(layout.height).toEqual(200 * ASPECT_RATIO);
+        expect(layout.windowWidth).toEqual(600);
     });
 });
 

assets/src/scripts/components/hydrograph/parameters.js

@@ -4,7 +4,7 @@ const { select } = require('d3-selection');
 
 const { Actions } = require('./store');
 const { currentDataSelector } = require('./timeseries');
-const { SPARK_LINE_DIM } = require('./layout');
+const { SPARK_LINE_DIM, SMALL_SCREEN_WIDTH } = require('./layout');
 const { createXScale, singleSeriesYScale } = require('./scales');
 const { dispatch, link } = require('../../lib/redux');
 
@@ -79,8 +79,7 @@ export const addSparkLine = function(svgSelection, {tsData}) {
 export const plotSeriesSelectTable = function (elem, {availableTimeseries, layout}) {
     elem.select('#select-timeseries').remove();
 
-    const smallScreenWidth = 481; // size of a small screen as defined in uswds style sheets
-    const screenSizeCheck = layout.width <= smallScreenWidth;
+    const screenSizeCheck = layout.windowWidth <= SMALL_SCREEN_WIDTH;
 
     let columnHeaders;
     if (screenSizeCheck) {

assets/src/scripts/components/hydrograph/store.js

@@ -86,9 +86,10 @@ export const Actions = {
             compareTime
         };
     },
-    resizeTimeseriesPlot(width) {
+    resizeUI(windowWidth, width) {
         return {
-            type: 'RESIZE_TIMESERIES_PLOT',
+            type: 'RESIZE_UI',
+            windowWidth,
             width
         };
     },
@@ -177,9 +178,10 @@ export const timeSeriesReducer = function (state={}, action) {
                 }
             };
 
-        case 'RESIZE_TIMESERIES_PLOT':
+        case 'RESIZE_UI':
             return {
                 ...state,
+                windowWidth: action.windowWidth,
                 width: action.width
             };
 
@@ -216,6 +218,7 @@ export const configureStore = function (initialState) {
             medianStatistics: false
         },
         currentParameterCode: null,
+        windowWidth: 1024,
         width: 800,
         showMedianStatsLabel: false,
         tooltipFocusTime: {

assets/src/scripts/components/hydrograph/store.spec.js

@@ -47,8 +47,9 @@ describe('Redux store', () => {
         });
 
         it('should create an action to resize plot', () => {
-            expect(Actions.resizeTimeseriesPlot(100)).toEqual({
-                type: 'RESIZE_TIMESERIES_PLOT',
+            expect(Actions.resizeUI(800, 100)).toEqual({
+                type: 'RESIZE_UI',
+                windowWidth: 800,
                 width: 100
             });
         });
@@ -131,11 +132,13 @@ describe('Redux store', () => {
             });
         });
 
-        it('should handle RESIZE_TIMESERIES_PLOT', () => {
+        it('should handle RESIZE_UI', () => {
             expect(timeSeriesReducer({}, {
-                type: 'RESIZE_TIMESERIES_PLOT',
+                type: 'RESIZE_UI',
+                windowWidth: 800,
                 width: 100
             })).toEqual({
+                windowWidth: 800,
                 width: 100
             });
         });