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

-import {select, selectAll} from 'd3-selection';
+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 {configureStore} from 'ml/store';
 
-import {drawTimeSeriesLegend} from './legend';
 import {TEST_PRIMARY_IV_DATA, TEST_GW_LEVELS} from '../mock-hydrograph-state';
 
+import Legend from './legend.vue'
+
 describe('monitoring-location/components/hydrograph/legend module', () => {
     utils.mediaQuery = jest.fn().mockReturnValue(true);
     config.ivPeriodOfRecord = {
@@ -35,35 +39,58 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
         }
     };
 
-    describe('legends should render', () => {
-
-        let graphNode;
+    utils.mediaQuery = jest.fn().mockReturnValue(true);
+    describe('drawSimpleLegend', () => {
         let store;
+        let wrapper;
 
         beforeEach(() => {
-            let body = select('body');
-            let component = body.append('div')
-                .attr('id', 'hydrograph');
-            component.append('div').attr('class', 'loading-indicator-container');
-            component.append('div').attr('class', 'graph-container');
-            component.append('div').attr('class', 'select-time-series-container');
-
-            graphNode = document.getElementById('hydrograph');
-
             store = configureStore(TEST_STATE);
-            select(graphNode)
-                .call(drawTimeSeriesLegend, store);
 
+            wrapper = mount(Legend, {
+                global: {
+                    plugins: [
+                        [ReduxConnectVue, {
+                            store,
+                            mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
+                            mapStateToPropsFactory: createStructuredSelector
+                        }]
+                    ]
+                }
+            });
         });
 
-        afterEach(() => {
-            select('#hydrograph').remove();
+        it('Should have the correct number of legend markers', () => {
+            expect(wrapper.findAll('.legend g')).toHaveLength(9);
         });
 
+        it('If no markers are provided legend-svg will contain no groups', () => {
+            wrapper = mount(Legend, {
+                global: {
+                    plugins: [
+                        [ReduxConnectVue, {
+                            store: configureStore({}),
+                            mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
+                            mapStateToPropsFactory: createStructuredSelector
+                        }]
+                    ]
+                }
+            });
 
-        it('Should have the correct number of legend markers', () => {
-            expect(selectAll('.legend g').size()).toBe(9);
+            expect(wrapper.findAll('svg g')).toHaveLength(0);
+        });
+
+        it('Adds the correct number of legend elements', () => {
+            expect(wrapper.findAll('svg')).toHaveLength(1);
+            expect(wrapper.findAll('line')).toHaveLength(3);
+            expect(wrapper.findAll('rect')).toHaveLength(2);
+            expect(wrapper.findAll('text')).toHaveLength(9);
+            expect(wrapper.findAll('circle')).toHaveLength(3);
+        });
+
+        it('Expects that the legend has the expected text', () => {
+            let text = wrapper.findAll('text');
+            
         });
     });
-});
-z
\ No newline at end of file
+});
\ No newline at end of file