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 * as utils from 'ui/utils';
+
+import HydrographLegend from './hydrograph-legend.vue';
+
+import {lineMarker, rectangleMarker, textOnlyMarker, circleMarker} from 'd3render/markers';
+
+describe('monitoring-location/components/hydrograph/legend module', () => {
+    utils.mediaQuery = jest.fn().mockReturnValue(true);
+
+    const TEST_MARKERS = [
+        [{
+            type: lineMarker,
+            length: 20,
+            domId: 'some-id',
+            domClass: 'some-class',
+            text: 'Some Text'
+        }, {
+            type: rectangleMarker,
+            domId: 'some-rectangle-id',
+            domClass: 'some-rectangle-class',
+            text: 'Rectangle Marker'
+        }],
+        [{
+            type: textOnlyMarker,
+            domId: 'text-id',
+            domClass: 'text-class',
+            text: 'Label'
+        }, {
+            type: lineMarker,
+            domId: null,
+            domClass: 'some-other-class',
+            text: 'Median Label'
+        }, {
+            type: circleMarker,
+            domId: null,
+            domClass: 'circle-marker-class',
+            text: 'Circle Marker label',
+            radius: 5
+        }]
+    ];
+
+    utils.mediaQuery = jest.fn().mockReturnValue(true);
+    describe('HydrographLegend', () => {
+        let wrapper;
+
+        beforeEach(() => {
+            wrapper = mount(HydrographLegend, {
+                props: {
+                    legendMarkerRows: TEST_MARKERS,
+                    layout: { 
+                        'width': 992, 
+                        'height': 496, 
+                        'windowWidth': 1041, 
+                        'margin': { 
+                            'bottom': 5, 
+                            'top': 25, 
+                            'left': 55, 
+                            'right': 25 
+                        } 
+                    }
+                }
+            });
+        });
+
+        it('Should have the correct number of legend markers', () => {
+            expect(wrapper.findAll('.legend g')).toHaveLength(5);
+        });
+
+        it('If no markers are provided legend-svg will contain no groups', async() => {
+            wrapper = mount(HydrographLegend, {
+                props: {
+                    legendMarkerRows: [],
+                    layout: {}
+                }
+            });
+            await wrapper.vm.$nextTick();
+            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(2);
+            expect(wrapper.findAll('rect')).toHaveLength(1);
+            expect(wrapper.findAll('text')).toHaveLength(5);
+            expect(wrapper.findAll('circle')).toHaveLength(1);
+        });
+
+        it('Expects that the legend has the expected text', () => {
+            let text = wrapper.findAll('text');
+            expect(text[0].text()).toBe('Some Text');
+            expect(text[1].text()).toBe('Rectangle Marker');
+            expect(text[2].text()).toBe('Label');
+            expect(text[3].text()).toBe('Median Label');
+            expect(text[4].text()).toBe('Circle Marker label');
+        });
+    });
+});
\ No newline at end of file