Added new selector to generate sr-only data. Added qualifier to the data that can be shown.

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'
     })));

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
 };