refactor and fix tests

assets/src/scripts/monitoring-location/components/hydrograph/discrete-data.js

@@ -3,38 +3,16 @@ import {defineCircleMarker, defineTextOnlyMarker} from 'd3render/markers';
 const GW_LEVEL_RADIUS = 7;
 const GW_LEVEL_CLASS = 'gw-level-point';
 
-const GROUNDWATER_LINE_CLASSES = {
-    'APPROVED': {label: 'Approved', class: 'approved'},
-    'PROVISIONAL': {label: 'Provisional', class: 'provisional'},
-    'REVISED': {label: 'Revised', class: 'revised'},
-    'UNKNOWN_CODE': {label: '', class: 'unknown-code'}
-};
-
-/*
-* Helper function that takes a raw approval code and matches it to a more detail object
-* @param {Object} groundwaterDataPoints -  details about a single groundwater data point
-* @return {Object} Details that expand on the meaning of the approval code.
-*/
-export const getDetailsForApprovalCode = function(groundwaterPointData) {
-    const groundwaterLineClass = {
-        'A': GROUNDWATER_LINE_CLASSES.APPROVED,
-        'R': GROUNDWATER_LINE_CLASSES.REVISED,
-        'P': GROUNDWATER_LINE_CLASSES.PROVISIONAL,
-        'default': GROUNDWATER_LINE_CLASSES.UNKNOWN_CODE
-    };
-
-    return groundwaterLineClass[groundwaterPointData['qualifiers'][0] ] || groundwaterLineClass['default'];
-};
 
 /*
  * Render the ground water level symbols on the svg in their own group. If the group exists, remove
  * it before rendering again.
  * @param {D3 elem} svg (could also be a group)
- * @param {Array of Object} levels - each object, should have dateTime and value properties
+ * @param {Array of Object} points - each object, should have dateTime and value properties
  * @param {D3 scale} xScale
  * @param {D3 scale } yScale
  */
