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

@@ -3,8 +3,6 @@ import {mount} from '@vue/test-utils';
 import config from 'ui/config';
 import * as utils from 'ui/utils';
 
-import {configureStore} from 'ml/store';
-
 import {TEST_PRIMARY_IV_DATA, TEST_GW_LEVELS} from '../mock-hydrograph-state';
 
 import HydrographLegend from './hydrograph-legend.vue';
@@ -112,24 +110,21 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
 
     utils.mediaQuery = jest.fn().mockReturnValue(true);
     describe('HydrographLegend', () => {
-        let store;
         let wrapper;
 
         beforeEach(() => {
-            store = configureStore(TEST_STATE);
-
             wrapper = mount(HydrographLegend, {
                 props: {
                     legendMarkerRows: getLegendMarkerRows(TEST_STATE),
                     layout: { 
-                        "width": 992, 
-                        "height": 496, 
-                        "windowWidth": 1041, 
-                        "margin": { 
-                            "bottom": 5, 
-                            "top": 25, 
-                            "left": 55, 
-                            "right": 25 
+                        'width': 992, 
+                        'height': 496, 
+                        'windowWidth': 1041, 
+                        'margin': { 
+                            'bottom': 5, 
+                            'top': 25, 
+                            'left': 55, 
+                            'right': 25 
                         } 
                     }
                 }
@@ -145,14 +140,14 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
                 props: {
                     legendMarkerRows: getDVLegendMarkerRows(DV_TEST_STATE),
                     layout: { 
-                        "width": 992, 
-                        "height": 496, 
-                        "windowWidth": 1041, 
-                        "margin": { 
-                            "bottom": 5, 
-                            "top": 25, 
-                            "left": 55, 
-                            "right": 25 
+                        'width': 992, 
+                        'height': 496, 
+                        'windowWidth': 1041, 
+                        'margin': { 
+                            'bottom': 5, 
+                            'top': 25, 
+                            'left': 55, 
+                            'right': 25 
                         } 
                     }
                 }