diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
index 18a450ba7e0160c4762fa57f407bcd11fe49a65f..c4a0ff16d354f03931794c66d2f006bc2688c050 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
@@ -103,8 +103,6 @@ export const attachToNode = function(store,
store.dispatch(floodDataActions.retrieveWaterwatchData(siteno));
fetchDataPromise.then(() => {
- debugger;
- console.log('Fetched data');
nodeElem
.select('.loading-indicator-container')
.call(drawLoadingIndicator, {showLoadingIndicator: false, sizeClass: 'fa-3x'});
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 d69f3c59cebb2c1cd0916f0383fdb255e539f03b..d9a3a8aa4d7388a9f38e28b8078b1b9a52aad753 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
@@ -1,4 +1,4 @@
-import {select} from 'd3-selection';
+import {select, selectAll} from 'd3-selection';
import sinon from 'sinon';
import * as utils from 'ui/utils';
@@ -14,7 +14,7 @@ import {attachToNode} from './index';
import {
TEST_CURRENT_TIME_RANGE,
TEST_GW_LEVELS,
- TEST_HYDROGRAPH_PARAMETERS,
+ TEST_HYDROGRAPH_PARAMETERS, TEST_MEDIAN_DATA,
TEST_PRIMARY_IV_DATA
} from './mock-hydrograph-state';
@@ -246,21 +246,20 @@ describe('monitoring-location/components/hydrograph module', () => {
expect(retrieveHydrographParametersSpy).not.toHaveBeenCalled();
});
});
- /*
- TODO: Trying to why this is showing strange warnings. leaving out for now
- */
- xdescribe('Tests for rendering once fetching is complete', () => {
+ describe('Tests for rendering once fetching is complete when showOnlyGraph is false', () => {
let store;
beforeEach(() => {
store = configureStore({
hydrographData: {
primaryIVData: TEST_PRIMARY_IV_DATA,
currentTimeRange: TEST_CURRENT_TIME_RANGE,
- groundwaterLevels: TEST_GW_LEVELS
+ groundwaterLevels: TEST_GW_LEVELS,
+ medianStatisticsData: TEST_MEDIAN_DATA
},
hydrographState: {
- selectedIVMethodID: '90649'
+ selectedIVMethodID: '90649',
+ showMedianData: true
},
hydrographParameters: TEST_HYDROGRAPH_PARAMETERS,
floodData: {},
@@ -270,14 +269,18 @@ describe('monitoring-location/components/hydrograph module', () => {
});
hydrographData.retrieveHydrographData = jest.fn(() => {
- return function(dispatch) {
- console.log('In mocked retrieveHydrographData');
+ return function() {
+ return Promise.resolve();
+ };
+ });
+ hydrographParameters.retrieveHydrographParameters = jest.fn(() => {
+ return function() {
return Promise.resolve();
};
});
attachToNode(store, graphNode, {
...INITIAL_PARAMETERS,
- showOnlyGraph: true
+ showOnlyGraph: false
});
});
@@ -285,149 +288,163 @@ describe('monitoring-location/components/hydrograph module', () => {
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');
- });
+ it('should render the correct number of svg nodes', () => {
+ expect(selectAll('svg').size()).toBe(4);
+ });
- 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 have a title div', () => {
+ const titleDiv = selectAll('.time-series-graph-title');
+ expect(titleDiv.size()).toBe(1);
+ expect(titleDiv.select('div').text()).toContain('Depth to water level');
+ expect(titleDiv.select('.usa-tooltip').text()).toEqual('Depth to water level, feet');
+ });
- 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 four segments
+ expect(selectAll('.hydrograph-svg .line-segment').size()).toBe(4);
+ });
- 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.iv-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(10);
+ });
+
+ 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);
+ });
+ });
+
+ describe('Tests for rendering once fetching is complete when showOnlyGraph is true', () => {
+ let store;
+ beforeEach(() => {
+ store = configureStore({
+ hydrographData: {
+ primaryIVData: TEST_PRIMARY_IV_DATA,
+ currentTimeRange: TEST_CURRENT_TIME_RANGE,
+ groundwaterLevels: TEST_GW_LEVELS,
+ medianStatisticsData: TEST_MEDIAN_DATA
+ },
+ hydrographState: {
+ selectedIVMethodID: '90649',
+ showMedianData: true
+ },
+ hydrographParameters: TEST_HYDROGRAPH_PARAMETERS,
+ floodData: {},
+ ui: {
+ width: 1000
+ }
});
- 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
- }
-
- });
-
- attachToNode(store, graphNode, {siteno: '123456788', showOnlyGraph: true}, resolvedLoadPromise);
- });
+ hydrographData.retrieveHydrographData = jest.fn(() => {
+ return function() {
+ return Promise.resolve();
+ };
+ });
+ hydrographParameters.retrieveHydrographParameters = jest.fn(() => {
+ return function() {
+ return Promise.resolve();
+ };
+ });
+ attachToNode(store, graphNode, {
+ ...INITIAL_PARAMETERS,
+ showOnlyGraph: true
+ });
+ });
- it('should not have brush element for the hydrograph', () => {
- expect(selectAll('.brush').size()).toBe(0);
- });
+ it('loading indicator should be hidden', () => {
+ expect(nodeElem.select('.loading-indicator').size()).toBe(0);
+ });
- it('should not have slider-wrapper element', () => {
- expect(selectAll('.slider-wrapper').size()).toBe(0);
- });
+ it('should render the correct number of svg nodes', () => {
+ expect(selectAll('svg').size()).toBe(2);
+ });
- 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 have a title div', () => {
+ const titleDiv = selectAll('.time-series-graph-title');
+ expect(titleDiv.size()).toBe(1);
+ });
- it('should not have method select element', () => {
- expect(selectAll('#ts-method-select-container').size()).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('should not have the select time series element', () => {
- expect(selectAll('#select-time-series').size()).toBe(0);
- });
+ it('should render time series data as a line', () => {
+ // There should be four segments
+ expect(selectAll('.hydrograph-svg .line-segment').size()).toBe(4);
+ });
- it('should not have the data table', () => {
- expect(select('#iv-data-table-container').selectAll('table').size()).toBe(0);
- });
- */
+ it('should render a rectangle for masked data', () => {
+ expect(selectAll('.hydrograph-svg g.iv-mask-group').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 not have brush element for the hydrograph', () => {
+ expect(selectAll('.brush').size()).toBe(0);
+ });
+
+ it('should not have .cursor-slider-svg element', () => {
+ expect(selectAll('.cursor-slider-svg').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);
+ });
+
+ 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 data tables for hydrograph data', () => {
+ expect(select('#iv-hydrograph-data-table-container').size()).toBe(0);
+ expect(select('#gw-hydrograph-data-table-container').size()).toBe(0);
+ });
});
});
\ No newline at end of file
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 ff5b030849bad3e1d43e00119ea88ed120649e42..23eb92a266dd0b29813fe351c70aee2a6950ccb9 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
@@ -6,6 +6,7 @@ export const TEST_PRIMARY_IV_DATA = {
parameter: {
parameterCode: '72019',
name: 'Depth to water level',
+ description: 'Depth to water level, feet',
unit: 'ft'
},
values: {
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/time-series-lines.js b/assets/src/scripts/monitoring-location/components/hydrograph/time-series-lines.js
index 1f02d48a816d0179ea49630dca497f044168d4e5..b8a4db8ab199410a72f5f5a8e8b6be8f76b0f389 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/time-series-lines.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/time-series-lines.js
@@ -44,7 +44,7 @@ const drawMaskSegment = function(group, {segment, isCurrentMethod, dataKind, xSc
const rectHeight = Math.abs(yRangeEnd - yRangeStart);
const maskGroup = group.append('g')
- .attr('class', 'dv-mask-group');
+ .attr('class', 'iv-mask-group');
maskGroup.append('rect')
.attr('x', xRangeStart)
diff --git a/assets/src/scripts/utils.test.js b/assets/src/scripts/utils.test.js
index 1070f6ec7a191a50daf52966a6ad0b8a89db771c..1c590ab8a13be9267065bd8f5fab1d8a75085cdf 100644
--- a/assets/src/scripts/utils.test.js
+++ b/assets/src/scripts/utils.test.js
@@ -143,46 +143,45 @@ describe('Utils module', () => {
describe('sortedParameters', () => {
const testVars = {
- 20214: {
- oid: '20214',
- variableCode: {'value': '00065', variableID: 20214},
- variableDescription: 'Gage Height, meters',
- variableName: 'Gage Height, m'
+ '00060': {
+ parameterCode: '00060',
+ name: 'Streamflow, ft3/s',
+ description: 'Discharge, cubic feet per second',
+ unit: 'ft3/s',
+ hasIVData: true
},
- 1701: {
- oid: '1701',
- variableCode: {value: '91102', variableID: 1701},
- variableDescription: 'Mass, cobalt(II) chloride, kilogram',
- variableName: 'Mass, cobalt(II) chloride, kg'
+ '00010': {
+ parameterCode: '00010',
+ name: 'Temperature, water, C',
+ description: 'Temperature, water, degrees Celsius',
+ unit: 'deg C',
+ hasIVData: true
},
- 501: {
- oid: '501',
- variableCode: {value: '20018', variableID: 501},
- variableDescription: 'Volume, bromine, liter',
- variableName: 'Volume, bromine, L'
+ '00010F': {
+ parameterCode: '00010F',
+ name: 'Temperature, water, F',
+ description: 'Temperature, water, degrees Fahrenheit',
+ unit: 'deg F',
+ hasIVData: true
},
- 17778: {
- oid: '17778',
- variableCode: {value: '72019', variableID: 17778},
- variableDescription: 'Depth to water level, meters below land surface',
- variableName: 'Depth to water level, m'
+ '72019': {
+ parameterCode: '72019',
+ name: 'Depth to water level, ft below land surface',
+ description: 'Depth to water level, feet below land surface',
+ unit: 'ft',
+ hasIVData: true,
+ hasGWLevelsData: true
},
- 42: {
- oid: '42',
- variableCode: {value: '83452', variableID: 42},
- variableDescription: 'Cross-sectional area, millibarn',
- variableName: 'Cross-sectional area, mb'
- },
- 88450: {
- oid: '88450',
- variableCode: {value: '00060', variableID: 88450},
- variableDescription: 'Discharge, cubic meters per second',
- variableName: 'Discharge, m3/s'
+ '62610': {
+ parameterCode: '62610',
+ name: 'Groundwater level above NGVD 1929, feet',
+ description: 'Groundwater level above NGVD 1929, feet',
+ unit: 'ft',
+ hasGWLevelsData: true
}
};
-
it('sorts a group of parameters', () => {
- expect(sortedParameters(testVars).map(x => x.oid)).toEqual(['20214', '88450', '17778', '42', '1701', '501']);
+ expect(sortedParameters(testVars).map(x => x.parameterCode)).toEqual(['00060', '72019', '62610', '00010', '00010F']);
});
it('handles the case where variables are empty', () => {