graph-controls.js

import {Actions} from 'ml/store/daily-value-time-series';
import {
    getAvailableGWDVTimeSeries,
    getAvailableGWDVTimeSeriesIdsForParameterCode
} from 'ml/selectors/daily-value-time-series-selector';

/*
 * Draw the parameter code toggle for the daily values time series graph.
 * @param {Object} elem - D3 selection
 * @param {Object} store - Redux Store
 */
const drawDVTimeSeriesSelection = function(container, store, monitoringLocationId, initialParameterCode) {
    const availableTimeSeries = getAvailableGWDVTimeSeries(store.getState());
    const availableParameterCodes = new Set(availableTimeSeries.map(ts => ts.parameterCode));

    if (availableParameterCodes.size > 1) {
        container.append('div').append('legend')
            .attr('class', 'usa-legend')
            .text('Parameter codes:');

        Array.from(availableParameterCodes).forEach((parameterCode) => {
            const inputId = `code-${parameterCode}-radio`;
            const inputContainer = container.append('div')
                .attr('class', 'usa-radio');
            inputContainer.append('input')
                .attr('class', 'usa-radio__input')
                .attr('id', inputId)
                .attr('type', 'radio')
                .attr('name', 'parameter-code-selector')
                .attr('value', parameterCode)
                .attr('checked', initialParameterCode === parameterCode ? true : null)
                .on('click', function() {
                    const timeSeries = getAvailableGWDVTimeSeriesIdsForParameterCode(parameterCode)(store.getState());
                    store.dispatch(Actions.retrieveDVTimeSeries(monitoringLocationId, timeSeries.min));
                    store.dispatch(Actions.retrieveDVTimeSeries(monitoringLocationId, timeSeries.mean));
                    store.dispatch(Actions.retrieveDVTimeSeries(monitoringLocationId, timeSeries.max));
                    store.dispatch(Actions.setCurrentDVTimeSeriesIds(timeSeries.min, timeSeries.mean, timeSeries.max));
                });
            inputContainer.append('label')
                .attr('class', 'usa-radio__label')
                .attr('for', inputId)
                .text(parameterCode);
        });
    }
};

/*
 * Create the parameter code toggle for the daily values time series graph.
 * @param {Object} elem - D3 selection
 * @param {Object} store - Redux Store
 * @param {String} monitoringLocationId - Generally of form agency_cd-siteno
 */
export const drawGraphControls = function(elem, store, monitoringLocationId, initialParameterCode) {
    elem.append('div')
        .attr('id', 'dv-parameter-code-toggle')
        .classed('usa-fieldset', true)
        .call(drawDVTimeSeriesSelection, store, monitoringLocationId, initialParameterCode);
};