Created a text only marker.

assets/src/scripts/components/hydrograph/legend.js

@@ -3,10 +3,16 @@ const memoize = require('fast-memoize');
 const { createSelector } = require('reselect');
 
 const { CIRCLE_RADIUS } = require('./layout');
-const { defineLineMarker, defineCircleMarker, defineRectangleMarker, rectangleMarker } = require('./markers');
+const { defineLineMarker, defineTextOnlyMarker, defineCircleMarker, defineRectangleMarker, rectangleMarker } = require('./markers');
 const { currentVariableLineSegmentsSelector, HASH_ID, MASK_DESC} = require('./drawingData');
 const { currentVariableTimeSeriesSelector, methodsSelector } = require('./timeseries');
 
+const TS_LABEL = {
+    'current': 'Current',
+    'compare': 'Last year',
+    'median': 'Median'
+};
+
 
 const tsMaskMarkers = function(tsKey, masks) {
     return [...masks].map((mask) => {
@@ -18,7 +24,7 @@ const tsMaskMarkers = function(tsKey, masks) {
 };
 
 const tsLineMarkers = function(tsKey, lineClasses) {
-    const GROUP_ID = `${tsKey}-line-marker`
+    const GROUP_ID = `${tsKey}-line-marker`;
     let result = [];
 
     if (lineClasses.default) {
@@ -46,12 +52,14 @@ const createLegendMarkers = function(displayItems) {
 
     if (displayItems.current) {
         legendMarkers.push([
+            defineTextOnlyMarker('ts-legend-current-text', null, TS_LABEL.current),
             ...tsLineMarkers('current', displayItems.current),
             ...tsMaskMarkers('current', displayItems.current.dataMasks)
         ]);
     }
     if (displayItems.compare) {
         legendMarkers.push([
+            defineTextOnlyMarker('ts-legend-compare-text', null, TS_LABEL.compare),
             ...tsLineMarkers('compare', displayItems.compare),
             ...tsMaskMarkers('compare', displayItems.compare.dataMasks)
         ]);
@@ -71,9 +79,9 @@ const createLegendMarkers = function(displayItems) {
 
             const descriptionText = stats.description  ? `${stats.description} ` : '';
             const classes = `median-data-series median-modulo-${index % 6}`;
-            const label = `Median ${descriptionText}${dateText}`;
+            const label = `${descriptionText}${dateText}`;
 
-            legendMarkers.push([defineCircleMarker(CIRCLE_RADIUS, null, classes, label)]);
+            legendMarkers.push([defineTextOnlyMarker(null, null, TS_LABEL.median), defineCircleMarker(CIRCLE_RADIUS, null, classes, label)]);
         }
     }
 
@@ -95,9 +103,9 @@ function drawSimpleLegend(div, {legendMarkerRows, layout}) {
     }
 
     const markerYPosition = -4;
-    const markerGroupXOffset = 40;
+    const markerGroupXOffset = 15;
     const verticalRowOffset = 18;
-    const markerTextXOffset = 10;
+    const markerTextXOffset = 6;
 
     let svg = div.append('svg')
         .attr('class', 'legend-svg');
@@ -181,12 +189,9 @@ const uniqueClassesSelector = memoize(tsKey => createSelector(
     currentVariableLineSegmentsSelector(tsKey),
     (tsLineSegments) => {
         let classes = [].concat(...Object.values(tsLineSegments)).map((line) => line.classes);
-        let d = classes.find((cls) => {
-               return !cls.approved && !cls.estimated;
-            });
         return {
             default: classes.find((cls) => {
-               return !cls.approved && !cls.estimated;
+               return !cls.approved && !cls.estimated && !cls.dataMask;
             }) ? true : false,
             approved: classes.find((cls) => {
                 return cls.approved;

assets/src/scripts/components/hydrograph/markers.js

@@ -78,6 +78,12 @@ const lineMarker = function({x, y, length, domId=null, domClass=null}) {
     return group;
 };
 
+const textOnlyMarker = function({x, y, domId=null, domClass=null}) {
+   let group = select(document.createElementNS(namespaces.svg, 'g'));
+   // TODO: Refactor so that text is drawn in this package, not in legend since text is associated with each marker.
+    return group;
+};
+
 
 const defineLineMarker = function(domId=null, domClass=null, text=null, groupId=null) {
     return {
@@ -89,6 +95,17 @@ const defineLineMarker = function(domId=null, domClass=null, text=null, groupId=
     };
 };
 
+const defineTextOnlyMarker = function(domId=null, domClass=null, text, groupId=null) {
+    return {
+        type: textOnlyMarker,
+        domId: domId,
+        domClass: domClass,
+        text: text,
+        groupId: groupId
+    };
+};
+
+
 
 const defineRectangleMarker = function(domId=null, domClass=null, text=null, groupId=null, fill=null) {
     return {
@@ -114,5 +131,5 @@ const defineCircleMarker = function(radius, domId=null, domClass=null, text=null
 };
 
 
-module.exports = {circleMarker, rectangleMarker, lineMarker,defineLineMarker, defineCircleMarker,
-    defineRectangleMarker};
+module.exports = {circleMarker, rectangleMarker, lineMarker, textOnlyMarker,
+    defineLineMarker, defineCircleMarker, defineRectangleMarker, defineTextOnlyMarker};