Changing the props

assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue

@@ -4,7 +4,8 @@
     <GraphBrush />
     <div class="ts-legend-controls-container">
       <HydrographLegend
-        :graph-type="'IV'"
+        :legend-marker-rows="legendMarkerRows"
+        :layout="layout"
       />
       <div class="graph-controls-container">
         <GraphControls />
@@ -18,6 +19,10 @@ import GraphBrush from './vue-components/graph-brush.vue';
 import CursorSlider from './vue-components/cursor-slider.vue';
 import HydrographLegend from './vue-components/legend.vue';
 import GraphControls from './vue-components/graph-controls.vue';
+import {useState} from 'redux-connect-vue';
+
+import {getMainLayout} from './selectors/layout';
+import {getLegendMarkerRows} from './selectors/legend-data';
 export default {
   name: 'HydrographApp',
   components: {
@@ -25,6 +30,16 @@ export default {
     CursorSlider,
     HydrographLegend,
     GraphControls
+  },
+  setup() {
+    const state = useState({
+      legendMarkerRows: getLegendMarkerRows,
+      layout: (state) => getMainLayout(state)
+    });
+
+    return {
+      ...state
+    };
   }
 };
 </script>
\ No newline at end of file

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

@@ -5,6 +5,7 @@ import {createStructuredSelector} from 'reselect';
 
 import config from 'ui/config';
 import * as utils from 'ui/utils';
+import {format} from 'd3-format';
 
 import {configureStore} from 'ml/store';
 
@@ -12,6 +13,10 @@ import {TEST_PRIMARY_IV_DATA, TEST_GW_LEVELS} from '../mock-hydrograph-state';
 
 import HydrographLegend from './legend.vue';
 
+import {getMainLayout} from '../selectors/layout';
+import {getLegendMarkerRows} from '../selectors/legend-data';
+import {getLegendMarkers as getDVLegendMarkerRows} from '../../daily-value-hydrograph/selectors/legend-data';
+
 describe('monitoring-location/components/hydrograph/legend module', () => {
     utils.mediaQuery = jest.fn().mockReturnValue(true);
     config.ivPeriodOfRecord = {
@@ -70,8 +75,27 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
     const TEST_STATE = {
         hydrographData: {
             currentTimeRange: {
-                start: 1582560000000,
-                end: 1600700000000
+                start: 1582560800009,
+                end: 1582561800001
+            },
+            thresholds: {
+                operatingLimits: [{
+                    parameterCode: '72019',
+                    methodDescription: 'from multi parameter sonde',
+                    thresholdDetails: [{
+                        name: 'Very high',
+                        referenceCode: 'Operational limit - high-Public',
+                        referenceValue: '10'
+                    }, {
+                        name: 'Very low',
+                        referenceCode: 'Operational limit - low-Public',
+                        referenceValue: '1'
+                    }]
+                }]
+            },
+            prioryearTimeRange: {
+                start: 1582560900000,
+                end: 1582561800000
             },
             primaryIVData: TEST_PRIMARY_IV_DATA
         },
@@ -79,10 +103,15 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
             all: [TEST_GW_LEVELS]
         },
         hydrographState: {
+            selectedParameterCode: '72019',
             showCompareIVData: false,
             showMedianData: false,
-            selectedIVMethodID: '90649',
-            selectedParameterCode: '72019'
+            selectedIVMethodID: '90649'
+        },
+        floodData: {},
+        ui: {
+            windowWidth: 591,
+            width: 542
         }
     };
 
@@ -105,13 +134,17 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
                     ]
                 },
                 props: {
-                    graphType: 'IV'
+                    legendMarkerRows: getLegendMarkerRows(TEST_STATE),
+                    layout: getMainLayout.resultFunc(200, 600, {
+                        tickValues: [5, 10, 15],
+                        tickFormat: format('d')
+                    })
                 }
             });
         });
 
         it('Should have the correct number of legend markers', () => {
-            expect(wrapper.findAll('.legend g')).toHaveLength(9);
+            expect(wrapper.findAll('.legend g')).toHaveLength(7);
         });
 
         it('Should have the correct number of legend markers when working for the DV graph', async() => {
@@ -126,7 +159,11 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
                     ]
                 },
                 props: {
-                    graphType: 'DV'
+                    legendMarkerRows: getDVLegendMarkerRows(DV_TEST_STATE),
+                    layout: getMainLayout.resultFunc(200, 600, {
+                        tickValues: [5, 10, 15],
+                        tickFormat: format('d')
+                    })
                 }
             });
             await wrapper.vm.$nextTick();
