diff --git a/CHANGELOG.md b/CHANGELOG.md
index a5ad3220e6091ead4a5d29c4a7610787d80b568e..eb1780c9b5bef24533b225a4301f618255a71bc9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
### Added
- Image server now accepts the period parameter which should be a ISO-8601 duration format.
However please note that NWIS only accepts periods using xxD.
+- Image server shows site name and number above the graph
## [0.22.0](https://github.com/usgs/waterdataui/compare/waterdataui-0.21.0...waterdataui-0.22.0) - 2019-12-12
### Changed
diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index e2344c94e923e184f47604d80ce361d17630b66a..c8e6b5e155f4c1bafd574cfce4d992672a2ae480 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -12,7 +12,8 @@ import { dispatch, link, provide } from '../../lib/redux';
import { addSVGAccessibility } from '../../accessibility';
import config from '../../config';
-import { isLoadingTS, hasAnyTimeSeries } from '../../selectors/time-series-selector';
+import {isLoadingTS, hasAnyTimeSeries, getMonitoringLocationName,
+ getAgencyCode} from '../../selectors/time-series-selector';
import { Actions } from '../../store';
import { callIf, mediaQuery } from '../../utils';
@@ -231,9 +232,20 @@ const plotAllMedianPoints = function (elem, {visible, xscale, yscale, seriesPoin
};
-const createTitle = function(elem) {
- elem.append('div')
- .classed('time-series-graph-title', true)
+const createTitle = function(elem, siteNo, showMLName) {
+ let titleDiv = elem.append('div')
+ .classed('time-series-graph-title', true);
+
+ if (showMLName) {
+ titleDiv.append('div')
+ .call(link((elem, {mlName, agencyCode}) => {
+ elem.html(`${mlName}, ${agencyCode} ${siteNo}`);
+ }, createStructuredSelector({
+ mlName: getMonitoringLocationName(siteNo),
+ agencyCode: getAgencyCode(siteNo)
+ })));
+ }
+ titleDiv.append('div')
.call(link((elem, title) => {
elem.html(title);
}, titleSelector));
@@ -262,11 +274,11 @@ const watermark = function (elem) {
}, layoutSelector));
};
-export const timeSeriesGraph = function(elem) {
+export const timeSeriesGraph = function(elem, siteNo, showMLName) {
elem.append('div')
.attr('class', 'hydrograph-container')
.call(watermark)
- .call(createTitle)
+ .call(createTitle, siteNo, showMLName)
.call(createTooltipText)
.append('svg')
.attr('xmlns', 'http://www.w3.org/2000/svg')
@@ -501,7 +513,17 @@ const dataLoadingAlert = function(elem, message) {
}
};
-export const attachToNode = function (store, node, {siteno, parameter, compare, period, cursorOffset, showOnlyGraph = false} = {}) {
+export const attachToNode = function (store,
+ node,
+ {
+ siteno,
+ parameter,
+ compare,
+ period,
+ cursorOffset,
+ showOnlyGraph = false,
+ showMLName = false
+ } = {}) {
const nodeElem = select(node);
if (!siteno) {
select(node).call(drawMessage, 'No data is available.');
@@ -541,7 +563,7 @@ export const attachToNode = function (store, node, {siteno, parameter, compare,
// Set up rendering functions for the graph-container
nodeElem.select('.graph-container')
.call(link(controlDisplay, hasAnyTimeSeries))
- .call(timeSeriesGraph, siteno)
+ .call(timeSeriesGraph, siteno, showMLName)
.call(callIf(!showOnlyGraph, cursorSlider))
.append('div')
.classed('ts-legend-controls-container', true)
diff --git a/assets/src/scripts/selectors/time-series-selector.js b/assets/src/scripts/selectors/time-series-selector.js
index 3d140531de630d56979e27f61a3112994d264cc3..c6e7b5fbed85f04d4d7febe88cc276afc2664e4b 100644
--- a/assets/src/scripts/selectors/time-series-selector.js
+++ b/assets/src/scripts/selectors/time-series-selector.js
@@ -8,6 +8,10 @@ import { createSelector } from 'reselect';
*/
export const getVariables = state => state.series.variables ? state.series.variables : null;
+export const getSourceInfo = state => state.series.sourceInfo || {};
+
+export const getSiteCodes = state => state.series.siteCodes || {};
+
export const getMethods = state => state.series.methods ? state.series.methods : {};
export const getQueryInfo = state => state.series.queryInfo || {};
@@ -33,6 +37,23 @@ export const hasAnyTimeSeries = state => state.series && state.series.timeSeries
* Selectors the return derived data from the state
*/
+/*
+ * @param {String} siteno
+ * @return {String} monitoring loation name. Returns empty string if state does not contain siteNo.
+ */
+export const getMonitoringLocationName = memoize((siteNo) => createSelector(
+ getSourceInfo,
+ (sourceInfo) => siteNo in sourceInfo ? sourceInfo[siteNo].siteName || '' : ''
+));
+
+/*
+ * @param {String} siteno
+ * @return {String} agency code for siteno
+ */
+export const getAgencyCode = memoize((siteNo) => createSelector(
+ getSiteCodes,
+ (siteCodes) => siteNo in siteCodes ? siteCodes[siteNo].agencyCode || '' : ''
+));
/*
* @return {Object} Variable details for the currently selected variable or null.
*/
diff --git a/assets/src/scripts/selectors/time-series-selector.spec.js b/assets/src/scripts/selectors/time-series-selector.spec.js
index 46ebe46339963d0817cf1cd270d06f50c9d2b036..2eed1e93bfa4a3908d13ffbccf027bb93cf0300e 100644
--- a/assets/src/scripts/selectors/time-series-selector.spec.js
+++ b/assets/src/scripts/selectors/time-series-selector.spec.js
@@ -1,4 +1,7 @@
-import { getVariables, getCurrentVariableID, getCurrentDateRange, getCurrentVariable, getQueryInfo, getRequests, getCurrentParmCd, hasTimeSeries, getTsRequestKey, getTsQueryInfo, getRequestTimeRange, isLoadingTS, getTSRequest, getTimeSeriesCollectionIds, getIanaTimeZone, getNwisTimeZone } from './time-series-selector';
+import { getVariables, getSourceInfo, getSiteCodes, getCurrentVariableID, getCurrentDateRange,
+ getMonitoringLocationName, getAgencyCode, getCurrentVariable, getQueryInfo, getRequests, getCurrentParmCd,
+ hasTimeSeries, getTsRequestKey, getTsQueryInfo, getRequestTimeRange, isLoadingTS, getTSRequest,
+ getTimeSeriesCollectionIds, getIanaTimeZone, getNwisTimeZone } from './time-series-selector';
describe('timeSeriesSelector', () => {
const TEST_VARS = {
@@ -30,6 +33,54 @@ describe('timeSeriesSelector', () => {
});
});
+ describe('getSourceInfo', () => {
+ it('Return an empty object if series is empty', () => {
+ expect(getSourceInfo({
+ series: {}
+ })).toEqual({});
+ });
+
+ it('Return the sourceInfo if in series', () => {
+ expect(getSourceInfo({
+ series: {
+ sourceInfo: {
+ '0537000': {
+ siteName: 'Site Name'
+ }
+ }
+ }
+ })).toEqual({
+ '0537000': {
+ siteName: 'Site Name'
+ }
+ });
+ });
+ });
+
+ describe('getSiteCodes', () => {
+ it('Return an empty object if series is empty', () => {
+ expect(getSiteCodes({
+ series: {}
+ })).toEqual({});
+ });
+
+ it('Return the siteCodes if in series', () => {
+ expect(getSiteCodes({
+ series: {
+ siteCodes: {
+ '0537000': {
+ agencyCode: 'USGS'
+ }
+ }
+ }
+ })).toEqual({
+ '0537000': {
+ agencyCode: 'USGS'
+ }
+ });
+ });
+ });
+
describe('getQueryInfo', () => {
it('Return empty object if series is empty', () => {
expect(getQueryInfo({
@@ -90,6 +141,56 @@ describe('timeSeriesSelector', () => {
});
});
+ describe('getMonitoringLocationName', () => {
+ const TEST_INFO = {
+ series: {
+ sourceInfo: {
+ '01010101': {
+ 'siteName': 'My Site Name'
+ }
+ }
+ }
+ };
+ it('Returns empty string if state has no sourceInfo', () => {
+ expect(getMonitoringLocationName('12345678')({
+ series: {}
+ })).toBe('');
+ });
+
+ it('Returns empty string if siteNo is not in sourceInfo', () => {
+ expect(getMonitoringLocationName('12345678')(TEST_INFO)).toBe('');
+ });
+
+ it('Returns the monitoring location name for the site', () => {
+ expect(getMonitoringLocationName('01010101')(TEST_INFO)).toBe('My Site Name');
+ });
+ });
+
+ describe('getAgencyCode', () => {
+ const TEST_SITE_CODES = {
+ series: {
+ siteCodes: {
+ '01010101': {
+ 'agencyCode': 'USGS'
+ }
+ }
+ }
+ };
+ it('Returns empty string if state has no siteCodes ', () => {
+ expect(getAgencyCode('12345678')({
+ series: {}
+ })).toBe('');
+ });
+
+ it('Returns empty string if siteNo is not in siteCodes', () => {
+ expect(getAgencyCode('12345678')(TEST_SITE_CODES)).toBe('');
+ });
+
+ it('Returns the agency code for the site', () => {
+ expect(getAgencyCode('01010101')(TEST_SITE_CODES)).toBe('USGS');
+ });
+ });
+
describe('getCurrentVariableID', () => {
it('Return the current variable ID', () => {
expect(getCurrentVariableID({
diff --git a/graph-server/src/renderer/index.js b/graph-server/src/renderer/index.js
index 22ea5b9212ea4c146b727b4dfe53e67b0bca3dd7..10c24f38f908a52e6e7766b2052b1ea4a52b8a96 100644
--- a/graph-server/src/renderer/index.js
+++ b/graph-server/src/renderer/index.js
@@ -13,7 +13,8 @@ const renderToResponse = function (res, {siteID, parameterCode, compare, period}
compare: compare,
period: period,
cursorOffset: false,
- showOnlyGraph : true
+ showOnlyGraph : true,
+ showMLName: true
};
renderPNG({
pageURL: 'http://wdfn-graph-server',