diff --git a/assets/src/scripts/components/hydrograph/cursor.js b/assets/src/scripts/components/hydrograph/cursor.js index e503cdc748be7d44f3138b4224f251668ff924e4..55c1d277ebbf036ee4732747412dadd3f547f636 100644 --- a/assets/src/scripts/components/hydrograph/cursor.js +++ b/assets/src/scripts/components/hydrograph/cursor.js @@ -17,7 +17,19 @@ const SLIDER_STEPS = 1000; const SLIDER_OFFSET_PX = 10; -export const cursorOffsetSelector = state => state.timeseriesState.cursorOffset; +export const cursorOffsetSelector = createSelector( + xScaleSelector('current'), + state => state.timeseriesState.cursorOffset, + (xScale, cursorOffset) => { + // If cursorOffset is unset, default to the last offset + if (!cursorOffset) { + const domain = xScale.domain(); + return domain[1].getTime() - domain[0].getTime(); + } else { + return cursorOffset; + } + } +); /** * Returns a selector that, for a given tsKey: @@ -41,7 +53,7 @@ export const cursorTimeSelector = memoize(tsKey => createSelector( */ export const getNearestTime = function(data, time) { // Function that returns the left bounding point for a given chart point. - if (data.length < 2) { + if (data.length === 0) { return null; } const bisectDate = bisector(d => d.dateTime).left; @@ -122,4 +134,3 @@ export const cursorSlider = function (elem) { }, layoutSelector)); }); }; - diff --git a/assets/src/scripts/components/hydrograph/cursor.spec.js b/assets/src/scripts/components/hydrograph/cursor.spec.js index 21c52ac92668eab7b10197c2f0439b64906267d3..3380290bb9f0b434b88a59dfbeef1f26079eda11 100644 --- a/assets/src/scripts/components/hydrograph/cursor.spec.js +++ b/assets/src/scripts/components/hydrograph/cursor.spec.js @@ -273,9 +273,8 @@ const TEST_STATE_ONE_VAR = { describe('Cursor module', () => { describe('getNearestTime', () => { - it('Return null if the length of the DATA array is less than two', function() { + it('Return null if the DATA array is empty', function() { expect(getNearestTime([], DATA[0].dateTime)).toBeNull(); - expect(getNearestTime([DATA[1]], DATA[0].dateTime)).toBeNull(); }); it('return correct DATA points via getNearestTime' , () => { @@ -325,25 +324,39 @@ describe('Cursor module', () => { div.remove(); }); - it('becomes active on focus', () => { + it('is active irrespective of focus', () => { const input = div.select('input'); - expect(input.classed('active')).toBe(false); + expect(input.classed('active')).toBe(true); expect(store.getState().timeseriesState.cursorOffset).toBe(null); div.select('input').dispatch('focus'); expect(input.classed('active')).toBe(true); expect(store.getState().timeseriesState.cursorOffset).not.toBe(null); div.select('input').dispatch('blur'); - expect(input.classed('active')).toBe(false); + expect(input.classed('active')).toBe(true); expect(store.getState().timeseriesState.cursorOffset).toBe(null); }); }); describe('tsCursorPointsSelector', () => { - it('Should return empty object if the focus time for the time series is null', function() { - expect(tsCursorPointsSelector('compare')(TEST_STATE_ONE_VAR)).toEqual({}); - expect(tsCursorPointsSelector('current')(TEST_STATE_ONE_VAR)).toEqual({}); + it('Should return last time with non-masked value if the cursor offset is null', function() { + expect(tsCursorPointsSelector('compare')(TEST_STATE_ONE_VAR)).toEqual({ + '00060:compare': { + dateTime: new Date('2018-01-03T16:00:00.000Z'), + qualifiers: ['P'], + value: 16, + tsKey: 'compare' + } + }); + expect(tsCursorPointsSelector('current')(TEST_STATE_ONE_VAR)).toEqual({ + '00060:current': { + dateTime: new Date('2018-01-03T16:00:00.000Z'), + qualifiers: ['P'], + value: 16, + tsKey: 'current' + } + }); }); it('Should return the nearest datum for the selected time series', function() { diff --git a/assets/src/scripts/components/hydrograph/tooltip.spec.js b/assets/src/scripts/components/hydrograph/tooltip.spec.js index d05927f216aa2e0879f4a589b693368744bdf050..4a9a87f6c6121331d2a6b3ad8e59a5233c3b264d 100644 --- a/assets/src/scripts/components/hydrograph/tooltip.spec.js +++ b/assets/src/scripts/components/hydrograph/tooltip.spec.js @@ -321,7 +321,7 @@ describe('Hydrograph tooltip module', () => { svg.remove(); }); - it('Creates focus lines but has no focus circles when cursor not set', () => { + it('Creates focus lines and focus circles when cursor not set', () => { let store = configureStore(Object.assign({}, testState, { series: Object.assign({}, testState.series, { timeSeries: Object.assign({}, testState.series.timeSeries, { @@ -346,7 +346,7 @@ describe('Hydrograph tooltip module', () => { call(createTooltipFocus); expect(svg.selectAll('.focus-line').size()).toBe(1); - expect(svg.selectAll('circle').size()).toBe(0); + expect(svg.selectAll('circle').size()).toBe(2); expect(svg.select('.focus').size()).toBe(1); });