rough version of working step function for median data

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

@@ -2,7 +2,7 @@
  * Hydrograph charting module.
  */
 const { extent } = require('d3-array');
-const { line: d3Line } = require('d3-shape');
+const { line: d3Line, curveStepAfter } = require('d3-shape');
 const { select } = require('d3-selection');
 
 const { createStructuredSelector } = require('reselect');
@@ -184,13 +184,40 @@ const timeSeriesLegend = function(elem) {
  * @param  {Object} variable
  */
 const plotMedianPoints = function (elem, {xscale, yscale, modulo, points, showLabel, variable}) {
-    elem.selectAll('medianPoint')
+    let stepFunction = d3Line()
+        .curve(curveStepAfter)
+        .x(function(d) {
+            return xscale(d.dateTime);
+        })
+        .y(function(d) {
+            return yscale(d.value);
+        });
+    let medianGrp = elem.append('g');
+
+    medianGrp.append('path')
+        .datum(points)
+        .classed('median-data-series', true)
+        .classed(`median-step-${modulo}`, true)
+        .attr('d', stepFunction);
+
+    medianGrp.selectAll('medianPoint')
         .data(points)
         .enter()
         .append('circle')
             .classed('median-data-series', true)
             .classed(`median-modulo-${modulo}`, true)
-            .attr('r', CIRCLE_RADIUS)
+            .attr('r', function(d, i) {
+                if (points[0].dateTime.getDate() < points[1].dateTime.getDate() &&
+                points[points.length - 1].dateTime.getDate() === points[points.length - 2].dateTime.getDate()) {
+                    if (i === 0 || i === points.length - 1) {
+                        return 0;
+                    } else {
+                        return CIRCLE_RADIUS;
+                    }
+                } else {
+                    return CIRCLE_RADIUS;
+                }
+            })
             .attr('cx', function(d) {
                 return xscale(d.dateTime);
             })
@@ -200,7 +227,6 @@ const plotMedianPoints = function (elem, {xscale, yscale, modulo, points, showLa
             .on('click', dispatch(function() {
                 return Actions.showMedianStatsLabel(!showLabel);
             }));
-
     if (showLabel) {
         elem.selectAll('medianPointText')
             .data(points)

assets/src/scripts/models.js

@@ -152,7 +152,26 @@ export function mergeMedianTimeseries(collection, medianData, timeSeriesStartDat
             values.push(median);
         }
     }
+    let sortedValues = values.sort(function (a, b) {
+        return a.dateTime - b.dateTime;
+    });
+
+    let plotValues = sortedValues.slice(values.length - days, values.length);
 
+    let first = sortedValues[values.length - days -1];
+    if (plotValues[0].dateTime > timeSeriesStartDateTime) {
+        plotValues.unshift({
+            dateTime: timeSeriesStartDateTime,
+            value: first.value
+        });
+    }
+    let last = sortedValues[sortedValues.length - 1];
+    if (plotValues[plotValues.length - 1].dateTime < timeSeriesEndDateTime) {
+        plotValues.push({
+            dateTime: timeSeriesEndDateTime,
+            value: last.value
+        });
+    }
     const tsId = `${medianData[0].parameter_cd}:${medianData[0].ts_id}:median`;
     const tsCollectionId = `${medianData[0].site_no}:${medianData[0].parameter_cd}:median`;
 
@@ -172,9 +191,7 @@ export function mergeMedianTimeseries(collection, medianData, timeSeriesStartDat
         timeSeries: {
             ...collection.timeSeries || {},
             [tsId]: {
-                points: values.sort(function (a, b) {
-                    return a.dateTime - b.dateTime;
-                }).slice(values.length - days, values.length),
+                points: plotValues,
                 startTime: timeSeriesStartDateTime,
                 endTime: timeSeriesEndDateTime,
                 tsKey: 'median',

assets/src/styles/components/_hydrograph.scss

@@ -212,12 +212,27 @@ $highlight: $color-gray-lightest;
             &.median-modulo-0 {
                 fill: #f96713;
             }
+            &.median-step-0 {
+                fill: none;
+                stroke: #f96713;
+                stroke-width: 2px;
+            }
             &.median-modulo-1 {
                 fill: #0c7d40;
             }
+            &.median-step-1 {
+                fill: none;
+                stroke: #0c7d40;
+                stroke-width: 2px;
+            }
             &.median-modulo-2 {
                 fill: #0557fc;
             }
+            &.median-step-2 {
+                fill: none;
+                stroke: #0557fc;
+                stroke-width: 2px;
+            }
             &.median-modulo-3 {
                 fill: #f4f727;
             }