diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/discrete-data.js b/assets/src/scripts/monitoring-location/components/hydrograph/discrete-data.js index 418e469023c9eccdd08322cd6b6239e44a5949f1..32823638d46b626ff6959963cab80c99714d0f4f 100644 --- a/assets/src/scripts/monitoring-location/components/hydrograph/discrete-data.js +++ b/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; }; diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/discrete-data.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/discrete-data.test.js index 73d225dfdcda18531c51559af45cc158f2d83cd4..68676c6955017b2c5373315515c26e6a0e25978b 100644 --- a/assets/src/scripts/monitoring-location/components/hydrograph/discrete-data.test.js +++ b/assets/src/scripts/monitoring-location/components/hydrograph/discrete-data.test.js @@ -1,8 +1,9 @@ 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); }); }); }); diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/graph-brush.js b/assets/src/scripts/monitoring-location/components/hydrograph/graph-brush.js index a316f01bc525c0aab18ff233c4a990465c4934a5..0ecc1f7485f821129cdff76acfe833b25a40a415 100644 --- a/assets/src/scripts/monitoring-location/components/hydrograph/graph-brush.js +++ b/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 diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/cursor.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/cursor.test.js index 35ac99278e33f4b731f49014059ac7da6099cb45..444674aeeea415010ce680d52ff228f73803c4aa 100644 --- a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/cursor.test.js +++ b/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 }); }); }); diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/discrete-data.js b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/discrete-data.js index 77e239cf9ce52bb53892501487e85a09a81dc277..fd71a7b40110dbf2ab731258cddd71b8cbdb0348 100644 --- a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/discrete-data.js +++ b/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 }; }); } diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/discrete-data.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/discrete-data.test.js index 599a804aacceffbe376f49f7405aee5a5a0df50d..bf109e8bbc92a6dccf1e9580a44582ff57e03c17 100644 --- a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/discrete-data.test.js +++ b/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 }); }); }); diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.js b/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.js index 8caaa7f71390cab896f09d1b5abb81afe6117434..065d4249262dbf7bcbf3c8c61c70d24f84357bed 100644 --- a/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.js +++ b/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 diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/tooltip.js b/assets/src/scripts/monitoring-location/components/hydrograph/tooltip.js index d57d171ef5341b760ffd2c810715143a2a1f6f6f..d368dc774aa127eb02364ae82fe0eb51250417aa 100644 --- a/assets/src/scripts/monitoring-location/components/hydrograph/tooltip.js +++ b/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}`] }; };