From 63de07d0bc0b53fb128a5ff332c75bb98b8a9092 Mon Sep 17 00:00:00 2001
From: mbucknell <mbucknell@usgs.gov>
Date: Thu, 11 Mar 2021 16:31:38 -0600
Subject: [PATCH] Adjustments to work with the graph server calling the url
directly.
---
.../components/hydrograph/data-indicator.js | 9 +-----
.../components/hydrograph/index.js | 32 ++++++++++---------
.../src/scripts/monitoring-location/index.js | 12 ++++---
.../styles/components/hydrograph/_app.scss | 10 +++++-
4 files changed, 34 insertions(+), 29 deletions(-)
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/data-indicator.js b/assets/src/scripts/monitoring-location/components/hydrograph/data-indicator.js
index 1db68465e..a086d0200 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/data-indicator.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/data-indicator.js
@@ -19,14 +19,7 @@ const updateNoDataOverlay = function(container, store) {
.call(link(store, (elem, layout) => {
elem.style('transform', `translateY(${layout.height / 2}px)`);
}, getMainLayout));
- overlayDiv.append('svg')
- .attr('class', 'usa-icon')
- .attr('aria-hidden', 'true')
- .attr('focusable', 'false')
- .attr('role', 'img')
- .append('use')
- .attr('xlink:href', `${config.STATIC_URL}/img/sprite.svg#priority_high`);
- overlayDiv.append('div').text('No data available during the selected time range');
+ overlayDiv.append('div').text('No data available');
}
};
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
index 0f7a8c1a3..b466fad87 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
@@ -72,6 +72,8 @@ export const attachToNode = function(store,
const initialEndTime = endDT ?
DateTime.fromISO(endDT, {zone: config.locationTimeZone}).endOf('day').toISO() : null;
const initialLoadCompare = compare === 'true' || compare === true ? true : false;
+ const thisShowOnlyGraph = showOnlyGraph === 'true' || showOnlyGraph === true ? true : false;
+ const thisShowMLName = showMLName === 'true' || showMLName === true ? true : false;
const fetchHydrographDataPromise = store.dispatch(retrieveHydrographData(siteno, {
parameterCode: parameterCode,
period: initialPeriod === 'custom' ? null : initialPeriod,
@@ -83,20 +85,20 @@ export const attachToNode = function(store,
// if showing the controls, fetch the parameters
let fetchParametersPromise;
- if (!showOnlyGraph) {
+ if (!thisShowOnlyGraph) {
fetchParametersPromise = store.dispatch(retrieveHydrographParameters(siteno));
+ }
- // Initialize all hydrograph state variables if showing the control
- store.dispatch(setSelectedParameterCode(parameterCode));
- store.dispatch(setCompareDataVisibility(initialLoadCompare));
- if (period) {
- store.dispatch(setSelectedDateRange(period));
- } else if (startDT && endDT) {
- store.dispatch(setSelectedDateRange('custom'));
- store.dispatch(setSelectedCustomDateRange(startDT, endDT));
- } else {
- store.dispatch(setSelectedDateRange('P7D'));
- }
+ // Initialize all hydrograph state variables if showing the control
+ store.dispatch(setSelectedParameterCode(parameterCode));
+ store.dispatch(setCompareDataVisibility(initialLoadCompare));
+ if (period) {
+ store.dispatch(setSelectedDateRange(period));
+ } else if (startDT && endDT) {
+ store.dispatch(setSelectedDateRange('custom'));
+ store.dispatch(setSelectedCustomDateRange(startDT, endDT));
+ } else {
+ store.dispatch(setSelectedDateRange('P7D'));
}
// Fetch waterwatch flood levels
@@ -115,9 +117,9 @@ export const attachToNode = function(store,
showDataIndicators(false, store);
let graphContainer = nodeElem.select('.graph-container');
- graphContainer.call(drawTimeSeriesGraph, store, siteno, agencyCd, sitename, showMLName, !showOnlyGraph);
+ graphContainer.call(drawTimeSeriesGraph, store, siteno, agencyCd, sitename, thisShowMLName, !showOnlyGraph);
- if (!showOnlyGraph) {
+ if (!thisShowOnlyGraph) {
graphContainer
.call(drawTooltipCursorSlider, store)
.call(drawGraphBrush, store);
@@ -126,7 +128,7 @@ export const attachToNode = function(store,
.classed('ts-legend-controls-container', true)
.call(drawTimeSeriesLegend, store);
- if (!showOnlyGraph) {
+ if (!thisShowOnlyGraph) {
nodeElem.select('#hydrograph-date-controls-container')
.call(drawDateRangeControls, store, siteno, initialPeriod, {
start: startDT,
diff --git a/assets/src/scripts/monitoring-location/index.js b/assets/src/scripts/monitoring-location/index.js
index 977d174a1..8e6ca5d24 100644
--- a/assets/src/scripts/monitoring-location/index.js
+++ b/assets/src/scripts/monitoring-location/index.js
@@ -32,13 +32,15 @@ const load = function() {
}
});
let nodes = document.getElementsByClassName('wdfn-component');
+ const hashOptions = Object.fromEntries(new window.URLSearchParams(getParamString()));
for (let node of nodes) {
- // If options is specified on the node, expect it to be a JSON string.
- // Otherwise, use the dataset attributes as the component options.
- const options = node.dataset.options ? JSON.parse(node.dataset.options) : node.dataset;
- const hashOptions = Object.fromEntries(new window.URLSearchParams(getParamString()));
- COMPONENTS[node.dataset.component](store, node, Object.assign({}, options, hashOptions));
+ if (!hashOptions.showOnlyGraph || node.dataset.component === 'hydrograph') {
+ // If options is specified on the node, expect it to be a JSON string.
+ // Otherwise, use the dataset attributes as the component options.
+ const options = node.dataset.options ? JSON.parse(node.dataset.options) : node.dataset;
+ COMPONENTS[node.dataset.component](store, node, Object.assign({}, options, hashOptions));
+ }
}
window.onresize = function() {
diff --git a/assets/src/styles/components/hydrograph/_app.scss b/assets/src/styles/components/hydrograph/_app.scss
index eb6402c38..fe90ec848 100644
--- a/assets/src/styles/components/hydrograph/_app.scss
+++ b/assets/src/styles/components/hydrograph/_app.scss
@@ -141,7 +141,15 @@
vertical-align: middle;
height: 100%;
width: 100%;
- @include u-font('body', 'xl');
+ @include at-media('mobile') {
+ @include u-font('body', 'sm');
+ }
+ @include at-media('tablet') {
+ @include u-font('body', 'xl');
+ }
+ @include at-media('desktop') {
+ @include u-font('body', '3xl');
+ }
@include u-text('info-dark');
svg: {
display: inline-block;
--
GitLab