diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js index 0976d61178864f8bdab0496c9dc2ce09fd6418f3..eebd9182b832373f439c31e8e7f5f9bef6b92f40 100644 --- a/assets/src/scripts/components/hydrograph/index.js +++ b/assets/src/scripts/components/hydrograph/index.js @@ -13,7 +13,7 @@ const { appendAxes, axesSelector } = require('./axes'); const { ASPECT_RATIO_PERCENT, MARGIN, CIRCLE_RADIUS, layoutSelector } = require('./layout'); const { drawSimpleLegend, legendDisplaySelector, createLegendMarkers } = require('./legend'); const { plotSeriesSelectTable, availableTimeseriesSelector } = require('./parameters'); -const { pointsSelector, lineSegmentsSelector, isVisibleSelector, titleSelector, descriptionSelector, MASK_DESC } = require('./timeseries'); +const { pointsSelector, lineSegmentsSelector, pointsTableDataSelector, isVisibleSelector, titleSelector, descriptionSelector, MASK_DESC } = require('./timeseries'); const { xScaleSelector, yScaleSelector } = require('./scales'); const { Actions, configureStore } = require('./store'); const { createTooltipFocus, createTooltipText } = require('./tooltip'); @@ -246,14 +246,9 @@ const timeSeriesGraph = function (elem) { .call(link(addSROnlyTable, createStructuredSelector({ columnNames: createSelector( titleSelector, - (title) => [title, 'Time'] - ), - data: createSelector( - pointsSelector('current'), - points => points.map((value) => { - return [value.value, value.time]; - }) + (title) => [title, 'Time', 'Qualifiers'] ), + data: pointsTableDataSelector('current'), describeById: () => 'current-time-series-sr-desc', describeByText: () => 'current time series data in tabular format' }))); @@ -261,21 +256,9 @@ const timeSeriesGraph = function (elem) { .call(link(addSROnlyTable, createStructuredSelector({ columnNames: createSelector( titleSelector, - (title) => [title, 'Time'] - ), - data: createSelector( - isVisibleSelector('compare'), - pointsSelector('compare'), - (isVisible, points) => { - if (isVisible) { - return points.map((value) => { - return [value.value, value.time] - }); - } else { - return []; - } - } + (title) => [title, 'Time', 'Qualifiers'] ), + data: pointsTableDataSelector('compare'), describeById: () => 'compare-time-series-sr-desc', describeByText: () => 'previous year time series data in tabular format' }))); @@ -285,12 +268,7 @@ const timeSeriesGraph = function (elem) { titleSelector, (title) => [`Median ${title}`, 'Time'] ), - data: createSelector( - pointsSelector('medianStatistics'), - points => points.map((value) => { - return [value.value, value.time]; - }) - ), + data: pointsTableDataSelector('medianStatistics'), describeById: () => 'median-statistics-sr-desc', describeByText: () => 'median statistical data in tabular format' }))); diff --git a/assets/src/scripts/components/hydrograph/timeseries.js b/assets/src/scripts/components/hydrograph/timeseries.js index cb72b3a66e8c877c85c3b0b0949fa40a60ffe31d..d7be29f68381bd2acdb167f1e0dd81bd76cdb0e9 100644 --- a/assets/src/scripts/components/hydrograph/timeseries.js +++ b/assets/src/scripts/components/hydrograph/timeseries.js @@ -52,6 +52,24 @@ const isVisibleSelector = memoize(tsDataKey => (state) => { return state.showSeries[tsDataKey]; }); +const pointsTableDataSelector = memoize(tsDataKey => createSelector( + pointsSelector(tsDataKey), + isVisibleSelector(tsDataKey), + (points, isVisible) => { + if (isVisible) { + return points.map((value) => { + return [ + value.value || '', + value.time || '', + value.qualifiers && value.qualifiers.length > 0 ? value.qualifiers.join(', ') : '' + ]; + }); + } else { + return []; + } + } +)); + /** * Factory function creates a function that: @@ -141,5 +159,5 @@ const descriptionSelector = createSelector( module.exports = { pointsSelector, lineSegmentsSelector, isVisibleSelector, yLabelSelector, - titleSelector, descriptionSelector, MASK_DESC + pointsTableDataSelector, titleSelector, descriptionSelector, MASK_DESC };