Updated to include toggle within the hydrograph component. Creating a new...

Updated to include toggle within the hydrograph component. Creating a new Hydrograph element no longer clears out the div but rather appends the svg to the contents of element.

assets/src/scripts/components/hydrograph/index.js

@@ -104,7 +104,6 @@ class Hydrograph {
 
     _drawChart() {
         // Set up parent element and SVG
-        this._element.innerHTML = '';
         this.svg = select(this._element)
             .append('div')
             .attr('class', 'hydrograph-container')
@@ -241,13 +240,16 @@ function attachToNode(node, {siteno}) {
     let hydrograph;
     let getLastYearTS;
     getTimeseries({sites: [siteno]}).then((series) => {
-            let dataIsValid = series && series[0] && !series[0].values.some(d => d.value === -999999);
+            let dataIsValid = series && series[0] &&
+                !series[0].values.some(d => d.value === -999999);
             hydrograph = new Hydrograph({
                 element: node,
                 data: dataIsValid ? series[0].values : [],
                 yLabel: dataIsValid ? series[0].variableDescription : 'No data',
                 title: dataIsValid ? series[0].variableName : '',
-                desc: dataIsValid ? series[0].variableDescription + ' from ' + formatTime(series[0].seriesStartDate) + ' to ' + formatTime(series[0].seriesEndDate) : ''
+                desc: dataIsValid ? series[0].variableDescription + ' from ' +
+                    formatTime(series[0].seriesStartDate) + ' to ' +
+                    formatTime(series[0].seriesEndDate) : ''
             });
             if (dataIsValid) {
                 getLastYearTS = getPreviousYearTimeseries({
@@ -261,20 +263,23 @@ function attachToNode(node, {siteno}) {
                 element: node,
                 data: []
             })
-        );
-    document.getElementById('show-last-year-input').addEventListener('change', (evt) => {
-        if (evt.target.checked) {
-            getLastYearTS.then((series) => {
-                hydrograph.addTimeSeries({
-                    data: series[0].values,
-                    legendLabel: 'lastyear'
+    );
+    let lastYearInput = node.getElementsByClassName('hydrograph-last-year-input');
+    if (lastYearInput.length > 0) {
+        lastYearInput[0].addEventListener('change', (evt) => {
+            if (evt.target.checked) {
+                getLastYearTS.then((series) => {
+                    hydrograph.addTimeSeries({
+                        data: series[0].values,
+                        legendLabel: 'lastyear'
+                    });
                 });
-            });
-        }
-        else {
-            hydrograph.removeTimeSeries('lastyear');
-        }
-    });
+            }
+            else {
+                hydrograph.removeTimeSeries('lastyear');
+            }
+        });
+    }
 }
 
 

waterdata/templates/monitoring_location.html

@@ -44,11 +44,12 @@
                     <li><a href="{{ config.NWIS_ENDPOINTS.UV }}/?cb_00060=on&format=gif_mult_parms&site_no={{ stations[0].site_no }}&period=7" target="_blank">Interactive grapher</a></li>
                     <li><a href="{{ config.NWIS_ENDPOINTS.UV }}/?format=img_default&site_no={{ stations[0].site_no }}&period=7" target="_blank">Presentation Charts</a></li>
                 </ul>
-                <div class="compare-container" data-siteno="{{ stations[0].site_no}}">
-                    <input id="show-last-year-input" type="checkbox" value="show-last_year" />
-                    <label for="show-last-year-input">Show last year</label>
+                <div class="wdfn-component" data-component="hydrograph" data-siteno="{{ stations[0].site_no }}">
+                    <div class="compare-container" data-siteno="{{ stations[0].site_no}}">
+                        <input id="show-last-year-input" class="hydrograph-last-year-input" type="checkbox" value="show-last_year" />
+                        <label for="show-last-year-input">Show last year</label>
+                    </div>
                 </div>
-                <div class="wdfn-component" data-component="hydrograph" data-siteno="{{ stations[0].site_no }}"></div>
                 {% if stations[0].dec_lat_va and stations[0].dec_long_va %}<div class="wdfn-component" data-component="map" data-latitude="{{ stations[0].dec_lat_va }}" data-longitude="{{ stations[0].dec_long_va }}" data-zoom=8></div>{% endif %}
 
                 {% if site_dataseries %}