diff --git a/assets/src/scripts/components/hydrograph/cursor.js b/assets/src/scripts/components/hydrograph/cursor.js index c01685ed0d10c1cf6e8ac1c5c23b6cf5a9b03a33..3314260785ddc976647e97c9e83253e11a63d6b1 100644 --- a/assets/src/scripts/components/hydrograph/cursor.js +++ b/assets/src/scripts/components/hydrograph/cursor.js @@ -21,8 +21,11 @@ export const cursorOffsetSelector = createSelector( xScaleSelector('current'), state => state.timeSeriesState.cursorOffset, (xScale, cursorOffset) => { - // If cursorOffset is unset, default to the last offset - if (!cursorOffset) { + // If cursorOffset is false, don't show it + if (cursorOffset === false) { + return null; + // If cursorOffset is otherwise unset, default to the last offset + } else if (!cursorOffset) { const domain = xScale.domain(); return domain[1].getTime() - domain[0].getTime(); } else { diff --git a/assets/src/scripts/components/hydrograph/cursor.spec.js b/assets/src/scripts/components/hydrograph/cursor.spec.js index 07013c20de3048a12f7031622b771d029dabbb09..9ee8c3c0b1df5ae4120c1009201ae4c92373b3ba 100644 --- a/assets/src/scripts/components/hydrograph/cursor.spec.js +++ b/assets/src/scripts/components/hydrograph/cursor.spec.js @@ -1,9 +1,9 @@ const { select } = require('d3-selection'); -const { configureStore } = require('../../store'); +const { Actions, configureStore } = require('../../store'); const { provide } = require('../../lib/redux'); -const { cursorSlider, getNearestTime, tsCursorPointsSelector } = require('./cursor'); +const { cursorSlider, getNearestTime, tsCursorPointsSelector, cursorOffsetSelector } = require('./cursor'); @@ -413,4 +413,22 @@ describe('Cursor module', () => { }); }); }); + + fdescribe('cursorOffsetSelector', () => { + let store; + beforeEach(() => { + store = configureStore(TEST_STATE_ONE_VAR); + }); + + it('returns null when false', () => { + store.dispatch(Actions.setCursorOffset(false)); + expect(cursorOffsetSelector(store.getState())).toBe(null); + }); + + it('returns last point when null', () => { + store.dispatch(Actions.setCursorOffset(null)); + const cursorRange = DATA[4].dateTime.getTime() - DATA[0].dateTime.getTime(); + expect(cursorOffsetSelector(store.getState())).toBe(cursorRange); + }); + }); }); diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js index 7b4256bd75b9a46f9efa259b10f8fade5e6c31d0..0be6fe331311eeb2d86c4a78188bf87328fd4de8 100644 --- a/assets/src/scripts/components/hydrograph/index.js +++ b/assets/src/scripts/components/hydrograph/index.js @@ -400,7 +400,7 @@ const createDaterangeControls = function(elem, {siteno, showControls}) { } }; -const attachToNode = function (store, node, {siteno, parameter, compare} = {}) { +const attachToNode = function (store, node, {siteno, parameter, compare, cursorOffset} = {}) { if (!siteno) { select(node).call(drawMessage, 'No data is available.'); return; @@ -419,6 +419,11 @@ const attachToNode = function (store, node, {siteno, parameter, compare} = {}) { store.dispatch(Actions.toggleTimeSeries('compare', true)); } + // If specified, initialize the cursorOffset + if (cursorOffset !== undefined) { + store.dispatch(Actions.setCursorOffset(cursorOffset)); + } + select(node).select('.graph-container') .call(link(controlDisplay, hasTimeSeriesWithPoints('current', 'P7D'))) .call(timeSeriesGraph, siteno) diff --git a/graph-server/src/renderer/index.js b/graph-server/src/renderer/index.js index 92ebda3771e57b91463782b4b3a05cfd0a991f0f..ff6f471b01c41c9deb3ce84cb7c3b3ff23a5a9dc 100644 --- a/graph-server/src/renderer/index.js +++ b/graph-server/src/renderer/index.js @@ -25,7 +25,8 @@ const renderToRespone = function (res, {siteID, parameterCode, compare, renderer const componentOptions = { siteno: siteID, parameter: parameterCode, - compare: compare + compare: compare, + cursorOffset: false }; getSvg(BUNDLES, { pageURL: 'http://wdfn-graph-server',