Wdfn 768 - Convert the legend component to vue

Before making a pull request

• Put the appropriate EXEMPT flag if needed in the MR title (see https://practices.wma.chs.usgs.gov/practice/peer_code_review/)
• Run all linters (make lint)
• Run all tests (make test)
• Update the changelog appropriately
• If making a release, update code.json metadataLastUpdated and bump CHANGELOG.md to next version.

Description

Added a vue component for the hydrograph legend. Added the graph controls component to the hydrograph app.

After making a pull request

• If appropriate, put the link to the PR in the JIRA ticket
• Assign someone to review unless the change is trivial

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'
                 }
             });