From b844d95b957b385cc0c5b5b296ed7fe83a36d80b Mon Sep 17 00:00:00 2001
From: Darius Williams <dswilliams@contractor.usgs.gov>
Date: Thu, 23 Jun 2022 08:53:15 -0500
Subject: [PATCH] misc changes
---
CHANGELOG.md | 2 +-
.../components/hydrograph/index.test.js | 4 +--
.../hydrograph/mock-hydrograph-state.js | 34 +++++++++----------
.../hydrograph/selectors/statistics.js | 7 ++--
.../hydrograph/selectors/statistics.test.js | 22 ++++++------
.../hydrograph/time-series-graph.test.js | 2 +-
.../vue-components/statistics-table.test.js | 19 +++++------
.../vue-components/statistics-table.vue | 16 ++++-----
8 files changed, 51 insertions(+), 55 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0f6e6cd3b..4e50f271a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,7 +16,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
- Time span controls were converted to use Vue.
### Fixed
-- Parameter codes with multiple methods will now statistical data for each method available.
+- Parameter codes with multiple methods will now show statistical data for each method available.
## [1.2.0](https://github.com/usgs/waterdataui/compare/waterdataui-1.1.0...waterdataui-1.2.0) - 2022-06-10
### Added
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 8a5a0cf86..7c79cabd5 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
@@ -343,7 +343,7 @@ describe('monitoring-location/components/hydrograph module', () => {
});
it('should have a point for the median stat data with a label', () => {
- expect(selectAll('#median-points path').size()).toBe(1);
+ expect(selectAll('#median-points path').size()).toBe(2);
expect(selectAll('#median-points text').size()).toBe(0);
});
@@ -456,7 +456,7 @@ describe('monitoring-location/components/hydrograph module', () => {
});
it('should have a point for the median stat data with a label', () => {
- expect(selectAll('#median-points path').size()).toBe(1);
+ expect(selectAll('#median-points path').size()).toBe(2);
expect(selectAll('#median-points text').size()).toBe(0);
});
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/mock-hydrograph-state.js b/assets/src/scripts/monitoring-location/components/hydrograph/mock-hydrograph-state.js
index b4177c7d3..111cfe58f 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/mock-hydrograph-state.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/mock-hydrograph-state.js
@@ -61,23 +61,23 @@ export const TEST_STATS_DATA = {
max_va: '273', min_va_yr: '2006', min_va: '55.5', mean_va: '153', p05_va: '', p10_va: '61', p20_va: '88', p25_va: '100',
p75_va: '224', p80_va: '264', p90_va: '271', p95_va: ''}
],
- '90649': [
- {month_nu: 2, day_nu: 24, p50_va: 16, ts_id: '153885', loc_web_ds: 'Method2', begin_yr: '2011', end_yr: '2020', max_va_yr: '2020',
- max_va: '273', min_va_yr: '2006', min_va: '55.5', mean_va: '153', p05_va: '', p10_va: '61', p20_va: '88', p25_va: '100',
- p75_va: '224', p80_va: '264', p90_va: '271', p95_va: ''},
- {month_nu: 2, day_nu: 25, p50_va: 16.2, ts_id: '153885', loc_web_ds: 'Method2', begin_yr: '2011', end_yr: '2020', max_va_yr: '2020',
- max_va: '273', min_va_yr: '2006', min_va: '55.5', mean_va: '153', p05_va: '', p10_va: '61', p20_va: '88', p25_va: '100',
- p75_va: '224', p80_va: '264', p90_va: '271', p95_va: ''},
- {month_nu: 2, day_nu: 26, p50_va: 15.9, ts_id: '153885', loc_web_ds: 'Method2', begin_yr: '2011', end_yr: '2020', max_va_yr: '2020',
- max_va: '273', min_va_yr: '2006', min_va: '55.5', mean_va: '153', p05_va: '', p10_va: '61', p20_va: '88', p25_va: '100',
- p75_va: '224', p80_va: '264', p90_va: '271', p95_va: ''},
- {month_nu: 2, day_nu: 27, p50_va: 16.3, ts_id: '153885', loc_web_ds: 'Method2', begin_yr: '2011', end_yr: '2020', max_va_yr: '2020',
- max_va: '273', min_va_yr: '2006', min_va: '55.5', mean_va: '153', p05_va: '', p10_va: '61', p20_va: '88', p25_va: '100',
- p75_va: '224', p80_va: '264', p90_va: '271', p95_va: ''},
- {month_nu: 2, day_nu: 28, p50_va: 16.4, ts_id: '153885', loc_web_ds: 'Method2', begin_yr: '2011', end_yr: '2020', max_va_yr: '2020',
- max_va: '273', min_va_yr: '2006', min_va: '55.5', mean_va: '153', p05_va: '', p10_va: '61', p20_va: '88', p25_va: '100',
- p75_va: '224', p80_va: '264', p90_va: '271', p95_va: ''}
- ]
+ '90649': [
+ {month_nu: 2, day_nu: 24, p50_va: 160, ts_id: '90649', loc_web_ds: 'Method2', begin_yr: '2011', end_yr: '2020', max_va_yr: '2020',
+ max_va: '2730', min_va_yr: '2006', min_va: '550.5', mean_va: '1530', p05_va: '', p10_va: '610', p20_va: '880', p25_va: '1000',
+ p75_va: '2240', p80_va: '2640', p90_va: '2710', p95_va: ''},
+ {month_nu: 2, day_nu: 25, p50_va: 160.2, ts_id: '90649', loc_web_ds: 'Method2', begin_yr: '2011', end_yr: '2020', max_va_yr: '2020',
+ max_va: '2730', min_va_yr: '2006', min_va: '550.5', mean_va: '1530', p05_va: '', p10_va: '610', p20_va: '880', p25_va: '1000',
+ p75_va: '2240', p80_va: '2640', p90_va: '2710', p95_va: ''},
+ {month_nu: 2, day_nu: 26, p50_va: 150.9, ts_id: '90649', loc_web_ds: 'Method2', begin_yr: '2011', end_yr: '2020', max_va_yr: '2020',
+ max_va: '2730', min_va_yr: '2006', min_va: '550.5', mean_va: '1530', p05_va: '', p10_va: '610', p20_va: '880', p25_va: '1000',
+ p75_va: '2240', p80_va: '2640', p90_va: '2710', p95_va: ''},
+ {month_nu: 2, day_nu: 27, p50_va: 160.3, ts_id: '90649', loc_web_ds: 'Method2', begin_yr: '2011', end_yr: '2020', max_va_yr: '2020',
+ max_va: '2730', min_va_yr: '2006', min_va: '550.5', mean_va: '1530', p05_va: '', p10_va: '610', p20_va: '880', p25_va: '1000',
+ p75_va: '2240', p80_va: '2640', p90_va: '2710', p95_va: ''},
+ {month_nu: 2, day_nu: 28, p50_va: 160.4, ts_id: '90649', loc_web_ds: 'Method2', begin_yr: '2011', end_yr: '2020', max_va_yr: '2020',
+ max_va: '2730', min_va_yr: '2006', min_va: '550.5', mean_va: '1530', p05_va: '', p10_va: '610', p20_va: '880', p25_va: '1000',
+ p75_va: '2240', p80_va: '2640', p90_va: '2710', p95_va: ''}
+ ]
};
export const TEST_GW_LEVELS = {
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/statistics.js b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/statistics.js
index 2e7b17ec6..b4c6cd83c 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/statistics.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/statistics.js
@@ -5,9 +5,10 @@ import memoize from 'fast-memoize';
import {getStatisticsData} from 'ml/selectors/hydrograph-data-selector';
/*
- * Selector function that gets the statistics for a given day
+ * Selector function that gets the statistics for a given day and returns an
+ * array containing an object for each method with statistis available
* @param {Date} a Date object for the day to be fetched
- * @returns {Object}
+ * @returns [Array {Object}]
*
*/
export const getDailyStatistics = memoize( (date) => createSelector(
@@ -24,7 +25,7 @@ export const getDailyStatistics = memoize( (date) => createSelector(
const isLeapYear = dateObj.isInLeapYear;
const dayInYear = dateObj.ordinal;
- // There is a decicated index in stats array for Feb 29
+ // There is a dedicated index in stats array for Feb 29
if (!isLeapYear && date.getMonth() > 1) {
return statsDataArray.map((methodArray) => methodArray[dayInYear]);
}
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/statistics.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/statistics.test.js
index 4bb3d8c70..8e5309f09 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/statistics.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/statistics.test.js
@@ -33,23 +33,23 @@ describe('monitoring-location/components/hydrograph/selectors/statistics-table',
})).toStrictEqual([{
month_nu: 2,
day_nu: 25,
- p50_va: 16.2,
- ts_id: '153885',
+ p50_va: 160.2,
+ ts_id: '90649',
loc_web_ds: 'Method2',
begin_yr: '2011',
end_yr: '2020',
max_va_yr: '2020',
- max_va: '273',
+ max_va: '2730',
min_va_yr: '2006',
- min_va: '55.5',
- mean_va: '153',
+ min_va: '550.5',
+ mean_va: '1530',
p05_va: '',
- p10_va: '61',
- p20_va: '88',
- p25_va: '100',
- p75_va: '224',
- p80_va: '264',
- p90_va: '271',
+ p10_va: '610',
+ p20_va: '880',
+ p25_va: '1000',
+ p75_va: '2240',
+ p80_va: '2640',
+ p90_va: '2710',
p95_va: ''},
{month_nu: 2,
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.test.js
index 6242c6177..c9bb24ae3 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.test.js
@@ -112,6 +112,6 @@ describe('monitoring-location/components/hydrograph/time-series-graph', () => {
expect(div.selectAll('.ts-primary-group').html()).not.toEqual('');
expect(div.selectAll('.ts-compare-group').html()).toEqual('');
expect(div.selectAll('.iv-graph-gw-levels-group').html()).not.toEqual('');
- expect(div.selectAll('.median-stats-group').size()).toBe(1);
+ expect(div.selectAll('.median-stats-group').size()).toBe(2);
});
});
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 ed0fd5864..b35e4b402 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
@@ -71,8 +71,7 @@ describe('monitoring-location/components/hydrograph/statistics', () => {
jest.useRealTimers();
});
- it('Creates the stats table elements', () => {
- expect(wrapper.find('caption').text()).toContain('Test Name');
+ it('Displays the accordion', () => {
expect(wrapper.find('.stats-accordion').isVisible()).toBe(true);
});
@@ -80,8 +79,8 @@ describe('monitoring-location/components/hydrograph/statistics', () => {
const captions = wrapper.findAll('caption');
expect(wrapper.findAll('#daily-stats-tables div')).toHaveLength(2);
expect(captions).toHaveLength(2);
- expect(captions[0].text()).toContain('Method2');
- expect(captions[1].text()).toContain('Method1');
+ expect(captions[0].text()).toContain('Test Name (Method2)');
+ expect(captions[1].text()).toContain('Test Name (Method1)');
});
it('Expects the table to have headers', () => {
@@ -100,12 +99,12 @@ describe('monitoring-location/components/hydrograph/statistics', () => {
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');
+ expect(tableHeaders[1].text()).toBe('550.5');
+ expect(tableHeaders[2].text()).toBe('1000');
+ expect(tableHeaders[3].text()).toBe('160');
+ expect(tableHeaders[4].text()).toBe('2240');
+ expect(tableHeaders[5].text()).toBe('1530');
+ expect(tableHeaders[6].text()).toBe('2730');
});
});
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 4e3be0883..d1859088b 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,6 +1,6 @@
<template>
<div
- v-show="dataArray[0].tableData.length"
+ v-show="dataArray.length"
class="stats-accordion usa-accordion wdfn-accordion"
>
<h2 class="usa-accordion__heading">
@@ -29,8 +29,8 @@
class="usa-table usa-table--stacked"
>
<!-- eslint-disable vue/no-v-html -->
- <caption>
- Daily <span v-html="data.location_description ? `${parameterName} (${data.location_description})` : parameterName" />
+ <caption v-if="parameter">
+ Daily <span v-html="data.location_description ? `${parameter.name} (${data.location_description})` : parameter.name" />
for {{ now.toDateString() }} based on {{ data.yearCount }}
{{ data.yearCount === '1' ? 'year' : 'years' }} of data.
</caption>
@@ -68,7 +68,7 @@
import {useState} from 'redux-connect-vue';
import {createSelector} from 'reselect';
-import {getTitle} from '../selectors/time-series-data';
+import {getPrimaryParameter} from 'ml/components/hydrograph/selectors/time-series-data';
import {getDailyStatistics} from 'ml/components/hydrograph/selectors/statistics';
import {latestSelectedParameterValue} from 'ml/selectors/hydrograph-parameters-selector';
@@ -83,11 +83,7 @@ export default {
latestSelectedParameterValue,
(dailyStatsObjectArray, latestValue) => {
if (!dailyStatsObjectArray || !latestValue || !dailyStatsObjectArray.length) {
- return [{
- tableData: [],
- columnHeadings: [],
- yearCount: ''
- }];
+ return [];
}
return dailyStatsObjectArray.map(dailyStatsObject => {
@@ -107,7 +103,7 @@ export default {
const state = useState({
dataArray: getStatsAndLatestData,
- parameterName: getTitle
+ parameter: getPrimaryParameter
});
return {
--
GitLab