Implementing stats

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

@@ -5,6 +5,10 @@ import {select} from 'd3-selection';
 
 import config from 'ui/config.js';
 
+import {link} from 'ui/lib/d3-redux';
+
+import {createStructuredSelector} from 'reselect';
+
 import {drawInfoAlert} from 'd3render/alerts';
 
 import {renderTimeSeriesUrlParams} from 'ml/url-params';
@@ -128,7 +132,6 @@ export const attachToNode = function(store,
         legendControlsContainer.call(drawGraphControls, store, siteno);
         nodeElem.select('.select-time-series-container')
             .call(drawSelectionList, store, siteno, agencyCd);
-        nodeElem.select('#stats-container').call(drawStatsTable, store, siteno);
     }
 
     // Once hydrograph data has been fetched, render the time series data.
@@ -153,6 +156,11 @@ export const attachToNode = function(store,
                 .call(drawDataTables, store, siteno, agencyCd);
 
             renderTimeSeriesUrlParams(store);
+            nodeElem.select('#stats-container')
+                .call(link(store, drawStatsTable, createStructuredSelector({
+                    state: (state) => state,
+                    siteno: () => siteno
+                })));
         }
     })
     .catch(reason => {

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

 import {select} from 'd3-selection';
 
-import config from 'ui/config';
-import {link} from 'ui/lib/d3-redux';
-import {createStructuredSelector} from 'reselect';
-import {getIVTableData} from './selectors/iv-data';
 import {fetchSitesStatisticsRDB} from 'ui/web-services/statistics-data';
 import {getSelectedParameterCode} from 'ml/selectors/hydrograph-state-selector';
 import {parseRDB} from 'ui/utils';
 
 
-var COLUMN_HEADINGS = ['Latest Value', 'Lowest Value', '25th Percentile', 'Median', '75th Percentile', 'Mean', 'Highest Value'];
-var DATA_HEADINGS = ['min_va', 'p25_va', 'p50_va', 'p75_va', 'mean_va', 'max_va'];
+const COLUMN_HEADINGS = ['Latest Value', 'Lowest Value', '25th Percentile', 'Median', '75th Percentile', 'Mean', 'Highest Value'];
+const DATA_HEADINGS = ['min_va', 'p25_va', 'p50_va', 'p75_va', 'mean_va', 'max_va'];
 
 
 const drawTableBody = function(table, data) {
@@ -18,36 +14,38 @@ const drawTableBody = function(table, data) {
     const row = table.append('tr');
     for (let i=0; i < COLUMN_HEADINGS.length; i++) {
         if (i === 0) {
-            //TODO: get latest value
             row.append('th')
-                .attr('data-label', i)
+                .attr('data-label', COLUMN_HEADINGS[i])
                 .attr('scope', 'row')
-                .text();
+                .text(data[0]);
         } else {
             row.append('th')
-                .attr('data-label', i)
+                .attr('data-label', COLUMN_HEADINGS[i])
                 .attr('scope', 'row')
-                .text(data[DATA_HEADINGS[i-1]]);
+                .text(data[1][DATA_HEADINGS[i-1]]);
         }
     }
 }
 
-const drawStats = function(elem, {currentData}) {
-    COLUMN_HEADINGS[1] += ` (${currentData['min_va_yr']})`
-    COLUMN_HEADINGS[COLUMN_HEADINGS.length-1] += ` (${currentData['max_va_yr']})`
-    elem.select('#stats-table').remove();
+const drawStats = function(elem, currentData, name) {
+    let myHeadings = COLUMN_HEADINGS.slice(0);
+    myHeadings[1] = `${COLUMN_HEADINGS[1]} (${currentData[1]['min_va_yr']})`;
+    myHeadings[myHeadings.length-1] = `${COLUMN_HEADINGS[COLUMN_HEADINGS.length-1]} (${currentData[1]['max_va_yr']})`;
     const tableContainer = elem.append('div')
         .attr('id', 'stats-table');
 
     const table = tableContainer.append('table')
         .classed('usa-table', true)
-        .classed('usa-table--stacked', true)
-        .classed('usa-table--borderless', true);
+        .classed('usa-table--stacked', true);
+        // .classed('usa-table--borderless', true);
 
+    table.append('caption')
+        .text(`Daily ${name.replace('&#179;','³')} for ${new Date().toDateString()} based on ${currentData[1]['count_nu']} 
+            ${currentData[1]['count_nu'] == 1 ? 'year' : 'years'} of data.`);
     table.append('thead')
         .append('tr')
             .selectAll('th')
-            .data(COLUMN_HEADINGS)
+            .data(myHeadings)
             .enter()
             .append('th')
                 .attr('scope', 'col')
@@ -55,19 +53,40 @@ const drawStats = function(elem, {currentData}) {
     table.call(drawTableBody, currentData);
 }
 
-export const drawStatsTable = function(elem, store, siteno) {
-    const state = store.getState();
+export const drawStatsTable = function(elem, {state, siteno}) {
+    var currentParameterCode = getSelectedParameterCode(state);
     fetchSitesStatisticsRDB({siteno, 'statType':'ALL',
-        'parameterCode': getSelectedParameterCode(state)}).then((result) => {
+        'parameterCode': currentParameterCode}).then((result) => {
             var statsData = parseRDB(result);
-            
-            function daysIntoYear(date){
-                return (Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) - Date.UTC(date.getFullYear(), 0, 0)) / 24 / 60 / 60 / 1000;
+            if (!statsData.length) {
+                select('#stats-accordion')
+                    .attr('hidden', '');
+                return;
             }
+
+            select('#stats-accordion')
+                .attr('hidden', null);
+
+            function dayIndex(date){
+                let isLeapYear = function(y) {return !(y & 3 || !(y % 25) && y & 15);};
+                let dayInYear = (Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) - Date.UTC(date.getFullYear(), 0, 0))
+                    / 24 / 60 / 60 / 1000;
+                // There is a decicated index in stats array for Feb 29
+                if (!isLeapYear(date.getFullYear()) && date.getMonth() > 2) {
+                    return dayInYear + 1;
+                }
+                return dayInYear;
+            }
+            if (!('primaryIVData' in state.hydrographData)) {
+                return;
+            }
+            let currentIVDataValues = state.hydrographData.primaryIVData.values;
+            let currentIVDataArray = currentIVDataValues[Object.keys(currentIVDataValues)[0]].points;
+            let latestValue = currentIVDataArray[currentIVDataArray.length-1].value;
+            let parameterName = state.hydrographData.primaryIVData.parameter.name;
+            elem.select('#daily-stats-container').remove();
             elem.append('div')
                 .attr('id', 'daily-stats-container')
-                .call(link(store, drawStats, createStructuredSelector({
-                    currentData: () => statsData[daysIntoYear(new Date)]
-                })));
+                .call(drawStats, [latestValue, statsData[dayIndex(new Date)]], parameterName);
         });
 }
\ No newline at end of file

wdfn-server/waterdata/templates/macros/components.html

@@ -27,7 +27,7 @@
             </div>
         {% endif %}
         <div class="select-time-series-container"></div>
-        <div class="wdfn-accordion usa-accordion">
+        <div id="stats-accordion" class="wdfn-accordion usa-accordion">
             <h2 class="usa-accordion__heading">
                 <button class="usa-accordion__button"
                         aria-expanded="false" aria-controls="stats-container"