Skip to content
Snippets Groups Projects
Commit 02b6def0 authored by Soper, Samuel Alexander's avatar Soper, Samuel Alexander
Browse files

Moved graph controls into its own module.

parent 305abcdb
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
assets/src/scripts/components/hydrograph/graph-controls.js 0 → 100644
+ 81
− 0
View file @ 02b6def0
/**
* Hydrograph controls module.
*/
import { Actions } from '../../store';
import { dispatch, link } from '../../lib/redux';
import { audibleUI } from './audible';
import { getCurrentVariableMedianStatistics } from '../../selectors/median-statistics-selector';
import { isVisibleSelector, currentVariableTimeSeriesSelector } from './time-series';
/*
* Create the show last year toggle and the audible toggle for the time series graph.
* @param {Object} elem - D3 selection
*/
export const graphControls = function(elem) {
const graphControlDiv = elem.append('ul')
.classed('usa-fieldset', true)
.classed('usa-list--unstyled', true)
.classed('graph-controls-container', true);
graphControlDiv.append('li')
.call(audibleUI);
const compareControlDiv = graphControlDiv.append('li')
.classed('usa-checkbox', true);
compareControlDiv.append('input')
.classed('usa-checkbox__input', true)
.attr('type', 'checkbox')
.attr('id', 'last-year-checkbox')
.attr('aria-labelledby', 'last-year-label')
.attr('ga-on', 'click')
.attr('ga-event-category', 'TimeSeriesGraph')
.attr('ga-event-action', 'toggleCompare')
.on('click', dispatch(function() {
return Actions.toggleTimeSeries('compare', this.checked);
}))
// Disables the checkbox if no compare time series for the current variable
.call(link(function(elem, compareTimeSeries) {
const exists = Object.keys(compareTimeSeries) ?
Object.values(compareTimeSeries).filter(tsValues => tsValues.points.length).length > 0 : false;
elem.property('disabled', !exists);
}, currentVariableTimeSeriesSelector('compare')))
// Sets the state of the toggle
.call(link(function(elem, checked) {
elem.property('checked', checked);
}, isVisibleSelector('compare')));
compareControlDiv.append('label')
.classed('usa-checkbox__label', true)
.attr('id', 'last-year-label')
.attr('for', 'last-year-checkbox')
.text('Compare to last year');
const medianControlDiv = graphControlDiv.append('li')
.classed('usa-checkbox', true);
medianControlDiv.append('input')
.classed('usa-checkbox__input', true)
.attr('type', 'checkbox')
.attr('id', 'median-checkbox')
.attr('aria-labelledby', 'median-label')
.attr('ga-on', 'click')
.attr('ga-event-category', 'TimeSeriesGraph')
.attr('ga-event-action', 'toggleMedian')
.on('click', dispatch(function() {
return Actions.toggleTimeSeries('median', this.checked);
}))
// Disables the checkbox if no median data for the current variable
.call(link(function(elem, medianData) {
elem.property('disabled', medianData === null);
}, getCurrentVariableMedianStatistics))
// Sets the state of the toggle
.call(link(function(elem, checked) {
elem.property('checked', checked);
}, isVisibleSelector('median')));
medianControlDiv.append('label')
.classed('usa-checkbox__label', true)
.attr('id', 'median-label')
.attr('for', 'median-checkbox')
.text('Toggle median');
};
\ No newline at end of file
assets/src/scripts/components/hydrograph/index.js
+ 74
− 76
View file @ 02b6def0
......@@ -14,20 +14,18 @@ import { dispatch, link, provide } from '../../lib/redux';
import { getTimeSeriesCollectionIds, isLoadingTS } from '../../selectors/time-series-selector';
import { Actions } from '../../store';
import { callIf, mediaQuery } from '../../utils';
import { audibleUI } from './audible';
import { appendAxes, axesSelector } from './axes';
import { cursorSlider } from './cursor';
import { lineSegmentsByParmCdSelector, currentVariableLineSegmentsSelector, MASK_DESC, HASH_ID,
getCurrentVariableMedianStatPoints } from './drawing-data';
import { graphControls } from './graph-controls';
import { CIRCLE_RADIUS_SINGLE_PT, SPARK_LINE_DIM, layoutSelector } from './layout';
import { drawSimpleLegend, legendMarkerRowsSelector } from './legend';
import { getCurrentVariableMedianStatistics } from '../../selectors/median-statistics-selector';
import { drawMethodPicker } from './method-picker';
import { plotSeriesSelectTable, availableTimeSeriesSelector } from './parameters';
import { xScaleSelector, yScaleSelector, timeSeriesScalesByParmCdSelector } from './scales';
import { allTimeSeriesSelector, isVisibleSelector, titleSelector, descriptionSelector,
currentVariableTimeSeriesSelector, hasTimeSeriesWithPoints } from './time-series';
hasTimeSeriesWithPoints } from './time-series';
import { createTooltipFocus, createTooltipText } from './tooltip';
......@@ -307,78 +305,78 @@ export const timeSeriesGraph = function(elem) {
});
};
/*
* Create the show last year toggle and the audible toggle for the time series graph.
* @param {Object} elem - D3 selection
*/
const graphControls = function(elem) {
const graphControlDiv = elem.append('ul')
.classed('usa-fieldset', true)
.classed('usa-list--unstyled', true)
.classed('graph-controls-container', true);
graphControlDiv.append('li')
.call(audibleUI);
const compareControlDiv = graphControlDiv.append('li')
.classed('usa-checkbox', true);
compareControlDiv.append('input')
.classed('usa-checkbox__input', true)
.attr('type', 'checkbox')
.attr('id', 'last-year-checkbox')
.attr('aria-labelledby', 'last-year-label')
.attr('ga-on', 'click')
.attr('ga-event-category', 'TimeSeriesGraph')
.attr('ga-event-action', 'toggleCompare')
.on('click', dispatch(function() {
return Actions.toggleTimeSeries('compare', this.checked);
}))
// Disables the checkbox if no compare time series for the current variable
.call(link(function(elem, compareTimeSeries) {
const exists = Object.keys(compareTimeSeries) ?
Object.values(compareTimeSeries).filter(tsValues => tsValues.points.length).length > 0 : false;
elem.property('disabled', !exists);
}, currentVariableTimeSeriesSelector('compare')))
// Sets the state of the toggle
.call(link(function(elem, checked) {
elem.property('checked', checked);
}, isVisibleSelector('compare')));
compareControlDiv.append('label')
.classed('usa-checkbox__label', true)
.attr('id', 'last-year-label')
.attr('for', 'last-year-checkbox')
.text('Compare to last year');
const medianControlDiv = graphControlDiv.append('li')
.classed('usa-checkbox', true);
medianControlDiv.append('input')
.classed('usa-checkbox__input', true)
.attr('type', 'checkbox')
.attr('id', 'median-checkbox')
.attr('aria-labelledby', 'median-label')
.attr('ga-on', 'click')
.attr('ga-event-category', 'TimeSeriesGraph')
.attr('ga-event-action', 'toggleMedian')
.on('click', dispatch(function() {
return Actions.toggleTimeSeries('median', this.checked);
}))
// Disables the checkbox if no median data for the current variable
.call(link(function(elem, medianData) {
elem.property('disabled', medianData === null);
}, getCurrentVariableMedianStatistics))
// Sets the state of the toggle
.call(link(function(elem, checked) {
elem.property('checked', checked);
}, isVisibleSelector('median')));
medianControlDiv.append('label')
.classed('usa-checkbox__label', true)
.attr('id', 'median-label')
.attr('for', 'median-checkbox')
.text('Toggle median');
};
// /*
// * Create the show last year toggle and the audible toggle for the time series graph.
// * @param {Object} elem - D3 selection
// */
// const graphControls = function(elem) {
// const graphControlDiv = elem.append('ul')
// .classed('usa-fieldset', true)
// .classed('usa-list--unstyled', true)
// .classed('graph-controls-container', true);
//
// graphControlDiv.append('li')
// .call(audibleUI);
//
// const compareControlDiv = graphControlDiv.append('li')
// .classed('usa-checkbox', true);
//
// compareControlDiv.append('input')
// .classed('usa-checkbox__input', true)
// .attr('type', 'checkbox')
// .attr('id', 'last-year-checkbox')
// .attr('aria-labelledby', 'last-year-label')
// .attr('ga-on', 'click')
// .attr('ga-event-category', 'TimeSeriesGraph')
// .attr('ga-event-action', 'toggleCompare')
// .on('click', dispatch(function() {
// return Actions.toggleTimeSeries('compare', this.checked);
// }))
// // Disables the checkbox if no compare time series for the current variable
// .call(link(function(elem, compareTimeSeries) {
// const exists = Object.keys(compareTimeSeries) ?
// Object.values(compareTimeSeries).filter(tsValues => tsValues.points.length).length > 0 : false;
// elem.property('disabled', !exists);
// }, currentVariableTimeSeriesSelector('compare')))
// // Sets the state of the toggle
// .call(link(function(elem, checked) {
// elem.property('checked', checked);
// }, isVisibleSelector('compare')));
// compareControlDiv.append('label')
// .classed('usa-checkbox__label', true)
// .attr('id', 'last-year-label')
// .attr('for', 'last-year-checkbox')
// .text('Compare to last year');
//
// const medianControlDiv = graphControlDiv.append('li')
// .classed('usa-checkbox', true);
//
// medianControlDiv.append('input')
// .classed('usa-checkbox__input', true)
// .attr('type', 'checkbox')
// .attr('id', 'median-checkbox')
// .attr('aria-labelledby', 'median-label')
// .attr('ga-on', 'click')
// .attr('ga-event-category', 'TimeSeriesGraph')
// .attr('ga-event-action', 'toggleMedian')
// .on('click', dispatch(function() {
// return Actions.toggleTimeSeries('median', this.checked);
// }))
// // Disables the checkbox if no median data for the current variable
// .call(link(function(elem, medianData) {
// elem.property('disabled', medianData === null);
// }, getCurrentVariableMedianStatistics))
// // Sets the state of the toggle
// .call(link(function(elem, checked) {
// elem.property('checked', checked);
// }, isVisibleSelector('median')));
//
// medianControlDiv.append('label')
// .classed('usa-checkbox__label', true)
// .attr('id', 'median-label')
// .attr('for', 'median-checkbox')
// .text('Toggle median');
// };
/**
* Modify styling to hide or display the elem.
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment