diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js index 496babae1398ecf67120b9fcd26a34cc68b7f729..8c49733051df90f73b323024757186818b1004dc 100644 --- a/assets/src/scripts/components/hydrograph/index.js +++ b/assets/src/scripts/components/hydrograph/index.js @@ -27,7 +27,7 @@ const { allTimeSeriesSelector, isVisibleSelector, titleSelector, const { createTooltipFocus, createTooltipText } = require('./tooltip'); const { coerceStatisticalSeries } = require('./statistics'); -const { getCurrentVariable } = require('../../selectors/timeSeriesSelector'); +const { getCurrentVariable, getCurrentDateRange } = require('../../selectors/timeSeriesSelector'); const drawMessage = function (elem, message) { @@ -257,19 +257,16 @@ const plotMedianPoints = function (elem, {xscale, yscale, modulo, points, showLa * @param {Boolean} showLabel * @param {Object} variable */ -const plotAllMedianPoints = function (elem, {visible, xscale, yscale, seriesMap, showLabel, variable}) { +const plotAllMedianPoints = function (elem, {visible, xscale, yscale, seriesMap, showLabel, variable, dateRange}) { elem.select('#median-points').remove(); - if (!visible) { return; } const container = elem .append('g') .attr('id', 'median-points'); - console.log(seriesMap); for (const [index, seriesID] of Object.keys(seriesMap).entries()) { - console.log(seriesMap[seriesID]); - const points = coerceStatisticalSeries(seriesMap[seriesID]); + const points = coerceStatisticalSeries(seriesMap[seriesID], dateRange); plotMedianPoints(container, {xscale, yscale, modulo: index % 6, points, showLabel, variable}); } }; @@ -347,6 +344,7 @@ const timeSeriesGraph = function (elem) { yscale: yScaleSelector, seriesMap: currentVariableTimeSeriesSelector('median'), variable: getCurrentVariable, + dateRange: getCurrentDateRange, showLabel: (state) => state.timeseriesState.showMedianStatsLabel }))); }); diff --git a/assets/src/scripts/components/hydrograph/statistics.js b/assets/src/scripts/components/hydrograph/statistics.js index 6604f8419cd0ea2d37c87363c96ccc6d2fb224dc..4eb8a97478a421b14c1879ddad3262e061008365 100644 --- a/assets/src/scripts/components/hydrograph/statistics.js +++ b/assets/src/scripts/components/hydrograph/statistics.js @@ -1,5 +1,6 @@ const { range } = require('lodash'); const { isLeapYear } = require('../../models'); +const { calcStartTime } = require('../../utils'); /** * Make statisical data look like a timeseries for plotting purposes @@ -7,8 +8,9 @@ const { isLeapYear } = require('../../models'); * @param series -- an object with the following keys: points, startTime, and endTime at a minimum. Each point should have a javascript month and day * @returns {*[]} */ -export const coerceStatisticalSeries = function (series) { - const startYear = series.startTime.getFullYear(); +export const coerceStatisticalSeries = function (series, period) { + const startTime = calcStartTime(period, series.endTime); + const startYear = startTime.getFullYear(); const endYear = series.endTime.getFullYear(); const yearRange = range(startYear, endYear + 1); let points = series.points; @@ -31,11 +33,9 @@ export const coerceStatisticalSeries = function (series) { let sortedPoints = plotablePoints.sort(function(a, b) { return a.dateTime - b.dateTime; }); - console.log(series.startTime); - console.log(series.endTime); - let filtered = sortedPoints.filter(x => series.startTime <= x.dateTime && x.dateTime <= series.endTime); + let filtered = sortedPoints.filter(x => startTime <= x.dateTime && x.dateTime <= series.endTime); let first = filtered[0]; - if (first.dateTime > series.startTime) { + if (first.dateTime > startTime) { let previousIndex; if (sortedPoints.indexOf(first) === 0) { previousIndex = sortedPoints.length - 1; @@ -44,7 +44,7 @@ export const coerceStatisticalSeries = function (series) { } const previousVal = sortedPoints[previousIndex]; let leftVal = Object.assign({}, previousVal); - leftVal.dateTime = series.startTime; + leftVal.dateTime = startTime; filtered.unshift(leftVal); } let last = filtered[filtered.length - 1]; @@ -53,6 +53,5 @@ export const coerceStatisticalSeries = function (series) { rightVal.dateTime = series.endTime; filtered.push(rightVal); } - console.log(filtered); return filtered; }; \ No newline at end of file diff --git a/assets/src/scripts/store/index.js b/assets/src/scripts/store/index.js index a8305f2ae9983788fc55ebc0578f0cc306926ec2..347c387cad4c0097ba8c5afd1c4aebb13dac6b4a 100644 --- a/assets/src/scripts/store/index.js +++ b/assets/src/scripts/store/index.js @@ -6,6 +6,7 @@ const { default: thunk } = require('redux-thunk'); const { getMedianStatistics, getPreviousYearTimeseries, getTimeseries, parseMedianData, sortedParameters } = require('../models'); +const { calcStartTime } = require('../utils'); const { normalize } = require('../schema'); const { fetchFloodFeatures, fetchFloodExtent } = require('../floodData'); const { getCurrentParmCd, getCurrentDateRange, hasTimeSeries, getTsRequestKey} = require('../selectors/timeSeriesSelector'); @@ -116,22 +117,8 @@ export const Actions = { dispatch(Actions.setCurrentDateRange(period)); if (!hasTimeSeries('current', period, parmCd)(state)) { const endTime = new Date(); //TODO get this from the current data - let startTime = new Date(endTime); + let startTime = calcStartTime(period, endTime); - switch (period) { - case 'P7D': - break; - case 'P30D': - startTime.setDate(startTime.getDate() - 30); - break; - - case 'P1Y': { - startTime.setFullYear(startTime.getFullYear() - 1); - break; - } - default: - console.log('No known period specified'); - } return getTimeseries({ sites: [site], params: [parmCd], diff --git a/assets/src/scripts/utils.js b/assets/src/scripts/utils.js index d8458bacae69e48ed2515ce5ef1467eca07849f2..15764a62e53a90aed7a7d024b466d7945a489a86 100644 --- a/assets/src/scripts/utils.js +++ b/assets/src/scripts/utils.js @@ -154,3 +154,28 @@ export function wrap(text, width, break_chars=TEXT_WRAP_BREAK_CHARS) { export const mediaQuery = function (minWidth) { return window.matchMedia(`screen and (min-width: ${minWidth}px)`).matches; }; + +/** + * Calculate the start time of a time range based on a time-delta string and the end time + * + * @param period -- an NWIS time-delta string (e.g. P7D) + * @param endTime -- the end time + * @returns {Date} + */ +export const calcStartTime = function (period, endTime) { + let startTime = new Date(endTime); + switch (period) { + case 'P7D': + startTime.setDate(startTime.getDate() - 7); + break; + case 'P30D': + startTime.setDate(startTime.getDate() - 30); + break; + case 'P1Y': + startTime.setFullYear(startTime.getFullYear() - 1); + break; + default: + console.log('No known period specified'); + } + return startTime; +};