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 config from 'ui/config';
 import * as utils from 'ui/utils';
 
-import {TEST_PRIMARY_IV_DATA, TEST_GW_LEVELS} from '../mock-hydrograph-state';
-
 import HydrographLegend from './hydrograph-legend.vue';
 
-import {getLegendMarkerRows} from '../selectors/legend-data';
-import {getLegendMarkers as getDVLegendMarkerRows} from '../../daily-value-hydrograph/selectors/legend-data';
+import {lineMarker, rectangleMarker, textOnlyMarker, circleMarker} from 'd3render/markers';
 
 describe('monitoring-location/components/hydrograph/legend module', () => {
     utils.mediaQuery = jest.fn().mockReturnValue(true);
-    config.ivPeriodOfRecord = {
-        '72019': {}
-    };
-    config.gwPeriodOfRecord = {
-        '72019': {}
-    };
-
-    const DV_TEST_STATE = {
-        dailyValueTimeSeriesData: {
-            dvTimeSeries: {
-                '12345': {
-                    type: 'Feature',
-                    id: '12345',
-                    properties: {
-                        phenomenonTimeStart: '2018-01-02',
-                        phenomenonTimeEnd: '2018-01-05',
-                        timeStep: ['2018-01-02', '2018-01-03', '2018-01-04', '2018-01-05'],
-                        result: ['5.0', '4.0', '6.1', '3.2'],
-                        approvals: [['Approved'], ['Approved'], ['Approved'], ['Approved']],
-                        nilReason: [null, 'AA', null, null],
-                        qualifiers: [null, ['ESTIMATED'], ['ICE'], ['ICE']],
-                        grades: [['50'], ['50'], ['60'], ['60']]
-                    }
-                },
-                '12346': {
-                    type: 'Feature',
-                    id: '12346',
-                    properties: {
-                        phenomenonTimeStart: '2018-01-02',
-                        phenomenonTimeEnd: '2018-01-05',
-                        timeStep: ['2018-01-02', '2018-01-03', '2018-01-04', '2018-01-05'],
-                        result: ['6.0', '5.0', '7.1', '4.2'],
-                        approvals: [['Approved'], ['Approved'], ['Approved'], ['Approved']],
-                        nilReason: [null, 'AA', null, null],
-                        qualifiers: [null, null, null, null],
-                        grades: [['50'], ['50'], ['60'], ['60']]
-                    }
-                }
-            }
-        },
-        dailyValueTimeSeriesState: {
-            currentDVTimeSeriesId: {
-                min: null,
-                mean: '12345',
-                max: '12346'
-            }
-        },
-        ui: {
-            windowWidth: 1024,
-            width: 800
-        }
-    };
 
-    const TEST_STATE = {
-        hydrographData: {
-            currentTimeRange: {
-                start: 1582560800009,
-                end: 1582561800001
-            },
-            thresholds: {
-                operatingLimits: [{
-                    parameterCode: '72019',
-                    methodDescription: 'from multi parameter sonde',
-                    thresholdDetails: [{
-                        name: 'Very high',
-                        referenceCode: 'Operational limit - high-Public',
-                        referenceValue: '10'
-                    }, {
-                        name: 'Very low',
-                        referenceCode: 'Operational limit - low-Public',
-                        referenceValue: '1'
-                    }]
-                }]
-            },
-            prioryearTimeRange: {
-                start: 1582560900000,
-                end: 1582561800000
-            },
-            primaryIVData: TEST_PRIMARY_IV_DATA
-        },
-        groundwaterLevelData: {
-            all: [TEST_GW_LEVELS]
-        },
-        hydrographState: {
-            selectedParameterCode: '72019',
-            showCompareIVData: false,
-            showMedianData: false,
-            selectedIVMethodID: '90649'
-        },
-        floodData: {},
-        ui: {
-            windowWidth: 591,
-            width: 542
-        }
-    };
+    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', () => {
@@ -115,7 +48,7 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
         beforeEach(() => {
             wrapper = mount(HydrographLegend, {
                 props: {
-                    legendMarkerRows: getLegendMarkerRows(TEST_STATE),
+                    legendMarkerRows: TEST_MARKERS,
                     layout: { 
                         'width': 992, 
                         'height': 496, 
@@ -132,28 +65,7 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
         });
 
         it('Should have the correct number of legend markers', () => {
-            expect(wrapper.findAll('.legend g')).toHaveLength(7);
-        });
-
-        it('Should have the correct number of legend markers when working for the DV graph', async() => {
-            wrapper = mount(HydrographLegend, {
-                props: {
-                    legendMarkerRows: getDVLegendMarkerRows(DV_TEST_STATE),
-                    layout: { 
-                        'width': 992, 
-                        'height': 496, 
-                        'windowWidth': 1041, 
-                        'margin': { 
-                            'bottom': 5, 
-                            'top': 25, 
-                            'left': 55, 
-                            'right': 25 
-                        } 
-                    }
-                }
-            });
-            await wrapper.vm.$nextTick();
-            expect(wrapper.findAll('.legend g')).toHaveLength(6);
+            expect(wrapper.findAll('.legend g')).toHaveLength(5);
         });
 
         it('If no markers are provided legend-svg will contain no groups', async() => {
@@ -169,21 +81,19 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
 
         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(7);
+            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('Current:');
-            expect(text[1].text()).toBe('Approved');
-            expect(text[2].text()).toBe('Estimated');
-            expect(text[3].text()).toBe('Provisional');
-            expect(text[4].text()).toBe('Ice Affected');
-            expect(text[5].text()).toBe('Field visit:');
-            expect(text[6].text()).toBe('Provisional');
+            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