diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5f145c14404c6190e1f6e8ed908618ba3668a8c5..79927b82210679b34bd22aba534425a86447be22 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
- Parameter selection table component was converted to Vue.
- Time span shortcuts component was converted to Vue.
- Time span controls were converted to use Vue.
+- Select-actions component converted to Vue.
## [1.2.0](https://github.com/usgs/waterdataui/compare/waterdataui-1.1.0...waterdataui-1.2.0) - 2022-06-10
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
index 8c6a535aec801540699ab75f8a056dce736c45ae..9e6a5a4b7af958ded0e1448672f7f5af6424ebad 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
@@ -71,8 +71,21 @@ export const attachToNode = function(store,
} = {}) {
const nodeElem = select(node);
+ const addTimeDownloadGraphControlsApp = function() {
+ const timeDownloadGraphControlsApp = createApp(TimeDownloadGraphControlsApp, {});
+ timeDownloadGraphControlsApp.use(ReduxConnectVue, {
+ store,
+ mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
+ mapStateToPropsFactory: createStructuredSelector
+ });
+ timeDownloadGraphControlsApp.provide('store', store);
+ timeDownloadGraphControlsApp.provide('siteno', siteno);
+ timeDownloadGraphControlsApp.provide('agencyCd', agencyCd);
+ timeDownloadGraphControlsApp.mount('#time-download-graph-controls-anchor');
+ };
+
if (!config.ivPeriodOfRecord && !config.gwPeriodOfRecord) {
- // select(node).select('.select-actions-container').call(drawSelectActions, store, siteno, agencyCd);
+ addTimeDownloadGraphControlsApp();
select(node).select('.graph-container').call(drawInfoAlert, {title: 'Hydrograph Alert', body: 'No IV or field visit data is available.'});
return;
}
@@ -122,20 +135,7 @@ export const attachToNode = function(store,
// Render initial UI elements prior to completion of data fetching
if (!showOnlyGraph) {
- const timeDownloadGraphControlsApp = createApp(TimeDownloadGraphControlsApp, {});
- timeDownloadGraphControlsApp.use(ReduxConnectVue, {
- store,
- mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
- mapStateToPropsFactory: createStructuredSelector
- });
- timeDownloadGraphControlsApp.provide('store', store);
- timeDownloadGraphControlsApp.provide('siteno', siteno);
- timeDownloadGraphControlsApp.provide('agencyCd', agencyCd);
- timeDownloadGraphControlsApp.mount('#time-download-graph-controls-anchor');
-
-
-
- // select(node).select('.select-actions-container').call(drawSelectActions, store, siteno, agencyCd);
+ addTimeDownloadGraphControlsApp();
}
const graphContainer = nodeElem.select('.graph-container');
@@ -148,7 +148,6 @@ export const attachToNode = function(store,
const legendControlsContainer = graphContainer.append('div')
.classed('ts-legend-controls-container', true);
if (!showOnlyGraph) {
- // eslint-disable-next-line vue/one-component-per-file
const graphControlsApp = createApp(GraphControlsApp, {});
graphControlsApp.use(ReduxConnectVue, {
store,
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 a53d2ab7985827987a692f60ee62d2c102c301ec..e5dc52bbbd686efabeaebdaf3944bd83a3f036b0 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
@@ -359,14 +359,6 @@ describe('monitoring-location/components/hydrograph module', () => {
expect(selectAll('.cursor-slider-svg').size()).toBe(1);
});
- it('should have date control form', () => {
- expect(selectAll('#change-time-span-container').size()).toBe(1);
- });
-
- it('should have one download container added with d3 (the vue component will not show in test)', () => {
- expect(selectAll('#download-graph-data-container-select-actions').size()).toBe(1);
- });
-
it('should have method select element', () => {
expect(selectAll('.method-picker-container').size()).toBe(1);
});
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/select-actions.js b/assets/src/scripts/monitoring-location/components/hydrograph/select-actions.js
deleted file mode 100644
index 5ffe8cc82429b7bd28f534aa27e3bc94f0cab7ab..0000000000000000000000000000000000000000
--- a/assets/src/scripts/monitoring-location/components/hydrograph/select-actions.js
+++ /dev/null
@@ -1,117 +0,0 @@
-
-import {bindActionCreators} from 'redux';
-import ReduxConnectVue from 'redux-connect-vue';
-import {select} from 'd3-selection';
-import {createStructuredSelector} from 'reselect';
-
-import {createApp} from 'vue';
-
-import config from 'ui/config.js';
-
-import DownloadDataApp from './DownloadDataApp.vue';
-import TimeSpanControlsApp from './TimeSpanControlsApp.vue';
-
-/*
- * Helper function to render a select action button on listContainer
- */
-const appendButton = function(listContainer, {uswdsIcon, buttonLabel, idOfDivToControl}) {
- const button = listContainer.append('li')
- .attr('class', 'usa-button-group__item')
- .append('button')
- .attr('class', 'usa-button')
- .attr('aria-expanded', false)
- .attr('aria-controls', idOfDivToControl)
- .attr('ga-on', 'click')
- .attr('ga-event-category', 'select-action')
- .attr('ga-event-action', `${idOfDivToControl}-toggle`)
- .on('click', function() {
- const thisButton = select(this);
- const wasSelected = thisButton.attr('aria-expanded') === 'true';
-
- // If this button was not selected, we need to unselect the button (if any)
- if (!wasSelected) {
- const selectedButton = listContainer.select('.selected-action');
- selectedButton.dispatch('click');
- }
-
- const actionContainer = select(`#${idOfDivToControl}`);
- thisButton
- .classed('selected-action', !wasSelected)
- .attr('aria-expanded', !wasSelected);
-
- actionContainer.attr('hidden', wasSelected ? true : null);
- });
-
- if (uswdsIcon) {
- button.append('svg')
- .attr('class', 'usa-icon')
- .attr('aria-hidden', 'true')
- .attr('role', 'img')
- .html(`<use xlink:href="${config.STATIC_URL}img/sprite.svg#${uswdsIcon}"></use>`);
- }
- button.append('span').html(buttonLabel);
- return button;
-};
-
-/*
- * Render the select action element on container. The store and siteno are needed to render the action forms within
- * the select action element.
- * @param {D3 selection} container
- * @param {Redux store} store
- * @param {String} siteno
- */
-export const drawSelectActions = function(container, store, siteno, agencyCode) {
- const addDownloadContainer = function() {
- // eslint-disable-next-line vue/one-component-per-file
- const downloadDataApp = createApp(DownloadDataApp, {});
- downloadDataApp.use(ReduxConnectVue, {
- store,
- mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
- mapStateToPropsFactory: createStructuredSelector
- });
- downloadDataApp.provide('store', store);
- downloadDataApp.provide('siteno', siteno);
- downloadDataApp.provide('agencyCd', agencyCode);
- downloadDataApp.provide('buttonSetName', 'select-actions-set');
- downloadDataApp.mount('#download-graph-data-container-select-actions');
- };
-
- const addTimeSpanControlsContainer = function() {
- // eslint-disable-next-line vue/one-component-per-file
- const timeSpanControlsApp = createApp(TimeSpanControlsApp, {});
- timeSpanControlsApp.use(ReduxConnectVue, {
- store,
- mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
- mapStateToPropsFactory: createStructuredSelector
- });
- timeSpanControlsApp.provide('store', store);
- timeSpanControlsApp.provide('siteno', siteno);
- timeSpanControlsApp.provide('agencyCd', agencyCode);
- timeSpanControlsApp.mount('#change-time-span-container');
- };
-
- const listContainer = container.append('ul')
- .attr('class', 'select-actions-button-group usa-button-group');
- if (config.ivPeriodOfRecord || config.gwPeriodOfRecord) {
- appendButton(listContainer, {
- buttonLabel: 'Change time span',
- idOfDivToControl: 'change-time-span-container'
- });
- container.append('div')
- .attr('id', 'change-time-span-container')
- .attr('hidden', true)
- .call(addTimeSpanControlsContainer);
- }
-
- appendButton(listContainer, {
- uswdsIcon: 'file_download',
- buttonLabel: 'Retrieve data',
- idOfDivToControl: 'download-graph-data-container-select-actions'
- });
-
- container.append('div')
- .attr('id', 'download-graph-data-container-select-actions')
- .attr('class', 'download-graph-data-container')
- .attr('hidden', true)
- .call(addDownloadContainer);
-};
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/select-actions.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/select-actions.test.js
deleted file mode 100644
index b5640ce3b7fcc2de31166c411361a16929fcc1e4..0000000000000000000000000000000000000000
--- a/assets/src/scripts/monitoring-location/components/hydrograph/select-actions.test.js
+++ /dev/null
@@ -1,162 +0,0 @@
-import {select} from 'd3-selection';
-
-import config from 'ui/config.js';
-
-import {configureStore} from 'ml/store';
-
-import {TEST_PRIMARY_IV_DATA, TEST_STATS_DATA, TEST_GW_LEVELS, TEST_CURRENT_TIME_RANGE} from './mock-hydrograph-state';
-import {drawSelectActions} from './select-actions';
-
-describe('monitoring-location/components/hydrograph/select-actions', () => {
- let testDiv;
- let store;
- const TIME_FORM_ID = 'change-time-span-container';
- const DOWNLOAD_FORM_ID = 'download-graph-data-container-select-actions';
-
- describe('Tests when iv or gw data is available', () => {
- const TEST_STATE = {
- hydrographData: {
- currentTimeRange: TEST_CURRENT_TIME_RANGE,
- primaryIVData: TEST_PRIMARY_IV_DATA,
- medianStatistics: TEST_STATS_DATA
- },
- groundwaterLevelData: {
- all: [TEST_GW_LEVELS]
- },
- hydrographState: {
- selectedTimeSpan: 'P7D',
- selectedIVMethodID: '90649',
- selectedParameterCode: '72019'
- }
- };
- beforeEach(() => {
- config.ivPeriodOfRecord = 'notNull';
- config.gwPeriodOfRecord = 'notNull';
- testDiv = select('body').append('div');
- store = configureStore(TEST_STATE);
- testDiv.call(drawSelectActions, store, '11112222');
- });
-
- afterEach(() => {
- testDiv.remove();
- });
-
- it('Draws the change time and download buttons and forms', () => {
- const buttonContainer = testDiv.selectAll('.select-actions-button-group');
-
- expect(buttonContainer.size()).toBe(1);
- expect(buttonContainer.selectAll('button').size()).toBe(2);
-
- const downloadButton = buttonContainer.selectAll(`button[aria-controls=${DOWNLOAD_FORM_ID}]`);
- const timeSpanButton = buttonContainer.selectAll(`button[aria-controls=${TIME_FORM_ID}]`);
- expect(downloadButton.size()).toBe(1);
- expect(timeSpanButton.size()).toBe(1);
- expect(downloadButton.attr('aria-expanded')).toBe('false');
- expect(timeSpanButton.attr('aria-expanded')).toBe('false');
-
- const timeSpanContainer = testDiv.select(`#${TIME_FORM_ID}`);
- const downloadContainer = testDiv.select(`#${DOWNLOAD_FORM_ID}`);
- expect(timeSpanContainer.size()).toBe(1);
- expect(timeSpanContainer.attr('hidden')).toBe('true');
- expect(downloadContainer.size()).toBe(1);
- expect(downloadContainer.attr('hidden')).toBe('true');
- });
-
- it('When the download button is clicked, the download section is shown', () => {
- const downloadButton = testDiv.select(`button[aria-controls=${DOWNLOAD_FORM_ID}]`);
- downloadButton.dispatch('click');
-
- expect(downloadButton.attr('aria-expanded')).toBe('true');
- expect(testDiv.select(`button[aria-controls=${TIME_FORM_ID}]`).attr('aria-expanded')).toBe('false');
- expect(testDiv.select(`#${DOWNLOAD_FORM_ID}`).attr('hidden')).toBeNull();
- expect(testDiv.select(`#${TIME_FORM_ID}`).attr('hidden')).toBe('true');
- });
-
- it('When the change time span button is clicked, the time span section is shown', () => {
- const timeSpanButton = testDiv.select(`button[aria-controls=${TIME_FORM_ID}]`);
- timeSpanButton.dispatch('click');
-
- expect(timeSpanButton.attr('aria-expanded')).toBe('true');
- expect(testDiv.select(`button[aria-controls=${DOWNLOAD_FORM_ID}]`).attr('aria-expanded')).toBe('false');
- expect(testDiv.select(`#${TIME_FORM_ID}`).attr('hidden')).toBeNull();
- expect(testDiv.select(`#${DOWNLOAD_FORM_ID}`).attr('hidden')).toBe('true');
- });
-
- it('When the download button is clicked twice the download section is hidden again', () => {
- const downloadButton = testDiv.select(`button[aria-controls=${DOWNLOAD_FORM_ID}]`);
- downloadButton.dispatch('click');
- downloadButton.dispatch('click');
-
- expect(downloadButton.attr('aria-expanded')).toBe('false');
- expect(testDiv.select(`button[aria-controls=${TIME_FORM_ID}]`).attr('aria-expanded')).toBe('false');
- expect(testDiv.select(`#${DOWNLOAD_FORM_ID}`).attr('hidden')).toBe('true');
- expect(testDiv.select(`#${TIME_FORM_ID}`).attr('hidden')).toBe('true');
- });
-
- it('When the time span button is clicked twice the time span section is hidden again', () => {
- const timeSpanButton = testDiv.select(`button[aria-controls=${TIME_FORM_ID}]`);
- timeSpanButton.dispatch('click');
- timeSpanButton.dispatch('click');
-
- expect(timeSpanButton.attr('aria-expanded')).toBe('false');
- expect(testDiv.select(`button[aria-controls=${DOWNLOAD_FORM_ID}]`).attr('aria-expanded')).toBe('false');
- expect(testDiv.select(`#${TIME_FORM_ID}`).attr('hidden')).toBe('true');
- expect(testDiv.select(`#${DOWNLOAD_FORM_ID}`).attr('hidden')).toBe('true');
- });
-
- it('When the download button is clicked and then the time span button, the download form is hidden and the time span form shown', () => {
- const downloadButton = testDiv.select(`button[aria-controls=${DOWNLOAD_FORM_ID}]`);
- const timeSpanButton = testDiv.select(`button[aria-controls=${TIME_FORM_ID}]`);
- downloadButton.dispatch('click');
- timeSpanButton.dispatch('click');
-
- expect(timeSpanButton.attr('aria-expanded')).toBe('true');
- expect(downloadButton.attr('aria-expanded')).toBe('false');
- expect(testDiv.select(`#${TIME_FORM_ID}`).attr('hidden')).toBeNull();
- expect(testDiv.select(`#${DOWNLOAD_FORM_ID}`).attr('hidden')).toBe('true');
- });
- });
-
-
- describe('Tests with no IV or GW data', () => {
- const TEST_STATE = {
- hydrographData: {},
- groundwaterLevelData: {
- all: []
- },
- hydrographState: {
- selectedTimeSpan: 'P7D',
- selectedIVMethodID: '90649',
- selectedParameterCode: null
- }
- };
- beforeEach(() => {
- config.ivPeriodOfRecord = null;
- config.gwPeriodOfRecord = null;
- testDiv = select('body').append('div');
- store = configureStore(TEST_STATE);
- testDiv.call(drawSelectActions, store, '11112222');
- });
-
- afterEach(() => {
- testDiv.remove();
- });
-
- it('Only draws the download button (not the time span) when there is no iv or gw data', () => {
- const buttonContainer = testDiv.selectAll('.select-actions-button-group');
-
- expect(buttonContainer.size()).toBe(1);
- expect(buttonContainer.selectAll('button').size()).toBe(1);
-
- const downloadButton = buttonContainer.selectAll(`button[aria-controls=${DOWNLOAD_FORM_ID}]`);
- const timeSpanButton = buttonContainer.selectAll(`button[aria-controls=${TIME_FORM_ID}]`);
- expect(downloadButton.size()).toBe(1);
- expect(timeSpanButton.size()).toBe(0);
-
- const timeSpanContainer = testDiv.select(`#${TIME_FORM_ID}`);
- const downloadContainer = testDiv.select(`#${DOWNLOAD_FORM_ID}`);
- expect(timeSpanContainer.size()).toBe(0);
- expect(downloadContainer.size()).toBe(1);
- });
- });
-});
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/download-data.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/download-data.test.js
index 322cd5d8ea39e700110c6d5704464d4ba7083438..7f5f65f831b58200c078f8d674c89b0217e10a09 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/download-data.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/download-data.test.js
@@ -54,6 +54,9 @@ describe('monitoring-location/components/hydrograph/vue-components/download-data
windowSpy = jest.spyOn(window, 'open').mockImplementation(() => null);
store = configureStore(TEST_STATE);
wrapper = mount(DownloadData, {
+ props: {
+ buttonSetName: 'test-buttons'
+ },
global: {
plugins: [
[ReduxConnectVue, {
@@ -64,8 +67,7 @@ describe('monitoring-location/components/hydrograph/vue-components/download-data
provide: {
store: store,
siteno: '11112222',
- agencyCd: 'USGS',
- buttonSetName: 'test-buttons'
+ agencyCd: 'USGS'
}
}
});
@@ -187,6 +189,9 @@ describe('monitoring-location/components/hydrograph/vue-components/download-data
};
const store = configureStore(TEST_STATE_CALCULATED_F);
const wrapper = mount(DownloadData, {
+ props: {
+ buttonSetName: 'test-buttons'
+ },
global: {
plugins: [
[ReduxConnectVue, {
@@ -197,8 +202,7 @@ describe('monitoring-location/components/hydrograph/vue-components/download-data
provide: {
store: store,
siteno: '11112222',
- agencyCd: 'USGS',
- buttonSetName: 'test-buttons'
+ agencyCd: 'USGS'
}
}
});
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/select-actions.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/select-actions.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..a5c70ed9f2def680df2f9fe357530b1f15ba8a59
--- /dev/null
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/select-actions.test.js
@@ -0,0 +1,86 @@
+import {shallowMount} from '@vue/test-utils';
+
+import config from 'ui/config.js';
+
+import SelectActions from './select-actions.vue';
+import TimeSpanControls from './time-span-controls.vue';
+import DownloadData from './download-data.vue';
+
+
+describe('monitoring-location/components/hydrograph/vue-components/select-actions', () => {
+ describe('tests with IV or GW data', () => {
+ let wrapper;
+
+ config.ivPeriodOfRecord = {
+ '32295': {
+ 'begin_date': '2014-09-05',
+ 'end_date': '2022-06-22'
+ },
+ '00400': {
+ 'begin_date': '2007-10-01',
+ 'end_date': '2022-06-22'
+ }
+ };
+
+ beforeEach(() => {
+ wrapper = shallowMount(SelectActions);
+ });
+
+ it('expects the component to be rendered with the correct sub components', () => {
+ expect(wrapper.findAllComponents(TimeSpanControls)).toHaveLength(1);
+ expect(wrapper.findAllComponents(DownloadData)).toHaveLength(1);
+ });
+
+ it('expects that clicking the buttons in the button row will show or hide components', async() => {
+ expect(wrapper.findComponent(TimeSpanControls).isVisible()).toBe(false);
+ expect(wrapper.findComponent(DownloadData).isVisible()).toBe(false);
+
+ expect(wrapper.findAll('button')).toHaveLength(2);
+ const changeTimeSpanButton = wrapper.findAll('button')[0];
+ const retrieveDataButton = wrapper.findAll('button')[1];
+
+ expect(changeTimeSpanButton.text()).toBe('Change time span');
+ expect(retrieveDataButton.text()).toBe('Retrieve data');
+
+ await changeTimeSpanButton.trigger('click');
+ expect(wrapper.findComponent(TimeSpanControls).isVisible()).toBe(true);
+ expect(wrapper.findComponent(DownloadData).isVisible()).toBe(false);
+
+ await retrieveDataButton.trigger('click');
+ expect(wrapper.findComponent(TimeSpanControls).isVisible()).toBe(false);
+ expect(wrapper.findComponent(DownloadData).isVisible()).toBe(true);
+
+ await retrieveDataButton.trigger('click');
+ expect(wrapper.findComponent(TimeSpanControls).isVisible()).toBe(false);
+ expect(wrapper.findComponent(DownloadData).isVisible()).toBe(false);
+ });
+ });
+
+ describe('tests with NO IV or GW data', () => {
+ let wrapper;
+ config.ivPeriodOfRecord = null;
+ config.gwPeriodOfRecord = null;
+
+ beforeEach(() => {
+ wrapper = shallowMount(SelectActions);
+ });
+
+ it('expects that only the retreive data button will show if there is no IV or GW data at a monitoring location', async() => {
+ expect(wrapper.findComponent(TimeSpanControls).isVisible()).toBe(false);
+ expect(wrapper.findComponent(DownloadData).isVisible()).toBe(false);
+ expect(wrapper.findAll('button')).toHaveLength(1);
+
+ const retrieveDataButton = wrapper.find('button');
+
+ expect(retrieveDataButton.text()).toBe('Retrieve data');
+
+ await retrieveDataButton.trigger('click');
+ expect(wrapper.findComponent(TimeSpanControls).isVisible()).toBe(false);
+ expect(wrapper.findComponent(DownloadData).isVisible()).toBe(true);
+
+ await retrieveDataButton.trigger('click');
+ expect(wrapper.findComponent(TimeSpanControls).isVisible()).toBe(false);
+ expect(wrapper.findComponent(DownloadData).isVisible()).toBe(false);
+ });
+ });
+});
\ No newline at end of file
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/select-actions.vue b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/select-actions.vue
index 975fe70ecc5fcc456fed940e7cf45f31270463ab..213061d1dc4035ba4e8ac0024d5faeef162dcbcb 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/select-actions.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/select-actions.vue
@@ -3,6 +3,7 @@
<ul class="select-actions-button-group usa-button-group">
<li class="usa-button-group__item">
<button
+ v-if="hasDataHydrographData"
:class="`usa-button ${visibleOptionsContainer === 'change-time-span' ? 'selected-action': ''}`"
:aria-expanded="`${visibleOptionsContainer === 'change-time-span'}`"
aria-controls="change-time-span-container"
@@ -67,6 +68,8 @@ import DownloadData from './download-data.vue';
setup() {
const downloadIcon = `${config.STATIC_URL}img/sprite.svg#file_download`;
const visibleOptionsContainer = ref('none') ;
+ const hasDataHydrographData = !!config.ivPeriodOfRecord ||
+ !!config.gwPeriodOfRecord;
const showOptions = function(containerToShow) {
if (visibleOptionsContainer.value === containerToShow) {
@@ -78,6 +81,7 @@ import DownloadData from './download-data.vue';
return {
downloadIcon,
+ hasDataHydrographData,
showOptions,
visibleOptionsContainer
};
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-controls.vue b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-controls.vue
index 524a55c8f4aad5f44217249be64b462fefd50406..690e83d13d6f3d99a64d805afc05e87cefd6cf41 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-controls.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-controls.vue
@@ -102,7 +102,7 @@ export default {
const startPicker = ref(null);
const endPicker = ref(null);
const reduxStore = inject('store');
- const siteno = inject('siteno');
+ const siteNumber = inject('siteno');
const agencyCode = inject('agencyCd');
const isISODurationWithDays = function(timeSpan) {
@@ -183,7 +183,7 @@ export default {
showDataIndicators(true, reduxStore);
reduxStore.dispatch(clearGraphBrushOffset());
reduxStore.dispatch(setSelectedTimeSpan(newTimeSpan));
- reduxStore.dispatch(retrieveHydrographData(siteno, agencyCode, getInputsForRetrieval(reduxStore.getState())))
+ reduxStore.dispatch(retrieveHydrographData(siteNumber, agencyCode, getInputsForRetrieval(reduxStore.getState())))
.then(() => {
showDataIndicators(false, reduxStore);
});