Working with layout moved to the Redux store and setting an event handler on...

Working with layout moved to the Redux store and setting an event handler on the window resize event.

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

@@ -4,7 +4,7 @@ const { timeDay } = require('d3-time');
 const { timeFormat } = require('d3-time-format');
 const { createSelector } = require('reselect');
 
-const { getWidth, getHeight, MARGIN } = require('./layout');
+const { layoutSelector, MARGIN } = require('./layout');
 const { xScaleSelector, yScaleSelector } = require('./scales');
 
 const yTickCount = 5;
@@ -55,24 +55,26 @@ function createAxes({xScale, yScale}, yTickSize) {
 const axesSelector = createSelector(
     xScaleSelector('current'),
     yScaleSelector,
+    layoutSelector,
     (state) => state.plotYLabel,
-    (xScale, yScale, plotYLabel) => {
+    (xScale, yScale, layout, plotYLabel) => {
         return {
-            ...createAxes({xScale, yScale}, -getWidth() + MARGIN.right),
+            ...createAxes({xScale, yScale}, -layout.width + MARGIN.right),
+            layout: layout,
             yTitle: plotYLabel
         };
     }
 );
 
 
-function appendAxes(elem, {xAxis, yAxis, yTitle}) {
+function appendAxes(elem, {xAxis, yAxis, layout, yTitle}) {
     const xLoc = {
         x: 0,
-        y: getHeight() - (MARGIN.top + MARGIN.bottom)
+        y: layout.height - (MARGIN.top + MARGIN.bottom)
     };
     const yLoc = {x: 0, y: 0};
     const yLabelLoc = {
-        x: getHeight() / -2 + MARGIN.top,
+        x: layout.height / -2 + MARGIN.top,
         y: -35
     };
 

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

@@ -10,14 +10,11 @@ const { addSVGAccessibility, addSROnlyTable } = require('../../accessibility');
 const { dispatch, link, provide } = require('../../lib/redux');
 
 const { appendAxes, axesSelector } = require('./axes');
-const { MARGIN, updateLayoutVariables } = require('./layout');
+const { ASPECT_RATIO_PERCENT, MARGIN, layoutSelector } = require('./layout');
 const { pointsSelector, validPointsSelector, isVisibleSelector } = require('./points');
 const { xScaleSelector, yScaleSelector } = require('./scales');
 const { Actions, configureStore } = require('./store');
 
-let WIDTH;
-let HEIGHT;
-let ASPECT_RATIO_PERCENT;
 
 // Function that returns the left bounding point for a given chart point.
 const bisectDate = bisector(d => d.time).left;
@@ -79,7 +76,7 @@ const getNearestTime = function (data, time) {
 };
 
 
-const plotTooltips = function (elem, {xScale, yScale, data}) {
+const plotTooltips = function (elem, {xScale, yScale, data, layout}) {
     // Create a node to hightlight the currently selected date/time.
     let focus = elem.append('g')
         .attr('class', 'focus')
@@ -90,8 +87,8 @@ const plotTooltips = function (elem, {xScale, yScale, data}) {
 
     elem.append('rect')
         .attr('class', 'overlay')
-        .attr('width', WIDTH)
-        .attr('height', HEIGHT)
+        .attr('width', layout.width)
+        .attr('height', layout.height)
         .on('mouseover', () => focus.style('display', null))
         .on('mouseout', () => focus.style('display', 'none'))
         .on('mousemove', function () {
@@ -163,13 +160,11 @@ const plotMedianPoints = function (elem, {visible, xscale, yscale, medianStatsDa
 };
 
 
-const timeSeriesGraph = function (elem) {
-    elem.append('div')
-        .attr('class', 'hydrograph-container')
-        .style('padding-bottom', ASPECT_RATIO_PERCENT)
-        .append('svg')
+const timeSeriesGraph = function (elem, layout) {
+    elem.selectAll('svg').remove();
+    elem.append('svg')
             //.attr('preserveAspectRatio', 'xMinYMin meet')
-            .attr('viewBox', `0 0 ${WIDTH} ${HEIGHT}`)
+            .attr('viewBox', `0 0 ${layout.width} ${layout.height}`)
             .call(link(addSVGAccessibility, createStructuredSelector({
                 title: state => state.title,
                 description: state => state.desc,
@@ -195,6 +190,7 @@ const timeSeriesGraph = function (elem) {
                 .call(link(plotTooltips, createStructuredSelector({
                     xScale: xScaleSelector('current'),
                     yScale: yScaleSelector,
+                    layout: layoutSelector,
                     data: pointsSelector('current')
                 })))
                 .call(link(plotMedianPoints, createStructuredSelector({
@@ -226,20 +222,21 @@ const attachToNode = function (node, {siteno} = {}) {
 
     let store = configureStore();
 
-    // Set layout variables
-    let newLayout = updateLayoutVariables(node.offsetWidth);
-    WIDTH = newLayout.width;
-    HEIGHT = newLayout.height;
-    ASPECT_RATIO_PERCENT = newLayout.aspect_ratio_percent;
-
-
+    store.dispatch(Actions.resizeTimeseriesPlot(node.offsetWidth));
     select(node)
         .call(provide(store))
-        .call(timeSeriesGraph)
         .select('.hydrograph-last-year-input')
             .on('change', dispatch(function () {
                 return Actions.toggleTimeseries('compare', this.checked);
             }));
+    select(node).append('div')
+            .attr('class', 'hydrograph-container')
+            .style('padding-bottom', ASPECT_RATIO_PERCENT)
+            .call(link(timeSeriesGraph, layoutSelector));
+
+    window.onresize = function() {
+        store.dispatch(Actions.resizeTimeseriesPlot(node.offsetWidth));
+    };
     store.dispatch(Actions.retrieveTimeseries(siteno));
 };
 

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

 // Define width, height and margin for the SVG.
 // Use a fixed size, and scale to device width using CSS.
-export let WIDTH = 800;
-export let HEIGHT = WIDTH / 2;
-export let ASPECT_RATIO_PERCENT = `${100 * HEIGHT / WIDTH}%`;
+const { createSelector } = require('reselect');
 
-export function updateLayoutVariables(width) {
-    WIDTH = width;
-    HEIGHT = WIDTH / 2;
-    ASPECT_RATIO_PERCENT = `${100 * HEIGHT / WIDTH}%`;
-    return {
-        width: WIDTH,
-        height: HEIGHT,
-        aspect_ratio_percent: ASPECT_RATIO_PERCENT
-    };
-}
-export function getWidth() {
-    return WIDTH;
-}
-export function getHeight() {
-    return HEIGHT;
-}
-
-export const MARGIN = {
+const ASPECT_RATIO = 1 / 2;
+const ASPECT_RATIO_PERCENT = `${100 * ASPECT_RATIO}%`;
+const MARGIN = {
     top: 20,
     right: 100,
     bottom: 45,
     left: 50
 };
+
+const layoutSelector = createSelector(
+    (state) => state.width,
+    (width) => {
+        return {
+            width: width,
+            height: width * ASPECT_RATIO
+        };
+    }
+);
+
+module.exports = {ASPECT_RATIO_PERCENT, MARGIN, layoutSelector}
+
+

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

@@ -2,7 +2,7 @@ const { extent } = require('d3-array');
 const { scaleLinear, scaleTime } = require('d3-scale');
 const { createSelector, defaultMemoize: memoize } = require('reselect');
 
-const { getWidth, getHeight, MARGIN } = require('./layout');
+const { layoutSelector, MARGIN } = require('./layout');
 
 const paddingRatio = 0.2;
 
@@ -95,10 +95,11 @@ function createScales(tsData, showSeries, xSize, ySize) {
  * @return {Function}           D3 scale function
  */
 const xScaleSelector = memoize(tsDataKey => createSelector(
+    layoutSelector,
     (state) => state.tsData,
-    (tsData) => {
+    (layout, tsData) => {
         if (tsData[tsDataKey]) {
-            return createXScale(tsData[tsDataKey], getWidth() - MARGIN.right);
+            return createXScale(tsData[tsDataKey], layout.width - MARGIN.right);
         } else {
             return null;
         }
@@ -112,9 +113,10 @@ const xScaleSelector = memoize(tsDataKey => createSelector(
  * @return {Function}       D3 scale function
  */
 const yScaleSelector = createSelector(
+    layoutSelector,
     (state) => state.tsData,
     (state) => state.showSeries,
-    (tsData, showSeries) => createYScale(tsData, showSeries, getHeight() - (MARGIN.top + MARGIN.bottom))
+    (layout, tsData, showSeries) => createYScale(tsData, showSeries, layout.height - (MARGIN.top + MARGIN.bottom))
 );
 
 

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

@@ -79,6 +79,12 @@ export const Actions = {
             type: 'SET_MEDIAN_STATISTICS',
             medianStatistics
         };
+    },
+    resizeTimeseriesPlot(width) {
+        return {
+            type: 'RESIZE_TIMESERIES_PLOT',
+            width
+        };
     }
 };
 
@@ -145,6 +151,12 @@ export const timeSeriesReducer = function (state={}, action) {
                 }
             };
 
+        case 'RESIZE_TIMESERIES_PLOT':
+            return {
+                ...state,
+                width: action.width
+            }
+
         default:
             return state;
     }
@@ -168,6 +180,7 @@ export const configureStore = function (initialState) {
         },
         title: '',
         desc: '',
+        width: 800,
         ...initialState
     };