Merge branch 'WDFN-738_graph_secondary_time_series-add_tool_tip' into 'main'

WDFN-738 Graph Secondary Time Series - Add Tool Tip

See merge request !389

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Data tables accordion shows a table for a secondary instantaneous value parameter data when a second parameter (that has data) is selected.
 - Retrieve data controls now show a radio button for secondary parameter data when appropriate.
 - Title, legend and time series data line will now show for a secondary parameter, if selected.
+- Main hydrograph tool tips now reflect the data points for secondary parameter lines.
 
 ### Changed
 - Data download component was converted to Vue.

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

@@ -41,6 +41,7 @@ export const appendYAxis = function(elem, {yAxis, layout, yTitle}) {
 
     // Remove existing axes before adding the new ones.
     elem.selectAll('.y-axis').remove();
+    elem.selectAll('.secondary-y-axis').remove();
 
     // Add y-axis and a text label
     elem.append('g')

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

@@ -96,7 +96,24 @@ describe('axes module', () => {
             expect(svg.select('.secondary-y-axis .y-axis-label').html()).toBe('ft/3');
         });
 
-        it('should render only one y axis if a secondaryYAxis is not defined', () => {
+        it('expects that secondary axis is removed if a secondary parameter is no longer defined', () => {
+            secondaryYAxis = jest.fn();
+            appendAxes(svg, {xAxis, primaryYAxis, secondaryYAxis, layout, primaryYTitle: 'ft', secondaryYTitle: 'ft/3', secondaryParameter});
+
+            expect(svg.selectAll('.x-axis').size()).toBe(1);
+            expect(svg.selectAll('.y-axis').size()).toBe(1);
+            expect(svg.selectAll('.secondary-y-axis').size()).toBe(1);
+            expect(svg.selectAll('.y-axis-label').size()).toBe(2);
+            expect(svg.select('.y-axis .y-axis-label').html()).toBe('ft');
+            expect(svg.select('.secondary-y-axis .y-axis-label').html()).toBe('ft/3');
+
+            appendAxes(svg, {xAxis, primaryYAxis, layout, primaryYTitle: 'ft'});
+            expect(svg.selectAll('.x-axis').size()).toBe(1);
+            expect(svg.selectAll('.y-axis').size()).toBe(1);
+            expect(svg.selectAll('.secondary-y-axis').size()).toBe(0);
+        });
+
+        it('should render only one y-axis if a secondaryYAxis is not defined', () => {
             appendAxes(svg, {xAxis, primaryYAxis, secondaryYAxis, layout, primaryYTitle: 'ft', secondaryYTitle: '', secondaryParameter: null});
 
             expect(svg.selectAll('.x-axis').size()).toBe(1);

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

@@ -7,7 +7,7 @@ import {getGraphCursorOffset} from 'ml/selectors/hydrograph-state-selector';
 
 import {getGroundwaterLevelPoints} from './discrete-data';
 import {getIVDataPoints} from './iv-data';
-import {getMainXScale, getMainYScale, getGraphTimeRange} from './scales';
+import {getMainXScale, getYScale, getGraphTimeRange} from './scales';
 import {isVisible} from './time-series-data';
 
 const isInTimeRange = function(dateTime, timeRange) {
@@ -83,7 +83,7 @@ export const getIVDataCursorPoint = memoize((dataKind, timeRangeKind) => createS
  */
 export const getIVDataTooltipPoint = memoize((dataKind, timeRangeKind) => createSelector(
     getMainXScale(timeRangeKind),
-    getMainYScale,
+    getYScale('MAIN', dataKind),
     getIVDataCursorPoint(dataKind, timeRangeKind),
     (xScale, yScale, cursorPoint) => {
         if (cursorPoint && isFinite(yScale(cursorPoint.value))) {
@@ -128,7 +128,7 @@ export const getGroundwaterLevelCursorPoint = createSelector(
 export const getGroundwaterLevelTooltipPoint = createSelector(
     getGroundwaterLevelCursorPoint,
     getMainXScale('current'),
-    getMainYScale,
+    getYScale('MAIN', 'primary'),
     (point, xScale, yScale) => {
         if (!point) {
             return null;

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

@@ -7,6 +7,7 @@ import {link} from 'ui/lib/d3-redux';
 import {drawFocusOverlay, drawFocusCircles, drawFocusLine} from 'd3render/graph-tooltip';
 
 import {setGraphCursorOffset} from 'ml/store/hydrograph-state';
+import {getIVParameter} from 'ml/selectors/hydrograph-data-selector';
 
 import {getCursorTime, getIVDataCursorPoint, getIVDataTooltipPoint, getGroundwaterLevelCursorPoint,
     getGroundwaterLevelTooltipPoint
@@ -14,8 +15,6 @@ import {getCursorTime, getIVDataCursorPoint, getIVDataTooltipPoint, getGroundwat
 import {getMainLayout} from './selectors/layout';
 import {getMainXScale, getMainYScale} from './selectors/scales';
 import {getPrimaryParameter} from './selectors/time-series-data';
-
-
 import {drawCursorSlider} from './cursor-slider';
 
 
@@ -45,9 +44,11 @@ const getGWLevelTextInfo = function(point, unitCode) {
 
 const createTooltipTextGroup = function(elem, {
     currentPoint,
+    secondaryParameterPoint,
     comparePoint,
     gwLevelPoint,
     parameter,
+    secondaryParameter,
     layout
 }, textGroup) {
     const adjustMarginOfTooltips = function(elem) {
@@ -60,17 +61,21 @@ const createTooltipTextGroup = function(elem, {
             .attr('class', 'tooltip-text-group')
             .call(adjustMarginOfTooltips);
     }
-    const unitCode = parameter ? parameter.unit : '';
+    const primaryParameterUnitCode = parameter ? parameter.unit : '';
+    const secondaryParameterUnitCode = secondaryParameter ? secondaryParameter.unit : '';
 
     let tooltipTextData = [];
     if (currentPoint) {
-        tooltipTextData.push(getIVDataTooltipTextInfo(currentPoint, 'primary', unitCode));
+        tooltipTextData.push(getIVDataTooltipTextInfo(currentPoint, 'primary', primaryParameterUnitCode));
+    }
+    if (secondaryParameterPoint) {
+        tooltipTextData.push(getIVDataTooltipTextInfo(secondaryParameterPoint, 'secondary', secondaryParameterUnitCode));
     }
     if (comparePoint) {
-        tooltipTextData.push(getIVDataTooltipTextInfo(comparePoint, 'compare', unitCode));
+        tooltipTextData.push(getIVDataTooltipTextInfo(comparePoint, 'compare', primaryParameterUnitCode));
     }
     if (gwLevelPoint) {
-        tooltipTextData.push(getGWLevelTextInfo(gwLevelPoint, unitCode));
+        tooltipTextData.push(getGWLevelTextInfo(gwLevelPoint, primaryParameterUnitCode));
     }
     const texts = textGroup
         .selectAll('div')
@@ -103,9 +108,11 @@ const createTooltipTextGroup = function(elem, {
 export const drawTooltipText = function(elem, store) {
     elem.call(link(store, createTooltipTextGroup, createStructuredSelector({
         currentPoint: getIVDataCursorPoint('primary', 'current'),
+        secondaryParameterPoint: getIVDataCursorPoint('secondary', 'current'),
         comparePoint: getIVDataCursorPoint('compare', 'prioryear'),
         gwLevelPoint: getGroundwaterLevelCursorPoint,
         parameter: getPrimaryParameter,
+        secondaryParameter: getIVParameter('secondary'),
         layout: getMainLayout
     })));
 };
@@ -125,19 +132,24 @@ export const drawTooltipFocus = function(elem, store) {
 
     elem.call(link(store, drawFocusCircles, createSelector(
         getIVDataTooltipPoint('primary', 'current'),
+        getIVDataTooltipPoint('secondary', 'current'),
         getIVDataTooltipPoint('compare', 'prioryear'),
         getGroundwaterLevelTooltipPoint,
-        (current, compare, gwLevel) => {
+        (current, secondary, compare, gwLevel) => {
             let points = [];
             if (current) {
                 points.push(current);
             }
+            if (secondary) {
+                points.push(secondary);
+            }
             if (compare) {
                 points.push(compare);
             }
             if (gwLevel) {
                 points.push(gwLevel);
             }
+
             return points;
         }
     )));

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

@@ -5,7 +5,7 @@ import * as utils from 'ui/utils';
 
 import {configureStore} from 'ml/store';
 
-import {TEST_GW_LEVELS, TEST_PRIMARY_IV_DATA, TEST_CURRENT_TIME_RANGE} from './mock-hydrograph-state';
+import {TEST_GW_LEVELS, TEST_PRIMARY_IV_DATA, TEST_SECONDARY_IV_DATA, TEST_CURRENT_TIME_RANGE} from './mock-hydrograph-state';
 import {drawTooltipText, drawTooltipFocus, drawTooltipCursorSlider, initializeTooltipCursorSlider} from './tooltip';
 
 describe('monitoring-location/components/hydrograph/tooltip module', () => {
@@ -59,8 +59,42 @@ describe('monitoring-location/components/hydrograph/tooltip module', () => {
             value = div.select('.gw-level-point').text().split(' - ')[0];
             expect(value).toBe('27.2 ft');
         });
+
+        it('expects that if a secondary parameter is graphed that it will have a tool tip', () => {
+            const TEST_STATE_SECONDARY_PARAMETER = {
+                hydrographData: {
+                    primaryIVData: TEST_PRIMARY_IV_DATA,
+                    secondaryIVData: TEST_SECONDARY_IV_DATA,
+                    currentTimeRange: TEST_CURRENT_TIME_RANGE
+                },
+                groundwaterLevelData: {
+                    all: [TEST_GW_LEVELS]
+                },
+                hydrographState: {
+                    selectedIVMethodID: '90649',
+                    graphCursorOffset: 500000,
+                    selectedParameterCode: '72019',
+                    selectedSecondaryParameterCode: '00065'
+                },
+                ui: {
+                    windowWidth: 1300,
+                    width: 990
+                }
+            };
+
+            store = configureStore(TEST_STATE_SECONDARY_PARAMETER);
+
+            div.call(drawTooltipText, store);
+            expect(div.select('.primary-tooltip-text').size()).toBe(1);
+            expect(div.select('.primary-tooltip-text').text()).toBe('24.1 ft - Feb 24, 2020 10:30:00 AM CST');
+
+            expect(div.select('.secondary-tooltip-text').size()).toBe(1);
+            expect(div.select('.secondary-tooltip-text').text()).toBe('3.2 ft - Feb 24, 2020 10:30:00 AM CST');
+        });
     });
+
     describe('createTooltipFocus', () => {
+        let store;
         let svg;
         beforeEach(() => {
             svg = select('body').append('svg');
@@ -71,7 +105,7 @@ describe('monitoring-location/components/hydrograph/tooltip module', () => {
         });
 
         it('Creates focus lines and focus circles when cursor not set', () => {
-            let store = configureStore(TEST_STATE);
+            store = configureStore(TEST_STATE);
 
             svg.call(drawTooltipFocus, store);
 
@@ -79,6 +113,38 @@ describe('monitoring-location/components/hydrograph/tooltip module', () => {
             expect(svg.selectAll('.focus-circle').size()).toBe(2);
             expect(svg.select('.focus-overlay').size()).toBe(1);
         });
+
+
+        it('expects that if a secondary parameter is graphed that it will have a focus dot', () => {
+            const TEST_STATE_SECONDARY_PARAMETER = {
+                hydrographData: {
+                    primaryIVData: TEST_PRIMARY_IV_DATA,
+                    secondaryIVData: TEST_SECONDARY_IV_DATA,
+                    currentTimeRange: TEST_CURRENT_TIME_RANGE
+                },
+                groundwaterLevelData: {
+                    all: [TEST_GW_LEVELS]
+                },
+                hydrographState: {
+                    selectedIVMethodID: '90649',
+                    graphCursorOffset: 500000,
+                    selectedParameterCode: '72019',
+                    selectedSecondaryParameterCode: '00065'
+                },
+                ui: {
+                    windowWidth: 1300,
+                    width: 990
+                }
+            };
+
+            store = configureStore(TEST_STATE_SECONDARY_PARAMETER);
+
+            svg.call(drawTooltipFocus, store);
+
+            expect(svg.selectAll('.focus-line').size()).toBe(1);
+            expect(svg.selectAll('.focus-circle').size()).toBe(3);
+            expect(svg.select('.focus-overlay').size()).toBe(1);
+        });
     });
 
     describe('initializeTooltipCursorSlider and drawTooltipCursorSlider', () => {

assets/src/styles/components/hydrograph/_app.scss

@@ -218,6 +218,19 @@
         }
       }
 
+      .secondary-tooltip-text {
+        font-weight: normal;
+        color: variables.$default-time-series;
+
+        &.approved {
+          color: variables.$approved-time-series;
+        }
+
+        &.estimated {
+          color: variables.$estimated-time-series;
+        }
+      }
+
       .compare-tooltip-text {
         font-weight: normal;
         color: variables.$default-time-series-compare;