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

@@ -5,6 +5,7 @@ import {createStructuredSelector} from 'reselect';
 
 import config from 'ui/config';
 import * as utils from 'ui/utils';
+import {format} from 'd3-format';
 
 import {configureStore} from 'ml/store';
 
@@ -12,6 +13,10 @@ import {TEST_PRIMARY_IV_DATA, TEST_GW_LEVELS} from '../mock-hydrograph-state';
 
 import HydrographLegend from './legend.vue';
 
+import {getMainLayout} from '../selectors/layout';
+import {getLegendMarkerRows} from '../selectors/legend-data';
+import {getLegendMarkers as getDVLegendMarkerRows} from '../../daily-value-hydrograph/selectors/legend-data';
+
 describe('monitoring-location/components/hydrograph/legend module', () => {
     utils.mediaQuery = jest.fn().mockReturnValue(true);
     config.ivPeriodOfRecord = {
@@ -70,8 +75,27 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
     const TEST_STATE = {
         hydrographData: {
             currentTimeRange: {
-                start: 1582560000000,
-                end: 1600700000000
+                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
         },
@@ -79,10 +103,15 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
             all: [TEST_GW_LEVELS]
         },
         hydrographState: {
+            selectedParameterCode: '72019',
             showCompareIVData: false,
             showMedianData: false,
-            selectedIVMethodID: '90649',
-            selectedParameterCode: '72019'
+            selectedIVMethodID: '90649'
+        },
+        floodData: {},
+        ui: {
+            windowWidth: 591,
+            width: 542
         }
     };
 
@@ -105,13 +134,17 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
                     ]
                 },
                 props: {
-                    graphType: 'IV'
+                    legendMarkerRows: getLegendMarkerRows(TEST_STATE),
+                    layout: getMainLayout.resultFunc(200, 600, {
+                        tickValues: [5, 10, 15],
+                        tickFormat: format('d')
+                    })
                 }
             });
         });
 
         it('Should have the correct number of legend markers', () => {
-            expect(wrapper.findAll('.legend g')).toHaveLength(9);
+            expect(wrapper.findAll('.legend g')).toHaveLength(7);
         });
 
         it('Should have the correct number of legend markers when working for the DV graph', async() => {
@@ -126,7 +159,11 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
                     ]
                 },
                 props: {
-                    graphType: 'DV'
+                    legendMarkerRows: getDVLegendMarkerRows(DV_TEST_STATE),
+                    layout: getMainLayout.resultFunc(200, 600, {
+                        tickValues: [5, 10, 15],
+                        tickFormat: format('d')
+                    })
                 }
             });
             await wrapper.vm.$nextTick();
@@ -138,14 +175,15 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
                 global: {
                     plugins: [
                         [ReduxConnectVue, {
-                            store: configureStore({}),
+                            store,
                             mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
                             mapStateToPropsFactory: createStructuredSelector
                         }]
                     ]
                 },
                 props: {
-                    graphType: 'IV'
+                    legendMarkerRows: [],
+                    layout: {}
                 }
             });
             await wrapper.vm.$nextTick();
@@ -156,8 +194,8 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
             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);
+            expect(wrapper.findAll('text')).toHaveLength(7);
+            expect(wrapper.findAll('circle')).toHaveLength(1);
         });
 
         it('Expects that the legend has the expected text', () => {
@@ -169,8 +207,6 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
             expect(text[4].text()).toBe('Ice Affected');
             expect(text[5].text()).toBe('Field visit:');
             expect(text[6].text()).toBe('Provisional');
-            expect(text[7].text()).toBe('Approved');
-            expect(text[8].text()).toBe('Revised');
         });
     });
 });
\ No newline at end of file