Switch watermark from img tag to image tag, inside the graph svg - so the...

Switch watermark from img tag to image tag, inside the graph svg - so the server rendering will include it. Also, parametize root URLs in graph-server via environment variables.

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

assets/src/styles/components/hydrograph/_app.scss

@@ -136,11 +136,6 @@
     }
 }
 
-.watermark {
-    position: absolute;
-    opacity: .08;
-}
-
 .slider-wrapper {
     height: 0;
     input#cursor-slider {

assets/src/styles/components/hydrograph/_graph.scss

@@ -172,4 +172,8 @@ svg {
     .pump-mask {
         fill: #3498db;
     }
+    .watermark {
+        position: absolute;
+        opacity: .08;
+    }
 }

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:
 

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"

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>