rudimentary handling of mask markers

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

@@ -136,10 +136,10 @@ const plotSvgDefs = function(elem) {
 };
 
 
-const plotLegend = function(elem, {displayItems, width}) {
+const plotLegend = function(elem, {displayItems, width, currentSegments, compareSegments}) {
     elem.select('.legend').remove();
-    let markers = createLegendMarkers(displayItems);
-    drawSimpleLegend(elem, markers, width);
+    let plotMarkers = createLegendMarkers(displayItems, currentSegments.concat(compareSegments));
+    drawSimpleLegend(elem, plotMarkers, width);
 };
 
 
@@ -204,6 +204,8 @@ const timeSeriesGraph = function (elem) {
             .call(plotSvgDefs)
             .call(link(plotLegend, createStructuredSelector({
                 displayItems: legendDisplaySelector,
+                currentSegments: lineSegmentsSelector('current'),
+                compareSegments: lineSegmentsSelector('compare'),
                 width: state => state.width
             })))
             .append('g')

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

 // functions to facilitate legend creation for a d3 plot
 const { createSelector } = require('reselect');
-const { defineLineMarker, defineCircleMarker } = require('./markers');
+const { defineLineMarker, defineCircleMarker, defineRectangleMarker, rectangleMarker } = require('./markers');
 const { CIRCLE_RADIUS } = require('./layout');
 
 
@@ -46,17 +46,25 @@ function drawSimpleLegend(svg,
             previousMarkerGroupBox = previousMarkerGroup.node().getBBox();
             xPosition = previousMarkerGroupBox.x + previousMarkerGroupBox.width + markerGroupOffset;
         }
-        let markerType = legendMarker.type;
-
         let legendGroup = legend.append('g')
             .attr('class', 'legend-marker');
         if (legendMarker.groupId) {
             legendGroup.attr('id', legendMarker.groupId);
         }
+        let markerType = legendMarker.type;
+        let yPosition;
+        if (markerType === rectangleMarker) {
+            yPosition = markerYPosition * 2.5 + verticalRowOffset * rowCounter;
+        }
+        else {
+            yPosition = markerYPosition + verticalRowOffset * rowCounter
+        }
         let markerArgs = {
             r: legendMarker.r ? legendMarker.r : null,
             x: xPosition,
-            y: markerYPosition + verticalRowOffset * rowCounter,
+            y: yPosition,
+            width: 20,
+            height: 10,
             length: 20,
             domId: legendMarker.domId,
             domClass: legendMarker.domClass
@@ -91,8 +99,9 @@ function drawSimpleLegend(svg,
  * create elements for the legend in the svg
  *
  * @param dataPlotElements
+ * @param lineSegments
  */
-const createLegendMarkers = function(dataPlotElements) {
+const createLegendMarkers = function(dataPlotElements, lineSegments) {
     let text;
     let marker;
     let legendMarkers = [];
@@ -122,6 +131,16 @@ const createLegendMarkers = function(dataPlotElements) {
             legendMarkers.push(marker);
         }
     }
+    let masks = [];
+    lineSegments.map(segment => masks.push(segment.classes.dataMask));
+    let uniqueMasks = new Set(masks.filter(x => x !== null));
+    for (let uniqueMask of uniqueMasks) {
+        let maskLower = uniqueMask.toLowerCase();
+        let maskClass = `${maskLower}-mask`;
+        let maskText = maskLower.charAt(0).toUpperCase() + maskLower.slice(1);
+        marker = defineRectangleMarker(null, maskClass, maskText, null);
+        legendMarkers.push(marker);
+    }
     return legendMarkers;
 };
 

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

 const { select, namespaces } = require('d3-selection');
 
 
-function circleMarker({r, x, y, domId=null, domClass=null}) {
+const circleMarker = function({r, x, y, domId=null, domClass=null}) {
     let group = select(document.createElementNS(namespaces.svg, 'g'));
     let circle = group.append('circle')
         .attr('r', r)
@@ -14,10 +14,27 @@ function circleMarker({r, x, y, domId=null, domClass=null}) {
         circle.attr('class', domClass);
     }
     return circle;
-}
+};
+
+
+const rectangleMarker = function({x, y, width, height, domId=null, domClass=null}) {
+    let group = select(document.createElementNS(namespaces.svg, 'g'));
+    let rectangle = group.append('rect')
+        .attr('x', x)
+        .attr('y', y)
+        .attr('width', width)
+        .attr('height', height);
+    if (domId !== null) {
+        rectangle.attr('id', domId);
+    }
+    if (domClass !== null) {
+        rectangle.attr('class', domClass);
+    }
+    return rectangle;
+};
 
 
-function lineMarker({x, y, length, domId=null, domClass=null}) {
+const lineMarker = function({x, y, length, domId=null, domClass=null}) {
     let group = select(document.createElementNS(namespaces.svg, 'g'));
     let line = group.append('line')
         .attr('x1', x)
@@ -31,7 +48,7 @@ function lineMarker({x, y, length, domId=null, domClass=null}) {
         line.attr('class', domClass);
     }
     return line;
-}
+};
 
 
 const defineLineMarker = function(domId=null, domClass=null, text=null, groupId=null) {
@@ -44,6 +61,17 @@ const defineLineMarker = function(domId=null, domClass=null, text=null, groupId=
     };
 };
 
+
+const defineRectangleMarker = function(domId=null, domClass=null, text=null, groupId=null) {
+    return {
+        type: rectangleMarker,
+        domId: domId,
+        domClass: domClass,
+        text: text,
+        groupId: groupId
+    };
+};
+
 const defineCircleMarker = function(radius, domId=null, domClass=null, text=null, groupId=null) {
     return {
         type: circleMarker,
@@ -56,4 +84,5 @@ const defineCircleMarker = function(radius, domId=null, domClass=null, text=null
 };
 
 
-module.exports = {circleMarker, lineMarker, defineLineMarker, defineCircleMarker};
+module.exports = {circleMarker, rectangleMarker, lineMarker,defineLineMarker, defineCircleMarker,
+    defineRectangleMarker};