From d8b8735b7b8344638135d3b06f9719a274f14a0c Mon Sep 17 00:00:00 2001
From: Mary Bucknell <mbucknell@usgs.gov>
Date: Thu, 25 Jan 2018 13:03:44 -0600
Subject: [PATCH] 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.
---
.../scripts/components/hydrograph/index.js | 37 +++++++++++--------
waterdata/templates/monitoring_location.html | 9 +++--
2 files changed, 26 insertions(+), 20 deletions(-)
diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index 275e27325..6d6149536 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 5073aacf4..c20ccca36 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 %}
--
GitLab