From 9a586eeee7d8043289fa566ee2db36f512b5de7b Mon Sep 17 00:00:00 2001
From: Andrew Yan <ayan@usgs.gov>
Date: Fri, 20 Apr 2018 14:57:10 -0500
Subject: [PATCH] rough version of working step function for median data
---
.../scripts/components/hydrograph/index.js | 34 ++++++++++++++++---
assets/src/scripts/models.js | 23 +++++++++++--
assets/src/styles/components/_hydrograph.scss | 15 ++++++++
3 files changed, 65 insertions(+), 7 deletions(-)
diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index a63cf14a9..d335e12ca 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/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)
diff --git a/assets/src/scripts/models.js b/assets/src/scripts/models.js
index 703f37423..1641ff347 100644
--- a/assets/src/scripts/models.js
+++ b/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',
diff --git a/assets/src/styles/components/_hydrograph.scss b/assets/src/styles/components/_hydrograph.scss
index addab2ba0..2aa3c7308 100644
--- a/assets/src/styles/components/_hydrograph.scss
+++ b/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;
}
--
GitLab