From e19bff34b0e062df1837797ddbe10c842d0472fb Mon Sep 17 00:00:00 2001
From: Andrew Yan <ayan@usgs.gov>
Date: Thu, 15 Mar 2018 13:16:52 -0500
Subject: [PATCH] restructure to avoid necessary indentation
---
.../components/hydrograph/parameters.js | 220 +++++++++---------
1 file changed, 111 insertions(+), 109 deletions(-)
diff --git a/assets/src/scripts/components/hydrograph/parameters.js b/assets/src/scripts/components/hydrograph/parameters.js
index a71d2db3e..c25cd4327 100644
--- a/assets/src/scripts/components/hydrograph/parameters.js
+++ b/assets/src/scripts/components/hydrograph/parameters.js
@@ -84,120 +84,122 @@ export const addSparkLine = function(svgSelection, {seriesLineSegments, scales})
export const plotSeriesSelectTable = function (elem, {availableTimeseries, lineSegmentsByParmCd, timeSeriesScalesByParmCd, layout}) {
elem.select('#select-timeseries').remove();
+ if (!availableTimeseries.length) {
+ return;
+ }
+
// only bother to create the table if there are timeseries available
- if (availableTimeseries.length > 0) {
- const screenSizeCheck = layout.windowWidth <= SMALL_SCREEN_WIDTH;
- let columnHeaders;
- if (screenSizeCheck) {
- columnHeaders = ['Parameter Code', 'Description', 'Preview'];
- } else {
- columnHeaders = ['Parameter Code', 'Description', 'Now', 'Last Year', 'Median', 'Preview'];
- }
- const table = elem
- .append('table')
- .attr('id', 'select-timeseries')
- .classed('usa-table-borderless', true);
-
- table.append('caption').text('Select a timeseries');
-
- table.append('thead')
- .append('tr')
- .selectAll('th')
- .data(columnHeaders)
- .enter().append('th')
- .attr('scope', 'col')
- .text(d => d);
-
- table.append('tbody')
- .selectAll('tr')
- .data(availableTimeseries)
- .enter().append('tr')
- .attr('ga-on', 'click')
- .attr('ga-event-category', 'TimeseriesGraph')
- .attr('ga-event-action', 'selectTimeSeries')
- .classed('selected', parm => parm[1].selected)
- .on('click', dispatch(function (parm) {
- if (!parm[1].selected) {
- return Actions.setCurrentParameterCode(parm[0], parm[1].variableID);
- }
- }))
- .call(tr => {
- let parmCdCol = tr.append('td')
- .attr('scope', 'row');
- parmCdCol.append('span')
- .text(parm => parm[0]);
- parmCdCol.append('div')
- .attr('class', 'tooltip-item parameter-tooltip');
+ const screenSizeCheck = layout.windowWidth <= SMALL_SCREEN_WIDTH;
+ let columnHeaders;
+ if (screenSizeCheck) {
+ columnHeaders = ['Parameter Code', 'Description', 'Preview'];
+ } else {
+ columnHeaders = ['Parameter Code', 'Description', 'Now', 'Last Year', 'Median', 'Preview'];
+ }
+ const table = elem
+ .append('table')
+ .attr('id', 'select-timeseries')
+ .classed('usa-table-borderless', true);
+
+ table.append('caption').text('Select a timeseries');
+
+ table.append('thead')
+ .append('tr')
+ .selectAll('th')
+ .data(columnHeaders)
+ .enter().append('th')
+ .attr('scope', 'col')
+ .text(d => d);
+
+ table.append('tbody')
+ .selectAll('tr')
+ .data(availableTimeseries)
+ .enter().append('tr')
+ .attr('ga-on', 'click')
+ .attr('ga-event-category', 'TimeseriesGraph')
+ .attr('ga-event-action', 'selectTimeSeries')
+ .classed('selected', parm => parm[1].selected)
+ .on('click', dispatch(function (parm) {
+ if (!parm[1].selected) {
+ return Actions.setCurrentParameterCode(parm[0], parm[1].variableID);
+ }
+ }))
+ .call(tr => {
+ let parmCdCol = tr.append('td')
+ .attr('scope', 'row');
+ parmCdCol.append('span')
+ .text(parm => parm[0]);
+ parmCdCol.append('div')
+ .attr('class', 'tooltip-item parameter-tooltip');
+ tr.append('td')
+ .text(parm => parm[1].description);
+ // if screen size is medium/large, place "Now", "Previous Year", and "Median Data" in the table
+ // under the appropriate column headers
+ if (!screenSizeCheck) {
tr.append('td')
- .text(parm => parm[1].description);
- // if screen size is medium/large, place "Now", "Previous Year", and "Median Data" in the table
- // under the appropriate column headers
- if (!screenSizeCheck) {
- tr.append('td')
- .html(parm => {
- const subScript = parm[1].currentTimeseriesCount > 1 ? `<sub>${parm[1].currentTimeseriesCount}</sub>` : '';
- return parm[1].currentTimeseriesCount ? `<i class="fa fa-check" aria-label="Current year data available"></i>${subScript}` : '';
- });
- tr.append('td')
- .html(parm => {
- const subScript = parm[1].compareTimeseriesCount > 1 ? `<sub>${parm[1].compareTimeseriesCount}</sub>` : '';
- return parm[1].compareTimeseriesCount ? `<i class="fa fa-check" aria-label="Previous year data available"></i>${subScript}` : '';
- });
- tr.append('td')
- .html(parm => {
- const subScript = parm[1].medianTimeseriesCount > 1 ? `<sub>${parm[1].medianTimeseriesCount}</sub>` : '';
- return parm[1].medianTimeseriesCount ? `<i class="fa fa-check" aria-label="Median data available"></i>${subScript}` : '';
- });
- }
+ .html(parm => {
+ const subScript = parm[1].currentTimeseriesCount > 1 ? `<sub>${parm[1].currentTimeseriesCount}</sub>` : '';
+ return parm[1].currentTimeseriesCount ? `<i class="fa fa-check" aria-label="Current year data available"></i>${subScript}` : '';
+ });
tr.append('td')
- .append('svg')
- .attr('width', SPARK_LINE_DIM.width.toString())
- .attr('height', SPARK_LINE_DIM.height.toString());
- });
-
- // seems to be more straight-forward to access an element's joined
- // data by iterating over a selection...
-
- // if screen size is small, place "Now", "Previous Year", and "Median Data" in a tooltip
- if (screenSizeCheck) {
- table.selectAll('div.tooltip-item').each(function() {
- let selection = select(this);
- selection.append('sup')
- .append('i')
- .attr('class', 'fa fa-info-circle');
- let tooltipContent = selection.append('div').attr('class', 'tooltip');
- let tooltipTable = tooltipContent.append('table')
- .attr('class', 'tooltip-table');
- tooltipTable.append('caption').text('Available Data');
- tooltipTable.append('thead')
- .append('tr')
- .selectAll('th')
- .data(['Now', 'Last Year', 'Median'])
- .enter()
- .append('th')
- .attr('scope', 'col')
- .text(d => d);
-
- let tableRow = tooltipTable.append('tr');
- tableRow.append('td')
- .html(d => d[1].currentTimeseriesCount ? '<i class="fa fa-check" aria-label="Current year data available"></i>' : '');
- tableRow.append('td')
- .html(d => d[1].compareTimeseriesCount ? '<i class="fa fa-check" aria-label="Previous year data available"></i>' : '');
- tableRow.append('td')
- .html(d => d[1].medianTimeseriesCount ? '<i class="fa fa-check" aria-label="Median data available"></i>' : '');
-
+ .html(parm => {
+ const subScript = parm[1].compareTimeseriesCount > 1 ? `<sub>${parm[1].compareTimeseriesCount}</sub>` : '';
+ return parm[1].compareTimeseriesCount ? `<i class="fa fa-check" aria-label="Previous year data available"></i>${subScript}` : '';
+ });
+ tr.append('td')
+ .html(parm => {
+ const subScript = parm[1].medianTimeseriesCount > 1 ? `<sub>${parm[1].medianTimeseriesCount}</sub>` : '';
+ return parm[1].medianTimeseriesCount ? `<i class="fa fa-check" aria-label="Median data available"></i>${subScript}` : '';
+ });
+ }
+ tr.append('td')
+ .append('svg')
+ .attr('width', SPARK_LINE_DIM.width.toString())
+ .attr('height', SPARK_LINE_DIM.height.toString());
});
- }
- table.selectAll('tbody svg').each(function(d) {
+
+ // seems to be more straight-forward to access an element's joined
+ // data by iterating over a selection...
+
+ // if screen size is small, place "Now", "Previous Year", and "Median Data" in a tooltip
+ if (screenSizeCheck) {
+ table.selectAll('div.tooltip-item').each(function() {
let selection = select(this);
- const parmCd = d[0];
- const lineSegments = lineSegmentsByParmCd[parmCd] ? lineSegmentsByParmCd[parmCd] : [];
- for (const seriesLineSegments of lineSegments) {
- selection.call(addSparkLine, {
- seriesLineSegments: seriesLineSegments,
- scales: timeSeriesScalesByParmCd[parmCd]
- });
- }
+ selection.append('sup')
+ .append('i')
+ .attr('class', 'fa fa-info-circle');
+ let tooltipContent = selection.append('div').attr('class', 'tooltip');
+ let tooltipTable = tooltipContent.append('table')
+ .attr('class', 'tooltip-table');
+ tooltipTable.append('caption').text('Available Data');
+ tooltipTable.append('thead')
+ .append('tr')
+ .selectAll('th')
+ .data(['Now', 'Last Year', 'Median'])
+ .enter()
+ .append('th')
+ .attr('scope', 'col')
+ .text(d => d);
+
+ let tableRow = tooltipTable.append('tr');
+ tableRow.append('td')
+ .html(d => d[1].currentTimeseriesCount ? '<i class="fa fa-check" aria-label="Current year data available"></i>' : '');
+ tableRow.append('td')
+ .html(d => d[1].compareTimeseriesCount ? '<i class="fa fa-check" aria-label="Previous year data available"></i>' : '');
+ tableRow.append('td')
+ .html(d => d[1].medianTimeseriesCount ? '<i class="fa fa-check" aria-label="Median data available"></i>' : '');
+
});
}
+ table.selectAll('tbody svg').each(function(d) {
+ let selection = select(this);
+ const parmCd = d[0];
+ const lineSegments = lineSegmentsByParmCd[parmCd] ? lineSegmentsByParmCd[parmCd] : [];
+ for (const seriesLineSegments of lineSegments) {
+ selection.call(addSparkLine, {
+ seriesLineSegments: seriesLineSegments,
+ scales: timeSeriesScalesByParmCd[parmCd]
+ });
+ }
+ });
};
--
GitLab