Data table and median data now work

assets/src/scripts/monitoring-location/components/hydrograph/data-table.js

@@ -4,8 +4,8 @@ import {createStructuredSelector} from 'reselect';
 
 import {link} from 'ui/lib/d3-redux';
 
-import {getVisibleGroundwaterLevelsTableData} from './selectors/discrete-data';
-import {getCurrentPointData} from './selectors/drawing-data';
+import {getGroundwaterLevelsTableData} from './selectors/discrete-data';
+import {getIVTableData} from './selectors/iv-data';
 
 const TABLE_CAPTION = {
     iv: 'Instantaneous value data',
@@ -94,12 +94,12 @@ export const drawDataTables = function(elem, store) {
         .attr('id', 'iv-hydrograph-data-table-container')
         .call(link(store, drawDataTable, createStructuredSelector({
             dataKind: () => 'iv',
-            currentData: getCurrentPointData
+            currentData: getIVTableData('primary')
         })));
     elem.append('div')
         .attr('id', 'gw-hydrograph-data-table-container')
         .call(link(store, drawDataTable, createStructuredSelector({
             dataKind: () => 'gw',
-            currentData: getVisibleGroundwaterLevelsTableData
+            currentData: getGroundwaterLevelsTableData
         })));
 };
\ No newline at end of file

assets/src/scripts/monitoring-location/components/hydrograph/graph-controls.js

 
 import {link} from 'ui/lib/d3-redux';
 
-import {getCurrentVariableMedianStatistics} from 'ml/selectors/median-statistics-selector';
-import {getCurrentVariableTimeSeries} from 'ml/selectors/time-series-selector';
-import {Actions} from 'ml/store/instantaneous-value-time-series-state';
+import {getInputsForRetrieval} from 'ml/selectors/hydrograph-state-selector';
+
+import {getSelectedParameterCode} from 'ml/selectors/hydrograph-state-selector';
+import {getTimeRange} from 'ml/selectors/hydrograph-data-selector';
+
+import {retrieveMedianStatistics, retrievePriorYearIVData} from 'ml/store/hydrograph-data';
+import {setCompareDataVisibility, setMedianDataVisibility} from 'ml/store/hydrograph-state';
 
-import {audibleUI} from './audible';
 import {isVisible} from './selectors/time-series-data';
 
 /*
  * Create the show audible toggle, last year toggle, and median toggle for the time series graph.
  * @param {Object} elem - D3 selection
  */
-export const drawGraphControls = function(elem, store) {
+export const drawGraphControls = function(elem, store, siteno) {
 
     const graphControlDiv = elem.append('ul')
         .classed('usa-fieldset', true)
         .classed('usa-list--unstyled', true)
         .classed('graph-controls-container', true);
 
-    graphControlDiv.append('li')
-        .call(audibleUI, store);
-
     const compareControlDiv = graphControlDiv.append('li')
         .classed('usa-checkbox', true);
 
@@ -34,14 +34,15 @@ export const drawGraphControls = function(elem, store) {
         .attr('ga-event-category', 'TimeSeriesGraph')
         .attr('ga-event-action', 'toggleCompare')
         .on('click', function() {
-            store.dispatch(Actions.setIVTimeSeriesVisibility('compare', this.checked));
+            const state = store.getState();
+            const currentTimeRange = getTimeRange('current')(state);
+            store.dispatch(setCompareDataVisibility(this.checked));
+            store.dispatch(retrievePriorYearIVData(siteno, {
+                parameterCode: getSelectedParameterCode(state),
+                startTime: currentTimeRange.start,
+                endTime: currentTimeRange.end
+            }));
         })
-        // Disables the checkbox if no compare time series for the current variable
-        .call(link(store,function(elem, compareTimeSeries) {
-            const exists = Object.keys(compareTimeSeries) ?
-                Object.values(compareTimeSeries).filter(tsValues => tsValues.points.length).length > 0 : false;
-            elem.property('disabled', !exists);
-        }, getCurrentVariableTimeSeries('compare')))
         // Sets the state of the toggle
         .call(link(store,function(elem, checked) {
             elem.property('checked', checked);
@@ -64,12 +65,9 @@ export const drawGraphControls = function(elem, store) {
         .attr('ga-event-category', 'TimeSeriesGraph')
         .attr('ga-event-action', 'toggleMedian')
         .on('click', function() {
-            store.dispatch(Actions.setIVTimeSeriesVisibility('median', this.checked));
+            store.dispatch(setMedianDataVisibility(this.checked));
+            store.dispatch(retrieveMedianStatistics(siteno, getSelectedParameterCode(store.getState())));
         })
-        // Disables the checkbox if no median data for the current variable
-        .call(link(store,function(elem, medianData) {
-            elem.property('disabled', medianData === null);
-        }, getCurrentVariableMedianStatistics))
         // Sets the state of the toggle
         .call(link(store,function(elem, checked) {
             elem.property('checked', checked);

assets/src/scripts/monitoring-location/components/hydrograph/index.js

@@ -6,40 +6,29 @@ import {DateTime} from 'luxon';
 
 import config from 'ui/config.js';
 
-
 import {drawInfoAlert} from 'd3render/alerts';
 import {drawLoadingIndicator} from 'd3render/loading-indicator';
 
-//import {isPeriodWithinAcceptableRange, isPeriodCustom} from 'ml/iv-data-utils';
-//import {renderTimeSeriesUrlParams} from 'ml/url-params';
+import {renderTimeSeriesUrlParams} from 'ml/url-params';
 
-//import {hasAnyVariables, getCurrentVariableID, getCurrentParmCd, getVariables} from 'ml/selectors/time-series-selector';
 
 import {retrieveHydrographData} from 'ml/store/hydrograph-data';
 import {retrieveHydrographParameters} from 'ml/store/hydrograph-parameters';
-import {setSelectedParameterCode} from 'ml/store/hydrograph-state';
+import {setSelectedParameterCode, setCompareDataVisibility} from 'ml/store/hydrograph-state';
 
-//import {Actions as ivTimeSeriesDataActions} from 'ml/store/instantaneous-value-time-series-data';
-//import {Actions as ivTimeSeriesStateActions} from 'ml/store/instantaneous-value-time-series-state';
-//import {Actions as statisticsDataActions} from 'ml/store/statistics-data';
-//import {Actions as timeZoneActions} from 'ml/store/time-zone';
 import {Actions as floodDataActions} from 'ml/store/flood-inundation';
 
 //import {drawDateRangeControls} from './date-controls';
-//import {drawDataTables} from './data-table';
+import {drawDataTables} from './data-table';
 //import {renderDownloadLinks} from './download-links';
 import {drawGraphBrush} from './graph-brush';
-//import {drawGraphControls} from './graph-controls';
+import {drawGraphControls} from './graph-controls';
 import {drawTimeSeriesLegend} from './legend';
 import {drawMethodPicker} from './method-picker';
 import {drawSelectionTable} from './parameters';
 import {drawTimeSeriesGraph} from './time-series-graph';
 import {drawTooltipCursorSlider} from './tooltip';
 
-//import {getLineSegmentsByParmCd} from './selectors/drawing-data';
-//import {SPARK_LINE_DIM}  from './selectors/layout';
-//import {getAvailableParameterCodes} from './selectors/parameter-data';
-//import {getTimeSeriesScalesByParmCd} from './selectors/scales';
 
 /*
  * Renders the hydrograph on the node element using the Redux store for state information. The siteno, latitude, and
@@ -84,6 +73,7 @@ export const attachToNode = function(store,
         loadCompare: compare,
         loadMedian: false
     }));
+    store.dispatch(setCompareDataVisibility(compare));
 
     // if showing the controls, fetch the parameters
     let fetchParameters;
@@ -121,15 +111,15 @@ export const attachToNode = function(store,
             /*
             nodeElem
                 .call(drawDateRangeControls, store, siteno);
-            legendControlsContainer
-                .call(drawGraphControls, store);
-
+            */
+            legendControlsContainer.call(drawGraphControls, store, siteno);
+/*
             nodeElem.select('#iv-graph-list-container')
                 .call(renderDownloadLinks, store, siteno);
-
+*/
             nodeElem.select('#iv-data-table-container')
                 .call(drawDataTables, store);
-*/
+
             // Set the parameter code explictly. We may eventually set this within the parameter selection table
             store.dispatch(setSelectedParameterCode(parameterCode));
 
@@ -137,10 +127,7 @@ export const attachToNode = function(store,
                 nodeElem.select('.select-time-series-container')
                     .call(drawSelectionTable, store, siteno);
             });
-
-            /*
             renderTimeSeriesUrlParams(store);
-            */
         }
     });
 

assets/src/scripts/monitoring-location/components/hydrograph/selectors/iv-data.js

@@ -2,9 +2,13 @@ import {format} from 'd3-format';
 import memoize from 'fast-memoize';
 import isEqual from 'lodash/isEqual';
 import uniqWith from 'lodash/uniqWith';
+import {DateTime} from 'luxon';
 import {createSelector} from 'reselect';
 
-import {getIVData} from 'ml/selectors/hydrograph-data-selector';
+import config from 'ui/config';
+
+import {getIVData, getPrimaryParameter} from 'ml/selectors/hydrograph-data-selector';
+import {getSelectedIVMethodID} from 'ml/selectors/hydrograph-state-selector';
 
 const MASKED_QUALIFIERS = {
     ice: {label: 'Ice Affected', class: 'ice-affected-mask'},
@@ -23,7 +27,7 @@ const MASKED_QUALIFIERS = {
     '***': {label: 'Unavailable', class: 'unavailable-mask'}
 };
 
-const LINE_QUALIFIERS = {
+const APPROVAL_QUALIFIERS = {
     a: {label: 'Approved', class: 'approved'},
     e: {label: 'Estimated', class: 'estimated'}
 };
@@ -86,17 +90,17 @@ export const getIVDataPoints = memoize(dataKind => createSelector(
         return Object.values(ivData.values).reduce((byMethodID, methodValues) => {
             byMethodID[methodValues.method.methodID] = methodValues.points.map(point => {
                 // We will only receive one masked qualifier
-                let label = 'Default';
-                let pointClass = '';
+                let label;
+                let pointClass;
                 const pointQualifiers = point.qualifiers.map(qualifier => qualifier.toLowerCase());
                 const maskedQualifier = pointQualifiers.find(qualifier => qualifier in MASKED_QUALIFIERS);
-                const lineQualifier = pointQualifiers.find(qualifier => qualifier in LINE_QUALIFIERS);
+                const approvalQualifier = pointQualifiers.find(qualifier => qualifier in APPROVAL_QUALIFIERS);
                 if (maskedQualifier) {
                     label = MASKED_QUALIFIERS[maskedQualifier].label;
                     pointClass = MASKED_QUALIFIERS[maskedQualifier].class;
-                } else if (lineQualifier) {
-                    label = LINE_QUALIFIERS[lineQualifier].label;
-                    pointClass = LINE_QUALIFIERS[lineQualifier].class;
+                } else if (approvalQualifier) {
+                    label = APPROVAL_QUALIFIERS[approvalQualifier].label;
+                    pointClass = APPROVAL_QUALIFIERS[approvalQualifier].class;
                 } else { //default to provisional
                     label = 'Provisional';
                     pointClass = 'provisional';
@@ -105,6 +109,8 @@ export const getIVDataPoints = memoize(dataKind => createSelector(
                     value: point.value,
                     dateTime: point.dateTime,
                     isMasked: !!maskedQualifier,
+                    maskedQualifier: maskedQualifier,
+                    approvalQualifier: approvalQualifier,
                     label: label,
                     class: pointClass
                 };
@@ -115,6 +121,26 @@ export const getIVDataPoints = memoize(dataKind => createSelector(
     }
 ));
 
+export const getIVTableData = memoize(dataKind => createSelector(
+    getIVDataPoints(dataKind),
+    getPrimaryParameter,
+    getSelectedIVMethodID,
+    (ivData, parameter, selectedMethodID) => {
+        if (!ivData || !(selectedMethodID in ivData)) {
+            return [];
+        }
+        return ivData[selectedMethodID].map(point => {
+            return {
+                parameterName: parameter.name,
+                result: point.value,
+                dateTime: DateTime.fromMillis(point.dateTime).toISO({zone: config.locationTimeZone}),
+                approvals: point.approvalQualifier ? APPROVAL_QUALIFIERS[point.approvalQualifier].label : 'Provisional',
+                masks: point.isMasked ? MASKED_QUALIFIERS[point.maskedQualifier].label : ''
+            };
+        });
+    }
+));
+
 /*
  * @return Keys are ts Ids, values are  of array of objects. Each object has four properties and
  * represents a segment

assets/src/scripts/monitoring-location/components/hydrograph/selectors/legend-data.js

@@ -3,10 +3,9 @@ import {createSelector} from 'reselect';
 import {defineLineMarker, defineRectangleMarker, defineTextOnlyMarker} from 'd3render/markers';
 
 import {getWaterwatchFloodLevels, isWaterwatchVisible} from 'ml/selectors/flood-data-selector';
+import {getPrimaryMedianStatisticsData} from 'ml/selectors/hydrograph-data-selector';
 import {isCompareIVDataVisible, isMedianDataVisible} from 'ml/selectors/hydrograph-state-selector';
 
-//import {getCurrentVariableMedianMetadata} from 'ml/selectors/median-statistics-selector';
-
 import {getGroundwaterLevelsMarker} from '../discrete-data';
 
 import {getIVUniqueDataKinds, HASH_ID} from './iv-data';
@@ -30,7 +29,7 @@ const TS_LABEL = {
 const getLegendDisplay = createSelector(
     isCompareIVDataVisible,
     isMedianDataVisible,
-    () => null, //getCurrentVariableMedianMetadata,
+    getPrimaryMedianStatisticsData,
     getIVUniqueDataKinds('primary'),
     getIVUniqueDataKinds('compare'),
     isWaterwatchVisible,
@@ -55,7 +54,7 @@ const getIVMarkers = function(dataKind, uniqueIVKinds) {
         if (ivKind.isMasked) {
             maskMarkers.push(defineRectangleMarker(null, `mask ${ivKind.class}`, ivKind.label, `url(#${HASH_ID[dataKind]})`));
         } else {
-            return lineMarkers.push(defineLineMarker(null, `line-segment ${ivKind.class} ts-${dataKind}`, ivKind.label));
+            return lineMarkers.push(defineLineMarker(null, `line-segment ts-${ivKind.class} ts-${dataKind}`, ivKind.label));
         }
     });
     return [textMarker, ...lineMarkers, ...maskMarkers];
@@ -66,6 +65,9 @@ const getIVMarkers = function(dataKind, uniqueIVKinds) {
  * @return {Array of Array} - each subarray rpresents the markes for a time series median data
  */
 const getMedianMarkers = function(medianMetaData) {
+    if (!Object.keys(medianMetaData).length) {
+        return [];
+    }
     return Object.values(medianMetaData).map((stats, index) => {
         // Get the unique non-null years, in chronological order
         let years = [];
@@ -77,7 +79,7 @@ const getMedianMarkers = function(medianMetaData) {
         }
         const dateText = years.join(' - ');
 
-        const descriptionText = stats.methodDescription ? `${stats.methodDescription} ` : '';
+        const descriptionText = stats.description ? `${stats.description} ` : '';
         const classes = `median-data-series median-step median-step-${index % 6}`;
         const label = `${descriptionText}${dateText}`;
 

assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.js

@@ -10,13 +10,13 @@ import {appendAxes} from 'd3render/axes';
 import {renderMaskDefs} from 'd3render/data-masks';
 import {appendInfoTooltip} from 'd3render/info-tooltip';
 
-import {getPrimaryParameter} from 'ml/selectors/hydrograph-data-selector';
 import {isWaterwatchVisible, getWaterwatchFloodLevels} from 'ml/selectors/flood-data-selector';
+import {getPrimaryParameter, getPrimaryMedianStatisticsData} from 'ml/selectors/hydrograph-data-selector';
+import {getSelectedIVMethodID} from 'ml/selectors/hydrograph-state-selector';
 
 import {getAxes}  from './selectors/axes';
 import {getGroundwaterLevelPoints} from './selectors/discrete-data';
 import {getIVDataSegments, HASH_ID} from './selectors/iv-data';
-import {getSelectedIVMethodID} from 'ml/selectors/hydrograph-state-selector';
 
 import {getTitle, getDescription, isVisible} from './selectors/time-series-data';
 import {getMainLayout} from './selectors/layout';
@@ -50,10 +50,10 @@ const plotMedianPoints = function(elem, {xscale, yscale, modulo, points}) {
     const stepFunction = d3Line()
         .curve(curveStepAfter)
         .x(function(d) {
-            return xscale(d.date);
+            return xscale(d.dateTime);
         })
         .y(function(d) {
-            return yscale(d.value);
+            return yscale(d.point);
         });
     const medianGrp = elem.append('g');
     medianGrp.append('path')
@@ -75,7 +75,7 @@ const plotMedianPoints = function(elem, {xscale, yscale, modulo, points}) {
  */
 const plotAllMedianPoints = function(elem, {visible, xscale, yscale, seriesPoints, enableClip}) {
     elem.select('#median-points').remove();
-    if (!visible) {
+    if (!visible || !seriesPoints) {
         return;
     }
     const container = elem
@@ -85,8 +85,8 @@ const plotAllMedianPoints = function(elem, {visible, xscale, yscale, seriesPoint
         container.attr('clip-path', 'url(#graph-clip');
     }
 
-    seriesPoints.forEach((points, index) => {
-        plotMedianPoints(container, {xscale, yscale, modulo: index % 6, points: points});
+    Object.values(seriesPoints).forEach((series, index) => {
+        plotMedianPoints(container, {xscale, yscale, modulo: index % 6, points: series.values});
     });
 };
 
@@ -269,22 +269,21 @@ export const drawTimeSeriesGraph = function(elem, store, siteNo, agencyCode, sit
             xScale: getMainXScale('current'),
             yScale: getMainYScale,
             enableClip: () => true
-        })));
-    /*
+        })))
         .call(link(store, plotAllMedianPoints, createStructuredSelector({
             visible: isVisible('median'),
             xscale: getMainXScale('current'),
             yscale: getMainYScale,
-            seriesPoints: getCurrentVariableMedianStatPoints,
+            seriesPoints: getPrimaryMedianStatisticsData,
             enableClip: () => true
         })))
         .call(link(store, plotAllFloodLevelPoints, createStructuredSelector({
             visible: isWaterwatchVisible,
-            xscale: getBrushXScale('current'),
+            xscale: getBrushXScale,
             yscale: getMainYScale,
             seriesPoints: getWaterwatchFloodLevels
         })));
-*/
+
     if (showTooltip) {
         dataGroup.call(drawTooltipFocus, store);
     }

assets/src/scripts/monitoring-location/components/hydrograph/time-series-lines.js

@@ -27,7 +27,7 @@ const drawLineSegment = function(group, {segment, isCurrentMethod, dataKind, xSc
     lineElem
         .classed('line-segment', true)
         .classed(segment.class, true)
-        .classed(dataKind, true)
+        .classed(`ts-${dataKind}`, true)
         .classed('not-current-method', !isCurrentMethod);
 };
 
@@ -84,7 +84,7 @@ export const drawDataSegment = function(group, {segment, isCurrentMethod, dataKi
  * can be styled by using the class name.
  * @param {Boolean} visible
  * @param {String} currentMethodID
- * @param {Array of Obect} - Each object is suitable for passing to drawDataLine
+ * @param {Array of Object} - Each object is suitable for passing to drawDataLine
  * @param {String} timeRangeKind - 'current' or 'compare'
  * @param {Object} xScale - D3 scale for the x axis
  * @param {Object} yScale - D3 scale for the y axis

assets/src/scripts/monitoring-location/selectors/hydrograph-data-selector.js

@@ -88,9 +88,12 @@ export const getPrimaryMedianStatisticsData = createSelector(
 
         let result = {};
         Object.values(stats).forEach(statsForTsId => {
-            result[statsForTsId[0].ts_id] = {
+            const tsID = statsForTsId[0].ts_id;
+            result[tsID] = {
                 values: [],
-                description: statsForTsId[0].loc_web_ds
+                description: statsForTsId[0].loc_web_ds,
+                beginYear: statsForTsId[0].begin_yr,
+                endYear: statsForTsId[0].end_yr
             };
             let currentDateTime = DateTime.fromMillis(timeRange.start, {zone: config.locationTimeZone});
 
@@ -98,15 +101,17 @@ export const getPrimaryMedianStatisticsData = createSelector(
                 const thisStatsData = find(statsForTsId, (stat) => {
                     return stat.month_nu === currentDateTime.month && stat.day_nu === currentDateTime.day;
                 });
-                result.values.push({
-                    point: thisStatsData.p50_va,
-                    dateTime: currentDateTime
-                });
-                currentDateTime.plus({days: 1}).startOf();
+                if (thisStatsData) {
+                    result[tsID].values.push({
+                        point: thisStatsData.p50_va,
+                        dateTime: currentDateTime.toMillis()
+                    });
+                }
+                currentDateTime = currentDateTime.plus({days: 1}).startOf('day');
             }
-            result.values.push({
-                point: result.values[result.values.length - 1].point,
-                dateTime: DateTime.fromMillis(timeRange.end, {zone: config.locationTimeZone})
+            result[tsID].values.push({
+                point: result[tsID].values[result[tsID].values.length - 1].point,
+                dateTime: timeRange.end
             });
         });
         return result;

assets/src/scripts/monitoring-location/store/hydrograph-data.js

@@ -89,7 +89,7 @@ const addGroundwaterLevels = function(gwLevels) {
  * @param {String} parameterCode
  * @param {String} period - ISO 8601 duration
  * @param {String} startTime - ISO 8601 time string
- * @param {String} endTie - ISO 8601 time string
+ * @param {String} endTime - ISO 8601 time string
  * @return {Function} that returns a Promise
  */
 const retrieveIVData = function(siteno, dataKind, {parameterCode, period, startTime, endTime}) {
@@ -152,14 +152,14 @@ const retrieveIVData = function(siteno, dataKind, {parameterCode, period, startT
  * Asynchronous Redux action to fetch the IV data for siteno, parameterCode and startTime/endTime
  * @param {String} siteno
  * @param {String} parameterCode
- * @param {String} startTime - ISO 8601 time string
- * @param {String} endTime - ISO 8601 time string
+ * @param {String} startTime - Epoch time
+ * @param {String} endTime - EpochTime
  * @return {Function} that returns a Promise
  */
 export const retrievePriorYearIVData = function(siteno, {parameterCode, startTime, endTime}) {
     return function(dispatch, getState) {
-        const priorYearStartTime = DateTime.fromISO(startTime).minus({days: 365}).toMillis();
-        const priorYearEndTime = DateTime.fromISO(endTime).minus({days: 365}).toMillis();
+        const priorYearStartTime = DateTime.fromMillis(startTime).minus({days: 365}).toMillis();
+        const priorYearEndTime = DateTime.fromMillis(endTime).minus({days: 365}).toMillis();
         const currentPriorYearTimeRange = getState().hydrographData.compareTimeRange || null;
         if (currentPriorYearTimeRange && priorYearStartTime === currentPriorYearTimeRange.start &&
             priorYearEndTime === currentPriorYearTimeRange.end) {
@@ -191,18 +191,18 @@ export const retrieveMedianStatistics = function(siteno, parameterCode) {
             return fetchSiteStatistics({siteno: siteno, statType: 'median', params: [parameterToFetch]})
                 .then(stats => {
                     let resultStats = {};
-                    if (isCalculatedParameterCode) {
+                    if (parameterToFetch in stats) {
                         Object.keys(stats[parameterToFetch]).forEach(methodID => {
                             resultStats[methodID] = stats[parameterToFetch][methodID].map(stat => {
+                                const p50Va = isCalculatedParameterCode ? convertCelsiusToFahrenheit(stat.p50_va) : parseFloat(stat.p50_va);
                                 return {
                                     ...stat,
-                                    parameter_cd: parameterCode,
-                                    p50_va: convertCelsiusToFahrenheit(stat.p50_va)
+                                    month_nu: parseInt(stat.month_nu),
+                                    day_nu: parseInt(stat.day_nu),
+                                    p50_va: p50Va
                                 };
                             });
                         });
-                    } else {
-                        resultStats = stats[parameterToFetch];
                     }
                     dispatch(addMedianStatisticsData(resultStats));
                 });
@@ -303,8 +303,8 @@ export const retrieveHydrographData = function(siteno, {parameterCode, period, s
             fetchPromises.push(dispatch(
                 retrievePriorYearIVData(siteno, {
                     parameterCode: parameterCode,
-                    startTime: DateTime.fromMillis(timeRange.start).toISO(),
-                    endTime: DateTime.fromMillis(timeRange.end).toISO()
+                    startTime: timeRange.start,
+                    endTime: timeRange.end
                 })));
         }
         if (hasIVData && loadMedian) {