From b3c82ce7616b30adc339a6e5f402d53fb0e1df0e Mon Sep 17 00:00:00 2001
From: mbucknell <mbucknell@usgs.gov>
Date: Thu, 25 Feb 2021 11:44:57 -0600
Subject: [PATCH] All tests (other than download-links) work in hydrograph.
---
.../components/hydrograph/download-links.js | 5 +-
.../components/hydrograph/index.js | 2 +-
.../components/hydrograph/index.test.js | 272 +++++++------
.../components/hydrograph/legend.test.js | 27 +-
.../components/hydrograph/method-picker.js | 2 +-
.../hydrograph/method-picker.test.js | 92 ++---
.../hydrograph/mock-hydrograph-state.js | 13 +-
.../components/hydrograph/parameters.js | 8 +-
.../components/hydrograph/parameters.test.js | 376 +++--------------
.../hydrograph/selectors/parameter-data.js | 4 +-
.../selectors/parameter-data.test.js | 8 +-
.../hydrograph/time-series-graph.js | 22 +-
.../hydrograph/time-series-graph.test.js | 377 +++---------------
.../components/hydrograph/tooltip.test.js | 353 +---------------
.../store/hydrograph-data.js | 78 ++--
.../store/hydrograph-parameters.js | 82 ++--
16 files changed, 456 insertions(+), 1265 deletions(-)
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/download-links.js b/assets/src/scripts/monitoring-location/components/hydrograph/download-links.js
index 98b23fb91..4757bd51b 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/download-links.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/download-links.js
@@ -1,6 +1,7 @@
/**
* Module with functions for processing and structuring download link URLs
*/
+/*
import {DateTime} from 'luxon';
import {createStructuredSelector} from 'reselect';
@@ -24,6 +25,7 @@ import {anyVisibleGroundwaterLevels} from './selectors/discrete-data';
* @param {String} timeSeriesType - one of two options, 'current' or 'compare'
* @return {String} a URL usable to retrieve station data from WaterServices
*/
+/*
const createUrlForDownloadLinks = function(currentIVDateRange, queryInformation, parameterCode, timeSeriesType) {
let url = '';
const key = currentIVDateRange === 'P7D' ? `${timeSeriesType}:${currentIVDateRange}` : `${timeSeriesType}:${currentIVDateRange}:${parameterCode}`;
@@ -51,7 +53,7 @@ const createUrlForDownloadLinks = function(currentIVDateRange, queryInformation,
* @param {store} store - The Redux store, in the form of a JavaScript object
* @param {String} siteno- a USGS numerical identifier for a specific monitoring location
*/
-
+/*
export const renderDownloadLinks = function(elem, store, siteno) {
elem.call(link(store, (elem, {
currentIVDateRange,
@@ -154,3 +156,4 @@ export const renderDownloadLinks = function(elem, store, siteno) {
requestTimeRange: getRequestTimeRange('current')
})));
};
+*/
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
index 93d5e8cc4..18a450ba7 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
@@ -71,7 +71,6 @@ export const attachToNode = function(store,
DateTime.fromISO(startDT, {zone: config.locationTimeZone}).toISO() : null;
const initialEndTime = endDT ?
DateTime.fromISO(endDT, {zone: config.locationTimeZone}).endOf('day').toISO() : null;
-debugger;
const fetchDataPromise = store.dispatch(retrieveHydrographData(siteno, {
parameterCode: parameterCode,
period: initialPeriod === 'custom' ? null : initialPeriod,
@@ -104,6 +103,7 @@ debugger;
store.dispatch(floodDataActions.retrieveWaterwatchData(siteno));
fetchDataPromise.then(() => {
+ debugger;
console.log('Fetched data');
nodeElem
.select('.loading-indicator-container')
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
index cfbd52851..d69f3c59c 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
@@ -62,7 +62,7 @@ describe('monitoring-location/components/hydrograph module', () => {
beforeEach(() => {
let body = select('body');
body.append('a')
- .attr('id','classic-page-link')
+ .attr('id', 'classic-page-link')
.attr('href', 'https://fakeserver/link');
let component = body.append('div')
.attr('id', 'hydrograph');
@@ -246,9 +246,10 @@ describe('monitoring-location/components/hydrograph module', () => {
expect(retrieveHydrographParametersSpy).not.toHaveBeenCalled();
});
});
-/*
-TODO: Trying to figure out how to mock the return on the asynchronous Redux actions
- describe('Tests for rendering once fetching is complete', () => {
+ /*
+ TODO: Trying to why this is showing strange warnings. leaving out for now
+ */
+ xdescribe('Tests for rendering once fetching is complete', () => {
let store;
beforeEach(() => {
@@ -258,7 +259,9 @@ TODO: Trying to figure out how to mock the return on the asynchronous Redux acti
currentTimeRange: TEST_CURRENT_TIME_RANGE,
groundwaterLevels: TEST_GW_LEVELS
},
- hydrographState: {},
+ hydrographState: {
+ selectedIVMethodID: '90649'
+ },
hydrographParameters: TEST_HYDROGRAPH_PARAMETERS,
floodData: {},
ui: {
@@ -266,158 +269,165 @@ TODO: Trying to figure out how to mock the return on the asynchronous Redux acti
}
});
- fakeServer.respondWith([200, {}, '{}']);
- attachToNode(store, graphNode, INITIAL_PARAMETERS);
- fakeServer.respond();
-
+ hydrographData.retrieveHydrographData = jest.fn(() => {
+ return function(dispatch) {
+ console.log('In mocked retrieveHydrographData');
+ return Promise.resolve();
+ };
+ });
+ attachToNode(store, graphNode, {
+ ...INITIAL_PARAMETERS,
+ showOnlyGraph: true
+ });
});
it('loading indicator should be hidden', () => {
expect(nodeElem.select('.loading-indicator').size()).toBe(0);
});
+ /*
+ xit('should render the correct number of svg nodes', () => {
+ console.log('In SVg test');
+ expect(selectAll('svg').size()).toBe(4);
+ });
+ });
+ it('should have a title div', () => {
+ const titleDiv = selectAll('.time-series-graph-title');
+ expect(titleDiv.size()).toBe(1);
+ expect(titleDiv.select('div').text()).toContain('Test title for 00060, method description');
+ expect(titleDiv.select('.usa-tooltip').text()).toEqual('Test description for 00060');
+ });
- xit('should render the correct number of svg nodes', () => {
- console.log('In SVg test');
- expect(selectAll('svg').size()).toBe(4);
- });
- });
- it('should have a title div', () => {
- const titleDiv = selectAll('.time-series-graph-title');
- expect(titleDiv.size()).toBe(1);
- expect(titleDiv.select('div').text()).toContain('Test title for 00060, method description');
- expect(titleDiv.select('.usa-tooltip').text()).toEqual('Test description for 00060');
- });
-
- it('should have a defs node', () => {
- expect(selectAll('defs').size()).toBe(1);
- expect(selectAll('defs mask').size()).toBe(1);
- expect(selectAll('defs pattern').size()).toBe(2);
- });
-
- it('should render time series data as a line', () => {
- // There should be one segment per time-series. Each is a single
- // point, so should be a circle.
- expect(selectAll('.hydrograph-svg .line-segment').size()).toBe(2);
- });
+ it('should have a defs node', () => {
+ expect(selectAll('defs').size()).toBe(1);
+ expect(selectAll('defs mask').size()).toBe(1);
+ expect(selectAll('defs pattern').size()).toBe(2);
+ });
- it('should render a rectangle for masked data', () => {
- expect(selectAll('.hydrograph-svg g.current-mask-group').size()).toBe(1);
- });
+ it('should render time series data as a line', () => {
+ // There should be one segment per time-series. Each is a single
+ // point, so should be a circle.
+ expect(selectAll('.hydrograph-svg .line-segment').size()).toBe(2);
+ });
- it('should have a point for the median stat data with a label', () => {
- expect(selectAll('#median-points path').size()).toBe(1);
- expect(selectAll('#median-points text').size()).toBe(0);
- });
+ it('should render a rectangle for masked data', () => {
+ expect(selectAll('.hydrograph-svg g.current-mask-group').size()).toBe(1);
+ });
- it('should have brush element for the hydrograph', () => {
- expect(selectAll('.brush').size()).toBe(1);
- });
+ it('should have a point for the median stat data with a label', () => {
+ expect(selectAll('#median-points path').size()).toBe(1);
+ expect(selectAll('#median-points text').size()).toBe(0);
+ });
- it('should have .cursor-slider-svg element', () => {
- expect(selectAll('.cursor-slider-svg').size()).toBe(1);
- });
+ it('should have brush element for the hydrograph', () => {
+ expect(selectAll('.brush').size()).toBe(1);
+ });
- it('should have date control elements', () => {
- expect(selectAll('#ts-daterange-select-container').size()).toBe(1);
- expect(selectAll('#ts-customdaterange-select-container').size()).toBe(1);
- });
+ it('should have .cursor-slider-svg element', () => {
+ expect(selectAll('.cursor-slider-svg').size()).toBe(1);
+ });
- it('should have method select element', () => {
- expect(selectAll('#ts-method-select-container').size()).toBe(1);
- });
+ it('should have date control elements', () => {
+ expect(selectAll('#ts-daterange-select-container').size()).toBe(1);
+ expect(selectAll('#ts-customdaterange-select-container').size()).toBe(1);
+ });
- it('should have the select time series element', () => {
- expect(selectAll('#select-time-series').size()).toBe(1);
- });
+ it('should have method select element', () => {
+ expect(selectAll('#ts-method-select-container').size()).toBe(1);
+ });
- it('should have tooltips for the select series table', () => {
- // one for each of the two parameters and the WaterAlert links
- expect(selectAll('table .usa-tooltip').size()).toBe(4);
- });
+ it('should have the select time series element', () => {
+ expect(selectAll('#select-time-series').size()).toBe(1);
+ });
- it('should have data tables for hydrograph data', () => {
- expect(select('#iv-hydrograph-data-table-container').size()).toBe(1);
- expect(select('#gw-hydrograph-data-table-container').size()).toBe(1);
- });
- });
+ it('should have tooltips for the select series table', () => {
+ // one for each of the two parameters and the WaterAlert links
+ expect(selectAll('table .usa-tooltip').size()).toBe(4);
+ });
- describe('hide elements when showOnlyGraph is set to true', () => {
- let store;
- let resolvedLoadPromise = Promise.resolve();
- beforeEach(() => {
- jest.spyOn(ivTimeSeriesDataActions, 'retrieveIVTimeSeries').mockReturnValue(function() {
- return Promise.resolve({});
+ it('should have data tables for hydrograph data', () => {
+ expect(select('#iv-hydrograph-data-table-container').size()).toBe(1);
+ expect(select('#gw-hydrograph-data-table-container').size()).toBe(1);
+ });
});
- store = configureStore({
- ...TEST_STATE,
- ivTimeSeriesData: {
- ...TEST_STATE.ivTimeSeriesData,
- timeSeries: {
- ...TEST_STATE.ivTimeSeriesData.timeSeries,
- 'method1:00060:current': {
- ...TEST_STATE.ivTimeSeriesData.timeSeries['method1:00060:current'],
- startTime: 1514926800000,
- endTime: 1514930400000,
- points: [{
- dateTime: 1514926800000,
- value: 10,
- qualifiers: ['P']
- }, {
- dateTime: 1514930400000,
- value: null,
- qualifiers: ['P', 'FLD']
- }]
+ describe('hide elements when showOnlyGraph is set to true', () => {
+ let store;
+ let resolvedLoadPromise = Promise.resolve();
+ beforeEach(() => {
+ jest.spyOn(ivTimeSeriesDataActions, 'retrieveIVTimeSeries').mockReturnValue(function() {
+ return Promise.resolve({});
+ });
+
+ store = configureStore({
+ ...TEST_STATE,
+ ivTimeSeriesData: {
+ ...TEST_STATE.ivTimeSeriesData,
+ timeSeries: {
+ ...TEST_STATE.ivTimeSeriesData.timeSeries,
+ 'method1:00060:current': {
+ ...TEST_STATE.ivTimeSeriesData.timeSeries['method1:00060:current'],
+ startTime: 1514926800000,
+ endTime: 1514930400000,
+ points: [{
+ dateTime: 1514926800000,
+ value: 10,
+ qualifiers: ['P']
+ }, {
+ dateTime: 1514930400000,
+ value: null,
+ qualifiers: ['P', 'FLD']
+ }]
+ }
+ }
+ },
+ ivTimeSeriesState: {
+ showIVTimeSeries: {
+ current: true,
+ compare: true,
+ median: true
+ },
+ currentIVVariableID: '45807197',
+ currentIVDateRange: 'P7D',
+ currentIVMethodID: 'method1',
+ loadingIVTSKeys: [],
+ ivGraphBrushOffset: null
+ },
+ ui: {
+ windowWidth: 400,
+ width: 400
}
- }
- },
- ivTimeSeriesState: {
- showIVTimeSeries: {
- current: true,
- compare: true,
- median: true
- },
- currentIVVariableID: '45807197',
- currentIVDateRange: 'P7D',
- currentIVMethodID: 'method1',
- loadingIVTSKeys: [],
- ivGraphBrushOffset: null
- },
- ui: {
- windowWidth: 400,
- width: 400
- }
- });
+ });
- attachToNode(store, graphNode, {siteno: '123456788', showOnlyGraph: true}, resolvedLoadPromise);
- });
+ attachToNode(store, graphNode, {siteno: '123456788', showOnlyGraph: true}, resolvedLoadPromise);
+ });
- it('should not have brush element for the hydrograph', () => {
- expect(selectAll('.brush').size()).toBe(0);
- });
+ it('should not have brush element for the hydrograph', () => {
+ expect(selectAll('.brush').size()).toBe(0);
+ });
- it('should not have slider-wrapper element', () => {
- expect(selectAll('.slider-wrapper').size()).toBe(0);
- });
+ it('should not have slider-wrapper element', () => {
+ expect(selectAll('.slider-wrapper').size()).toBe(0);
+ });
- it('should not have date control elements', () => {
- expect(selectAll('#ts-daterange-select-container').size()).toBe(0);
- expect(selectAll('#ts-customdaterange-select-container').size()).toBe(0);
- expect(selectAll('#ts-container-radio-group-and-form-buttons').size()).toBe(0);
- });
+ it('should not have date control elements', () => {
+ expect(selectAll('#ts-daterange-select-container').size()).toBe(0);
+ expect(selectAll('#ts-customdaterange-select-container').size()).toBe(0);
+ expect(selectAll('#ts-container-radio-group-and-form-buttons').size()).toBe(0);
+ });
- it('should not have method select element', () => {
- expect(selectAll('#ts-method-select-container').size()).toBe(0);
- });
+ it('should not have method select element', () => {
+ expect(selectAll('#ts-method-select-container').size()).toBe(0);
+ });
- it('should not have the select time series element', () => {
- expect(selectAll('#select-time-series').size()).toBe(0);
- });
+ it('should not have the select time series element', () => {
+ expect(selectAll('#select-time-series').size()).toBe(0);
+ });
- it('should not have the data table', () => {
- expect(select('#iv-data-table-container').selectAll('table').size()).toBe(0);
- });
- */
+ it('should not have the data table', () => {
+ expect(select('#iv-data-table-container').selectAll('table').size()).toBe(0);
+ });
+ */
+ });
});
\ No newline at end of file
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/legend.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/legend.test.js
index 0ae9434a6..4ccb8941f 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/legend.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/legend.test.js
@@ -1,27 +1,29 @@
import {select, selectAll} from 'd3-selection';
-import sinon from 'sinon';
import * as utils from 'ui/utils';
import {configureStore} from 'ml/store';
import {drawTimeSeriesLegend} from './legend';
-import
+import {TEST_PRIMARY_IV_DATA, TEST_GW_LEVELS} from './mock-hydrograph-state';
describe('monitoring-location/components/hydrograph/legend module', () => {
utils.mediaQuery = jest.fn().mockReturnValue(true);
const TEST_STATE = {
hydrographData: {
- primaryIVData: TE
+ primaryIVData: TEST_PRIMARY_IV_DATA,
+ groundwaterLevels: TEST_GW_LEVELS
+ },
+ hydrographState: {
+ selectedIVMethodID: '90649'
}
- }
+ };
describe('legends should render', () => {
let graphNode;
let store;
- let fakeServer;
beforeEach(() => {
let body = select('body');
@@ -33,32 +35,19 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
graphNode = document.getElementById('hydrograph');
- store = configureStore(TEST_DATA);
+ store = configureStore(TEST_STATE);
select(graphNode)
.call(drawTimeSeriesLegend, store);
- fakeServer = sinon.createFakeServer();
});
afterEach(() => {
- fakeServer.restore();
select('#hydrograph').remove();
});
it('Should have 6 legend markers', () => {
expect(selectAll('.legend g').size()).toBe(6);
- expect(selectAll('.legend g line.median-step').size()).toBe(1);
- });
-
- it('Should have 4 legend marker after the median time series are removed', () => {
- store.dispatch(Actions.setIVTimeSeriesVisibility('median', false));
- return new Promise(resolve => {
- window.requestAnimationFrame(() => {
- expect(selectAll('.legend g').size()).toBe(4);
- resolve();
- });
- });
});
});
});
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/method-picker.js b/assets/src/scripts/monitoring-location/components/hydrograph/method-picker.js
index a962c2ea1..7db0083de 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/method-picker.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/method-picker.js
@@ -45,7 +45,7 @@ export const drawMethodPicker = function(elem, store, initialTimeSeriesId) {
.attr('selected', method.methodID === selectedMethodID ? true : null)
.node().value = method.methodID;
});
- pickerContainer.property('hidden', methods.length <= 1);
+ pickerContainer.attr('hidden', methods.length <= 1 ? true: null);
if (methods.length) {
elem.dispatch('change');
}
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/method-picker.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/method-picker.test.js
index 38affacb8..8dbe937ab 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/method-picker.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/method-picker.test.js
@@ -3,61 +3,19 @@ import {select} from 'd3-selection';
import {configureStore} from 'ml/store';
import {drawMethodPicker} from './method-picker';
+import {TEST_PRIMARY_IV_DATA} from './mock-hydrograph-state';
describe('monitoring-location/components/hydrograph/method-picker', () => {
describe('drawMethodPicker', () => {
- const DATA = [12, 13, 14, 15, 16].map(hour => {
- return {
- dateTime: new Date(`2018-01-03T${hour}:00:00.000Z`).getTime(),
- qualifiers: ['P'],
- value: hour
- };
- });
-
const TEST_STATE = {
- ivTimeSeriesData: {
- timeSeries: {
- '69930:00010:current': {
- points: DATA,
- tsKey: 'current:P7D',
- variable: '00010id',
- method: 69930
- },
- '69931:00010:current': {
- points: DATA,
- tsKey: 'current:P7D',
- variable: '00010id',
- method: 69931
- }
- },
- variables: {
- '00010id': {
- oid: '00010id',
- variableCode: {
- value: '00010'
- },
- unit: {
- unitCode: 'deg C'
- }
- }
- },
- methods: {
- 69930: {
- methodDescription: 'Description 1',
- methodID: 69930
- },
- 69931: {
- methodDescription: 'Description 2',
- methodID: 69931
- }
- }
+ hydrographData: {
+ primaryIVData: TEST_PRIMARY_IV_DATA
},
- ivTimeSeriesState: {
- currentIVVariableID: '00010id'
+ hydrographState: {
+ selectedIVMethodID: '90649'
}
};
-
let div;
beforeEach(() => {
div = select('body').append('div');
@@ -70,14 +28,40 @@ describe('monitoring-location/components/hydrograph/method-picker', () => {
it('Creates a picker and sets the currentMethodID', () => {
let store = configureStore(TEST_STATE);
div.call(drawMethodPicker, store);
- return new Promise(resolve => {
- window.requestAnimationFrame(() => {
- expect(div.select('div').property('hidden')).toEqual(false);
- expect(div.select('select').property('value')).toEqual('69930');
- expect(store.getState().ivTimeSeriesState.currentIVMethodID).toEqual(69930);
- resolve();
- });
+
+ expect(div.select('#ts-method-select-container').attr('hidden')).toBeNull();
+ expect(div.select('select').property('value')).toEqual('90649');
+ });
+
+ it('selecting a different method updates the store', () => {
+ let store = configureStore(TEST_STATE);
+ div.call(drawMethodPicker, store);
+
+ const newOption = div.select('option[value="252055"]');
+ newOption.attr('selected', true);
+
+ div.select('select').dispatch('change');
+
+ expect(store.getState().hydrographState.selectedIVMethodID).toBe('252055');
+ });
+
+ it('Expects if the data has only one method then the picker will be hidden', () => {
+ let store = configureStore({
+ ...TEST_STATE,
+ hydrographData: {
+ primaryIVData: {
+ ...TEST_STATE,
+ values: {
+ '90649': {
+ ...TEST_PRIMARY_IV_DATA.values['90649']
+ }
+ }
+ }
+ }
});
+ div.call(drawMethodPicker, store);
+
+ expect(div.select('#ts-method-select-container').attr('hidden')).toBe('true');
});
});
});
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/mock-hydrograph-state.js b/assets/src/scripts/monitoring-location/components/hydrograph/mock-hydrograph-state.js
index bd06448b6..ff5b03084 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/mock-hydrograph-state.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/mock-hydrograph-state.js
@@ -5,7 +5,8 @@ export const TEST_CURRENT_TIME_RANGE = {
export const TEST_PRIMARY_IV_DATA = {
parameter: {
parameterCode: '72019',
- name: 'Depth to water level'
+ name: 'Depth to water level',
+ unit: 'ft'
},
values: {
'90649': {
@@ -21,7 +22,15 @@ export const TEST_PRIMARY_IV_DATA = {
{value: 25.9, qualifiers: ['P'], dateTime: 1600620300000}
],
method: {
- methodID: '90649'
+ methodID: '90649',
+ methodDescription: '90649 method description'
+ }
+ },
+ '252055': {
+ points: [],
+ method: {
+ methodDescription: 'From multiparameter sonde',
+ methodID: '252055'
}
}
}
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/parameters.js b/assets/src/scripts/monitoring-location/components/hydrograph/parameters.js
index 1b3d5c4e9..9c17118ca 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/parameters.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/parameters.js
@@ -13,7 +13,7 @@ import {getInputsForRetrieval, getSelectedParameterCode} from 'ml/selectors/hydr
import {setSelectedParameterCode} from 'ml/store/hydrograph-state';
import {retrieveHydrographData} from 'ml/store/hydrograph-data';
-import {getAvailableParameterCodes} from './selectors/parameter-data';
+import {getAvailableParameters} from './selectors/parameter-data';
/**
@@ -21,9 +21,9 @@ import {getAvailableParameterCodes} from './selectors/parameter-data';
* a row changes the active parameter code.
*/
export const drawSelectionTable = function(container, store, siteno) {
- const parameterCodes = getAvailableParameterCodes(store.getState());
+ const parameters = getAvailableParameters(store.getState());
- if (!Object.keys(parameterCodes).length) {
+ if (!Object.keys(parameters).length) {
return;
}
@@ -51,7 +51,7 @@ export const drawSelectionTable = function(container, store, siteno) {
table.append('tbody')
.attr('class', 'usa-fieldset')
.selectAll('tr')
- .data(Object.values(parameterCodes))
+ .data(Object.values(parameters))
.enter().append('tr')
.attr('id', d => `time-series-select-table-row-${d.parameterCode}`)
.attr('ga-on', 'click')
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/parameters.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/parameters.test.js
index 9e02fc53a..deaf291f2 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/parameters.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/parameters.test.js
@@ -1,317 +1,73 @@
import {scaleLinear} from 'd3-scale';
import {select} from 'd3-selection';
+import sinon from 'sinon';
import {configureStore} from 'ml/store';
+import * as hydrographData from 'ml/store/hydrograph-data';
-import {addSparkLine, plotSeriesSelectTable} from './parameters';
+import {TEST_HYDROGRAPH_PARAMETERS} from './mock-hydrograph-state';
+import {drawSelectionTable} from './parameters';
describe('monitoring-location/components/hydrograph/parameters module', () => {
- describe('plotSeriesSelectTable', () => {
- let tableDivSelection;
-
- const data = [12, 13, 14, 15, 16].map(day => {
- return {
- dateTime: new Date(`2018-01-${day}T00:00:00.000Z`),
- qualifiers: ['P'],
- value: day
- };
- });
-
- const availableParameterCodes = [
- {
- variableID: '00010ID',
- parameterCode: '00010',
- description: 'Temperature in C',
- selected: true,
- timeSeriesCount: 1,
- periodOfRecord: {
- begin_date: '01-02-2001',
- end_date: '10-15-2015'
- },
- waterAlert: {
- hasWaterAlert: true,
- subscriptionParameterCode: '00010',
- displayText: '00010 Display Text',
- tooltipText: '00010 Tooltip Text'
- }
- },
- {
- variableID: '00010IDF',
- parameterCode: '00010F',
- description: 'Temperature in F',
- selected: false,
- timeSeriesCount: 1,
- periodOfRecord: {
- begin_date: '01-02-2001',
- end_date: '10-15-2015'
- },
- waterAlert: {
- hasWaterAlert: true,
- subscriptionParameterCode: '00010',
- displayText: '00010F Display Text',
- tooltipText: '00010F Tooltip Text'
- }
- },
- {
- variableID: '00067ID',
- parameterCode: '00067',
- description: 'Ruthenium (VI) Fluoride',
- selected: false,
- timeSeriesCount: 1,
- periodOfRecord: {
- begin_date: '04-01-1990',
- end_date: '10-15-2006'
- },
- waterAlert: {
- hasWaterAlert: false,
- subscriptionParameterCode: '',
- displayText: '00067 Display Text',
- tooltipText: '00067 Tooltip Text'
- }
- },
- {
- variableID: '00093ID',
- parameterCode: '00093',
- description: 'Uranium (V) Oxide',
- selected: false,
- timeSeriesCount: 1,
- periodOfRecord: {
- begin_date: '11-25-2001',
- end_date: '03-01-2020'
- },
- waterAlert: {
- hasWaterAlert: false,
- subscriptionParameterCode: '',
- displayText: '00093 Display Text',
- tooltipText: '00093 Tooltip Text'
- }
- }
- ];
-
- const lineSegmentsByParmCd = {
- '00010': [[{'classes': {approved: false, estimated: false, dataMask: null}, points: data}]],
- '00093': [[{'classes': {approved: false, estimated: false, dataMask: null}, points: data}]]
- };
-
- const timeSeriesScalesByParmCd = {
- '00010': {x: scaleLinear(new Date(2018, 0, 12), new Date(2018, 0, 16)), y: scaleLinear(0, 100)},
- '00093': {x: scaleLinear(new Date(2018, 0, 12), new Date(2018, 0, 16)), y: scaleLinear(0, 100)}
- };
-
- const testArgsWithData = {
- siteno: '12345678',
- availableParameterCodes: availableParameterCodes,
- lineSegmentsByParmCd: lineSegmentsByParmCd,
- timeSeriesScalesByParmCd: timeSeriesScalesByParmCd
- };
-
- const testArgsWithoutData = {
- siteno: '12345678',
- availableParameterCodes: [],
- lineSegmentsByParmCd: {},
- timeSeriesScalesByParmCd: {}
- };
-
- let store = configureStore();
- beforeEach(() => {
- tableDivSelection = select('body').append('div');
- });
-
- afterEach(() => {
- tableDivSelection.remove();
- });
-
- it('creates a row for each parameter in a table', () => {
- plotSeriesSelectTable(tableDivSelection, testArgsWithData, store);
- expect(tableDivSelection.selectAll('tbody tr').size()).toEqual(4);
- });
-
- it('creates a the correct number svg sparklines in a table', () => {
- plotSeriesSelectTable(tableDivSelection, testArgsWithData, store);
- expect(tableDivSelection.selectAll('svg').size()).toEqual(4);
- expect(tableDivSelection.selectAll('svg path').size()).toEqual(2);
- });
-
- it('does not create the table when there are no time series', () => {
- plotSeriesSelectTable(tableDivSelection, testArgsWithoutData, store);
- expect(tableDivSelection.selectAll('table').size()).toEqual(0);
- });
-
- it('creates a radio button input for each parameter in the table', () => {
- plotSeriesSelectTable(tableDivSelection, testArgsWithData, store);
- expect(tableDivSelection.selectAll('input').size()).toEqual(4);
- });
-
- it('creates a WaterAlert subscribe link each parameter in the table supported by WaterAlert as appropriate', () => {
- plotSeriesSelectTable(tableDivSelection, testArgsWithData, store);
- expect(tableDivSelection.selectAll('.water-alert-cell').size()).toEqual(4);
- expect(tableDivSelection.selectAll('a').size()).toEqual(2);
- });
-
- it('updates the radio button input checked property for the corresponding selected parameter', () => {
- plotSeriesSelectTable(tableDivSelection, testArgsWithData, store);
-
- let selectedParamRow = tableDivSelection.selectAll('tr').filter('.selected');
- let selectedParamTD = selectedParamRow.select('td');
- let selectedParamRowInput = selectedParamTD.select('input');
- expect(selectedParamRowInput.property('checked')).toBeTruthy();
- });
- });
-
- describe('addSparkline', () => {
- let svg;
- const tsDataSinglePoint = {
- scales: {
- x: scaleLinear(new Date(2015, 1, 2), new Date(2015, 1, 3)),
- y: scaleLinear(0, 100)
- },
- seriesLineSegments: [
- {
- classes: {approved: false, estimated: false, dataMask: null},
- points: [
- {dateTime: new Date(2015, 1, 2), value: 16}
- ]
- }
- ]
- };
- const tsDataSingleLine = {
- scales: {
- x: scaleLinear(new Date(2015, 1, 2), new Date(2015, 1, 3)),
- y: scaleLinear(0, 100)
- },
- seriesLineSegments: [
- {
- classes: {approved: false, estimated: false, dataMask: null},
- points: [
- {dateTime: new Date(2015, 1, 2), value: 16},
- {dateTime: new Date(2015, 1, 3), value: 17}
- ]
- }
- ]
- };
- const tsDataMasked = {
- scales: {
- x: scaleLinear(new Date(2015, 1, 2), new Date(2015, 1, 3)),
- y: scaleLinear(0, 100)
- },
- seriesLineSegments: [
- {
- classes: {approved: false, estimated: false, dataMask: 'ice'},
- points: [
- {dateTime: new Date(2015, 1, 2), value: null},
- {dateTime: new Date(2015, 1, 3), value: null}
- ]
- }
- ]
- };
-
- const tsDataMasked2 = {
- scales: {
- x: scaleLinear(new Date(2015, 1, 2), new Date(2015, 1, 3)),
- y: scaleLinear(0, 100)
- },
- seriesLineSegments: [
- {
- classes: {approved: false, estimated: false, dataMask: 'fld'},
- points: [
- {dateTime: new Date(2015, 1, 2), value: null},
- {dateTime: new Date(2015, 1, 3), value: null}
- ]
- }
- ]
- };
- const tsDataMultipleMasks = {
- scales: {
- x: scaleLinear(new Date(2015, 1, 13), new Date(2015, 1, 18)),
- y: scaleLinear(0, 100)
- },
- seriesLineSegments: [
- {
- classes: {approved: false, estimated: false, dataMask: 'fld'},
- points: [
- {dateTime: new Date(2015, 1, 13), value: null},
- {dateTime: new Date(2015, 1, 14), value: null}
- ]
- },
- {
- classes: {approved: false, estimated: false, dataMask: 'ice'},
- points: [
- {dateTime: new Date(2015, 1, 15), value: null},
- {dateTime: new Date(2015, 1, 16), value: null}
- ]
- }
- ]
- };
- const tsDataMixed = {
- scales: {
- x: scaleLinear(new Date(2015, 1, 13), new Date(2015, 1, 18)),
- y: scaleLinear(0, 100)
- },
- seriesLineSegments: [
- {
- classes: {approved: false, estimated: false, dataMask: null},
- points: [
- {dateTime: new Date(2015, 1, 13), value: 84},
- {dateTime: new Date(2015, 1, 14), value: 91}
- ]
- },
- {
- classes: {approved: false, estimated: false, dataMask: 'ice'},
- points: [
- {dateTime: new Date(2015, 1, 15), value: null},
- {dateTime: new Date(2015, 1, 16), value: null}
- ]
- },
- {
- classes: {approved: false, estimated: false, dataMask: null},
- points: [
- {dateTime: new Date(2015, 1, 17), value: 77},
- {dateTime: new Date(2015, 1, 18), value: 85}
- ]
- }
- ]
- };
-
- beforeEach(() => {
- svg = select('body').append('svg');
- });
-
- afterEach(() => {
- select('svg').remove();
- });
-
- it('adds a point for a single point of data', () => {
- addSparkLine(svg, tsDataSinglePoint);
- expect(svg.selectAll('circle').size()).toEqual(1);
- });
-
- it('adds a path for a line', () => {
- addSparkLine(svg, tsDataSingleLine);
- expect(svg.selectAll('path').size()).toEqual(1);
- });
-
- it('adds multiline text for masked data if the label has more than one word', () => {
- addSparkLine(svg, tsDataMasked);
- expect(svg.selectAll('text.sparkline-text').size()).toEqual(1);
- expect(svg.selectAll('text.sparkline-text tspan').size()).toEqual(2);
- });
-
- it('adds a single line of text if mask label is one word', () => {
- addSparkLine(svg, tsDataMasked2);
- expect(svg.selectAll('text.sparkline-text').size()).toEqual(1);
- expect(svg.selectAll('text.sparkline-text tspan').size()).toEqual(0);
- });
-
- it('handles labels if there is more than one mask', () => {
- addSparkLine(svg, tsDataMultipleMasks);
- expect(svg.selectAll('text.sparkline-text').size()).toEqual(1);
- expect(svg.select('text.sparkline-text').text()).toEqual('Masked');
- });
-
- it('adds multiple paths if there are breaks in the data', () => {
- addSparkLine(svg, tsDataMixed);
- expect(svg.selectAll('path').size()).toEqual(2);
- });
- });
-})
-;
+ const TEST_STATE = {
+ hydrographParameters: TEST_HYDROGRAPH_PARAMETERS,
+ hydrographState: {
+ selectedDateRange: 'P7D',
+ selectedParameterCode: '72019'
+ }
+ };
+
+ let div;
+ let fakeServer;
+ let store;
+ let retrieveHydrographDataSpy;
+
+ beforeEach(() => {
+ div = select('body').append('div');
+ fakeServer = sinon.createFakeServer();
+ retrieveHydrographDataSpy = jest.spyOn(hydrographData, 'retrieveHydrographData');
+ });
+
+ afterEach(() => {
+ fakeServer.restore();
+ div.remove();
+ });
+
+ it('If no parameters defined the element is not rendered', () => {
+ store = configureStore({
+ hydrographParameters: {}
+ });
+ drawSelectionTable(div, store, '11112222');
+ expect(div.select('#select-time-series').size()).toBe(0);
+ });
+
+ it('Expects the selection table to be rendered with the appropriate rows and selection', () => {
+ store = configureStore(TEST_STATE);
+ drawSelectionTable(div, store, '11112222');
+
+ const container = div.select('#select-time-series');
+ expect(container.size()).toBe(1);
+ expect(container.select('table').size()).toBe(1);
+ expect(container.selectAll('tbody tr').size()).toBe(5);
+
+ expect(container.select('tbody input:checked').attr('value')).toEqual('72019');
+ });
+
+ it('Expects changing the selection retrieves hydrograph data', () => {
+ store = configureStore(TEST_STATE);
+ drawSelectionTable(div, store, '11112222');
+
+ const rowOne = div.select('tbody tr:first-child');
+ rowOne.dispatch('click');
+
+ expect(store.getState().hydrographState.selectedParameterCode).toEqual('00060');
+ expect(retrieveHydrographDataSpy).toHaveBeenCalledWith('11112222', {
+ parameterCode: '00060',
+ period: 'P7D',
+ startTime: null,
+ endTime: null,
+ loadCompare: false,
+ loadMedian: false
+ });
+ });
+});
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/parameter-data.js b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/parameter-data.js
index 2bb80ce5a..29bee221a 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/parameter-data.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/parameter-data.js
@@ -6,7 +6,7 @@ import {sortedParameters} from 'ui/utils';
/**
* Returns a Redux selector function which returns an sorted array of metadata
- * for each available parameter code. Each object has the following properties:
+ * for each available parameter . Each object has the following properties:
* @prop {String} parameterCode
* @prop {String} description
* @prop {Object} periodOfRecord - with beginDate and endDate String properties
@@ -14,7 +14,7 @@ import {sortedParameters} from 'ui/utils';
* (subscriptionParameterCode, displayText, tooltipText)
* Other properties from the Redux store are also included
*/
-export const getAvailableParameterCodes = createSelector(
+export const getAvailableParameters = createSelector(
(state) => state.hydrographParameters,
allParameters => {
if (!Object.keys(allParameters).length) {
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/parameter-data.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/parameter-data.test.js
index 6204232fe..effe6a6d8 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/parameter-data.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/parameter-data.test.js
@@ -1,6 +1,6 @@
import config from 'ui/config';
-import {getAvailableParameterCodes} from './parameter-data';
+import {getAvailableParameters} from './parameter-data';
describe('monitoring-location/components/hydrograph/selectors/parameter-data', () => {
config.ivPeriodOfRecord = {
@@ -68,15 +68,15 @@ describe('monitoring-location/components/hydrograph/selectors/parameter-data', (
}
};
- describe('getAvailableParameterCodes', () => {
+ describe('getAvailableParameters', () => {
it('Return an empty array if no variables for IV or discrete data groundwater levels are defined', () => {
- expect(getAvailableParameterCodes({
+ expect(getAvailableParameters({
hydrographParameters: {}
})).toHaveLength(0);
});
it('Expects sorted array of parameter codes', () => {
- const parameters = getAvailableParameterCodes({
+ const parameters = getAvailableParameters({
hydrographParameters: TEST_PARAMETERS
});
expect(parameters).toHaveLength(5);
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.js b/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.js
index b19814798..3c29808ad 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.js
@@ -54,7 +54,8 @@ const plotMedianPoints = function(elem, {xscale, yscale, modulo, points}) {
.y(function(d) {
return yscale(d.point);
});
- const medianGrp = elem.append('g');
+ const medianGrp = elem.append('g')
+ .attr('class', 'median-stats-group');
medianGrp.append('path')
.datum(points)
.classed('median-data-series', true)
@@ -147,19 +148,14 @@ const plotAllFloodLevelPoints = function(elem, {visible, xscale, yscale, seriesP
};
-const createTitle = function(elem, store, siteNo, showMLName, agencyCode, sitename, showTooltip) {
+const drawTitle = function(elem, store, siteNo, agencyCode, sitename, showMLName, showTooltip) {
let titleDiv = elem.append('div')
.classed('time-series-graph-title', true);
if (showMLName) {
titleDiv.append('div')
- .call(link(store,(elem, {mlName, agencyCode}) => {
- elem.attr('class', 'monitoring-location-name-div')
- .html(`${mlName}, ${agencyCode} ${siteNo}`);
- }, createStructuredSelector({
- mlName: sitename,
- agencyCode: agencyCode
- })));
+ .attr('class', 'monitoring-location-name-div')
+ .html(`${sitename}, ${agencyCode} ${siteNo}`);
}
titleDiv.append('div')
.call(link(store,(elem, {title, parameter}) => {
@@ -173,7 +169,7 @@ const createTitle = function(elem, store, siteNo, showMLName, agencyCode, sitena
})));
};
-const watermark = function(elem, store) {
+const drawWatermark = function(elem, store) {
// These constants will need to change if the watermark svg is updated
const watermarkHalfHeight = 87 / 2;
const watermarkHalfWidth = 235 / 2;
@@ -206,18 +202,16 @@ const watermark = function(elem, store) {
*/
export const drawTimeSeriesGraph = function(elem, store, siteNo, agencyCode, sitename, showMLName, showTooltip) {
let graphDiv;
-
graphDiv = elem.append('div')
.attr('class', 'hydrograph-container')
.attr('ga-on', 'click')
.attr('ga-event-category', 'hydrograph-interaction')
.attr('ga-event-action', 'clickOnTimeSeriesGraph')
- .call(watermark, store)
- .call(createTitle, store, siteNo, agencyCode, sitename, showMLName, showTooltip);
+ .call(drawWatermark, store)
+ .call(drawTitle, store, siteNo, agencyCode, sitename, showMLName, showTooltip);
if (showTooltip) {
graphDiv.call(drawTooltipText, store);
}
- console.log('Rendering graph svg');
const graphSvg = graphDiv.append('svg')
.attr('xmlns', 'http://www.w3.org/2000/svg')
.classed('hydrograph-svg', true)
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.test.js
index b01ab1f5d..8516a1aa0 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.test.js
@@ -1,194 +1,33 @@
-import {select, selectAll} from 'd3-selection';
+import {select} from 'd3-selection';
import * as utils from 'ui/utils';
import {configureStore} from 'ml/store';
-import {Actions} from 'ml/store/instantaneous-value-time-series-state';
+import {setMedianDataVisibility} from 'ml/store/hydrograph-state';
+import {TEST_PRIMARY_IV_DATA, TEST_GW_LEVELS, TEST_MEDIAN_DATA,
+ TEST_CURRENT_TIME_RANGE
+} from './mock-hydrograph-state';
import {drawTimeSeriesGraph} from './time-series-graph';
const TEST_STATE = {
- ianaTimeZone: 'America/Chicago',
- ivTimeSeriesData: {
- timeSeries: {
- '2:00010:current': {
- points: [{
- dateTime: 1514926800000,
- value: 4,
- qualifiers: ['P']
- }],
- method: '2',
- tsKey: 'current:P7D',
- variable: '45807190'
- },
- '1:00060:current': {
- points: [{
- dateTime: 1514926800000,
- value: 10,
- qualifiers: ['P']
- },
- {
- dateTime: 1514928800000,
- value: 10,
- qualifiers: ['P']
- }],
- method: '1',
- tsKey: 'current:P7D',
- variable: '45807197'
- },
- '1:00060:compare': {
- points: [{
- dateTime: 1514926800000,
- value: 10,
- qualifiers: ['P']
- }],
- method: '1',
- tsKey: 'compare:P7D',
- variable: '45807197'
- }
- },
- timeSeriesCollections: {
- 'coll1': {
- variable: '45807197',
- timeSeries: ['00060:current']
- },
- 'coll2': {
- variable: '45807197',
- timeSeries: ['00060:compare']
- },
- 'coll3': {
- variable: '45807197',
- timeSeries: ['00060:median']
- },
- 'coll4': {
- variable: '45807190',
- timeSeries: ['00010:current']
- }
- },
- siteCodes: {
- '12345678': {
- agencyCode: 'USGS'
- }
- },
- sourceInfo: {
- '12345678': {
- siteName: 'Monitoring Location for Test'
- }
-
- },
- queryInfo: {
- 'current:P7D': {
- notes: {
- 'filter:timeRange': {
- mode: 'PERIOD',
- periodDays: 7
- },
- requestDT: 1514926800000
- }
- }
- },
- requests: {
- 'current:P7D': {
- timeSeriesCollections: ['coll1']
- },
- 'compare:P7D': {
- timeSeriesCollections: ['coll2', 'col4']
- }
- },
- variables: {
- '45807197': {
- variableCode: {
- value: '00060'
- },
- oid: '45807197',
- variableName: 'Test title for 00060',
- variableDescription: 'Test description for 00060',
- unit: {
- unitCode: 'unitCode'
- }
- },
- '45809999': {
- variableCode: {
- value: '00065'
- },
- oid: '45809999',
- variableName: 'Test title for 00065',
- variableDescription: 'Test description for 00065',
- unit: {
- unitCode: 'unitCode'
- }
- },
- '45807190': {
- variableCode: {
- value: '00010'
- },
- oid: '45807190',
- unit: {
- unitCode: 'unitCode'
- }
- }
- },
- methods: {
- '1': {
- methodDescription: 'method description'
- }
- }
- },
- statisticsData : {
- median: {
- '00060': {
- '1234': [
- {
- month_nu: '2',
- day_nu: '20',
- p50_va: '40',
- begin_yr: '1970',
- end_yr: '2017',
- loc_web_ds: 'This method'
- }, {
- month_nu: '2',
- day_nu: '21',
- p50_va: '41',
- begin_yr: '1970',
- end_yr: '2017',
- loc_web_ds: 'This method'
- }, {
- month_nu: '2',
- day_nu: '22',
- p50_va: '42',
- begin_yr: '1970',
- end_yr: '2017',
- loc_web_ds: 'This method'
- }
- ]
- }
- }
+ hydrographData: {
+ primaryIVData: TEST_PRIMARY_IV_DATA,
+ groundwaterLevels: TEST_GW_LEVELS,
+ medianStatisticsData: TEST_MEDIAN_DATA,
+ currentTimeRange: TEST_CURRENT_TIME_RANGE
},
- ivTimeSeriesState: {
- currentIVVariableID: '45807197',
- ivGraphCursorOffset: 0,
- currentIVMethodID: 1,
- currentIVDateRange: 'P7D',
- showIVTimeSeries: {
- current: true,
- compare: true,
- median: true
- },
- loadingIVTSKeys: []
+ hydrographState: {
+ selectedIVMethodID: '90649',
+ showCompareIVData: false,
+ showMedianData: false,
+ graphCursorOffset: 5000000
},
ui: {
width: 400
},
- floodData: {
- floodLevels: {
- site_no: '07144100',
- action_stage: '20',
- flood_stage: '22',
- moderate_flood_stage: '25',
- major_flood_stage: '26'
- }
- }
+ floodData: {}
};
describe('monitoring-location/components/hydrograph/time-series-graph', () => {
@@ -199,8 +38,7 @@ describe('monitoring-location/components/hydrograph/time-series-graph', () => {
let store;
beforeEach(() => {
- div = select('body').append('div')
- .attr('id', 'hydrograph');
+ div = select('body').append('div').attr('id', 'hydrograph');
store = configureStore(TEST_STATE);
});
@@ -208,164 +46,65 @@ describe('monitoring-location/components/hydrograph/time-series-graph', () => {
div.remove();
});
- it('single data point renders', () => {
- div.call(drawTimeSeriesGraph, store, '12345678', false, false);
- let svgNodes = selectAll('svg');
+ it('Render graph title with monitoring location name in title and tooltip', () => {
+ drawTimeSeriesGraph(div, store, '11112222', 'USGS', 'This site', true, true);
- expect(svgNodes.size()).toBe(1);
- expect(div.html()).toContain('hydrograph-container');
+ const titleDiv = div.select('.time-series-graph-title');
+ expect(titleDiv.size()).toBe(1);
+ expect(titleDiv.select('.monitoring-location-name-div').size()).toBe(1);
+ expect(titleDiv.select('.usa-tooltip').size()).toBe(1);
});
- describe('container display', () => {
+ it('Render graph title without monitoring location name in title', () => {
+ drawTimeSeriesGraph(div, store, '11112222', 'USGS', 'This site', false, true);
- it('should not be hidden tag if there is data', () => {
- div.call(drawTimeSeriesGraph, store, '12345678', false, false);
- expect(select('#hydrograph').attr('hidden')).toBeNull();
- });
+ const titleDiv = div.select('.time-series-graph-title');
+ expect(titleDiv.size()).toBe(1);
+ expect(titleDiv.select('.monitoring-location-name-div').size()).toBe(0);
+ expect(titleDiv.select('.usa-tooltip').size()).toBe(1);
});
- describe('SVG has been made accessible', () => {
- let svg;
- beforeEach(() => {
- div.call(drawTimeSeriesGraph, store, '12345678', false, false);
- svg = select('svg');
- });
-
- it('title and desc attributes are present', function() {
- const descText = svg.select('desc').html();
-
- expect(svg.select('title').html()).toEqual('Test title for 00060, method description');
- expect(descText).toContain('Test description for 00060');
- expect(descText).toContain('12/26/2017');
- expect(descText).toContain('1/2/2018');
- expect(svg.attr('aria-labelledby')).toContain('title');
- expect(svg.attr('aria-describedby')).toContain('desc');
- });
-
- it('svg should be focusable', function() {
- expect(svg.attr('tabindex')).toBe('0');
- });
-
- it('should have a defs node', () => {
- expect(selectAll('defs').size()).toBe(1);
- expect(selectAll('defs mask').size()).toBe(1);
- expect(selectAll('defs pattern').size()).toBe(2);
- });
+ it('Render graph title without info toolip', () => {
+ drawTimeSeriesGraph(div, store, '11112222', 'USGS', 'This site', true, false);
- it('should render time series data as a line', () => {
- // There should be one segment per time-series. Each is a single
- // point, so should be a circle.
- expect(selectAll('.hydrograph-svg .line-segment').size()).toBe(2);
- });
+ const titleDiv = div.select('.time-series-graph-title');
+ expect(titleDiv.size()).toBe(1);
+ expect(titleDiv.select('.monitoring-location-name-div').size()).toBe(1);
+ expect(titleDiv.select('.usa-tooltip').size()).toBe(0);
});
- //TODO: Consider adding a test which checks that the y axis is rescaled by
- // examining the contents of the text labels.
+ it('Should render tooltip text and focus circles', () => {
+ drawTimeSeriesGraph(div, store, '11112222', 'USGS', 'This site', false, true);
- describe('compare line', () => {
-
- beforeEach(() => {
- div.call(drawTimeSeriesGraph, store, '12345678', false, false);
- });
-
- it('Should render one lines', () => {
- expect(selectAll('#ts-compare-group .line-segment').size()).toBe(1);
- });
-
- it('Should remove the lines when removing the compare time series', () => {
- store.dispatch(Actions.setIVTimeSeriesVisibility('compare', false));
- return new Promise(resolve => {
- window.requestAnimationFrame(() => {
- expect(selectAll('#ts-compare-group .line-segment').size()).toBe(0);
- resolve();
- });
- });
- });
+ expect(div.selectAll('.tooltip-text-group').size()).toBe(1);
+ expect(div.selectAll('.focus-line-group').size()).toBe(1);
+ expect(div.selectAll('.focus-circle').size()).toBe(2);
});
- describe('median lines', () => {
-
- beforeEach(() => {
- div.call(drawTimeSeriesGraph, store, '12345678', false, false);
- });
-
- it('Should render one lines', () => {
- expect(selectAll('#median-points .median-data-series').size()).toBe(1);
- });
+ it('Should not render tooltip text and focus circles', ()=> {
+ drawTimeSeriesGraph(div, store, '11112222', 'USGS', 'This site', false, false);
- it('Should remove the lines when removing the median statistics data', () => {
- store.dispatch(Actions.setIVTimeSeriesVisibility('median', false));
- return new Promise(resolve => {
- window.requestAnimationFrame(() => {
- expect(selectAll('#median-points .median-data-series').size()).toBe(0);
- resolve();
- });
- });
- });
+ expect(div.selectAll('.tooltip-text-group').size()).toBe(0);
+ expect(div.selectAll('.focus-line-group').size()).toBe(0);
+ expect(div.selectAll('.focus-circle').size()).toBe(0);
});
- describe('flood level lines', () => {
+ it('Should render current IV Data and groundwater levels but not median steps', () => {
+ drawTimeSeriesGraph(div, store, '11112222', 'USGS', 'This site', false, false);
- beforeEach(() => {
- div.call(drawTimeSeriesGraph, store, '12345678', false, false);
- });
-
- it('Should render four lines', () => {
- store.dispatch(Actions.setCurrentIVVariable(45809999));
- div.call(drawTimeSeriesGraph, store, '12345678', false, false);
- expect(selectAll('#flood-level-points .action-stage').size()).toBe(1);
- expect(selectAll('#flood-level-points .flood-stage').size()).toBe(1);
- expect(selectAll('#flood-level-points .moderate-flood-stage').size()).toBe(1);
- expect(selectAll('#flood-level-points .major-flood-stage').size()).toBe(1);
- });
-
-
- it('Should remove the lines when removing the waterwatch flood levels data', () => {
- return new Promise(resolve => {
- window.requestAnimationFrame(() => {
- expect(selectAll('#flood-level-points').size()).toBe(0);
- resolve();
- });
- });
- });
- });
-
- describe('monitoring location name', () => {
- it('Should not render the monitoring location name if showMLName is false', () => {
- div.call(drawTimeSeriesGraph, store, '12345678', false, false);
-
- expect(div.selectAll('.monitoring-location-name-div').size()).toBe(0);
- });
-
- it('Should render the monitoring location if showMLName is true', () => {
- div.call(drawTimeSeriesGraph, store, '12345678', true, false);
-
- const nameDiv = div.selectAll('.monitoring-location-name-div');
- const nameContents = nameDiv.html();
- expect(nameDiv.size()).toBe(1);
- expect(nameContents).toContain('Monitoring Location for Test');
- expect(nameContents).toContain('USGS');
- expect(nameContents).toContain('12345678');
- });
+ expect(div.selectAll('.ts-primary-group').size()).toBe(1);
+ expect(div.selectAll('.ts-compare-group').size()).toBe(0);
+ expect(div.selectAll('.iv-graph-gw-levels-group').size()).toBe(1);
+ expect(div.selectAll('.median-stats-group').size()).toBe(0);
});
- describe('tooltip text and focus elements', () => {
- it('Should not render the tooltip if showTooltip is false', () => {
- div.call(drawTimeSeriesGraph, store, '12345678', false, false);
-
- expect(div.selectAll('.tooltip-text-group').size()).toBe(0);
- expect(div.selectAll('.focus-overlay').size()).toBe(0);
- expect(div.selectAll('.focus-circle').size()).toBe(0);
- expect(div.selectAll('.focus-line').size()).toBe(0);
- });
-
- it('Should render the tooltip if showTooltip is true', () => {
- div.call(drawTimeSeriesGraph, store, '12345678', false, true);
+ it('Should render median data if visible', () => {
+ store.dispatch(setMedianDataVisibility(true));
+ drawTimeSeriesGraph(div, store, '11112222', 'USGS', 'This site', false, false);
- expect(div.selectAll('.tooltip-text-group').size()).toBe(1);
- expect(div.selectAll('.focus-overlay').size()).toBe(1);
- expect(div.selectAll('.focus-circle').size()).toBe(1);
- expect(div.selectAll('.focus-line').size()).toBe(1);
- });
+ expect(div.selectAll('.ts-primary-group').size()).toBe(1);
+ expect(div.selectAll('.ts-compare-group').size()).toBe(0);
+ expect(div.selectAll('.iv-graph-gw-levels-group').size()).toBe(1);
+ expect(div.selectAll('.median-stats-group').size()).toBe(1);
});
});
\ No newline at end of file
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/tooltip.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/tooltip.test.js
index 037d9c18f..66eff7afc 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/tooltip.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/tooltip.test.js
@@ -1,199 +1,38 @@
import {select} from 'd3-selection';
+import config from 'ui/config';
import * as utils from 'ui/utils';
import {configureStore} from 'ml/store';
-import {Actions} from 'ml/store/instantaneous-value-time-series-state';
import {drawTooltipText, drawTooltipFocus, drawTooltipCursorSlider} from './tooltip';
+import {TEST_GW_LEVELS, TEST_PRIMARY_IV_DATA, TEST_CURRENT_TIME_RANGE} from "./mock-hydrograph-state";
describe('monitoring-location/components/hydrograph/tooltip module', () => {
utils.mediaQuery = jest.fn().mockReturnValue(true);
-
- let data = [12, 13, 14, 15, 16].map(hour => {
- return {
- dateTime: new Date(`2018-01-03T${hour}:00:00.000Z`).getTime(),
- qualifiers: ['P'],
- value: hour
- };
- });
- const maskedData = [
- {
- dateTime: new Date('2018-01-03T17:00:00.000Z').getTime(),
- qualifiers: ['Fld', 'P'],
- value: null
- },
- {
- dateTime: new Date('2018-01-03T18:00:00.000Z').getTime(),
- qualifiers: ['Mnt', 'P'],
- value: null
- }
-
- ];
- data = data.concat(maskedData);
-
- const testState = {
- ianaTimeZone: 'America/Chicago',
- ivTimeSeriesData: {
- timeSeries: {
- '69928:current:P7D': {
- points: data,
- tsKey: 'current:P7D',
- variable: '00060id',
- methodID: 69928
- },
- '69928:compare:P7D': {
- points: data,
- tsKey: 'compare:P7D',
- variable: '00060id',
- methodID: 69928
- },
- '69929:current:P7D': {
- points: data,
- tsKey: 'current:P7D',
- variable: '00010id',
- methodID: 69929
- },
- '69929:compare:P7D': {
- points: data,
- tsKey: 'compare:P7D',
- variable: '00010id',
- methodID: 69929
- }
- },
- timeSeriesCollections: {
- 'current:P7D': {
- variable: '00060id',
- timeSeries: ['00060:current']
- },
- 'compare:P7D': {
- variable: '00060id',
- timeSeries: ['00060:compare']
- }
- },
- methods: {
- 69928: {
- methodDescription: '',
- methodID: 69928
- },
- 69929: {
- methodDescription: '',
- methodID: 69929
- }
- },
- variables: {
- '00060id': {
- oid: '00060id',
- variableCode: {
- value: '00060'
- },
- unit: {
- unitCode: 'ft3/s'
- }
- },
- '00010id': {
- oid: '00010id',
- variableCode: {
- value: '00010'
- },
- unit: {
- unitCode: 'deg C'
- }
- }
- },
- requests: {
- 'current:P7D': {
- timeSeriesCollections: ['current']
- },
- 'compare:P7D': {
- timeSeriesCollections: ['compare']
- }
- },
- queryInfo: {
- 'current:P7D': {
- notes: {
- 'filter:timeRange': {
- mode: 'RANGE',
- interval: {
- start: new Date('2018-01-03T12:00:00.000Z').getTime(),
- end: new Date('2018-01-04T16:00:00.000Z').getTime()
- }
- }
- }
- },
- 'compare:P7D': {
- notes: {
- 'filter:timeRange': {
- mode: 'RANGE',
- interval: {
- start: new Date('2018-01-03T12:00:00.000Z').getTime(),
- end: new Date('2018-01-03T16:00:00.000Z').getTime()
- }
- }
- }
- }
- },
- qualifiers: {
- 'P': {
- qualifierCode: 'P',
- qualifierDescription: 'Provisional data subject to revision.',
- qualifierID: 0,
- network: 'NWIS',
- vocabulary: 'uv_rmk_cd'
- },
- 'Fld': {
- qualifierCode: 'Fld',
- qualifierDescription: 'Flood',
- qualifierId: 0,
- network: 'NWIS',
- vocabulary: 'uv_rmk_cd'
- },
- 'Mnt': {
- qualifierCode: 'Mnt',
- qualifierDescription: 'Maintenance',
- qualifierId: 0,
- network: 'NWIS',
- vocabulary: 'uv_rmk_cd'
- }
- }
+ config.locationTimeZone = 'America/Chicago';
+ const TEST_STATE = {
+ hydrographData: {
+ primaryIVData: TEST_PRIMARY_IV_DATA,
+ groundwaterLevels: TEST_GW_LEVELS,
+ currentTimeRange: TEST_CURRENT_TIME_RANGE
},
- ivTimeSeriesState: {
- showIVTimeSeries: {
- current: true,
- compare: true
- },
- currentIVVariableID: '00060id',
- currentIVMethodID: 69928,
- currentIVDateRange: 'P7D',
- customIVTimeRange: null,
- ivGraphCursorOffset: 61200000
+ hydrographState: {
+ selectedIVMethodID: '90649',
+ graphCursorOffset: 500000
},
ui: {
windowWidth: 1300,
width: 990
- },
- discreteData: {
- groundwaterLevels: {
- '00060id': {
- variables: {
- oid: '00060id',
- variableCode: {
- value: '00060'
- },
- unit: {
- unitCode: 'ft3/s'
- }
- },
- values: data
- }
- }
}
};
describe('drawTooltipText', () => {
let div;
+ let store;
beforeEach(() => {
div = select('body').append('div');
+ store = configureStore(TEST_STATE);
});
afterEach(() => {
@@ -201,15 +40,6 @@ describe('monitoring-location/components/hydrograph/tooltip module', () => {
});
it('Creates the container for tooltips', () => {
- let store = configureStore({
- ivTimeSeriesState: {
- ivGraphCursorOffset: null,
- showIVTimeSeries: {
- current: true
- }
- }
- });
-
div.call(drawTooltipText, store);
const textGroup = div.selectAll('.tooltip-text-group');
@@ -217,113 +47,20 @@ describe('monitoring-location/components/hydrograph/tooltip module', () => {
});
it('Creates the text elements with the label for the focus times', () => {
- let store = configureStore(Object.assign({}, testState, {
- ivTimeSeriesState: Object.assign({}, testState.ivTimeSeriesState, {
- ivGraphCursorOffset: 2 * 60 * 60 * 1000
- })
- }));
-
div.call(drawTooltipText, store);
+ let value = div.select('.primary-tooltip-text').text().split(' - ')[0];
+ expect(value).toBe('24.1 ft');
- let value = div.select('.current-tooltip-text').text().split(' - ')[0];
- expect(value).toBe('14 ft3/s');
- value = div.select('.compare-tooltip-text').text().split(' - ')[0];
- expect(value).toBe('14 ft3/s');
- value = div.select('.gwlevel-tooltip-text').text().split(' - ')[0];
- expect(value).toBe('14 ft3/s');
- });
-
- it('Text contents are updated when the store is provided with new focus times', () => {
- let store = configureStore(Object.assign({}, testState, {
- ivTimeSeriesState: Object.assign({}, testState.ivTimeSeriesState, {
- ivGraphCursorOffset: 1
- })
- }));
-
- div.call(drawTooltipText, store);
-
- let value = div.select('.current-tooltip-text').text().split(' - ')[0];
- expect(value).toBe('12 ft3/s');
- store.dispatch(Actions.setIVGraphCursorOffset(3 * 60 * 60 * 1000));
-
- return new Promise(resolve => {
- window.requestAnimationFrame(() => {
- value = div.select('.current-tooltip-text').text().split(' - ')[0];
- expect(value).toBe('15 ft3/s');
-
- value = div.select('.compare-tooltip-text').text().split(' - ')[0];
- expect(value).toBe('15 ft3/s');
-
- value = div.select('.gwlevel-tooltip-text').text().split(' - ')[0];
- expect(value).toBe('15 ft3/s');
- resolve();
- });
- });
- });
+ expect(div.select('.compare-tooltip-text').size()).toBe(0);
- it('Shows the qualifier text if focus is near masked data points', () => {
- let store = configureStore(Object.assign({}, testState, {
- ivTimeSeriesState: Object.assign({}, testState.ivTimeSeriesState, {
- ivGraphCursorOffset: 1
- })
- }));
-
- div.call(drawTooltipText, store);
- store.dispatch(Actions.setIVGraphCursorOffset(299 * 60 * 1000)); // 2018-01-03T16:59:00.000Z
-
- return new Promise(resolve => {
- window.requestAnimationFrame(() => {
- expect(div.select('.current-tooltip-text').text()).toContain('Flood');
- resolve();
- });
- });
- });
-
- it('Creates the correct text for values of zero', () => {
- const zeroData = [12, 13, 14, 15, 16].map(hour => {
- return {
- dateTime: new Date(`2018-01-03T${hour}:00:00.000Z`).getTime(),
- qualifiers: ['P'],
- value: 0
- };
- });
- let store = configureStore(Object.assign({}, testState, {
- ivTimeSeriesData: Object.assign({}, testState.ivTimeSeriesData, {
- timeSeries: Object.assign({}, testState.ivTimeSeriesData.timeSeries, {
- '69928:current:P7D': Object.assign({}, testState.ivTimeSeriesData.timeSeries['69928:current:P7D'], {
- points: zeroData
- })
- })
- }),
- ivTimeSeriesState: Object.assign({}, testState.ivTimeSeriesState, {
- ivGraphCursorOffset: 10
- })
- }));
- div.call(drawTooltipText, store);
- store.dispatch(Actions.setIVGraphCursorOffset(119 * 60 * 1000));
- return new Promise(resolve => {
- window.requestAnimationFrame(() => {
- let value = div.select('.current-tooltip-text').text().split(' - ')[0];
-
- expect(value).toBe('0 ft3/s');
- resolve();
- });
- });
+ value = div.select('.gwlevel-tooltip-text').text().split(' - ')[0];
+ expect(value).toBe('27.2 ft');
});
});
-
describe('createTooltipFocus', () => {
let svg, currentTsData, compareTsData;
beforeEach(() => {
svg = select('body').append('svg');
-
- currentTsData = data;
- compareTsData = [12, 13, 14, 15, 16].map(hour => {
- return {
- dateTime: new Date(`2017-01-03T${hour}:00:00.000Z`).getTime(),
- value: hour + 1
- };
- });
});
afterEach(() => {
@@ -331,57 +68,7 @@ describe('monitoring-location/components/hydrograph/tooltip module', () => {
});
it('Creates focus lines and focus circles when cursor not set', () => {
- let store = configureStore(Object.assign({}, testState, {
- ivTimeSeriesData: Object.assign({}, testState.ivTimeSeriesData, {
- timeSeries: Object.assign({}, testState.ivTimeSeriesData.timeSeries, {
- '69928:current:P7D': {
- points: currentTsData,
- tsKey: 'current:P7D',
- variable: '00060id',
- methodID: 69928
- },
- '69928:compare:P7D': {
- points: compareTsData,
- tsKey: 'compare:P7D',
- variable: '00060id',
- methodID: 69928
- }
- })
- }),
- ivTimeSeriesState: Object.assign({}, testState.ivTimeSeriesState, {
- ivGraphCursorOffset: 3 * 60 * 60 * 1000
- })
- }));
-
- svg.call(drawTooltipFocus, store);
-
- expect(svg.selectAll('.focus-line').size()).toBe(1);
- expect(svg.selectAll('.focus-circle').size()).toBe(2);
- expect(svg.select('.focus-overlay').size()).toBe(1);
- });
-
- it('Focus circles and line are displayed if cursor is set', () => {
- let store = configureStore(Object.assign({}, testState, {
- ivTimeSeriesData: Object.assign({}, testState.ivTimeSeriesData, {
- timeSeries: Object.assign({}, testState.ivTimeSeriesData.timeSeries, {
- '69928:current:P7D': {
- points: currentTsData,
- tsKey: 'current:P7D',
- variable: '00060id',
- methodID: 69928
- },
- '69928:compare:P7D': {
- points: compareTsData,
- tsKey: 'compare:P7D',
- variable: '00060id',
- methodID: 69928
- }
- })
- }),
- ivTimeSeriesState: Object.assign({}, testState.ivTimeSeriesState, {
- ivGraphCursorOffset: 3 * 60 * 60 * 1000
- })
- }));
+ let store = configureStore(TEST_STATE);
svg.call(drawTooltipFocus, store);
@@ -402,7 +89,7 @@ describe('monitoring-location/components/hydrograph/tooltip module', () => {
});
it('should render the cursor slider', () => {
- let store = configureStore(testState);
+ let store = configureStore(TEST_STATE);
drawTooltipCursorSlider(div, store);
const sliderSvg = div.selectAll('.cursor-slider-svg');
diff --git a/assets/src/scripts/monitoring-location/store/hydrograph-data.js b/assets/src/scripts/monitoring-location/store/hydrograph-data.js
index 1341bf2f6..1e4040ef0 100644
--- a/assets/src/scripts/monitoring-location/store/hydrograph-data.js
+++ b/assets/src/scripts/monitoring-location/store/hydrograph-data.js
@@ -103,47 +103,49 @@ const retrieveIVData = function(siteno, dataKind, {parameterCode, period, startT
startTime: startTime,
endTime: endTime
}).then(data => {
- const tsData = data.value.timeSeries[0];
- // Create parameter object and adjust data if parameter code is calculated
- let parameter = {
- parameterCode: tsData.variable.variableCode[0].value,
- name: tsData.variable.variableName,
- description: tsData.variable.variableDescription,
- unit: tsData.variable.unit.unitCode
- };
- if (isCalculatedTemperatureCode) {
- parameter = getConvertedTemperatureParameter(parameter);
- }
+ if (data.value && data.value.timeSeries && data.value.timeSeries.length) {
+ const tsData = data.value.timeSeries[0];
+ // Create parameter object and adjust data if parameter code is calculated
+ let parameter = {
+ parameterCode: tsData.variable.variableCode[0].value,
+ name: tsData.variable.variableName,
+ description: tsData.variable.variableDescription,
+ unit: tsData.variable.unit.unitCode
+ };
+ if (isCalculatedTemperatureCode) {
+ parameter = getConvertedTemperatureParameter(parameter);
+ }
- // Convert values from strings to float and set to null if they have the noDataValue.
- // If calculated parameter code, update the value.
- const noDataValue = tsData.variable.noDataValue;
- const values = tsData.values.reduce((valuesByMethodId, value) => {
- valuesByMethodId[value.method[0].methodID] = {
- points: value.value.map(point => {
- let pointValue = parseFloat(point.value);
- pointValue = pointValue === noDataValue ? null : pointValue;
- if (pointValue && isCalculatedTemperatureCode) {
- pointValue = parseFloat(convertCelsiusToFahrenheit(pointValue).toFixed(2));
+ // Convert values from strings to float and set to null if they have the noDataValue.
+ // If calculated parameter code, update the value.
+ const noDataValue = tsData.variable.noDataValue;
+ const values = tsData.values.reduce((valuesByMethodId, value) => {
+ valuesByMethodId[value.method[0].methodID] = {
+ points: value.value.map(point => {
+ let pointValue = parseFloat(point.value);
+ pointValue = pointValue === noDataValue ? null : pointValue;
+ if (pointValue && isCalculatedTemperatureCode) {
+ pointValue = parseFloat(convertCelsiusToFahrenheit(pointValue).toFixed(2));
+ }
+ return {
+ value: pointValue,
+ qualifiers: point.qualifiers,
+ dateTime: DateTime.fromISO(point.dateTime).toMillis()
+ };
+ }),
+ method: {
+ ...value.method[0],
+ methodID: value.method[0].methodID.toString()
}
- return {
- value: pointValue,
- qualifiers: point.qualifiers,
- dateTime: DateTime.fromISO(point.dateTime).toMillis()
- };
- }),
- method: {
- ...value.method[0],
- methodID: value.method[0].methodID.toString()
- }
- };
- return valuesByMethodId;
- }, {});
+ };
+ return valuesByMethodId;
+ }, {});
- dispatch(addIVHydrographData(dataKind, {
- parameter,
- values
- }));
+ dispatch(addIVHydrographData(dataKind, {
+ parameter,
+ values
+ }));
+ }
});
};
};
diff --git a/assets/src/scripts/monitoring-location/store/hydrograph-parameters.js b/assets/src/scripts/monitoring-location/store/hydrograph-parameters.js
index 865c6890b..50ad00b1e 100644
--- a/assets/src/scripts/monitoring-location/store/hydrograph-parameters.js
+++ b/assets/src/scripts/monitoring-location/store/hydrograph-parameters.js
@@ -26,39 +26,57 @@ const updateHydrographParameters = function(parameters) {
*/
export const retrieveHydrographParameters = function(siteno) {
return function(dispatch) {
- const fetchIVParameters = fetchTimeSeries({sites: [siteno]}).then(series => {
- const allParameterCodes = series.value.timeSeries.map(ts => ts.variable.variableCode[0].value);
- return series.value.timeSeries.reduce((varsByPCode, ts) => {
- const parameterCode = ts.variable.variableCode[0].value;
- varsByPCode[parameterCode] = {
- parameterCode: parameterCode,
- name: ts.variable.variableName,
- description: ts.variable.variableDescription,
- unit: ts.variable.unit.unitCode,
- hasIVData: true
- };
- // If it is a celsius parameterCode, add a variable for calculated Fahrenheit.
- if (config.TEMPERATURE_PARAMETERS.celsius.includes(parameterCode) &&
- !hasMeasuredFahrenheitParameter(parameterCode, allParameterCodes)) {
- const fahrenheitParameter = getConvertedTemperatureParameter(varsByPCode[parameterCode]);
- varsByPCode[fahrenheitParameter.parameterCode] = fahrenheitParameter;
+ const fetchIVParameters = fetchTimeSeries({sites: [siteno]})
+ .then(series => {
+ if (series.value && series.value.timeSeries) {
+ const allParameterCodes = series.value.timeSeries.map(ts => ts.variable.variableCode[0].value);
+ return series.value.timeSeries.reduce((varsByPCode, ts) => {
+ const parameterCode = ts.variable.variableCode[0].value;
+ varsByPCode[parameterCode] = {
+ parameterCode: parameterCode,
+ name: ts.variable.variableName,
+ description: ts.variable.variableDescription,
+ unit: ts.variable.unit.unitCode,
+ hasIVData: true
+ };
+ // If it is a celsius parameterCode, add a variable for calculated Fahrenheit.
+ if (config.TEMPERATURE_PARAMETERS.celsius.includes(parameterCode) &&
+ !hasMeasuredFahrenheitParameter(parameterCode, allParameterCodes)) {
+ const fahrenheitParameter = getConvertedTemperatureParameter(varsByPCode[parameterCode]);
+ varsByPCode[fahrenheitParameter.parameterCode] = fahrenheitParameter;
+ }
+ return varsByPCode;
+ }, {});
+ } else {
+ return null;
}
- return varsByPCode;
- }, {});
- });
- const fetchGWLevelParameters = fetchGroundwaterLevels({site: siteno}).then(series => {
- return series.value.timeSeries.reduce((varsByPCode, ts) => {
- const parameterCode = ts.variable.variableCode[0].value;
- varsByPCode[parameterCode] = {
- parameterCode: parameterCode,
- name: ts.variable.variableName,
- description: ts.variable.variableDescription,
- unit: ts.variable.unit.unitCode,
- hasGWLevelsData: true
- };
- return varsByPCode;
- }, {});
- });
+ })
+ .catch(reason => {
+ console.error(reason);
+ throw reason;
+ });
+ const fetchGWLevelParameters = fetchGroundwaterLevels({site: siteno})
+ .then(series => {
+ if (series.value && series.value.timeSeries) {
+ return series.value.timeSeries.reduce((varsByPCode, ts) => {
+ const parameterCode = ts.variable.variableCode[0].value;
+ varsByPCode[parameterCode] = {
+ parameterCode: parameterCode,
+ name: ts.variable.variableName,
+ description: ts.variable.variableDescription,
+ unit: ts.variable.unit.unitCode,
+ hasGWLevelsData: true
+ };
+ return varsByPCode;
+ }, {});
+ } else {
+ return null;
+ }
+ })
+ .catch(reason => {
+ console.error(reason);
+ throw reason;
+ });
return Promise.all([fetchIVParameters, fetchGWLevelParameters]).then(([ivVars, gwVars]) => {
const mergedVars = merge({}, gwVars, ivVars);
dispatch(updateHydrographParameters(mergedVars));
--
GitLab