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

@@ -29,17 +29,13 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
                     id: '12345',
                     properties: {
                         phenomenonTimeStart: '2018-01-02',
-                        phenomenonTimeEnd: '2018-01-10',
-                        timeStep: ['2018-01-05', '2018-01-03', '2018-01-02', '2018-01-04',
-                            '2018-01-06', '2018-01-07', '2018-01-08', '2018-01-09', '2018-01-10'],
-                        result: ['3.2', '4.0', '5.0', '6.1',
-                            '7.3', '8.1', '6.2', '2.9', '3.4'],
-                        approvals: [['Approved'], ['Approved'], ['Approved'], ['Approved'],
-                            ['Approved'], ['Approved'], ['Approved'], ['Approved'], ['Working']],
-                        nilReason: [null, 'AA', null, null, null, null, null, null, null],
-                        qualifiers: [['ICE'], null, null, null,
-                            ['ICE', 'EQUIP'], ['ICE', 'EQUIP'], ['ESTIMATED'], ['ESTIMATED'], null],
-                        grades: [['60'], ['50'], ['50'], ['60'], ['50'], ['50'], ['50'], ['50'], ['50']]
+                        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': {
@@ -47,25 +43,21 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
                     id: '12346',
                     properties: {
                         phenomenonTimeStart: '2018-01-02',
-                        phenomenonTimeEnd: '2018-01-10',
-                        timeStep: ['2018-01-02', '2018-01-03', '2018-01-04', '2018-01-05',
-                            '2018-01-06', '2018-01-07', '2018-01-08', '2018-01-09', '2018-01-10'],
-                        result: ['5.2', '3.0', '6.0', '7.1',
-                            '8.3', '9.1', '7.2', '3.9', '4.4'],
-                        approvals: [['Approved'], ['Approved'], ['Approved'], ['Approved'],
-                            ['Approved'], ['Approved'], ['Approved'], ['Approved'], ['Working']],
-                        nilReason: [null, 'AA', null, null, null, null, null, null, null],
-                        qualifiers: [null, null, null, ['ICE'],
-                            ['ICE', 'EQUIP'], ['ICE', 'EQUIP'], ['ESTIMATED'], ['ESTIMATED'], null],
-                        grades: [['50'], ['50'], ['50'], ['60'], ['50'], ['50'], ['50'], ['50'], ['50']]
+                        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: '12345',
-                mean: null,
+                min: null,
+                mean: '12345',
                 max: '12346'
             }
         },
@@ -122,7 +114,7 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
             expect(wrapper.findAll('.legend g')).toHaveLength(9);
         });
 
-        it('Should have the correct number of legend markers when working for the DV graph', () => {
+        it('Should have the correct number of legend markers when working for the DV graph', async() => {
             wrapper = mount(HydrographLegend, {
                 global: {
                     plugins: [
@@ -137,11 +129,11 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
                     graphType: 'DV'
                 }
             });
-
-            expect(wrapper.findAll('.legend g')).toHaveLength(1);
+            await wrapper.vm.$nextTick();
+            expect(wrapper.findAll('.legend g')).toHaveLength(6);
         });
 
-        it('If no markers are provided legend-svg will contain no groups', () => {
+        it('If no markers are provided legend-svg will contain no groups', async() => {
             wrapper = mount(HydrographLegend, {
                 global: {
                     plugins: [
@@ -156,7 +148,7 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
                     graphType: 'IV'
                 }
             });
-
+            await wrapper.vm.$nextTick();
             expect(wrapper.findAll('svg g')).toHaveLength(0);
         });