Adding a prop for the daily value legend

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

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

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

@@ -29,17 +29,13 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
                     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']]
+                        phenomenonTimeEnd: '2018-01-05',
+                        timeStep: ['2018-01-02', '2018-01-03', '2018-01-04', '2018-01-05'],
+                        result: ['5.0', '4.0', '6.1', '3.2'],
+                        approvals: [['Approved'], ['Approved'], ['Approved'], ['Approved']],
+                        nilReason: [null, 'AA', null, null],
+                        qualifiers: [null, ['ESTIMATED'], ['ICE'], ['ICE']],
+                        grades: [['50'], ['50'], ['60'], ['60']]
                     }
                 },
                 '12346': {
@@ -47,25 +43,21 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
                     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']]
+                        phenomenonTimeEnd: '2018-01-05',
+                        timeStep: ['2018-01-02', '2018-01-03', '2018-01-04', '2018-01-05'],
+                        result: ['6.0', '5.0', '7.1', '4.2'],
+                        approvals: [['Approved'], ['Approved'], ['Approved'], ['Approved']],
+                        nilReason: [null, 'AA', null, null],
+                        qualifiers: [null, null, null, null],
+                        grades: [['50'], ['50'], ['60'], ['60']]
                     }
                 }
             }
         },
         dailyValueTimeSeriesState: {
             currentDVTimeSeriesId: {
-                min: '12345',
-                mean: null,
+                min: null,
+                mean: '12345',
                 max: '12346'
             }
         },
@@ -122,7 +114,7 @@ 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', () => {
+        it('Should have the correct number of legend markers when working for the DV graph', async() => {
             wrapper = mount(HydrographLegend, {
                 global: {
                     plugins: [
@@ -137,11 +129,11 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
                     graphType: 'DV'
                 }
             });
-
-            expect(wrapper.findAll('.legend g')).toHaveLength(1);
+            await wrapper.vm.$nextTick();
+            expect(wrapper.findAll('.legend g')).toHaveLength(6);
         });
 
-        it('If no markers are provided legend-svg will contain no groups', () => {
+        it('If no markers are provided legend-svg will contain no groups', async() => {
             wrapper = mount(HydrographLegend, {
                 global: {
                     plugins: [
@@ -156,7 +148,7 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
                     graphType: 'IV'
                 }
             });
-
+            await wrapper.vm.$nextTick();
             expect(wrapper.findAll('svg g')).toHaveLength(0);
         });
 

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

@@ -3,8 +3,8 @@
     <div class="hydrograph-container">
       <svg
         v-if="legendMarkerRows.length"
+        ref="svg"
         class="legend-svg"
-        :viewBox="svgViewBox"
       >
         <g
           ref="legend"
@@ -44,6 +44,7 @@ export default {
   setup(props) {
     const trackedType = toRefs(props).graphType;
     const legend = ref(null);
+    const svg = ref(null);
 
     const RECTANGLE_MARKER_WIDTH = 20;
     const RECTANGLE_MARKER_HEIGHT = 10;
@@ -62,7 +63,7 @@ export default {
     
     if (trackedType.value === 'DV') {
       state = useState({
-        legendMarkerRows: getDVLegendMarkers,
+        legendMarkerRows: (state) => getDVLegendMarkers(state),
         layout: getDVMainLayout
       });
     }
@@ -70,9 +71,7 @@ export default {
     const legendTransform = computed(() => {
       return `translate(${mediaQuery(config.USWDS_MEDIUM_SCREEN) ? state.layout.value.margin.left : 0}, 0)`;
     });
-
-    let svgViewBox;
-
+    
     watchEffect(() => {
       if (legend.value) {
         select(legend.value).selectChildren().remove();
@@ -141,29 +140,24 @@ export default {
           //start new row
           yPosition = yPosition + VERTICAL_ROW_OFFSET;
         });
-
-        // Set the size of the containing svg node to the size of the legend.
+        
         let bBox;
+        // Set the size of the containing svg node to the size of the legend.
         try {
           bBox = select(legend.value).node().getBBox();
         } catch (error) {
           return;
         }
-
-        svgViewBox = computed(() => {
-          if (bBox.value) {
-            return `0 0 ${state.layout.value.width} ${bBox.height + 10}`;
-          }
-          return '';
-        });
+        
+        select(svg.value).attr('viewBox', `0 0 ${state.layout.value.width} ${bBox.height + 10}`);
       }
     });
 
     return {
       ...state,
       legendTransform,
-      svgViewBox,
-      legend
+      legend,
+      svg
     };
   }
 };