diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js index 275e27325c57815b3b747746ca88e11214894695..6d61495369df4cb8668296a675f365bd698ba057 100644 --- a/assets/src/scripts/components/hydrograph/index.js +++ b/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'); + } + }); + } } diff --git a/waterdata/templates/monitoring_location.html b/waterdata/templates/monitoring_location.html index 5073aacf47975d88c2e78862a22b0c484bad1f9e..c20ccca36a5acb269e4a5d3f21c875637b794c39 100644 --- a/waterdata/templates/monitoring_location.html +++ b/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 %}