From 516e8b217efa2a47e3c1b9d4f416eb8c18e57feb Mon Sep 17 00:00:00 2001
From: Mary Bucknell <mbucknell@usgs.gov>
Date: Mon, 23 Apr 2018 09:54:45 -0500
Subject: [PATCH] Added radio buttons for the date range control.
---
.../scripts/components/hydrograph/index.js | 36 ++++++++++++++++++-
assets/src/styles/components/_hydrograph.scss | 9 +++++
2 files changed, 44 insertions(+), 1 deletion(-)
diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index a63cf14a9..f6754bff6 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -299,8 +299,42 @@ const watermark = function (elem) {
}, layoutSelector));
};
+const createDaterangeControls = function(elem) {
+ const DATE_RANGE = [{
+ label: 'seven-day',
+ name: '7 days',
+ period: 'P7D'
+ }, {
+ label: 'one-month',
+ name: '1 month',
+ period: 'P1M'
+ }, {
+ label: 'one-year',
+ name: '1 year',
+ period: 'P1Y'
+ }];
+ const container = elem.append('ul')
+ .attr('id', 'ts-daterange-select-container')
+ .attr('class', 'usa-fieldset-inputs usa-unstyled-list');
+ const li = container.selectAll('li')
+ .data(DATE_RANGE)
+ .enter().append('li');
+ li.append('input')
+ .attr('type', 'radio')
+ .attr('name', 'ts-daterange-input')
+ .attr('id', (d) => d.label)
+ .attr('value', (d) => d.period);
+ li.append('label')
+ .attr('for', (d) => d.label)
+ .text((d) => d.name);
+ li.select(`#${DATE_RANGE[0].label}`).attr('checked', true);
+
+};
+
const timeSeriesGraph = function (elem) {
- elem.call(watermark);
+ elem.call(watermark)
+ .call(createDaterangeControls);
+
elem.append('div')
.attr('class', 'hydrograph-container')
.call(createTitle)
diff --git a/assets/src/styles/components/_hydrograph.scss b/assets/src/styles/components/_hydrograph.scss
index addab2ba0..2e4d4438e 100644
--- a/assets/src/styles/components/_hydrograph.scss
+++ b/assets/src/styles/components/_hydrograph.scss
@@ -4,6 +4,15 @@ $default-timeseries: blue;
$selected: $color-aqua-lightest;
$highlight: $color-gray-lightest;
+#ts-daterange-select-container {
+ li {
+ display: inline-block;
+ label {
+ width: 110px;
+ }
+ }
+}
+
#select-timeseries {
label {
font-weight: $font-bold;
--
GitLab