EoD

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

@@ -3,7 +3,9 @@
     <CursorSlider />
     <GraphBrush />
     <div class="ts-legend-controls-container">
-      <HydrographLegend />
+      <HydrographLegend
+        :graphType="'IV'"
+      />
       <div class="graph-controls-container">
         <GraphControls />
       </div>

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

@@ -20,6 +20,61 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
     config.gwPeriodOfRecord = {
         '72019': {}
     };
+
+    const DV_TEST_STATE = {
+        dailyValueTimeSeriesData: {
+            dvTimeSeries: {
+                '12345': {
+                    type: 'Feature',
+                    id: '12345',
+                    properties: {
+                        phenomenonTimeStart: '2018-01-02',
+                        phenomenonTimeEnd: '2018-01-10',
+                        timeStep: ['2018-01-05', '2018-01-03', '2018-01-02', '2018-01-04',
+                            '2018-01-06', '2018-01-07', '2018-01-08', '2018-01-09', '2018-01-10'],
+                        result: ['3.2', '4.0', '5.0', '6.1',
+                            '7.3', '8.1', '6.2', '2.9', '3.4'],
+                        approvals: [['Approved'], ['Approved'], ['Approved'], ['Approved'],
+                            ['Approved'], ['Approved'], ['Approved'], ['Approved'], ['Working']],
+                        nilReason: [null, 'AA', null, null, null, null, null, null, null],
+                        qualifiers: [['ICE'], null, null, null,
+                            ['ICE', 'EQUIP'], ['ICE', 'EQUIP'], ['ESTIMATED'], ['ESTIMATED'], null],
+                        grades: [['60'], ['50'], ['50'], ['60'], ['50'], ['50'], ['50'], ['50'], ['50']]
+                    }
+                },
+                '12346': {
+                    type: 'Feature',
+                    id: '12346',
+                    properties: {
+                        phenomenonTimeStart: '2018-01-02',
+                        phenomenonTimeEnd: '2018-01-10',
+                        timeStep: ['2018-01-02', '2018-01-03', '2018-01-04', '2018-01-05',
+                            '2018-01-06', '2018-01-07', '2018-01-08', '2018-01-09', '2018-01-10'],
+                        result: ['5.2', '3.0', '6.0', '7.1',
+                            '8.3', '9.1', '7.2', '3.9', '4.4'],
+                        approvals: [['Approved'], ['Approved'], ['Approved'], ['Approved'],
+                            ['Approved'], ['Approved'], ['Approved'], ['Approved'], ['Working']],
+                        nilReason: [null, 'AA', null, null, null, null, null, null, null],
+                        qualifiers: [null, null, null, ['ICE'],
+                            ['ICE', 'EQUIP'], ['ICE', 'EQUIP'], ['ESTIMATED'], ['ESTIMATED'], null],
+                        grades: [['50'], ['50'], ['50'], ['60'], ['50'], ['50'], ['50'], ['50'], ['50']]
+                    }
+                }
+            }
+        },
+        dailyValueTimeSeriesState: {
+            currentDVTimeSeriesId: {
+                min: '12345',
+                mean: null,
+                max: '12346'
+            }
+        },
+        ui: {
+            windowWidth: 1024,
+            width: 800
+        }
+    };
+
     const TEST_STATE = {
         hydrographData: {
             currentTimeRange: {
@@ -56,6 +111,9 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
                             mapStateToPropsFactory: createStructuredSelector
                         }]
                     ]
+                },
+                props: {
+                    graphType: 'IV'
                 }
             });
         });
@@ -64,6 +122,25 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
             expect(wrapper.findAll('.legend g')).toHaveLength(9);
         });
 
+        it('Should have the correct number of legend markers when working for the DV graph', () => {
+            wrapper = mount(HydrographLegend, {
+                global: {
+                    plugins: [
+                        [ReduxConnectVue, {
+                            store: configureStore(DV_TEST_STATE),
+                            mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
+                            mapStateToPropsFactory: createStructuredSelector
+                        }]
+                    ]
+                },
+                props: {
+                    graphType: 'DV'
+                }
+            });
+
+            expect(wrapper.findAll('.legend g')).toHaveLength(1);
+        });
+
         it('If no markers are provided legend-svg will contain no groups', () => {
             wrapper = mount(HydrographLegend, {
                 global: {
@@ -74,6 +151,9 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
                             mapStateToPropsFactory: createStructuredSelector
                         }]
                     ]
+                },
+                props: {
+                    graphType: 'IV'
                 }
             });
 

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

@@ -18,17 +18,31 @@
 
 <script>
 import {useState} from 'redux-connect-vue';
-import {computed, ref, watchEffect} from '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',
-  setup() {
+  props: {
+    graphType: {
+      type: String,
+      required: true,
+      validator: function(value) {
+        return ['DV', 'IV'].includes(value);
+      }
+    }
+  },
+  setup(props) {
+    const trackedType = toRefs(props).graphType;
     const legend = ref(null);
 
     const RECTANGLE_MARKER_WIDTH = 20;
@@ -37,10 +51,21 @@ export default {
     const MARKER_GROUP_X_OFFSET = 15;
     const VERTICAL_ROW_OFFSET = 18;
 
-    const state = useState({
-      legendMarkerRows: getLegendMarkerRows,
-      layout: getMainLayout
-    });
+    let state;
+
+    if (trackedType.value === 'IV') {
+      state = useState({
+        legendMarkerRows: getLegendMarkerRows,
+        layout: getMainLayout
+      });
+    }
+    
+    if (trackedType.value === 'DV') {
+      state = useState({
+        legendMarkerRows: getDVLegendMarkers,
+        layout: getDVMainLayout
+      });
+    }
 
     const legendTransform = computed(() => {
       return `translate(${mediaQuery(config.USWDS_MEDIUM_SCREEN) ? state.layout.value.margin.left : 0}, 0)`;