cleaning

assets/src/scripts/d3-rendering/axes.js

@@ -91,15 +91,19 @@ export const appendSecondaryYAxis = function(elem, {yAxis, layout, yTitle}) {
  * @param {Object} elem - svg or g D3 selection
  * @param {Object}
  *      @prop {Object} xAxis - D3 axis object - assumed to be bottom oriented
- *      @prop {Object} yAxis - D3 axis object - assumed to be left oriented
+ *      @prop {Object} primaryYAxis - D3 axis object - assumed to be left oriented
  *      @prop {Object} secondaryYAxis - D3 axis object - assumed to be right oriented
  *      @prop {Object} layout - contains properties for width, height, and margin for enclosing svg.
  *      @prop {String} yTitle - label for the y-axis
  *      @prop {String} secondaryYTitle - label for the secondary y-axis.
  */
-export const appendAxes = function(elem, {xAxis, yAxis, secondaryYAxis, layout, yTitle, secondaryYTitle, secondaryParameter}) {
+export const appendAxes = function(elem, {xAxis, primaryYAxis, secondaryYAxis, layout, primaryYTitle, secondaryYTitle, secondaryParameter}) {
     elem.call(appendXAxis, {xAxis, layout})
-        .call(appendYAxis, {yAxis, layout, yTitle});
+        .call(appendYAxis, {
+            yAxis: primaryYAxis,
+            layout: layout,
+            yTitle: primaryYTitle
+        });
     if (secondaryParameter) {
         elem.call(appendSecondaryYAxis, {
             yAxis: secondaryYAxis,

assets/src/scripts/monitoring-location/components/hydrograph/selectors/axes.js

@@ -7,7 +7,7 @@ import config from 'ui/config';
 import {generateTimeTicks} from 'd3render/tick-marks';
 import {getIVParameter} from 'ml/selectors/hydrograph-data-selector';
 
-import {getSecondaryYTickDetails, getYTickDetails} from './domain';
+import {getSecondaryYAxisTickDetails, getPrimaryYAxisTickDetails} from './domain';
 import {getLayout} from './layout';
 import {getXScale, getBrushXScale, getYScale, getSecondaryYScale} from './scales';
 import {getPrimaryParameter} from './time-series-data';
@@ -27,20 +27,20 @@ const createXAxis = function(xScale) {
 /**
  * Create an x and y axis for hydrograph
  * @param {Object} xScale      D3 Scale object for the x-axis
- * @param {Object} yScale      D3 Scale object for the y-axis
- * @param {Object} yTickDetails - Object which has information about tick values and format.
+ * @param {Object} primaryYScale      D3 Scale object for the y-axis
+ * @param {Object} primaryTickDetails - Object which has information about tick values and format.
  * @param {Number} yTickSize   Size of inner ticks for the y-axis
  * @return {Object} {xAxis, yAxis} - D3 Axis
  */
-const createAxes = function(xScale, yScale, secondaryYScale, yTickDetails, secondaryYTickDetails, yTickSize) {
+const createAxes = function(xScale, primaryYScale, secondaryYScale, primaryTickDetails, secondaryYTickDetails, yTickSize) {
     // Create x-axis
     const xAxis = createXAxis(xScale);
 
     // Create y-axis
-    const yAxis = axisLeft()
-        .scale(yScale)
-        .tickValues(yTickDetails.tickValues)
-        .tickFormat(yTickDetails.tickFormat)
+    const primaryYAxis = axisLeft()
+        .scale(primaryYScale)
+        .tickValues(primaryTickDetails.tickValues)
+        .tickFormat(primaryTickDetails.tickFormat)
         .tickSizeInner(yTickSize)
         .tickPadding(3)
         .tickSizeOuter(0);
@@ -53,7 +53,7 @@ const createAxes = function(xScale, yScale, secondaryYScale, yTickDetails, secon
         .tickPadding(3)
         .tickSizeOuter(0);
 
-    return {xAxis, yAxis, secondaryYAxis};
+    return {xAxis, primaryYAxis, secondaryYAxis};
 };
 
 /**
@@ -71,23 +71,23 @@ export const getAxes = memoize(graphKind => createSelector(
     getXScale(graphKind, 'current'),
     getYScale(graphKind),
     getSecondaryYScale(graphKind),
-    getYTickDetails,
-    getSecondaryYTickDetails,
+    getPrimaryYAxisTickDetails,
+    getSecondaryYAxisTickDetails,
     getLayout(graphKind),
     getPrimaryParameter,
     getIVParameter('secondary'),
-    (xScale, yScale, secondaryYScale, yTickDetails, secondaryYTickDetails, layout, parameter, secondaryParameter) => {
+    (xScale, primaryYScale, secondaryYScale, primaryYTickDetails, secondaryYTickDetails, layout, primaryParameter, secondaryParameter) => {
         return {
             ...createAxes(
                 xScale,
-                yScale,
+                primaryYScale,
                 secondaryYScale,
-                yTickDetails,
+                primaryYTickDetails,
                 secondaryYTickDetails,
                 -layout.width + layout.margin.right
             ),
             layout: layout,
-            yTitle: parameter ? parameter.unit : '',
+            primaryYTitle: primaryParameter ? primaryParameter.unit : '',
             secondaryParameter: secondaryParameter ? secondaryParameter.parameterCode : '',
             secondaryYTitle: secondaryParameter ? secondaryParameter.unit : ''
         };

assets/src/scripts/monitoring-location/components/hydrograph/selectors/domain.js

 import {ticks} from 'd3-array';
 import {format} from 'd3-format';
 import {createSelector} from 'reselect';
+import memoize from 'fast-memoize';
 
 import config from 'ui/config';
 import {mediaQuery} from 'ui/utils';
@@ -228,14 +229,22 @@ export const getSecondaryValueRange = createSelector(
 
 
 /*
+ * Redux selector for hydrograph tick marks
+ * @prop {String} tickKind - tick marks for the primary or secondary y-axis will be either 'primary' or 'secondary'
  * Returns a Redux selector function that returns an Object with two properties:
  *      @prop tickValues {Array of Number}
  *      @prop tickFormat {Array of String} - formatted tickValues
  */
-export const getYTickDetails = createSelector(
+const getYTickDetails = memoize(tickKind => createSelector(
     getPrimaryValueRange,
     getPrimaryParameter,
-    (yDomain, parameter) => {
+    getSecondaryValueRange,
+    getIVParameter('secondary'),
+    (primaryDomain, primaryParameter, secondaryYDomain, SecondaryParameter) => {
+
+        const parameter = tickKind === 'primary' ? primaryParameter : SecondaryParameter;
+        const yDomain = tickKind === 'primary' ? primaryDomain : secondaryYDomain;
+
         let tickValues = ticks(yDomain[0], yDomain[1], Y_TICK_COUNT);
 
         // When there are too many log scale ticks they will overlap--reduce the number in proportion to the number of ticks
@@ -268,42 +277,8 @@ export const getYTickDetails = createSelector(
             tickFormat: format(tickFormat)
         };
     }
-);
+));
 
-export const getSecondaryYTickDetails = createSelector(
-    getSecondaryValueRange,
-    getIVParameter('secondary'),
-    (secondaryYDomain, parameter) => {
-        let tickValues = ticks(secondaryYDomain[0], secondaryYDomain[1], Y_TICK_COUNT);
+export const getSecondaryYAxisTickDetails = getYTickDetails('secondary');
+export const getPrimaryYAxisTickDetails = getYTickDetails('primary');
 
-        // When there are too many log scale ticks they will overlap--reduce the number in proportion to the number of ticks
-        // For example, if there are 37 tick marks, every 4 ticks will be used... if there are 31 tick marks, every 3 ticks
-        // will be used. Screens smaller than the USWDS defined medium screen will use fewer tick marks than larger screens.
-        if (useSymlog(parameter)) {
-            // add additional ticks and labels to log scales as needed
-            tickValues = getFullArrayOfAdditionalTickMarks(tickValues, secondaryYDomain);
-            // remove ticks if there are too many of them
-            let lengthLimit = 20;
-            let divisor = 10;
-            if (!mediaQuery(config.USWDS_MEDIUM_SCREEN)) {
-                lengthLimit = 10;
-                divisor = 5;
-            }
-            if (tickValues.length > lengthLimit) {
-                tickValues = tickValues
-                    .sort((a, b) => a - b)
-                    .filter((_, index) => {
-                        return !(index % Math.round(tickValues.length / divisor));
-                    });
-            }
-        }
-
-        // If all ticks are integers, don't display right of the decimal place.
-        // Otherwise, format with two decimal points.
-        const tickFormat = tickValues.filter(t => !Number.isInteger(t)).length ? '.2f' : 'd';
-        return {
-            tickValues: tickValues,
-            tickFormat: format(tickFormat)
-        };
-    }
-);

assets/src/scripts/monitoring-location/components/hydrograph/selectors/layout.js

@@ -7,7 +7,7 @@ import {createSelector} from 'reselect';
 import config from 'ui/config';
 import {mediaQuery} from 'ui/utils';
 
-import {getYTickDetails} from './domain';
+import {getPrimaryYAxisTickDetails} from './domain';
 import {getSelectedSecondaryParameterCode} from 'ml/selectors/hydrograph-state-selector';
 
 export const ASPECT_RATIO = 1 / 2;
@@ -50,7 +50,7 @@ export const SPARK_LINE_DIM = {
 export const getLayout = memoize(kind => createSelector(
     state => state.ui.width,
     state => state.ui.windowWidth,
-    getYTickDetails,
+    getPrimaryYAxisTickDetails,
     getSelectedSecondaryParameterCode,
     (width, windowWidth, yTickDetails, secondaryParameterCode) => {
         const isDesktop = mediaQuery(config.USWDS_SITE_MAX_WIDTH);