Merge branch 'wdfn-749' into 'main'

WDFN - 749/750 - Account for temperature parameter codes

See merge request !361

CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Fixed
 - Parameter codes with multiple methods will now show statistical data for each method available.
+- The hydrograph legend and time span shortcuts will now correctly display for calculated temperature parameter codes.
 
 ## [1.2.0](https://github.com/usgs/waterdataui/compare/waterdataui-1.1.0...waterdataui-1.2.0) - 2022-06-10
 ### Added

assets/src/scripts/monitoring-location/components/hydrograph/selectors/legend-data.js

@@ -43,8 +43,8 @@ const getLegendDisplay = createSelector(
     (showCompare, showMedian, thresholds, medianSeries, currentClasses, compareClasses, showFloodLevels,
      floodLevels, gwLevelKinds, primaryParameter) => {
         const parameterCode = primaryParameter ? primaryParameter.parameterCode : null;
-        const hasIVData = config.ivPeriodOfRecord && parameterCode ? parameterCode in config.ivPeriodOfRecord : false;
-        const hasGWLevelsData = config.gwPeriodOfRecord && parameterCode ? parameterCode in config.gwPeriodOfRecord : false;
+        const hasIVData = config.ivPeriodOfRecord && parameterCode ? parameterCode.replace(config.CALCULATED_TEMPERATURE_VARIABLE_CODE, '') in config.ivPeriodOfRecord : false;
+        const hasGWLevelsData = config.gwPeriodOfRecord && parameterCode ? parameterCode.replace(config.CALCULATED_TEMPERATURE_VARIABLE_CODE, '') in config.gwPeriodOfRecord : false;
         return {
             primaryIV: hasIVData ? currentClasses : undefined,
             compareIV: hasIVData && showCompare ? compareClasses : undefined,

assets/src/scripts/monitoring-location/components/hydrograph/selectors/legend-data.test.js

@@ -6,7 +6,8 @@ import {getLegendMarkerRows} from './legend-data';
 
 describe('monitoring-location/components/hydrograph/selectors/legend-data', () => {
     config.ivPeriodOfRecord = {
-        '72019': {}
+        '72019': {},
+        '00010': {}
     };
     config.gwPeriodOfRecord = {
         '72019': {}
@@ -100,6 +101,23 @@ describe('monitoring-location/components/hydrograph/selectors/legend-data', () =
         }
     };
 
+    const TEST_STATE_TEMPERATURE = {
+        ...TEST_STATE,
+        hydrographState: {
+            selectedParameterCode: '00010F',
+            showCompareIVData: false,
+            showMedianData: false,
+            selectedIVMethodID: '90649'
+        },
+        primaryIVData: {
+            ...TEST_PRIMARY_IV_DATA,
+            parameter: {
+                parameterCode: '00010F',
+                unit: 'F'
+            }
+        }
+    };
+
     describe('getLegendMarkerRows', () => {
         beforeAll(() => {
             Object.defineProperty(window, 'matchMedia', {
@@ -140,6 +158,16 @@ describe('monitoring-location/components/hydrograph/selectors/legend-data', () =
             expect(gwRow[2].type).toEqual(circleMarker);
         });
 
+        it('Should return markers for primary IV with a caculated temperature parameter code', () => {
+            const markerRows = getLegendMarkerRows(TEST_STATE_TEMPERATURE);
+            expect(markerRows).toHaveLength(2);
+            const currentRow = markerRows[0];
+            expect(currentRow).toHaveLength(3);
+            expect(currentRow[0].type).toEqual(textOnlyMarker);
+            expect(currentRow[1].type).toEqual(lineMarker);
+            expect(currentRow[2].type).toEqual(rectangleMarker);
+        });
+
         it('Should return markers for primary and compare when compare is visible', () => {
             const markerRows = getLegendMarkerRows({
                 ...TEST_STATE,

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/graph-controls.test.js

@@ -20,7 +20,8 @@ import GraphControls from './graph-controls.vue';
 describe('monitoring-location/components/hydrograph/components/graph-controls', () => {
     utils.mediaQuery = jest.fn().mockReturnValue(true);
     config.ivPeriodOfRecord = {
-        '72019': {}
+        '72019': {},
+        '00010': {}
     };
 
     let restoreConsole;
@@ -133,6 +134,38 @@ describe('monitoring-location/components/hydrograph/components/graph-controls',
         expect(wrapper.findAll('.usa-checkbox')[0].find('input').attributes('disabled')).toBeDefined();
     });
 
+    it('expect that compare is enabled if a calulated temp parameter code is selected', async() => {
+        store = configureStore({
+            hydrographData: {
+                currentTimeRange: TEST_CURRENT_TIME_RANGE
+            },
+            hydrographState: {
+                showCompareIVData: false,
+                selectedTimeSpan: 'P7D',
+                showMedianData: false,
+                selectedParameterCode: '00010F'
+            }
+        });
+
+        wrapper = mount(GraphControls, {
+            global: {
+                plugins: [
+                    [ReduxConnectVue, {
+                        store,
+                        mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
+                        mapStateToPropsFactory: createStructuredSelector
+                    }]
+                ],
+                provide: {
+                    store: store,
+                    siteno: '12345678'
+                }
+            }
+        });
+
+        expect(wrapper.findAll('.usa-checkbox')[0].find('input').attributes('disabled')).not.toBeDefined();
+    });
+
     it('expect that clicking the median updates the store', async() => {
         const medianInput = wrapper.findAll('.usa-checkbox')[1].find('input');
         medianInput.element.checked = true;

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/graph-controls.vue

@@ -44,7 +44,7 @@ export default {
 
   setup() {
     const hasIVData = function(parameterCode) {
-      return config.ivPeriodOfRecord && parameterCode in config.ivPeriodOfRecord;
+      return config.ivPeriodOfRecord && parameterCode.replace(config.CALCULATED_TEMPERATURE_VARIABLE_CODE, '') in config.ivPeriodOfRecord;
     };
 
     const ALLOW_COMPARE_FOR_DURATIONS = config.IV_SHORTCUT_BUTTONS.map(button => button.timeSpan);

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-shortcuts.test.js

@@ -122,6 +122,54 @@ describe('monitoring-location/components/hydrograph/components/graph-controls',
         expect(labels[2].text()).toBe('1 year');
     });
 
+    it('Expects to render the shortcut radio buttons and check the 7 day radio button with a calculated temperature parameter code', () => {
+        store = configureStore({
+            hydrographState: {
+                showCompareIVData: false,
+                selectedTimeSpan: 'P7D',
+                showMedianData: false,
+                selectedParameterCode: '00010F'
+            }
+        });
+
+        wrapper = mount(TimeSpanShortcuts, {
+            global: {
+                plugins: [
+                    [ReduxConnectVue, {
+                        store,
+                        mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
+                        mapStateToPropsFactory: createStructuredSelector
+                    }]
+                ],
+                provide: {
+                    store: store,
+                    siteno: '11112222',
+                    agencyCd: 'USGS'
+                }
+            }
+        });
+
+        const radio7Day = wrapper.find('#P7D-input');
+        const radio30Day = wrapper.find('#P30D-input');
+        const radio1Year = wrapper.find('#P365D-input');
+        const labels = wrapper.findAll('.usa-radio__label');
+
+        expect(wrapper.findAll('.iv-button-container')).toHaveLength(1);
+        expect(wrapper.findAll('.gw-button-container')).toHaveLength(0);
+
+        expect(radio7Day.attributes('value')).toBe('P7D');
+        expect(radio7Day.element.checked).toBe(true);
+        expect(labels[0].text()).toBe('7 days');
+
+        expect(radio30Day.attributes('value')).toBe('P30D');
+        expect(radio30Day.element.checked).toBe(false);
+        expect(labels[1].text()).toBe('30 days');
+
+        expect(radio1Year.attributes('value')).toBe('P365D');
+        expect(radio1Year.element.checked).toBe(false);
+        expect(labels[2].text()).toBe('1 year');
+    });
+
     it('Expects that if the selectedTimeSpan is changed to a days before that is not a shortcut, they are all unset', async() => {
         store.dispatch(setSelectedTimeSpan('P45D'));
         await wrapper.vm.$nextTick();

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-shortcuts.vue

@@ -76,14 +76,14 @@ export default {
     const hasIVData = createSelector(
       getSelectedParameterCode,
       (parameterCode) => {
-        return config.ivPeriodOfRecord && parameterCode in config.ivPeriodOfRecord;
+        return config.ivPeriodOfRecord && parameterCode.replace(config.CALCULATED_TEMPERATURE_VARIABLE_CODE, '') in config.ivPeriodOfRecord;
       }
     );
 
     const hasGWData = createSelector(
       getSelectedParameterCode,
       (parameterCode) => {
-        return config.gwPeriodOfRecord && parameterCode in config.gwPeriodOfRecord;
+        return config.gwPeriodOfRecord && parameterCode.replace(config.CALCULATED_TEMPERATURE_VARIABLE_CODE, '') in config.gwPeriodOfRecord;
       }
     );