diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/data-table.js b/assets/src/scripts/monitoring-location/components/hydrograph/data-table.js
index 881346d98d3e1d461bfdf0281fa0eaa41de1ac46..14014a1e2afbf16c77cae181e62a8bd798e66b31 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/data-table.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/data-table.js
@@ -8,6 +8,7 @@ import {link} from 'ui/lib/d3-redux';
import {getGroundwaterLevelsTableData} from './selectors/discrete-data';
import {getIVTableData} from './selectors/iv-data';
import {drawDownloadForm} from './download-data';
+import {appendButton} from './select-actions';
const TABLE_CAPTION = {
iv: 'Instantaneous value data',
@@ -107,7 +108,18 @@ export const drawDataTables = function(elem, store, siteno, agencyCd) {
dataKind: () => 'gw',
currentData: getGroundwaterLevelsTableData
})));
- elem.append('div')
- .attr('id', 'download-graph-data-container')
- .call(drawDownloadForm, store, siteno, agencyCd);
+ var container = elem.append('div')
+ .attr('class', 'select-actions-container');
+ var buttonGroup = container.append('ul')
+ .attr('class', 'select-actions-button-group usa-button-group');
+ appendButton(buttonGroup, {
+ uswdsIcon:'file_download',
+ buttonLabel:'Retrieve data',
+ idOfDivToControl: 'download-graph-data-container-data-table'
+ });
+ container.append('div')
+ .attr('id', 'download-graph-data-container-data-table')
+ .attr('hidden', 'true')
+ .call(drawDownloadForm, store, siteno, agencyCd, 'data-table');
+
};
\ No newline at end of file
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/data-table.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/data-table.test.js
index 234e2279318fb9ffcff0d10ec6b073d51245d501..c5ab9366af9f9bfe50854eaafb1ad033b5ff1900 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/data-table.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/data-table.test.js
@@ -46,7 +46,7 @@ describe('monitoring-location/components/hydrograph/data-table', () => {
const gwTable = testDiv.select('#gw-table-container').select('table');
expect(gwTable.select('caption').text()).toBe('Field visit data');
expect(gwTable.selectAll('tr').size()).toBe(5);
- const downloadSection = testDiv.select('#download-graph-data-container');
+ const downloadSection = testDiv.select('#download-graph-data-container-data-table');
expect(downloadSection.selectAll('input[type="radio"]').size()).toBe(3);
});
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/download-data.js b/assets/src/scripts/monitoring-location/components/hydrograph/download-data.js
index 086a59844306f99e93153d24a025e30f0793fd2b..5b743efe7ab913a0c6c035345d349748c0b96f1a 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/download-data.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/download-data.js
@@ -83,10 +83,6 @@ const getSiteMetaDataURL = function(siteno) {
});
};
-const uniqueNumber = (length=16) => {
- return parseInt(Math.ceil(Math.random() * Date.now()).toPrecision(length).toString().replace('.', ''));
-};
-
/*
* Helper function to render a single checkbox in container.
*/
@@ -97,7 +93,7 @@ const drawRadioButton = function(container, inputID, label, value, nameSuffix) {
.attr('class', 'usa-radio__input')
.attr('id', inputID)
.attr('type', 'radio')
- .attr('name', 'retrieve-value-'+nameSuffix)
+ .attr('name', `retrieve-value-${nameSuffix}`)
.attr('value', value);
radioContainer.append('label')
.attr('class', 'usa-radio__label')
@@ -113,27 +109,27 @@ const drawRadioButtons = function(container, {
hasVisibleCompareIVData,
hasVisibleMedianData,
hasVisibleGroundwaterLevels,
- primaryParameter
+ primaryParameter,
+ uniqueId
}) {
container.select('.download-radio-container').remove();
- let uniqueSuffix = uniqueNumber();
const radioContainer = container.append('div')
.attr('class', 'download-radio-container');
if (primaryParameter && !isCalculatedTemperature(primaryParameter.parameterCode)) {
if (hasVisiblePrimaryIVData) {
- radioContainer.call(drawRadioButton, 'download-primary-iv-data-'+uniqueSuffix, 'Current time-series data', 'primary', uniqueSuffix);
+ radioContainer.call(drawRadioButton, `download-primary-iv-data-${uniqueId}`, 'Current time-series data', 'primary', uniqueId);
}
if (hasVisibleCompareIVData) {
- radioContainer.call(drawRadioButton, 'download-compare-iv-data-'+uniqueSuffix, 'Prior year time-series data', 'compare', uniqueSuffix);
+ radioContainer.call(drawRadioButton, `download-compare-iv-data-${uniqueId}`, 'Prior year time-series data', 'compare', uniqueId);
}
if (hasVisibleMedianData) {
- radioContainer.call(drawRadioButton, 'download-median-data-'+uniqueSuffix, 'Median', 'median', uniqueSuffix);
+ radioContainer.call(drawRadioButton, `download-median-data-${uniqueId}`, 'Median', 'median', uniqueId);
}
if (hasVisibleGroundwaterLevels) {
- radioContainer.call(drawRadioButton, 'download-field-visits-'+uniqueSuffix, 'Field visits', 'groundwater-levels', uniqueSuffix);
+ radioContainer.call(drawRadioButton, `download-field-visits-${uniqueId}`, 'Field visits', 'groundwater-levels', uniqueId);
}
}
- radioContainer.call(drawRadioButton, 'download-site-meta-data-'+uniqueSuffix, 'About this location', 'site', uniqueSuffix);
+ radioContainer.call(drawRadioButton, `download-site-meta-data-${uniqueId}`, 'About this location', 'site', uniqueId);
};
/*
@@ -143,7 +139,7 @@ const drawRadioButtons = function(container, {
* @param {Redux store} store
* @param {String} siteno
*/
-export const drawDownloadForm = function(container, store, siteno, agencyCd) {
+export const drawDownloadForm = function(container, store, siteno, agencyCd, uniqueId) {
const downloadContainer = container.append('div');
const formContainer = downloadContainer.append('div')
.attr('class', 'usa-form')
@@ -159,7 +155,10 @@ export const drawDownloadForm = function(container, store, siteno, agencyCd) {
hasVisibleCompareIVData: hasVisibleIVData('compare'),
hasVisibleMedianData: hasVisibleMedianStatisticsData,
hasVisibleGroundwaterLevels: hasVisibleGroundwaterLevels,
- primaryParameter: getPrimaryParameter
+ primaryParameter: getPrimaryParameter,
+ uniqueId: () => {
+ return uniqueId;
+ }
})));
const downloadButton = formContainer.append('button')
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 a39867d1a0480ab2c13f365f0862795f4085fda0..46a46570c05058ef901ae14318558026a0d1cb64 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
@@ -341,7 +341,8 @@ describe('monitoring-location/components/hydrograph module', () => {
});
it('should have two download data forms', () => {
- expect(selectAll('#download-graph-data-container').size()).toBe(2);
+ expect(selectAll('#download-graph-data-container').size()).toBe(1);
+ expect(selectAll('#download-graph-data-container-data-table').size()).toBe(1);
});
it('should have method select element', () => {
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/select-actions.js b/assets/src/scripts/monitoring-location/components/hydrograph/select-actions.js
index 2e9a72764fbe81f9118cb102aa95bd57b023c971..ab49a03f4d0abc2f3f781261e2c094f92dd28de2 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/select-actions.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/select-actions.js
@@ -8,7 +8,7 @@ import {drawDownloadForm} from './download-data';
/*
* Helper function to render a select action button on listContainer
*/
-const appendButton = function(listContainer, {uswdsIcon, buttonLabel, idOfDivToControl}) {
+export const appendButton = function(listContainer, {uswdsIcon, buttonLabel, idOfDivToControl}) {
const button = listContainer.append('li')
.attr('class', 'usa-button-group__item')
.append('button')
@@ -78,5 +78,5 @@ export const drawSelectActions = function(container, store, siteno, agencyCode)
container.append('div')
.attr('id', 'download-graph-data-container')
.attr('hidden', true)
- .call(drawDownloadForm, store, siteno, agencyCode);
+ .call(drawDownloadForm, store, siteno, agencyCode, 'container');
};
diff --git a/assets/src/styles/components/hydrograph/_app.scss b/assets/src/styles/components/hydrograph/_app.scss
index 621b1a9691f0749eae12d567a607b0e9a55842f5..dd623f943a80e9c90cd97c6072a28bfdacf8e1db 100644
--- a/assets/src/styles/components/hydrograph/_app.scss
+++ b/assets/src/styles/components/hydrograph/_app.scss
@@ -68,7 +68,7 @@
}
}
- #download-graph-data-container > div {
+ [id^='download-graph-data-container'] > div {
@include uswds.grid-row;
@include uswds.grid-gap;
@include uswds.u-padding(2);