diff --git a/assets/src/scripts/components/hydrograph/drawingData.js b/assets/src/scripts/components/hydrograph/drawingData.js index 3c65443b4feace209dc0c1cb3b8b0563bfeb1f2d..0930fc6787c81e240c8c03799fd9e94baf78ec5e 100644 --- a/assets/src/scripts/components/hydrograph/drawingData.js +++ b/assets/src/scripts/components/hydrograph/drawingData.js @@ -1,10 +1,13 @@ const memoize = require('fast-memoize'); +const find = require('lodash/find'); +const { DateTime } = require('luxon'); const { createSelector } = require('reselect'); const { format } = require('d3-format'); -const {allTimeSeriesSelector, currentVariableTimeSeriesSelector, timeSeriesSelector } = require('./timeSeries'); +const { allTimeSeriesSelector, currentVariableTimeSeriesSelector, timeSeriesSelector } = require('./timeSeries'); -const { getVariables, getTsRequestKey } = require('../../selectors/timeSeriesSelector'); +const { getVariables, getTsRequestKey, getRequestTimeRange, getIanaTimeZone } = require('../../selectors/timeSeriesSelector'); +const { getCurrentVariableMedianStatistics } = require('../../selectors/medianStatisticsSelector'); export const MASK_DESC = { ice: 'Ice Affected', @@ -341,3 +344,58 @@ export const currentVariableLineSegmentsSelector = memoize(tsKey => createSelect } )); +/* + * @ return {Array of Arrays of Objects} where the properties are date (universal), class, and value +*/ +export const getCurrentVariableMedianStatPoints = createSelector( + getCurrentVariableMedianStatistics, + getRequestTimeRange('current'), + getIanaTimeZone, + (stats, timeRange, ianaTimeZone) => { + if (!stats || !timeRange) { + return {}; + } + + let datesOfInterest = []; + + let nextDateTime = DateTime.fromMillis(timeRange.start, {zone: ianaTimeZone}); + datesOfInterest.push({ + year: nextDateTime.year, + month: nextDateTime.month.toString(), + day: nextDateTime.day.toString(), + utcDate: timeRange.start + }); + nextDateTime = nextDateTime.startOf('day').plus({days: 1}); + while (nextDateTime.valueOf() <= timeRange.end) { + datesOfInterest.push({ + year: nextDateTime.year, + month: nextDateTime.month.toString(), + day: nextDateTime.day.toString(), + utcDate: nextDateTime.valueOf() + }); + nextDateTime = nextDateTime.plus({days: 1}); + } + nextDateTime = DateTime.fromMillis(timeRange.end, {zone: ianaTimeZone}); + datesOfInterest.push({ + year: nextDateTime.year, + month: nextDateTime.month.toString(), + day: nextDateTime.day.toString(), + utcDate: timeRange.end + }); + + return Object.values(stats).map((seriesStats) => { + return datesOfInterest + .map((date) => { + let stat = find(seriesStats, {'month_nu': date.month, 'day_nu': date.day}); + return { + value: stat ? stat.p50_va : null, + date: date.utcDate + }; + }) + .filter((point) => { + return point.value; + }); + }); + }); + + diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js index 85540a0ee28b3a85bdb2d9024036b627f11bfb1a..dacf65242827fdc7c82e1ef3d1c905f7749cfd2f 100644 --- a/assets/src/scripts/components/hydrograph/index.js +++ b/assets/src/scripts/components/hydrograph/index.js @@ -16,8 +16,8 @@ const { callIf, mediaQuery } = require('../../utils'); const { audibleUI } = require('./audible'); const { appendAxes, axesSelector } = require('./axes'); const { cursorSlider } = require('./cursor'); -const {lineSegmentsByParmCdSelector, currentVariableLineSegmentsSelector, MASK_DESC, HASH_ID -} = require('./drawingData'); +const {lineSegmentsByParmCdSelector, currentVariableLineSegmentsSelector, MASK_DESC, HASH_ID, + getCurrentVariableMedianStatPoints } = require('./drawingData'); const { CIRCLE_RADIUS_SINGLE_PT, SPARK_LINE_DIM, layoutSelector } = require('./layout'); const { drawSimpleLegend, legendMarkerRowsSelector } = require('./legend'); const { plotSeriesSelectTable, availableTimeSeriesSelector } = require('./parameters'); @@ -26,7 +26,6 @@ const { allTimeSeriesSelector, isVisibleSelector, titleSelector, descriptionSelector, currentVariableTimeSeriesSelector, hasTimeSeriesWithPoints } = require('./timeSeries'); const { createTooltipFocus, createTooltipText } = require('./tooltip'); -const { getCurrentVariableMedianStatPointsInDateRange } = require('../../selectors/medianStatisticsSelector'); const { getTimeSeriesCollectionIds, isLoadingTS } = require('../../selectors/timeSeriesSelector'); @@ -189,7 +188,6 @@ const plotMedianPoints = function(elem, {xscale, yscale, modulo, points}) { .curve(curveStepAfter) .x(function(d) { return xscale(d.date); - //return xscale(d.dateTime); }) .y(function(d) { return yscale(d.value); @@ -211,7 +209,7 @@ const plotMedianPoints = function(elem, {xscale, yscale, modulo, points}) { * @param {Function} yscale * @param {Array} pointsList */ -const plotAllMedianPoints = function (elem, {visible, xscale, yscale, seriesMap}) { +const plotAllMedianPoints = function (elem, {visible, xscale, yscale, seriesPoints}) { elem.select('#median-points').remove(); if (!visible) { return; @@ -219,9 +217,9 @@ const plotAllMedianPoints = function (elem, {visible, xscale, yscale, seriesMap} const container = elem .append('g') .attr('id', 'median-points'); - for (const [index, seriesID] of Object.keys(seriesMap).entries()) { - plotMedianPoints(container, {xscale, yscale, modulo: index % 6, points: seriesMap[seriesID]}); - } + seriesPoints.forEach((points, index) => { + plotMedianPoints(container, {xscale, yscale, modulo: index % 6, points: points}); + }); }; @@ -300,7 +298,7 @@ const timeSeriesGraph = function(elem) { visible: isVisibleSelector('median'), xscale: xScaleSelector('current'), yscale: yScaleSelector, - seriesMap: getCurrentVariableMedianStatPointsInDateRange + seriesPoints: getCurrentVariableMedianStatPoints }))); }); }; diff --git a/assets/src/scripts/components/hydrograph/legend.js b/assets/src/scripts/components/hydrograph/legend.js index f4fcaa95ef576c31d7fc08703d5fb2403832e238..1e891329315aa22e816a33ea3afab681cd0ff071 100644 --- a/assets/src/scripts/components/hydrograph/legend.js +++ b/assets/src/scripts/components/hydrograph/legend.js @@ -4,7 +4,7 @@ const { createSelector } = require('reselect'); const { CIRCLE_RADIUS } = require('./layout'); const { defineLineMarker, defineTextOnlyMarker, defineRectangleMarker} = require('./markers'); -const { currentVariableLineSegmentsSelector, HASH_ID, MASK_DESC} = require('./drawingData'); +const { currentVariableLineSegmentsSelector, HASH_ID, MASK_DESC, getCurrentVariableMedianStatPoints } = require('./drawingData'); const { USWDS_MEDIUM_SCREEN } = require('../../config'); const { getMethods } = require('../../selectors/timeSeriesSelector');