-export const drawGroundwaterLevels = function(svg, {levels, xScale, yScale, enableClip}) {
+export const drawGroundwaterLevels = function(svg, {points, xScale, yScale, enableClip}) {
     svg.selectAll('#iv-graph-gw-levels-group').remove();
     const group = svg.append('g')
         .attr('id', 'iv-graph-gw-levels-group');
@@ -42,12 +20,12 @@ export const drawGroundwaterLevels = function(svg, {levels, xScale, yScale, enab
         group.attr('clip-path', 'url(#graph-clip)');
     }
 
-    levels.forEach((level) => {
+    points.forEach((point) => {
         group.append('circle')
-            .attr('class', `${GW_LEVEL_CLASS} ${getDetailsForApprovalCode(level).class}`)
+            .attr('class', `${GW_LEVEL_CLASS} ${point.approvals.class}`)
             .attr('r', GW_LEVEL_RADIUS)
-            .attr('cx', xScale(level.dateTime))
-            .attr('cy', yScale(level.value));
+            .attr('cx', xScale(point.dateTime))
+            .attr('cy', yScale(point.value));
     });
 };
 
@@ -55,22 +33,18 @@ export const drawGroundwaterLevels = function(svg, {levels, xScale, yScale, enab
  * Returns a circle marker that can be used to represent the groundwater level symbol in legends
  * @return {Object} - see d3-rendering/markers module.
  */
-export const getGroundwaterLevelsMarker = function() {
-    return defineCircleMarker(null, GW_LEVEL_CLASS, GW_LEVEL_RADIUS, 'Field visit');
-};
-
 export const getGroundwaterLevelsMarkers = function(groundwaterApprovals) {
     let groundwaterMarkers = [];
     groundwaterMarkers.push(defineTextOnlyMarker('Field Visit: '));
 
     if (groundwaterApprovals.provisional) {
-        groundwaterMarkers.push(defineCircleMarker(null, `${GW_LEVEL_CLASS} ${GROUNDWATER_LINE_CLASSES.PROVISIONAL.class}`, GW_LEVEL_RADIUS, GROUNDWATER_LINE_CLASSES.PROVISIONAL.label));
+        groundwaterMarkers.push(defineCircleMarker(null, `${GW_LEVEL_CLASS} provisional`, GW_LEVEL_RADIUS, 'Provisional'));
     }
     if (groundwaterApprovals.approved) {
-        groundwaterMarkers.push(defineCircleMarker(null, `${GW_LEVEL_CLASS}  ${GROUNDWATER_LINE_CLASSES.APPROVED.class}`, GW_LEVEL_RADIUS, GROUNDWATER_LINE_CLASSES.APPROVED.label));
+        groundwaterMarkers.push(defineCircleMarker(null, `${GW_LEVEL_CLASS} approved`, GW_LEVEL_RADIUS, 'Approved'));
     }
     if (groundwaterApprovals.revised) {
-        groundwaterMarkers.push(defineCircleMarker(null, `${GW_LEVEL_CLASS}  ${GROUNDWATER_LINE_CLASSES.REVISED.class}`, GW_LEVEL_RADIUS, GROUNDWATER_LINE_CLASSES.REVISED.label));
+        groundwaterMarkers.push(defineCircleMarker(null, `${GW_LEVEL_CLASS} revised`, GW_LEVEL_RADIUS, 'Revised'));
     }
     return groundwaterMarkers;
 };

assets/src/scripts/monitoring-location/components/hydrograph/discrete-data.test.js

 import {select} from 'd3-selection';
 import {scaleLinear} from 'd3-scale';
 
-import {circleMarker} from 'd3render/markers';
-import {drawGroundwaterLevels, getGroundwaterLevelsMarker} from './discrete-data';
+import {circleMarker, textOnlyMarker} from 'd3render/markers';
+import {drawGroundwaterLevels, getGroundwaterLevelsMarkers} from './discrete-data';
+
 
 describe('monitoring-location/components/hydrograph/discrete-data', () => {
     describe('drawGroundwaterLevels', () => {
@@ -12,12 +13,12 @@ describe('monitoring-location/components/hydrograph/discrete-data', () => {
         beforeEach(() => {
             svg = select('body').append('svg');
             gwLevels = [
-                {value: '14.0', dateTime: 1491055200000, qualifiers: ['A', '1']},
-                {value: '14.5', dateTime: 1490882400000, qualifiers: ['P', '1']},
-                {value: '13.0', dateTime: 1490536800000, qualifiers: ['R', '1']},
-                {value: '12.0', dateTime: 1489672800000, qualifiers: ['P', '1']},
-                {value: '11.0', dateTime: 1489672300000, qualifiers: ['bad approval code', '1']},
-                {value: '13.0', dateTime: 1489672100000, qualifiers: ['1']}
+                {value: '14.0', dateTime: 1491055200000, qualifiers: ['A', '1'], approvals: {label: 'Approved', class: 'approved'}},
+                {value: '14.5', dateTime: 1490882400000, qualifiers: ['P', '1'], approvals: {label: 'Provisional', class: 'provisional'}},
+                {value: '13.0', dateTime: 1490536800000, qualifiers: ['R', '1'], approvals: {label: 'Revised', class: 'revised'}},
+                {value: '12.0', dateTime: 1489672800000, qualifiers: ['P', '1'], approvals: {label: 'Provisional', class: 'provisional'}},
+                {value: '11.0', dateTime: 1489672300000, qualifiers: ['bad approval code', '1'], approvals: {label: 'code bad approval code', class: 'unknown-code-bad approval code'}},
+                {value: '13.0', dateTime: 1489672100000, qualifiers: ['1'], approvals: {label: 'code 1', class: 'unknown-code-1'}}
             ];
             xScale = scaleLinear()
                 .domain([0, 100])
@@ -33,7 +34,7 @@ describe('monitoring-location/components/hydrograph/discrete-data', () => {
 
         it('Renders correct number of circles with correct class for each gw level', () => {
             drawGroundwaterLevels(svg, {
-                levels: gwLevels,
+                points: gwLevels,
                 xScale: xScale,
                 yScale: yScale
             });
@@ -41,17 +42,16 @@ describe('monitoring-location/components/hydrograph/discrete-data', () => {
             expect(svg.selectAll('.approved').size()).toBe(1);
             expect(svg.selectAll('.provisional').size()).toBe(2);
             expect(svg.selectAll('.revised').size()).toBe(1);
-            expect(svg.selectAll('.unknown-code').size()).toBe(2);
         });
 
-        it('A second call to render with no gw levels renders no circles', () => {
+        it('A second call to render with no gw points renders no circles', () => {
             drawGroundwaterLevels(svg, {
-                levels: gwLevels,
+                points: gwLevels,
                 xScale: xScale,
                 yScale: yScale
             });
             drawGroundwaterLevels(svg, {
-                levels: [],
+                points: [],
                 xScale: xScale,
                 yScale: yScale
             });
@@ -59,8 +59,15 @@ describe('monitoring-location/components/hydrograph/discrete-data', () => {
         });
 
         describe('getGroundwaterLevelsMarker', () => {
+            const groundwaterApprovals = {
+                provisional: true,
+                approved: false,
+                revised: false
+            };
+
             it('Expects to return a circle marker', () => {
-                expect(getGroundwaterLevelsMarker().type).toBe(circleMarker);
+                expect(getGroundwaterLevelsMarkers(groundwaterApprovals)[0].type).toBe(textOnlyMarker);
+                expect(getGroundwaterLevelsMarkers(groundwaterApprovals)[1].type).toBe(circleMarker);
             });
         });
     });

assets/src/scripts/monitoring-location/components/hydrograph/graph-brush.js

@@ -96,7 +96,7 @@ export const drawGraphBrush = function(container, store) {
                     enableClip: () => false
                 })))
                 .call(link(store, drawGroundwaterLevels, createStructuredSelector({
-                    levels: getVisibleGroundwaterLevelPoints,
+                    points: getVisibleGroundwaterLevelPoints,
                     xScale: getBrushXScale('current'),
                     yScale: getBrushYScale,
                     enableClip: () => false

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

@@ -216,15 +216,15 @@ const TEST_STATE_THREE_VARS = {
                 },
                 values: [{
                     value: '10',
-                    qualifiers: [],
+                    qualifiers: ['A', '1'],
                     dateTime: 1522346400000
                 }, {
                     value: '20',
-                    qualifiers: [],
+                    qualifiers: ['P', '1'],
                     dateTime: 1522347300000
                 }, {
                     value: '30',
-                    qualifiers: [],
+                    qualifiers: ['P', '1'],
                     dateTime: 1522348200000
                 }]
             }
@@ -517,9 +517,16 @@ describe('monitoring-location/components/hydrograph/cursor module', () => {
             };
 
             expect(getGroundwaterLevelCursorPoint(testState)).toEqual({
-                value: 20,
-                qualifiers: [],
-                dateTime: 1522347300000
+                'approvals': {
+                    'class': 'provisional',
+                    'label': 'Provisional'
+                },
+                'dateTime': 1522347300000,
+                'qualifiers': [
+                    'P',
+                    '1'
+                ],
+                'value': 20
             });
         });
     });

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

@@ -5,6 +5,23 @@ import {getIVCurrentVariableGroundwaterLevels} from 'ml/selectors/discrete-data-
 import {getRequestTimeRange, getCurrentVariable} from 'ml/selectors/time-series-selector';
 import {getIanaTimeZone} from 'ml/selectors/time-zone-selector';
 
+
+/*
+* Helper function that takes a raw approval code and matches it to a more detail object
+* @param {Object} approvalCode -  details about a single groundwater data point
+* @return {Object} Details that expand on the meaning of the approval code.
+*/
+export const getDetailsForApprovalCode = function(approvalCode) {
+    const groundwaterLineClass = {
+        'A': {label: 'Approved', class: 'approved'},
+        'P': {label: 'Provisional', class: 'provisional'},
+        'R': {label: 'Revised', class: 'revised'},
+        'default': {label: `code ${approvalCode}`, class: `unknown-code-${approvalCode}`}
+    };
+
+    return groundwaterLineClass[approvalCode] || groundwaterLineClass['default'];
+};
+
 /*
  * Returns a selector function that returns the groundwater levels that will be visible
  * on the hydrograpnh
@@ -27,27 +44,14 @@ export const getVisibleGroundwaterLevelPoints = createSelector(
             .map((data) => {
                 return {
                     ...data,
-                    value: parseFloat(data.value)
+                    value: parseFloat(data.value),
+                    approvals: getDetailsForApprovalCode(data.qualifiers[0])
                 };
             });
     }
 );
 
-/*
-* When given an approval code, will return the text equivalent
-*  @param {String} approvalCode - Usually a letter such as 'A'
-*   @return {String} - an easy to understand text version of an approval code
-*/
-const approvalCodeText = function(approvalCode) {
-    const approvalText = {
-        P: 'Provisional',
-        A: 'Approved',
-        R: 'Revised',
-        default: `unknown code: ${approvalCode}`
-    };
 
-    return approvalText[approvalCode] || approvalText.default;
-};
 
 /*
  * Selector function which returns a function that returns an array of gw data appropriate
@@ -71,7 +75,7 @@ export const getVisibleGroundwaterLevelsTableData = createSelector(
                     suppressMilliseconds: true,
                     suppressSeconds: true
                 }),
-                approvals: approvalCodeText(point.qualifiers[0])
+                approvals: getDetailsForApprovalCode(point.qualifiers[0]).label
             };
         });
     }

assets/src/scripts/monitoring-location/components/hydrograph/selectors/discrete-data.test.js

@@ -85,14 +85,22 @@ describe('monitoring-location/components/hydrograph/selectors/discrete-data', ()
 
             expect(result).toHaveLength(2);
             expect(result[0]).toEqual({
+                'approvals': {
+                    'class': 'provisional',
+                    'label': 'Provisional'
+                },
+                'dateTime': 1490536800000,
                 'qualifiers': 'P',
-                value: 13.0,
-                dateTime: 1490536800000
+                'value': 13
             });
             expect(result[1]).toEqual({
+                'approvals': {
+                    'class': 'approved',
+                    'label': 'Approved'
+                },
+                'dateTime': 1490882400000,
                 'qualifiers': 'A',
-                value: 14.5,
-                dateTime: 1490882400000
+                'value': 14.5
             });
         });
     });

assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.js

@@ -272,7 +272,7 @@ export const drawTimeSeriesGraph = function(elem, store, siteNo, showMLName, sho
             enableClip: () => true
         })))
         .call(link(store, drawGroundwaterLevels, createStructuredSelector({
-            levels: getVisibleGroundwaterLevelPoints,
+            points: getVisibleGroundwaterLevelPoints,
             xScale: getMainXScale('current'),
             yScale: getMainYScale,
             enableClip: () => true

assets/src/scripts/monitoring-location/components/hydrograph/tooltip.js

@@ -15,9 +15,6 @@ import {getMainLayout} from './selectors/layout';
 import {getMainXScale, getMainYScale} from './selectors/scales';
 import {getTsTimeZone, getCurrentVariableUnitCode} from './selectors/time-series-data';
 
-import {getDetailsForApprovalCode} from './discrete-data';
-
-
 const getTsTooltipTextInfo = function(tsPoint, tsKey, unitCode, ianaTimeZone) {
     let label = '';
     if (tsPoint) {
@@ -59,7 +56,7 @@ const getGWLevelTextInfo = function(point, unitCode, ianaTimeZone) {
     const timeLabel = DateTime.fromMillis(point.dateTime, {zone: ianaTimeZone}).toFormat('MMM dd, yyyy hh:mm:ss a ZZZZ');
     return {
         label: `${valueLabel} - ${timeLabel}`,
-        classes: ['gwlevel-tooltip-text', `${getDetailsForApprovalCode(point).class}`]
+        classes: ['gwlevel-tooltip-text', `${point.approvals.class}`]
     };
 };