diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/DataTablesApp.vue b/assets/src/scripts/monitoring-location/components/hydrograph/DataTablesApp.vue
index 10c84cd289ef5a1068ea34ef8089d7101374bad2..01371fcbc9178b123635f9187208a20ea5f20a23 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/DataTablesApp.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/DataTablesApp.vue
@@ -1,7 +1,5 @@
<template>
- <div class="data-table-container">
- <DataTable />
- </div>
+ <DataTable />
</template>
<script>
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/data-table.js b/assets/src/scripts/monitoring-location/components/hydrograph/data-table.js
deleted file mode 100644
index 8e0ad045efbb807e915a449c2756c9c54fea5623..0000000000000000000000000000000000000000
--- a/assets/src/scripts/monitoring-location/components/hydrograph/data-table.js
+++ /dev/null
@@ -1,36 +0,0 @@
-
-import {bindActionCreators} from 'redux';
-import ReduxConnectVue from 'redux-connect-vue';
-import {createStructuredSelector} from 'reselect';
-
-import {createApp} from 'vue';
-
-import DataTablesApp from './DataTablesApp.vue';
-
-
-/*
- * Create the hydrograph data tables section which will update when the data
- * displayed on the hydrograph changes. The section includes a button where the user
- * can request that the data be downloaded
- * @param {D3 selection} elem
- * @param {Redux store} store
- * @param {String} siteno
- * @param {String} agencyCd
- */
-export const drawDataTables = function(elem, store, siteno, agencyCd) {
- const dataTablesApp = createApp(DataTablesApp, {});
- elem.append('div')
- .attr('id', 'iv-hydrograph-data-table-container');
- dataTablesApp.use(ReduxConnectVue, {
- store,
- mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
- mapStateToPropsFactory: createStructuredSelector
- });
- dataTablesApp.provide('store', store);
- // data for DownLoadData component
- dataTablesApp.provide('siteno', siteno);
- dataTablesApp.provide('agencyCd', agencyCd);
- dataTablesApp.provide('buttonSetName', 'data-tables-set');
-
- dataTablesApp.mount('#iv-hydrograph-data-table-container');
-};
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
deleted file mode 100644
index 727cbe7a3ae5bfb9ae99282b465f047a1628dafe..0000000000000000000000000000000000000000
--- a/assets/src/scripts/monitoring-location/components/hydrograph/data-table.test.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import {select} from 'd3-selection';
-
-import config from 'ui/config';
-
-import {configureStore} from 'ml/store';
-
-import {drawDataTables} from './data-table';
-import {TEST_PRIMARY_IV_DATA, TEST_GW_LEVELS} from './mock-hydrograph-state';
-
-describe('monitoring-location/components/hydrograph/data-table', () => {
- let testDiv;
- let store;
-
- config.locationTimeZone = 'America/Chicago';
-
- beforeEach(() => {
- testDiv = select('body').append('div');
- });
-
- afterEach(() => {
- testDiv.remove();
- });
-
- it('Shows table with expected data and download section', () => {
- store = configureStore({
- hydrographData: {
- currentTimeRange: {
- start: 1582560000000,
- end: 1600620000000
- },
- primaryIVData: TEST_PRIMARY_IV_DATA
- },
- groundwaterLevelData: {
- all: [TEST_GW_LEVELS]
- },
- hydrographState: {
- selectedParameterCode: '72019',
- selectedIVMethodID: '90649'
- }
- });
- drawDataTables(testDiv, store, '11112222', 'USGS');
-
- const ivTable = testDiv.select('#iv-table-container').select('table');
- expect(ivTable.select('caption').text()).toBe('Instantaneous value data');
- expect(ivTable.selectAll('tr').size()).toBe(10);
- 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);
- });
-
- it('Shows single IV table if no GW levels', () => {
- store = configureStore({
- hydrographData: {
- currentTimeRange: {
- start: 1582560900000,
- end: 1600619400000
- },
- primaryIVData: TEST_PRIMARY_IV_DATA
- },
- groundwaterLevelData: {
- all: []
- },
- hydrographState: {
- selectedParameterCode: '72019',
- selectedIVMethodID: '90649'
- }
- });
- drawDataTables(testDiv, store);
-
- expect(testDiv.select('#iv-table-container').style('display')).not.toBe('none');
- expect(testDiv.select('#gw-table-container').style('display')).toBe('none');
- });
-
- it('Shows single GW table if no IV data', () => {
- store = configureStore({
- hydrographData: {
- currentTimeRange: {
- start: 1582560900000,
- end: 1600619400000
- }
- },
- groundwaterLevelData: {
- all: [TEST_GW_LEVELS]
- },
- hydrographState: {
- selectedParameterCode: '72019'
- }
- });
- drawDataTables(testDiv, store);
-
- expect(testDiv.select('#iv-table-container').style('display')).toBe('none');
- expect(testDiv.select('#gw-table-container').style('display')).not.toBe('none');
- });
-});
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
index a4765c2325adc685168757a6ce19bee8b35e0390..89d23aa742927bbd51fd9a3e96f0e3145e752e27 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
@@ -31,7 +31,6 @@ import {latestSelectedParameterValue} from 'ml/selectors/hydrograph-parameters-s
import {getDailyStatistics} from 'ml/components/hydrograph/selectors/statistics';
import {showDataIndicators} from './data-indicator';
-import {drawDataTables} from './data-table';
import {initializeGraphBrush, drawGraphBrush} from './graph-brush';
import {drawTimeSeriesLegend} from './legend';
import {drawSelectionList} from './parameters';
@@ -41,6 +40,7 @@ import {drawTimeSpanShortcutButtons} from './time-span-shortcuts';
import {initializeTimeSeriesGraph, drawTimeSeriesGraphData} from './time-series-graph';
import {initializeTooltipCursorSlider, drawTooltipCursorSlider} from './tooltip';
+import DataTablesApp from './DataTablesApp.vue';
import GraphControlsApp from './GraphControlsApp.vue';
/*
@@ -134,6 +134,7 @@ 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,
@@ -166,8 +167,21 @@ export const attachToNode = function(store,
legendControlsContainer.call(drawTimeSeriesLegend, store);
if (!thisShowOnlyGraph) {
- nodeElem.select('#iv-data-table-container')
- .call(drawDataTables, store, siteno, agencyCd);
+ // eslint-disable-next-line vue/one-component-per-file
+ const dataTablesApp = createApp(DataTablesApp, {});
+ dataTablesApp.use(ReduxConnectVue, {
+ store,
+ mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
+ mapStateToPropsFactory: createStructuredSelector
+ });
+ dataTablesApp.provide('store', store);
+ // data for DownLoadData component
+ dataTablesApp.provide('siteno', siteno);
+ dataTablesApp.provide('agencyCd', agencyCd);
+ dataTablesApp.provide('buttonSetName', 'data-tables-set');
+
+ dataTablesApp.mount('#iv-data-table-container');
+
renderTimeSeriesUrlParams(store);
nodeElem.select('.daily-statistical-data')
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 b721b85662afcec11b4ef514ad0920445f569376..5c4f805aec5eabb7a16cf9b6072c6c68f0a517d5 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
@@ -491,8 +491,8 @@ describe('monitoring-location/components/hydrograph module', () => {
});
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);
+ expect(select('#iv-table-container').size()).toBe(0);
+ expect(select('#gw-table-container').size()).toBe(0);
});
it('expects to not create a d3redux link for the daily statistics section', () => {
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/data-table.vue b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/data-table.vue
index 56dee9fb3cedf8d2e319ecc9a69de472c163f3df..4281e6f5fa6ee4dffcdb1e4edcf63767a1e3b502 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/data-table.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/data-table.vue
@@ -1,5 +1,5 @@
<template>
- <div>
+ <div id="iv-hydrograph-data-table-container">
<div
v-show="currentIVData.length"
id="iv-table-container"