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/hydrograph-legend.test.js

 import {mount} from '@vue/test-utils';
-import {bindActionCreators} from 'redux';
-import ReduxConnectVue from 'redux-connect-vue';
-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';
 
 import {TEST_PRIMARY_IV_DATA, TEST_GW_LEVELS} from '../mock-hydrograph-state';
 
-import HydrographLegend from './legend.vue';
+import HydrographLegend from './hydrograph-legend.vue';
 
-import {getMainLayout} from '../selectors/layout';
 import {getLegendMarkerRows} from '../selectors/legend-data';
 import {getLegendMarkers as getDVLegendMarkerRows} from '../../daily-value-hydrograph/selectors/legend-data';
 
@@ -124,21 +119,19 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
             store = configureStore(TEST_STATE);
 
             wrapper = mount(HydrographLegend, {
-                global: {
-                    plugins: [
-                        [ReduxConnectVue, {
-                            store,
-                            mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
-                            mapStateToPropsFactory: createStructuredSelector
-                        }]
-                    ]
-                },
                 props: {
                     legendMarkerRows: getLegendMarkerRows(TEST_STATE),
-                    layout: getMainLayout.resultFunc(200, 600, {
-                        tickValues: [5, 10, 15],
-                        tickFormat: format('d')
-                    })
+                    layout: { 
+                        "width": 992, 
+                        "height": 496, 
+                        "windowWidth": 1041, 
+                        "margin": { 
+                            "bottom": 5, 
+                            "top": 25, 
+                            "left": 55, 
+                            "right": 25 
+                        } 
+                    }
                 }
             });
         });
@@ -149,21 +142,19 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
 
         it('Should have the correct number of legend markers when working for the DV graph', async() => {
             wrapper = mount(HydrographLegend, {
-                global: {
-                    plugins: [
-                        [ReduxConnectVue, {
-                            store: configureStore(DV_TEST_STATE),
-                            mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
-                            mapStateToPropsFactory: createStructuredSelector
-                        }]
-                    ]
-                },
                 props: {
                     legendMarkerRows: getDVLegendMarkerRows(DV_TEST_STATE),
-                    layout: getMainLayout.resultFunc(200, 600, {
-                        tickValues: [5, 10, 15],
-                        tickFormat: format('d')
-                    })
+                    layout: { 
+                        "width": 992, 
+                        "height": 496, 
+                        "windowWidth": 1041, 
+                        "margin": { 
+                            "bottom": 5, 
+                            "top": 25, 
+                            "left": 55, 
+                            "right": 25 
+                        } 
+                    }
                 }
             });
             await wrapper.vm.$nextTick();
@@ -172,15 +163,6 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
 
         it('If no markers are provided legend-svg will contain no groups', async() => {
             wrapper = mount(HydrographLegend, {
-                global: {
-                    plugins: [
-                        [ReduxConnectVue, {
-                            store,
-                            mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
-                            mapStateToPropsFactory: createStructuredSelector
-                        }]
-                    ]
-                },
                 props: {
                     legendMarkerRows: [],
                     layout: {}