diff --git a/assets/src/scripts/components/hydrograph/drawingData.js b/assets/src/scripts/components/hydrograph/drawingData.js index a8265dbdb394894add2782e5493d906f33726b31..aaac967e16398d86926f3ac87e78d3c420972d9e 100644 --- a/assets/src/scripts/components/hydrograph/drawingData.js +++ b/assets/src/scripts/components/hydrograph/drawingData.js @@ -2,9 +2,9 @@ const memoize = require('fast-memoize'); const { createSelector } = require('reselect'); const { format } = require('d3-format'); -const {allTimeSeriesSelector, currentVariableTimeSeriesSelector, timeSeriesSelector, variablesSelector } = require('./timeseries'); +const {allTimeSeriesSelector, currentVariableTimeSeriesSelector, timeSeriesSelector } = require('./timeseries'); -const { getCurrentVariableTimeseriesRequestKey } = require('../../selectors/timeseriesSelector'); +const { getVariables, getCurrentVariableTimeseriesRequestKey } = require('../../selectors/timeseriesSelector'); export const MASK_DESC = { ice: 'Ice Affected', @@ -311,7 +311,7 @@ export const lineSegmentsSelector = memoize(tsKey => memoize(period => createSel export const lineSegmentsByParmCdSelector = memoize(tsKey => memoize(period => createSelector( lineSegmentsSelector(tsKey)(period), timeSeriesSelector(tsKey)(period), - variablesSelector, + getVariables, (lineSegmentsBySeriesID, timeSeriesMap, variables) => { return Object.keys(lineSegmentsBySeriesID).reduce((byVarID, sID) => { const series = timeSeriesMap[sID]; diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js index be30b2444defc7b5d59e2fec1a6c59eda413e9aa..e6d046b44701bb7c29c46c8fe4fde2a583ceded0 100644 --- a/assets/src/scripts/components/hydrograph/index.js +++ b/assets/src/scripts/components/hydrograph/index.js @@ -22,10 +22,12 @@ const { CIRCLE_RADIUS, CIRCLE_RADIUS_SINGLE_PT, SPARK_LINE_DIM, layoutSelector } const { drawSimpleLegend, legendMarkerRowsSelector } = require('./legend'); const { plotSeriesSelectTable, availableTimeseriesSelector } = require('./parameters'); const { xScaleSelector, yScaleSelector, timeSeriesScalesByParmCdSelector } = require('./scales'); -const { allTimeSeriesSelector, currentVariableSelector, isVisibleSelector, titleSelector, +const { allTimeSeriesSelector, isVisibleSelector, titleSelector, descriptionSelector, currentVariableTimeSeriesSelector, timeSeriesSelector } = require('./timeseries'); const { createTooltipFocus, createTooltipText } = require('./tooltip'); +const { getCurrentVariable } = require('../../selectors/timeseriesSelector'); + const drawMessage = function (elem, message) { // Set up parent element and SVG @@ -347,7 +349,7 @@ const createDaterangeControls = function(elem, siteno) { const timeSeriesGraph = function (elem, siteno) { elem.call(watermark) - .call(createDaterangeControls, siteno); + .call(createDaterangeControls, siteno); elem.append('div') .attr('class', 'hydrograph-container') @@ -386,7 +388,7 @@ const timeSeriesGraph = function (elem, siteno) { xscale: xScaleSelector('current'), yscale: yScaleSelector, seriesMap: currentVariableTimeSeriesSelector('median'), - variable: currentVariableSelector, + variable: getCurrentVariable, showLabel: (state) => state.timeseriesState.showMedianStatsLabel }))); }); diff --git a/assets/src/scripts/components/hydrograph/index.spec.js b/assets/src/scripts/components/hydrograph/index.spec.js index eb3a879da6c90763d39cc00331fcc2ca9a10071e..3f47ff774b07c89de87c095b028c936a46c9c27e 100644 --- a/assets/src/scripts/components/hydrograph/index.spec.js +++ b/assets/src/scripts/components/hydrograph/index.spec.js @@ -122,6 +122,7 @@ const TEST_STATE = { }, timeseriesState: { currentVariableID: '45807197', + currentDateRange: 'P7D', showSeries: { current: true, compare: true, @@ -161,7 +162,7 @@ describe('Hydrograph charting module', () => { const store = configureStore(TEST_STATE); select(graphNode) .call(provide(store)) - .call(timeSeriesGraph); + .call(timeSeriesGraph, '05370000'); let svgNodes = graphNode.getElementsByTagName('svg'); expect(svgNodes.length).toBe(1); expect(graphNode.innerHTML).toContain('hydrograph-container'); @@ -173,7 +174,7 @@ describe('Hydrograph charting module', () => { const store = configureStore(TEST_STATE); select(graphNode) .call(provide(store)) - .call(timeSeriesGraph); + .call(timeSeriesGraph, '05370000'); expect(select('#hydrograph').attr('hidden')).toBeNull(); }); @@ -181,7 +182,7 @@ describe('Hydrograph charting module', () => { const store = configureStore({series: {timeseries: {}}}); select(graphNode) .call(provide(store)) - .call(timeSeriesGraph); + .call(timeSeriesGraph, '05370000'); }); }); @@ -191,7 +192,7 @@ describe('Hydrograph charting module', () => { const store = configureStore(TEST_STATE); select(graphNode) .call(provide(store)) - .call(timeSeriesGraph); + .call(timeSeriesGraph, '05370000'); svg = select('svg'); }); @@ -209,16 +210,6 @@ describe('Hydrograph charting module', () => { it('svg should be focusable', function() { expect(svg.attr('tabindex')).toBe('0'); }); - - it('should have an accessibility table for each time series', function() { - expect(selectAll('table.usa-sr-only').size()).toBe(3); - }); - - it('should have a div for each type of time series', function() { - expect(selectAll('div#sr-only-median').size()).toBe(1); - expect(selectAll('div#sr-only-compare').size()).toBe(1); - expect(selectAll('div#sr-only-current').size()).toBe(1); - }); }); describe('SVG contains the expected elements', () => { @@ -254,7 +245,8 @@ describe('Hydrograph charting module', () => { median: true }, showMedianStatsLabel: false, - currentVariableID: '45807197' + currentVariableID: '45807197', + currentDateRange: 'P7D' }, ui: { windowWidth: 400,