diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index 8628f53c902e27517366af381d3949b2ed6ac356..ec6d19761b79be187f86041a5bbd3eeb92aafea2 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -23,7 +23,7 @@ const { drawSimpleLegend, legendMarkerRowsSelector } = require('./legend');
const { plotSeriesSelectTable, availableTimeseriesSelector } = require('./parameters');
const { xScaleSelector, yScaleSelector, timeSeriesScalesByParmCdSelector } = require('./scales');
const { allTimeSeriesSelector, isVisibleSelector, titleSelector,
- descriptionSelector, currentVariableTimeSeriesSelector, timeSeriesSelector } = require('./timeSeries');
+ descriptionSelector, currentVariableTimeSeriesSelector, hasTimeSeriesWithPoints } = require('./timeSeries');
const { createTooltipFocus, createTooltipText } = require('./tooltip');
const { getCurrentVariable } = require('../../selectors/timeSeriesSelector');
@@ -377,18 +377,17 @@ const graphControls = function(elem) {
};
/**
- * Modify styling to hide or display the plot area.
+ * Modify styling to hide or display the elem.
*
* @param elem
* @param currentTimeseries
*/
-const controlGraphDisplay = function (elem, currentTimeseries) {
- const seriesWithPoints = Object.values(currentTimeseries).filter(x => x.points.length > 0);
- elem.attr('hidden', seriesWithPoints.length === 0 ? true : null);
+const controlDisplay = function (elem, hasSeriesWithPoints) {
+ elem.attr('hidden', hasSeriesWithPoints ? null : true);
};
-const createDaterangeControls = function(elem, siteno) {
+const createDaterangeControls = function(elem, {siteno, hasTimeSeriesWithPoints}) {
const DATE_RANGE = [{
label: 'seven-day',
name: '7 days',
@@ -402,27 +401,30 @@ const createDaterangeControls = function(elem, siteno) {
name: '1 year',
period: 'P1Y'
}];
- const container = elem.insert('ul', ':first-child')
- .attr('id', 'ts-daterange-select-container')
- .attr('class', 'usa-fieldset-inputs usa-unstyled-list');
- const li = container.selectAll('li')
- .data(DATE_RANGE)
- .enter().append('li');
- li.append('input')
- .attr('type', 'radio')
- .attr('name', 'ts-daterange-input')
- .attr('id', (d) => d.label)
- .attr('value', (d) => d.period)
- .on('change', dispatch(function() {
- return Actions.retrieveExtendedTimeseries(
- siteno,
- li.select('input:checked').attr('value')
- );
- }));
- li.append('label')
- .attr('for', (d) => d.label)
- .text((d) => d.name);
- li.select(`#${DATE_RANGE[0].label}`).attr('checked', true);
+ elem.select('#ts-daterange-select-container').remove();
+ if (hasTimeSeriesWithPoints) {
+ const container = elem.insert('ul', ':first-child')
+ .attr('id', 'ts-daterange-select-container')
+ .attr('class', 'usa-fieldset-inputs usa-unstyled-list');
+ const li = container.selectAll('li')
+ .data(DATE_RANGE)
+ .enter().append('li');
+ li.append('input')
+ .attr('type', 'radio')
+ .attr('name', 'ts-daterange-input')
+ .attr('id', (d) => d.label)
+ .attr('value', (d) => d.period)
+ .on('change', dispatch(function () {
+ return Actions.retrieveExtendedTimeseries(
+ siteno,
+ li.select('input:checked').attr('value')
+ );
+ }));
+ li.append('label')
+ .attr('for', (d) => d.label)
+ .text((d) => d.name);
+ li.select(`#${DATE_RANGE[0].label}`).attr('checked', true);
+ }
};
const attachToNode = function (store, node, {siteno} = {}) {
@@ -434,10 +436,13 @@ const attachToNode = function (store, node, {siteno} = {}) {
store.dispatch(Actions.resizeUI(window.innerWidth, node.offsetWidth));
select(node)
.call(provide(store))
- .call(createDaterangeControls, siteno);
+ .call(link(createDaterangeControls, createStructuredSelector({
+ siteno: () => siteno,
+ hasTimeSeriesWithPoints: hasTimeSeriesWithPoints('current', 'P7D')
+ })));
select(node).select('.graph-container')
- .call(link(controlGraphDisplay, timeSeriesSelector('current')))
+ .call(link(controlDisplay, hasTimeSeriesWithPoints('current', 'P7D')))
.call(timeSeriesGraph, siteno)
.call(cursorSlider)
.append('div')
diff --git a/assets/src/scripts/components/hydrograph/timeSeries.js b/assets/src/scripts/components/hydrograph/timeSeries.js
index e799f0a762f5bdb71b7aca20e3f3197603d99950..6c4d669884cc5c333774bb294ace4b8e2a7a1d34 100644
--- a/assets/src/scripts/components/hydrograph/timeSeries.js
+++ b/assets/src/scripts/components/hydrograph/timeSeries.js
@@ -81,7 +81,12 @@ export const timeSeriesSelector = memoize((tsKey, period) => createSelector(
}
));
-
+export const hasTimeSeriesWithPoints = memoize((tsKey, period) => createSelector(
+ timeSeriesSelector(tsKey, period),
+ (timeSeries) => {
+ const seriesWithPoints = Object.values(timeSeries).filter(x => x.points.length > 0);
+ return seriesWithPoints.length > 0;
+}));
/**
* Factory function creates a function that:
diff --git a/assets/src/scripts/components/hydrograph/timeSeries.spec.js b/assets/src/scripts/components/hydrograph/timeSeries.spec.js
index 11cc82d1be95e03da388be574192c4e87ca422d4..8e586409bfad5846db9c51f62f835d79264a1a7c 100644
--- a/assets/src/scripts/components/hydrograph/timeSeries.spec.js
+++ b/assets/src/scripts/components/hydrograph/timeSeries.spec.js
@@ -1,4 +1,4 @@
-const { timeSeriesSelector, isVisibleSelector, yLabelSelector,
+const { timeSeriesSelector, hasTimeSeriesWithPoints, isVisibleSelector, yLabelSelector,
titleSelector, descriptionSelector, currentVariableTimeSeriesSelector,
allTimeSeriesSelector, requestTimeRangeSelector} = require('./timeSeries');
@@ -332,6 +332,40 @@ describe('TimeSeries module', () => {
});
});
+ describe('hasTimeSeriesWithPoints', () => {
+ it('Returns true if the time series for tsKey and period have non zero points', () => {
+ expect(hasTimeSeriesWithPoints('current')(TEST_DATA)).toBe(true);
+ expect(hasTimeSeriesWithPoints('current', 'P30D')(TEST_DATA)).toBe(true);
+ });
+ it('Returns false if the times series for tsKey and period have zero points', () => {
+ const newTestData = {
+ ...TEST_DATA,
+ series: {
+ ...TEST_DATA.series,
+ timeSeries: {
+ ...TEST_DATA.series.timeSeries,
+ '00060': {
+ tsKey: 'current:P7D',
+ startTime: new Date('2018-03-06T15:45:00.000Z'),
+ endTime: new Date('2018-03-13T13:45:00.000Z'),
+ variable: '45807197',
+ points: []
+ },
+ '00060:P30D': {
+ tsKey: 'current:P30D:00060',
+ startTime: new Date('2018-02-06T15:45:00.000Z'),
+ endTime: new Date('2018-02-13T13:45:00.000Z'),
+ variable: '45807197',
+ points: []
+ }
+ }
+ }
+ };
+ expect(hasTimeSeriesWithPoints('current')(newTestData)).toBe(false);
+ expect(hasTimeSeriesWithPoints('current', 'P30D')(newTestData)).toBe(false);
+ });
+ });
+
describe('isVisibleSelector', () => {
it('Returns whether the time series is visible', () => {
const store = {