Adjustments to work with the graph server calling the url directly.

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');
     }
 };
 

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,

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() {

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;