diff --git a/assets/src/scripts/components/dailyValueHydrograph/tooltip.js b/assets/src/scripts/components/dailyValueHydrograph/tooltip.js
index c3518bc168170cba3a077d8f84d1837b5992882d..6b1fd09964e8c383993b2a32eb4fc23899e41a48 100644
--- a/assets/src/scripts/components/dailyValueHydrograph/tooltip.js
+++ b/assets/src/scripts/components/dailyValueHydrograph/tooltip.js
@@ -2,15 +2,15 @@ import includes from 'lodash/includes';
import {DateTime} from 'luxon';
import {createStructuredSelector} from 'reselect';
-import {drawFocusCircles, drawFocusOverlay} from '../../d3-rendering/graph-tooltip';
+import {drawFocusCircles, drawFocusOverlay, drawFocusLine} from '../../d3-rendering/graph-tooltip';
import {link} from '../../lib/d3-redux';
import {getCurrentObservationsTimeSeriesUnitOfMeasure} from '../../selectors/observations-selector';
import {Actions} from '../../store';
import {APPROVED, ESTIMATED} from './time-series-graph';
import {getLayout} from './selectors/layout';
-import {getXScale} from './selectors/scales';
-import {getCursorPoint, getDataAtCursor} from './selectors/time-series-data';
+import {getXScale, getYScale} from './selectors/scales';
+import {getCursorPoint, getDataAtCursor, getCursorEpochTime} from './selectors/time-series-data';
/*
* Renders the tooltip text representing the data at the current cursor position
@@ -47,6 +47,11 @@ export const drawTooltipText = function(elem, store) {
*/
export const drawTooltipFocus = function(elem, store) {
elem
+ .call(link(store, drawFocusLine, createStructuredSelector({
+ cursorTime: getCursorEpochTime,
+ xScale: getXScale,
+ yScale: getYScale
+ })))
.call(link(store, drawFocusCircles, getCursorPoint))
.call(link(
store,
diff --git a/assets/src/scripts/components/hydrograph/tooltip.js b/assets/src/scripts/components/hydrograph/tooltip.js
index e7131d93ba449e6aef5dbec0b0e25a6afe1d00e8..ebf8dedab94858df222570b04e19dc6d4d267cfa 100644
--- a/assets/src/scripts/components/hydrograph/tooltip.js
+++ b/assets/src/scripts/components/hydrograph/tooltip.js
@@ -6,8 +6,8 @@ import {createSelector, createStructuredSelector} from 'reselect';
import {DateTime} from 'luxon';
import config from '../../config';
-import {drawFocusOverlay, drawFocusCircles} from '../../d3-rendering/graph-tooltip';
-import {link, initAndUpdate} from '../../lib/d3-redux';
+import {drawFocusOverlay, drawFocusCircles, drawFocusLine} from '../../d3-rendering/graph-tooltip';
+import {link} from '../../lib/d3-redux';
import {getCurrentVariable, getCurrentParmCd} from '../../selectors/time-series-selector';
import {Actions} from '../../store';
import {mediaQuery, convertCelsiusToFahrenheit, convertFahrenheitToCelsius} from '../../utils';
@@ -19,33 +19,6 @@ import {getMainXScale, getMainYScale} from './scales';
import {tsTimeZoneSelector, TEMPERATURE_PARAMETERS} from './time-series';
-const createFocusLine = function(elem) {
- let focus = elem.append('g')
- .attr('class', 'focus')
- .style('display', 'none');
-
- focus.append('line')
- .attr('class', 'focus-line');
-
- return focus;
-};
-
-const updateFocusLine = function(elem, {cursorTime, yScale, xScale}) {
- if (cursorTime) {
- const x = xScale(cursorTime);
- const range = yScale.range();
-
- elem.select('.focus-line')
- .attr('y1', range[0])
- .attr('y2', range[1])
- .attr('x1', x)
- .attr('x2', x);
- elem.style('display', null);
- } else {
- elem.style('display', 'none');
- }
-};
-
/*
* Returns a function that returns the time series data point nearest the
* tooltip focus time for the given time series key. Only returns those points
@@ -231,7 +204,7 @@ export const createTooltipText = function (elem, store) {
* @param {Object} yScale - D3 Y scale for the graph
*/
export const createTooltipFocus = function(elem, store) {
- elem.call(link(store, initAndUpdate(createFocusLine, updateFocusLine), createStructuredSelector({
+ elem.call(link(store, drawFocusLine, createStructuredSelector({
xScale: getMainXScale('current'),
yScale: getMainYScale,
cursorTime: cursorTimeSelector('current')
diff --git a/assets/src/scripts/d3-rendering/graph-tooltip.js b/assets/src/scripts/d3-rendering/graph-tooltip.js
index 185ff41125fe06b34a6d9694f791f57ba45b6ffc..9054beb802505e3727d551024c1c5d6d8e527d4f 100644
--- a/assets/src/scripts/d3-rendering/graph-tooltip.js
+++ b/assets/src/scripts/d3-rendering/graph-tooltip.js
@@ -1,5 +1,4 @@
import {mouse} from 'd3-selection';
-import {transition} from 'd3-transition';
/*
* Draws an overlay rectangle with the given scale and layout and creates mouse events
@@ -50,20 +49,33 @@ export const drawFocusCircles = function (elem, tooltipPoints, circleContainer)
// Remove old circles after fading them out
circles.exit()
- .transition(transition().duration(500))
- .style('opacity', '0')
- .remove();
+ .remove();
// Add new focus circles
const newCircles = circles.enter()
.append('circle')
.attr('class', 'focus-circle')
- .attr('r', 5.5);
+ .attr('r', 5.5)
+ .style('opacity', '.6');
// Update the location of all circles
circles.merge(newCircles)
- .transition(transition().duration(20))
- .style('opacity', '.6')
- .attr('transform', (tsDatum) => `translate(${tsDatum.x}, ${tsDatum.y})`);
+ .attr('transform', (tsDatum) => `translate(${tsDatum.x}, ${tsDatum.y})`);
return circleContainer;
+};
+
+export const drawFocusLine = function(elem, {cursorTime, xScale, yScale}) {
+ elem.selectAll('.focus-line-group').remove();
+ if (cursorTime) {
+ const x = xScale(cursorTime);
+ const range = yScale.range();
+ elem.append('g')
+ .attr('class', 'focus-line-group')
+ .append('line')
+ .attr('class', 'focus-line')
+ .attr('y1', range[0])
+ .attr('y2', range[1])
+ .attr('x1', x)
+ .attr('x2', x);
+ }
};
\ No newline at end of file
diff --git a/assets/src/styles/components/dv-hydrograph.scss b/assets/src/styles/components/dv-hydrograph.scss
index 4922374e9377a2a0c30f9e5fae21411940231236..ac2eaf138a4d1ac4aeccde2f8aaa05874fc02b7f 100644
--- a/assets/src/styles/components/dv-hydrograph.scss
+++ b/assets/src/styles/components/dv-hydrograph.scss
@@ -107,12 +107,10 @@ svg {
fill: black;
opacity: .6;
}
- .focus {
- line {
- opacity: .5;
- stroke: #436baf;
- stroke-width: 1px;
- stroke-dasharray: 5, 5;
- }
+ .focus-line {
+ opacity: .5;
+ stroke: black;
+ stroke-width: 1px;
+ stroke-dasharray: 5, 5;
}
}
\ No newline at end of file
diff --git a/assets/src/styles/components/hydrograph/_graph.scss b/assets/src/styles/components/hydrograph/_graph.scss
index 9b6ff79ffdf3c48e5724f4e544bb15e772fccaa3..c01fb40e7112abd290ffeffb696e9bff804b0330 100644
--- a/assets/src/styles/components/hydrograph/_graph.scss
+++ b/assets/src/styles/components/hydrograph/_graph.scss
@@ -29,13 +29,11 @@ svg {
opacity: .6;
}
- .focus {
- line {
- opacity: .5;
- stroke: #436baf;
- stroke-width: 1px;
- stroke-dasharray: 5, 5;
- }
+ .focus-line {
+ opacity: .5;
+ stroke: black;
+ stroke-width: 1px;
+ stroke-dasharray: 5, 5;
}
.zoom {