diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js index 0be6fe331311eeb2d86c4a78188bf87328fd4de8..fa1f0609ca7b567bb36dc29023293a7a616f091b 100644 --- a/assets/src/scripts/components/hydrograph/index.js +++ b/assets/src/scripts/components/hydrograph/index.js @@ -234,9 +234,9 @@ const createTitle = function(elem) { }; const watermark = function (elem) { - elem.append('img') + elem.append('image') .classed('watermark', true) - .attr('src', STATIC_URL + '/img/USGS_green_logo.svg') + .attr('href', STATIC_URL + '/img/USGS_green_logo.svg') .call(link(function(elem, layout) { const transformStringSmallScreen = `matrix(0.5, 0, 0, 0.5, ${(layout.width - layout.margin.left) * .025 + layout.margin.left - 50}, ${layout.height * .60})`; @@ -258,8 +258,7 @@ const watermark = function (elem) { }; const timeSeriesGraph = function (elem) { - elem.call(watermark) - .append('div') + elem.append('div') .attr('class', 'hydrograph-container') .call(createTitle) .call(createTooltipText) @@ -277,6 +276,7 @@ const timeSeriesGraph = function (elem) { isInteractive: () => true }))) .call(plotSvgDefs) + .call(watermark) .call(svg => { svg.append('g') .call(link((elem, layout) => elem.attr('transform', `translate(${layout.margin.left},${layout.margin.top})`), layoutSelector)) diff --git a/assets/src/styles/components/hydrograph/_app.scss b/assets/src/styles/components/hydrograph/_app.scss index 835bd9eda07744dc6ad5ea68c9656fa962073aa4..b408502ec98922251ca1c543ffe19bdfd5841951 100644 --- a/assets/src/styles/components/hydrograph/_app.scss +++ b/assets/src/styles/components/hydrograph/_app.scss @@ -136,11 +136,6 @@ } } -.watermark { - position: absolute; - opacity: .08; -} - .slider-wrapper { height: 0; input#cursor-slider { diff --git a/assets/src/styles/components/hydrograph/_graph.scss b/assets/src/styles/components/hydrograph/_graph.scss index 9280ebe96b974389377c02b27df2065e878aa40e..d27fa87c5d63d0c7b985a56fea49f9a1f48d6e8a 100644 --- a/assets/src/styles/components/hydrograph/_graph.scss +++ b/assets/src/styles/components/hydrograph/_graph.scss @@ -172,4 +172,8 @@ svg { .pump-mask { fill: #3498db; } + .watermark { + position: absolute; + opacity: .08; + } } diff --git a/graph-server/README.md b/graph-server/README.md index 79bac04a88a9611258c730721d71c3abb05a1e11..e0eee838e16e613ab1c235c1831966add66e1a51 100644 --- a/graph-server/README.md +++ b/graph-server/README.md @@ -9,6 +9,9 @@ The entrypoint is `src/index.js`, which accepts the following environment variables as arguments: - NODE_PORT: Port to run http server on. Default 2929. +- SERVICE_ROOT: Default: https://waterservices.usgs.gov/nwis +- PAST_SERVICE_ROOT: Default: https://nwis.waterservices.usgs.gov/nwis +- STATIC_ROOT: Default: https://waterdata.usgs.gov/nwisweb/wsgi/static For example: diff --git a/graph-server/package.json b/graph-server/package.json index 958e6008b81759197af1cec1d654b503d8df6920..3ab2abf223467d80013ea0dc5dc048fd32800e6d 100644 --- a/graph-server/package.json +++ b/graph-server/package.json @@ -5,7 +5,7 @@ "main": "src/index.js", "scripts": { "test": "jasmine", - "watch": "nodemon src" + "watch": "STATIC_ROOT=http://localhost:9000 nodemon src" }, "engines": { "node": "8.9.3" diff --git a/graph-server/src/renderer/index.js b/graph-server/src/renderer/index.js index cdcee46015195931752a882a5e1fd34339c74030..572f241279de7f2b118f29f66256090495336e44 100644 --- a/graph-server/src/renderer/index.js +++ b/graph-server/src/renderer/index.js @@ -9,8 +9,9 @@ const getSvgImpl = { const DEFAULT_IMPLEMENTATION = 'puppeteer'; -const SERVICE_ROOT = 'https://waterservices.usgs.gov/nwis'; -const PAST_SERVICE_ROOT = 'https://nwis.waterservices.usgs.gov/nwis'; +const SERVICE_ROOT = process.env.SERVICE_ROOT || 'https://waterservices.usgs.gov/nwis'; +const PAST_SERVICE_ROOT = process.env.PAST_SERVICE_ROOT || 'https://nwis.waterservices.usgs.gov/nwis'; +const STATIC_ROOT = process.env.STATIC_ROOT || 'https://waterdata.usgs.gov/nwisweb/wsgi/static'; const renderToRespone = function (res, {siteID, parameterCode, compare, renderer}) { @@ -29,7 +30,8 @@ const renderToRespone = function (res, {siteID, parameterCode, compare, renderer <script type="text/javascript"> var CONFIG = { SERVICE_ROOT: '${SERVICE_ROOT}', - PAST_SERVICE_ROOT: '${PAST_SERVICE_ROOT}' + PAST_SERVICE_ROOT: '${PAST_SERVICE_ROOT}', + STATIC_URL: '${STATIC_ROOT}' }; </script> </head>