diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js index c95c89c866d98133e4ca61ba8ce5a69c75546481..e52b4b4a7b72e9b25b17e50b678b8b63ebace9d7 100644 --- a/assets/src/scripts/components/hydrograph/index.js +++ b/assets/src/scripts/components/hydrograph/index.js @@ -70,20 +70,20 @@ const plotDataLine = function (elem, {visible, lines, tsDataKey, xScale, yScale} const maskDisplayName = MASK_DESC[maskCode].replace(' ', '-').toLowerCase(); const [xDomainStart, xDomainEnd] = extent(line.points, d => d.time); const [yRangeStart, yRangeEnd] = yScale.domain(); - const maskGroup = elem.append('g') - .attr('class', `${tsDataKey}-mask-group`) - .append('rect') - .attr('x', xScale(xDomainStart)) - .attr('y', yScale(yRangeEnd)) - .attr('width', xScale(xDomainEnd) - xScale(xDomainStart)) - .attr('height', Math.abs(yScale(yRangeEnd)- yScale(yRangeStart))) - .attr('class', `mask ${maskDisplayName}-mask`); - - const patternId = tsDataKey === 'compare' ? `url(#${HASH_135})` : `url(#${HASH_45})`; - + let maskGroup = elem.append('g') + .attr('class', `${tsDataKey}-mask-group`); const xSpan = xScale(xDomainEnd) - xScale(xDomainStart); const rectWidth = xSpan > 0 ? xSpan : 1; + maskGroup.append('rect') + .attr('x', xScale(xDomainStart)) + .attr('y', yScale(yRangeEnd)) + .attr('width', rectWidth) + .attr('height', Math.abs(yScale(yRangeEnd)- yScale(yRangeStart))) + .attr('class', `mask ${maskDisplayName}-mask`); + + const patternId = tsDataKey === 'compare' ? `url(#${HASH_135})` : `url(#${HASH_45})`; + maskGroup.append('rect') .attr('x', xScale(xDomainStart)) .attr('y', yScale(yRangeEnd))