Cleanup and update changelog

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - The hydrograph data table is now a Vue component and can be sorted by time.
 - Parameter selection list now has the option to graph a second parameter.
 - Reworked the USWDSDatePicker to initialize itself and to handle changes to properties appropriately.
+- Hydrograph Graph Brush is now implemented with a Vue component.
 
 ### Fixed
 - Parameter codes with multiple methods will now show statistical data for each method available.

assets/src/scripts/monitoring-location/components/hydrograph/index.js

@@ -144,6 +144,9 @@ export const attachToNode = function(store,
     if (!showOnlyGraph) {
         initializeTooltipCursorSlider(graphContainer, store);
         graphContainer.append('div').attr('id', 'hydrograph-brush-container');
+        //TODO: The tooltips, legend and  the main hydrograph can be added to the HydrographApp.
+        // The main hydrograph should be converted to a Vue component last. As part of that task we
+        // will figure out how to handle the loading indicator and the no data overlay
         const hydrographApp = createApp(HydrographApp, {});
         hydrographApp.use(ReduxConnectVue, {
             store,

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/graph-brush.test.js

@@ -78,7 +78,7 @@ describe('monitoring-location/components/hydrograph/vue-components/graph-brush.v
             expect(wrapper.find('.iv-graph-gw-levels-group').exists()).toBe(false);
         });
 
-        it('Expects that setting initialLoadingComplete to true renders the IV and GW levels data', async () => {
+        it('Expects that setting initialLoadingComplete to true renders the IV and GW levels data', async() => {
             initialLoadingComplete.value = true;
             await wrapper.vm.$nextTick();
 

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/graph-brush.vue

 <template>
   <div class="hydrograph-container">
     <svg
-      class="brush-svg"
       ref="brushSvg"
+      class="brush-svg"
       xmlns="http://www.w3.org/2000/svg"
       ga-on="click"
       ga-event-category="hydrograph-interacation"
@@ -16,8 +16,8 @@
         drag handlers to change timeframe
       </text>
       <g
-        class="graph-brush-group"
         ref="graphBrushGroup"
+        class="graph-brush-group"
         :transform="centerTransform"
       />
     </svg>

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/method-picker.vue

@@ -6,8 +6,8 @@
     >
       Sampling Methods/Sub-locations:
       <span
-        class="usa-tooltip"
         ref="tooltip"
+        class="usa-tooltip"
         data-position="right"
         title="The names used in dropdown menu are often specific to a particular monitoring location and describe sampling details used to distinguish time-series of the same type--examples include variations in physical location and sensor type."
       >
@@ -89,6 +89,7 @@ export default {
 
     return {
       infoIcon,
+      tooltip,
       hasMethodsWithNoPoints,
       selectThisMethod
     };