From d6d8bdb7c57488866fcee7807b52a3a04a2cfc0e Mon Sep 17 00:00:00 2001
From: Darius Williams <dswilliams@contractor.usgs.gov>
Date: Tue, 21 Jun 2022 15:22:03 -0500
Subject: [PATCH] tests, lint
---
CHANGELOG.md | 1 +
.../hydrograph/StatisticsTableApp.vue | 14 +-
.../components/hydrograph/index.js | 19 +-
.../components/hydrograph/index.test.js | 14 +-
.../components/hydrograph/statistics-table.js | 88 -------
.../hydrograph/statistics-table.test.js | 125 ----------
.../vue-components/statistics-table.test.js | 214 ++++++++++++++++++
.../vue-components/statistics-table.vue | 88 ++++++-
8 files changed, 312 insertions(+), 251 deletions(-)
delete mode 100644 assets/src/scripts/monitoring-location/components/hydrograph/statistics-table.js
delete mode 100644 assets/src/scripts/monitoring-location/components/hydrograph/statistics-table.test.js
diff --git a/CHANGELOG.md b/CHANGELOG.md
index aa5c0505c..190a4562e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
- Data download component was converted to Vue.
- Parameter selection table component was converted to Vue.
- Time span shortcuts component was converted to Vue.
+- The daily statistics data component was 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/StatisticsTableApp.vue b/assets/src/scripts/monitoring-location/components/hydrograph/StatisticsTableApp.vue
index d3f5de5f2..0453cfc94 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/StatisticsTableApp.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/StatisticsTableApp.vue
@@ -1,14 +1,14 @@
<template>
- <StatisticsTable/>
+ <StatisticsTable />
</template>
<script>
-import StatisticsTable from './vue-components/parameter-selection.vue';
+import StatisticsTable from './vue-components/statistics-table.vue';
export default {
- name: 'StatisticsTableApp',
- components: {
- StatisticsTable
- }
-}
+ name: 'StatisticsTableApp',
+ components: {
+ StatisticsTable
+ }
+};
</script>
\ No newline at end of file
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
index 81992d5a4..75ba7fbd5 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
@@ -9,7 +9,6 @@ import {createApp} from 'vue';
import config from 'ui/config.js';
-import {link} from 'ui/lib/d3-redux';
import {drawInfoAlert} from 'd3render/alerts';
@@ -26,15 +25,13 @@ import {setSelectedParameterCode, setCompareDataVisibility, setSelectedTimeSpan,
import {Actions as floodDataActions} from 'ml/store/flood-data';
-import {getPreferredIVMethodID, getTitle} from './selectors/time-series-data';
-import {latestSelectedParameterValue} from 'ml/selectors/hydrograph-parameters-selector';
-import {getDailyStatistics} from 'ml/components/hydrograph/selectors/statistics';
+import {getPreferredIVMethodID} from './selectors/time-series-data';
+
import {showDataIndicators} from './data-indicator';
import {initializeGraphBrush, drawGraphBrush} from './graph-brush';
import {drawTimeSeriesLegend} from './legend';
import {drawSelectActions} from './select-actions';
-import {drawStatsTable} from './statistics-table';
import {initializeTimeSeriesGraph, drawTimeSeriesGraphData} from './time-series-graph';
import {initializeTooltipCursorSlider, drawTooltipCursorSlider} from './tooltip';
@@ -206,19 +203,13 @@ export const attachToNode = function(store,
renderTimeSeriesUrlParams(store);
- StatisticsTableApp.use(ReduxConnectVue, {
+ const statisticsTableApp = createApp(StatisticsTableApp, {});
+ statisticsTableApp.use(ReduxConnectVue, {
store,
mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
mapStateToPropsFactory: createStructuredSelector
});
- StatisticsTableApp.provide('store', store);
- StatisticsTableApp.mount('.daily-statistical-data');
- // nodeElem.select('.daily-statistical-data')
- // .call(link(store, drawStatsTable, createStructuredSelector({
- // statsData: getDailyStatistics(new Date),
- // latestValue: latestSelectedParameterValue,
- // parameterName: getTitle
- // })));
+ statisticsTableApp.mount('.daily-statistical-data');
}
})
.catch(reason => {
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 a53d2ab79..8a5a0cf86 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
@@ -5,8 +5,6 @@ import mockConsole from 'jest-mock-console';
import * as utils from 'ui/utils';
import config from 'ui/config';
-import * as d3Redux from 'ui/lib/d3-redux';
-
import {configureStore} from 'ml/store';
import {Actions as floodDataActions} from 'ml/store/flood-data';
import * as groundwaterLevelData from 'ml/store/groundwater-level-field-visits';
@@ -68,7 +66,6 @@ describe('monitoring-location/components/hydrograph module', () => {
let restoreConsole;
- let linkSpy;
beforeAll(() => {
enableFetchMocks();
@@ -303,7 +300,6 @@ describe('monitoring-location/components/hydrograph module', () => {
return 123;
};
});
- linkSpy = jest.spyOn(d3Redux, 'link');
attachToNode(store, graphNode, {
...INITIAL_PARAMETERS,
showOnlyGraph: false
@@ -380,9 +376,8 @@ describe('monitoring-location/components/hydrograph module', () => {
expect(select('#gw-table-container').size()).toBe(1);
});
- it('expects to create a d3redux link for the daily statistics section', () => {
- expect(linkSpy).toHaveBeenCalled();
- expect(linkSpy.mock.lastCall.toString()).toContain('drawStatsTable');
+ it('expects to create the daily statistics section', () => {
+ expect(select('.stats-accordion').size()).toBe(1);
});
});
@@ -426,7 +421,6 @@ describe('monitoring-location/components/hydrograph module', () => {
return Promise.resolve();
};
});
- linkSpy = jest.spyOn(d3Redux, 'link');
attachToNode(store, graphNode, {
...INITIAL_PARAMETERS,
showOnlyGraph: true
@@ -495,8 +489,8 @@ describe('monitoring-location/components/hydrograph module', () => {
expect(select('#gw-table-container').size()).toBe(0);
});
- it('expects to not create a d3redux link for the daily statistics section', () => {
- expect(linkSpy.mock.lastCall.toString()).not.toContain('drawStatsTable');
+ it('expects to not create the daily statistics section', () => {
+ expect(select('.stats-accordion').size()).toBe(0);
});
});
});
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/statistics-table.js b/assets/src/scripts/monitoring-location/components/hydrograph/statistics-table.js
deleted file mode 100644
index 2c4970c25..000000000
--- a/assets/src/scripts/monitoring-location/components/hydrograph/statistics-table.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import {select} from 'd3-selection';
-
-const COLUMN_HEADINGS = ['Latest Value', 'Lowest Value', '25th Percentile', 'Median', '75th Percentile', 'Mean', 'Highest Value'];
-const DATA_HEADINGS = ['min_va', 'p25_va', 'p50_va', 'p75_va', 'mean_va', 'max_va'];
-
-
-const drawTableBody = function(table, data) {
- const body = table.append('tbody');
- const row = body.append('tr');
- COLUMN_HEADINGS.forEach((heading, i) => {
- if (i === 0) {
- row.append('th')
- .attr('data-label', heading)
- .attr('scope', 'row')
- .text(data[0]);
- } else {
- row.append('th')
- .attr('data-label', heading)
- .attr('scope', 'row')
- .text(data[1][DATA_HEADINGS[i - 1]]);
- }
- });
-};
-
-const drawStats = function(elem, currentData, name) {
- let myHeadings = COLUMN_HEADINGS.slice(0);
- myHeadings[1] = `${COLUMN_HEADINGS[1]} (${currentData[1]['min_va_yr']})`;
- myHeadings[myHeadings.length - 1] = `${COLUMN_HEADINGS[COLUMN_HEADINGS.length - 1]} (${currentData[1]['max_va_yr']})`;
- const tableContainer = elem.append('div')
- .attr('id', 'stats-table');
-
- const table = tableContainer.append('table')
- .classed('usa-table', true)
- .classed('usa-table--stacked', true);
- table.append('caption')
- .text(`Daily ${name} for ${new Date().toDateString()} based on ${currentData[1]['count_nu']}
- ${currentData[1]['count_nu'] === '1' ? 'year' : 'years'} of data.`);
- table.append('thead')
- .append('tr')
- .selectAll('th')
- .data(myHeadings)
- .enter()
- .append('th')
- .attr('scope', 'col')
- .text(col => col);
- table.call(drawTableBody, currentData);
-};
-
-/*
- * Create the hydrograph data daily statistics section
- * @param {D3 selection} elem
- * @param {Redux store subset} statisticsData object from the Redux store
- * @param {String} latest reported value of the parameter
- * @param {String} name of the parameter
- */
-export const drawStatsTable = function(elem, {statsData, latestValue, parameterName}) {
- if (!latestValue || !Object.keys(statsData).length) {
- select('.stats-accordion')
- .attr('hidden', '');
- return;
- }
-
- elem.select('.stats-accordion')
- .remove();
-
- let accordion = elem.append('div')
- .classed('wdfn-accordion', true)
- .classed('usa-accordion', true)
- .classed('stats-accordion', true);
- let heading = accordion.append('h2')
- .classed('usa-accordion__heading', true);
-
- heading.append('button')
- .classed('usa-accordion__button', true)
- .attr('aria-expanded', 'false')
- .attr('aria-controls', 'daily-stats-table')
- .attr('ga-on', 'click')
- .attr('ga-event-category', 'accordion')
- .attr('ga-event-action', 'interactionWithDailyStatisticsAccordion')
- .text('Today\'s Statistical Data');
-
- accordion.attr('hidden', null);
-
- accordion.append('div')
- .attr('id', 'daily-stats-table')
- .attr('hidden', '')
- .call(drawStats, [latestValue, statsData], parameterName);
-};
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/statistics-table.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/statistics-table.test.js
deleted file mode 100644
index 34eaf17aa..000000000
--- a/assets/src/scripts/monitoring-location/components/hydrograph/statistics-table.test.js
+++ /dev/null
@@ -1,125 +0,0 @@
-import {select} from 'd3-selection';
-
-import {configureStore} from 'ml/store';
-
-import * as stats from './statistics-table';
-import {TEST_STATS_DATA} from './mock-hydrograph-state';
-
-describe('monitoring-location/components/hydrograph/statistics', () => {
- let testDiv;
- let store;
-
-
- beforeEach(() => {
- testDiv = select('body').append('div').attr('id', 'daily-statistical-data');
- jest.useFakeTimers('modern');
- jest.setSystemTime(new Date(2020, 0, 1));
- });
-
- afterEach(() => {
- testDiv.remove();
- jest.useRealTimers();
- });
-
- it('Creates the stats table elements', async() => {
- store = configureStore({
- hydrographData: {
- statisticsData: TEST_STATS_DATA
- }
- });
- await testDiv.call(stats.drawStatsTable,
- {statsData: store.getState().hydrographData.statisticsData, latestValue: '11', parameterName: 'Test Name'});
-
- expect(testDiv.select('caption').text()).toContain('Test Name');
- expect(testDiv.select('#daily-stats-table').size()).toBe(1);
- expect(testDiv.select('.stats-accordion').size()).toBe(1);
- });
-
- it('Does not create the table if there is no stats data', async() => {
- store = configureStore({
- hydrographData: {
- statisticsData: TEST_STATS_DATA
- }
- });
- await testDiv.call(stats.drawStatsTable,
- {statsData: {}, latestValue: '11', parameterName: 'Test Name'});
-
- expect(testDiv.select('#daily-stats-table').size()).toBe(0);
- expect(testDiv.select('.stats-accordion').size()).toBe(0);
- });
-
- it('Does not create the table if there is no latestValue available', async() => {
- store = configureStore({
- hydrographData: {
- statisticsData: TEST_STATS_DATA
- }
- });
- await testDiv.call(stats.drawStatsTable,
- {statsData: store.getState().hydrographData.statisticsData, latestValue: '', parameterName: 'Test Name'});
-
- expect(testDiv.select('#daily-stats-table').size()).toBe(0);
- expect(testDiv.select('.stats-accordion').size()).toBe(0);
- });
-
- it('Does not create the accordion if there is no stats data', async() => {
- store = configureStore({
- hydrographData: {
- statisticsData: TEST_STATS_DATA
- }
- });
- await testDiv.call(stats.drawStatsTable,
- {statsData: {}, latestValue: '11', parameterName: 'Test Name'});
-
- expect(testDiv.selectAll('.stats-accordion').size()).toBe(0);
- });
-
- it('Does not create the accordion if there is no latestValue', async() => {
- store = configureStore({
- hydrographData: {
- statisticsData: TEST_STATS_DATA
- }
- });
- await testDiv.call(stats.drawStatsTable,
- {statsData: store.getState().hydrographData.statisticsData, latestValue: '', parameterName: 'Test Name'});
-
- expect(testDiv.selectAll('.stats-accordion').size()).toBe(0);
- });
-
- it('Expects the table to have headers', async() => {
- store = configureStore({
- hydrographData: {
- statisticsData: TEST_STATS_DATA
- }
- });
- await testDiv.call(stats.drawStatsTable,
- {statsData: store.getState().hydrographData.statisticsData['153885'][0], latestValue: '11', parameterName: 'Test Name'});
- let tableHeaders = testDiv.select('thead').select('tr').selectAll('tr > th');
- expect(tableHeaders.size()).toBe(7);
- expect(tableHeaders.nodes()[0].textContent).toBe('Latest Value');
- expect(tableHeaders.nodes()[1].textContent).toBe('Lowest Value (2006)');
- expect(tableHeaders.nodes()[2].textContent).toBe('25th Percentile');
- expect(tableHeaders.nodes()[3].textContent).toBe('Median');
- expect(tableHeaders.nodes()[4].textContent).toBe('75th Percentile');
- expect(tableHeaders.nodes()[5].textContent).toBe('Mean');
- expect(tableHeaders.nodes()[6].textContent).toBe('Highest Value (2020)');
- });
-
- it('Expects the table to have data in it', async() => {
- store = configureStore({
- hydrographData: {
- statisticsData: TEST_STATS_DATA
- }
- });
- await testDiv.call(stats.drawStatsTable,
- {statsData: store.getState().hydrographData.statisticsData['153885'][0], latestValue: '25.9', parameterName: 'Test Name'});
- let tableHeaders = testDiv.select('tbody').select('tr').selectAll('tr > th');
- expect(tableHeaders.size()).toBe(7);
- expect(tableHeaders.nodes()[0].textContent).toBe('25.9');
- expect(tableHeaders.nodes()[1].textContent).toBe('55.5');
- expect(tableHeaders.nodes()[2].textContent).toBe('100');
- expect(tableHeaders.nodes()[3].textContent).toBe('16');
- expect(tableHeaders.nodes()[4].textContent).toBe('224');
- expect(tableHeaders.nodes()[5].textContent).toBe('153');
- expect(tableHeaders.nodes()[6].textContent).toBe('273');
- });
-});
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/statistics-table.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/statistics-table.test.js
index e69de29bb..724f0f80a 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/statistics-table.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/statistics-table.test.js
@@ -0,0 +1,214 @@
+import {enableFetchMocks, disableFetchMocks} from 'jest-fetch-mock';
+import mockConsole from 'jest-mock-console';
+import {bindActionCreators} from 'redux';
+import ReduxConnectVue from 'redux-connect-vue';
+import {createStructuredSelector} from 'reselect';
+import {mount} from '@vue/test-utils';
+
+import {configureStore} from 'ml/store';
+
+import StatisticsTableApp from './statistics-table.vue';
+import {TEST_STATS_DATA} from '../mock-hydrograph-state';
+
+describe('monitoring-location/components/hydrograph/statistics', () => {
+
+ describe('Cases with data available', () => {
+ let restoreConsole;
+ var store;
+ var wrapper;
+
+ beforeAll(() => {
+ enableFetchMocks();
+ restoreConsole = mockConsole();
+ });
+
+ afterAll(() => {
+ disableFetchMocks();
+ restoreConsole();
+ });
+
+ beforeEach(() => {
+ jest.useFakeTimers('modern');
+ jest.setSystemTime(new Date(2020, 0, 1));
+
+ store = configureStore({
+ hydrographData: {
+ statisticsData: TEST_STATS_DATA,
+ primaryIVData: {
+ parameter: {
+ parameterCode: '153885',
+ name: 'Test Name'
+ },
+ values: {}
+ }
+ },
+ hydrographParameters: {
+ '153885': {
+ parameterCode: '153885',
+ name: 'Test Name',
+ latestValue: '25.9'
+ }
+ },
+ hydrographState: {
+ selectedParameterCode: '153885'
+ }
+ });
+
+ wrapper = mount(StatisticsTableApp, {
+ global: {
+ plugins: [
+ [ReduxConnectVue, {
+ store,
+ mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
+ mapStateToPropsFactory: createStructuredSelector
+ }]
+ ]
+ }
+ });
+ });
+
+ afterEach(() => {
+ jest.useRealTimers();
+ });
+
+ it('Creates the stats table elements', () => {
+ expect(wrapper.find('caption').text()).toContain('Test Name');
+ expect(wrapper.findAll('#daily-stats-table')).toHaveLength(1);
+ expect(wrapper.findAll('.stats-accordion')).toHaveLength(1);
+ });
+
+ it('Expects the table to have headers', () => {
+ let tableHeaders = wrapper.find('thead').find('tr').findAll('tr > th');
+ expect(tableHeaders).toHaveLength(7);
+ expect(tableHeaders[0].text()).toBe('Latest Value');
+ expect(tableHeaders[1].text()).toBe('Lowest Value (2006)');
+ expect(tableHeaders[2].text()).toBe('25th Percentile');
+ expect(tableHeaders[3].text()).toBe('Median');
+ expect(tableHeaders[4].text()).toBe('75th Percentile');
+ expect(tableHeaders[5].text()).toBe('Mean');
+ expect(tableHeaders[6].text()).toBe('Highest Value (2020)');
+ });
+
+ it('Expects the table to have data in it', () => {
+ let tableHeaders = wrapper.find('tbody').find('tr').findAll('tr > th');
+ expect(tableHeaders).toHaveLength(7);
+ expect(tableHeaders[0].text()).toBe('25.9');
+ expect(tableHeaders[1].text()).toBe('55.5');
+ expect(tableHeaders[2].text()).toBe('100');
+ expect(tableHeaders[3].text()).toBe('16');
+ expect(tableHeaders[4].text()).toBe('224');
+ expect(tableHeaders[5].text()).toBe('153');
+ expect(tableHeaders[6].text()).toBe('273');
+ });
+
+ });
+
+ describe('Cases with no stats data available', () => {
+ let restoreConsole;
+ var store;
+ var wrapper;
+
+ beforeAll(() => {
+ enableFetchMocks();
+ restoreConsole = mockConsole();
+ });
+
+ afterAll(() => {
+ disableFetchMocks();
+ restoreConsole();
+ });
+
+ beforeEach(() => {
+ jest.useFakeTimers('modern');
+ jest.setSystemTime(new Date(2020, 0, 1));
+
+ store = configureStore({
+ hydrographData: {
+ statisticsData: {},
+ selectedParameterCode: '153885'
+ },
+ hydrographParameters: {
+ '153885': {
+ parameterCode: '153885',
+ name: 'Test Name',
+ latestValue: '25.9'
+ }
+ }
+ });
+
+ wrapper = mount(StatisticsTableApp, {
+ global: {
+ plugins: [
+ [ReduxConnectVue, {
+ store,
+ mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
+ mapStateToPropsFactory: createStructuredSelector
+ }]
+ ]
+ }
+ });
+ });
+
+ afterEach(() => {
+ jest.useRealTimers();
+ });
+
+ it('Does not show the table if there is no stats data', () => {
+ expect(wrapper.find('.stats-accordion').isVisible()).toBe(false);
+ });
+ });
+
+ describe('Cases with no latest value available', () => {
+ let restoreConsole;
+ var store;
+ var wrapper;
+
+ beforeAll(() => {
+ enableFetchMocks();
+ restoreConsole = mockConsole();
+ });
+
+ afterAll(() => {
+ disableFetchMocks();
+ restoreConsole();
+ });
+
+ beforeEach(() => {
+ jest.useFakeTimers('modern');
+ jest.setSystemTime(new Date(2020, 0, 1));
+
+ store = configureStore({
+ hydrographData: {
+ statisticsData: TEST_STATS_DATA,
+ selectedParameterCode: '153885'
+ },
+ hydrographParameters: {
+ '153885': {
+ parameterCode: '153885',
+ name: 'Test Name'
+ }
+ }
+ });
+
+ wrapper = mount(StatisticsTableApp, {
+ global: {
+ plugins: [
+ [ReduxConnectVue, {
+ store,
+ mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
+ mapStateToPropsFactory: createStructuredSelector
+ }]
+ ]
+ }
+ });
+ });
+
+ afterEach(() => {
+ jest.useRealTimers();
+ });
+
+ it('Does not show the accordion if there is no latestValue', () => {
+ expect(wrapper.find('.stats-accordion').isVisible()).toBe(false);
+ });
+ });
+});
\ No newline at end of file
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/statistics-table.vue b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/statistics-table.vue
index 4b75b3d9a..73d22d439 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/statistics-table.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/statistics-table.vue
@@ -1,7 +1,7 @@
<template>
<div
- v-show="!latestValue || !statsData"
- class="stats-accordion usa-accordion stats-accordion"
+ v-show="data.length"
+ class="stats-accordion usa-accordion stats-accordion wdfn-accordion"
>
<h2 class="usa-accordion__heading">
<button
@@ -14,16 +14,43 @@
>
Today's Statistical Data
</button>
- <div id="daily-stats-table">
+ <div
+ id="daily-stats-table"
+ hidden=""
+ >
<div id="stats-table">
<table
class="usa-table usa-table--stacked"
>
+ <!-- eslint-disable vue/no-v-html -->
<caption>
- Daily {{ parameter_name }} for {{ new Date().toDateString() }} based on {{ currentData[1]['count_nu'] }}
- {{ currentData[1]['count_nu'] === '1' ? 'year' : 'years' }} of data.
+ Daily <span v-html="parameter_name" /> for {{ new Date().toDateString() }} based on {{ data[data.length-1] }}
+ {{ data[data.length-1] === '1' ? 'year' : 'years' }} of data.
</caption>
- thead>
+ <!--eslint-enable-->
+ <thead>
+ <tr>
+ <th
+ v-for="heading in column_headings"
+ :key="`${heading}-heading`"
+ scope="col"
+ >
+ {{ heading }}
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th
+ v-for="(datum, index) in data.slice(0, data.length-1)"
+ :key="index"
+ :data-label="`${column_headings[index]}`"
+ scope="row"
+ >
+ {{ datum }}
+ </th>
+ </tr>
+ </tbody>
</table>
</div>
</div>
@@ -32,7 +59,54 @@
</template>
<script>
+import {useActions, useState} from 'redux-connect-vue';
+import {createSelector} from 'reselect';
+
+import {getTitle} from '../selectors/time-series-data';
+import {getDailyStatistics} from 'ml/components/hydrograph/selectors/statistics';
+import {latestSelectedParameterValue} from 'ml/selectors/hydrograph-parameters-selector';
+
export default {
+ setup() {
+ const COLUMN_HEADINGS = ['Latest Value', 'Lowest Value', '25th Percentile', 'Median', '75th Percentile', 'Mean', 'Highest Value'];
+ let col_headings = [...COLUMN_HEADINGS];
+ const DATA_HEADINGS = ['min_va', 'p25_va', 'p50_va', 'p75_va', 'mean_va', 'max_va', 'count_nu'];
+
+ const getStatsAndLatestData = createSelector(
+ getDailyStatistics(new Date),
+ latestSelectedParameterValue,
+ (dailyStatsObj, latestValue) => {
+ if (!dailyStatsObj || !latestValue || !Object.keys(dailyStatsObj).length) {
+ return [];
+ }
+ let daily_stats_arr = [];
+ DATA_HEADINGS.forEach((key) => {
+ daily_stats_arr.push(dailyStatsObj[key]);
+ });
+ col_headings[1] = `${COLUMN_HEADINGS[1]} (${dailyStatsObj['min_va_yr']})`;
+ col_headings[6] = `${COLUMN_HEADINGS[6]} (${dailyStatsObj['max_va_yr']})`;
+ return [latestValue, ...daily_stats_arr];
+ }
+ );
+
+ const state = useState({
+ data: getStatsAndLatestData,
+ parameter_name: getTitle
+ });
+
+ const actions = useActions({
+ getDailyStatistics,
+ latestSelectedParameterValue,
+ getTitle
+ });
-}
+ return {
+ ...state,
+ ...actions,
+ getStatsAndLatestData,
+ column_headings: col_headings,
+ data_headings: DATA_HEADINGS
+ };
+ }
+};
</script>
--
GitLab