statistics.js

import {select} from 'd3-selection';

import {fetchSitesStatisticsRDB} from 'ui/web-services/statistics-data';
import {getSelectedParameterCode} from 'ml/selectors/hydrograph-state-selector';
import {parseRDB} from 'ui/utils';


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) {
    table.append('tbody')
    const row = table.append('tr');
    for (let i=0; i < COLUMN_HEADINGS.length; i++) {
        if (i === 0) {
            row.append('th')
                .attr('data-label', COLUMN_HEADINGS[i])
                .attr('scope', 'row')
                .text(data[0]);
        } else {
            row.append('th')
                .attr('data-label', COLUMN_HEADINGS[i])
                .attr('scope', 'row')
                .text(data[1][DATA_HEADINGS[i-1]]);
        }
    }
}

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

    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(myHeadings)
            .enter()
            .append('th')
                .attr('scope', 'col')
                .text(col => col);
    table.call(drawTableBody, currentData);
}

export const drawStatsTable = function(elem, {state, siteno}) {
    var currentParameterCode = getSelectedParameterCode(state);
    fetchSitesStatisticsRDB({siteno, 'statType':'ALL',
        'parameterCode': currentParameterCode}).then((result) => {
            var statsData = parseRDB(result);
            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(drawStats, [latestValue, statsData[dayIndex(new Date)]], parameterName);
        });
}