@@ -138,14 +175,15 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
                 global: {
                     plugins: [
                         [ReduxConnectVue, {
-                            store: configureStore({}),
+                            store,
                             mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
                             mapStateToPropsFactory: createStructuredSelector
                         }]
                     ]
                 },
                 props: {
-                    graphType: 'IV'
+                    legendMarkerRows: [],
+                    layout: {}
                 }
             });
             await wrapper.vm.$nextTick();
@@ -156,8 +194,8 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
             expect(wrapper.findAll('svg')).toHaveLength(1);
             expect(wrapper.findAll('line')).toHaveLength(3);
             expect(wrapper.findAll('rect')).toHaveLength(2);
-            expect(wrapper.findAll('text')).toHaveLength(9);
-            expect(wrapper.findAll('circle')).toHaveLength(3);
+            expect(wrapper.findAll('text')).toHaveLength(7);
+            expect(wrapper.findAll('circle')).toHaveLength(1);
         });
 
         it('Expects that the legend has the expected text', () => {
@@ -169,8 +207,6 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
             expect(text[4].text()).toBe('Ice Affected');
             expect(text[5].text()).toBe('Field visit:');
             expect(text[6].text()).toBe('Provisional');
-            expect(text[7].text()).toBe('Approved');
-            expect(text[8].text()).toBe('Revised');
         });
     });
 });
\ No newline at end of file

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.vue

@@ -17,32 +17,26 @@
 </template>
 
 <script>
-import {useState} from 'redux-connect-vue';
+
 import {computed, ref, toRefs, watchEffect} from 'vue';
 import {select} from 'd3-selection';
 
-import {getMainLayout} from '../selectors/layout';
-import {getLegendMarkerRows} from '../selectors/legend-data';
-
-import {getMainLayout as getDVMainLayout} from '../../daily-value-hydrograph/selectors/layout';
-import {getLegendMarkers as getDVLegendMarkers} from '../../daily-value-hydrograph/selectors/legend-data';
-
 import {mediaQuery} from 'ui/utils';
 import config from 'ui/config';
 
 export default {
   name: 'HydrographLegend',
   props: {
-    graphType: {
-      type: String,
-      required: true,
-      validator: function(value) {
-        return ['DV', 'IV'].includes(value);
-      }
+    legendMarkerRows: {
+      type: Array,
+      required: true
+    },
+    layout: {
+      type: Object,
+      required: true
     }
   },
   setup(props) {
-    const trackedType = toRefs(props).graphType;
     const legend = ref(null);
     const svg = ref(null);
 
@@ -52,24 +46,11 @@ export default {
     const MARKER_GROUP_X_OFFSET = 15;
     const VERTICAL_ROW_OFFSET = 18;
 
-    let state;
-
-    if (trackedType.value === 'IV') {
-      state = useState({
-        legendMarkerRows: getLegendMarkerRows,
-        layout: getMainLayout
-      });
-    }
-    
-    if (trackedType.value === 'DV') {
-      state = useState({
-        legendMarkerRows: (state) => getDVLegendMarkers(state),
-        layout: getDVMainLayout
-      });
-    }
+    const trackedLegendMarkerRows = toRefs(props).legendMarkerRows;
+    const trackedLayout = toRefs(props).layout;
 
     const legendTransform = computed(() => {
-      return `translate(${mediaQuery(config.USWDS_MEDIUM_SCREEN) ? state.layout.value.margin.left : 0}, 0)`;
+      return `translate(${mediaQuery(config.USWDS_MEDIUM_SCREEN) ? trackedLayout.value.margin.left : 0}, 0)`;
     });
     
     watchEffect(() => {
@@ -77,7 +58,7 @@ export default {
         select(legend.value).selectChildren().remove();
         let yPosition = VERTICAL_ROW_OFFSET;
 
-        state.legendMarkerRows.value.forEach((rowMarkers) => {
+        trackedLegendMarkerRows.value.forEach((rowMarkers) => {
           let xPosition = 0;
           let markerArgs;
           let markerGroup;
@@ -103,7 +84,7 @@ export default {
           };
 
           const repositionLastMarkerWhenNeeded = function() {
-              if (xPosition - MARKER_GROUP_X_OFFSET > state.layout.value.width) {
+              if (xPosition - MARKER_GROUP_X_OFFSET > trackedLayout.value.width) {
                   // Need to remove the last marker and draw it on the next row.
                   markerGroup.remove();
                   xPosition = 0;
@@ -149,12 +130,11 @@ export default {
           return;
         }
         
-        select(svg.value).attr('viewBox', `0 0 ${state.layout.value.width} ${bBox.height + 10}`);
+        select(svg.value).attr('viewBox', `0 0 ${trackedLayout.value.width} ${bBox.height + 10}`);
       }
     });
 
     return {
-      ...state,
       legendTransform,
       legend,
       svg