diff --git a/assets/src/scripts/components/hydrograph/cursor.js b/assets/src/scripts/components/hydrograph/cursor.js
index e214f8a8da9fef6144e8c4bfb45317e88dc89cdc..69e75e53f4959b98037e652e860aa3b101e6e31b 100644
--- a/assets/src/scripts/components/hydrograph/cursor.js
+++ b/assets/src/scripts/components/hydrograph/cursor.js
@@ -1,6 +1,5 @@
const { bisector } = require('d3-array');
const memoize = require('fast-memoize');
-const merge = require('lodash/merge');
const { createSelector } = require('reselect');
const { layoutSelector, MARGIN } = require('./layout');
@@ -89,12 +88,6 @@ const tsCursorPointsSelector = memoize(tsKey => createSelector(
})
);
-const allTsCursorPointsSelector = createSelector(
- tsCursorPointsSelector('current'),
- tsCursorPointsSelector('compare'),
- (current, compare) => merge({}, current, compare)
-);
-
const cursorSlider = function (elem) {
elem.append('div')
.attr('class', 'slider-wrapper')
@@ -129,4 +122,4 @@ const cursorSlider = function (elem) {
});
};
-module.exports = {cursorOffsetSelector, cursorTimeSelector, getNearestTime, tsCursorPointsSelector, allTsCursorPointsSelector, cursorSlider};
+module.exports = {cursorOffsetSelector, cursorTimeSelector, getNearestTime, tsCursorPointsSelector, cursorSlider};
diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index 36d9c78429cab9f49118f173426ef8bf364297aa..b5d06c67cd668749d84d7f0e64574c6f28ac9f6d 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -334,34 +334,36 @@ const timeSeriesGraph = function (elem) {
descriptionSelector,
isInteractive: () => true
})))
- .call(createTooltipText)
.call(plotSvgDefs)
- .append('g')
- .attr('transform', `translate(${MARGIN.left},${MARGIN.top})`)
- .call(link(appendAxes, axesSelector))
- .call(link(plotDataLines, createStructuredSelector({
- visible: isVisibleSelector('current'),
- tsLinesMap: currentVariableLineSegmentsSelector('current'),
- xScale: xScaleSelector('current'),
- yScale: yScaleSelector,
- tsKey: () => 'current'
- })))
- .call(link(plotDataLines, createStructuredSelector({
- visible: isVisibleSelector('compare'),
- tsLinesMap: currentVariableLineSegmentsSelector('compare'),
- xScale: xScaleSelector('compare'),
- yScale: yScaleSelector,
- tsKey: () => 'compare'
- })))
- .call(createTooltipFocus)
- .call(link(plotAllMedianPoints, createStructuredSelector({
- visible: isVisibleSelector('median'),
- xscale: xScaleSelector('current'),
- yscale: yScaleSelector,
- seriesMap: currentVariableTimeSeriesSelector('median'),
- variable: currentVariableSelector,
- showLabel: (state) => state.showMedianStatsLabel
- })));
+ .call(svg => {
+ svg.append('g')
+ .attr('transform', `translate(${MARGIN.left},${MARGIN.top})`)
+ .call(link(appendAxes, axesSelector))
+ .call(link(plotDataLines, createStructuredSelector({
+ visible: isVisibleSelector('current'),
+ tsLinesMap: currentVariableLineSegmentsSelector('current'),
+ xScale: xScaleSelector('current'),
+ yScale: yScaleSelector,
+ tsKey: () => 'current'
+ })))
+ .call(link(plotDataLines, createStructuredSelector({
+ visible: isVisibleSelector('compare'),
+ tsLinesMap: currentVariableLineSegmentsSelector('compare'),
+ xScale: xScaleSelector('compare'),
+ yScale: yScaleSelector,
+ tsKey: () => 'compare'
+ })))
+ .call(createTooltipFocus)
+ .call(link(plotAllMedianPoints, createStructuredSelector({
+ visible: isVisibleSelector('median'),
+ xscale: xScaleSelector('current'),
+ yscale: yScaleSelector,
+ seriesMap: currentVariableTimeSeriesSelector('median'),
+ variable: currentVariableSelector,
+ showLabel: (state) => state.showMedianStatsLabel
+ })));
+ })
+ .call(createTooltipText);
elem.call(link(plotSeriesSelectTable, createStructuredSelector({
availableTimeseries: availableTimeseriesSelector,
diff --git a/assets/src/scripts/components/hydrograph/tooltip.js b/assets/src/scripts/components/hydrograph/tooltip.js
index 414c51281a84f2b345e0d8904abcc90a9928a9f7..ec7e9d0a967e330cd2eb5c6a348b33b72f25481b 100644
--- a/assets/src/scripts/components/hydrograph/tooltip.js
+++ b/assets/src/scripts/components/hydrograph/tooltip.js
@@ -3,12 +3,11 @@ const { mouse } = require('d3-selection');
const { transition } = require('d3-transition');
const { timeFormat } = require('d3-time-format');
const memoize = require('fast-memoize');
-const mapValues = require('lodash/mapValues');
const { createSelector, createStructuredSelector } = require('reselect');
const { dispatch, link, initAndUpdate } = require('../../lib/redux');
-const { cursorTimeSelector, allTsCursorPointsSelector, tsCursorPointsSelector } = require('./cursor');
+const { cursorTimeSelector, tsCursorPointsSelector } = require('./cursor');
const { classesForPoint, MASK_DESC } = require('./drawingData');
const { xScaleSelector, yScaleSelector } = require('./scales');
const { currentVariableSelector } = require('./timeseries');
@@ -93,37 +92,20 @@ const unitCodeSelector = createSelector(
variable => variable ? variable.unit.unitCode : null
);
-const createTooltipTextGroup = function (elem, {cursorPoints, qualifiers, unitCode}, textGroup) {
+const createTooltipTextGroup = function (elem, {currentPoints, comparePoints, qualifiers, unitCode}, textGroup) {
// Put the circles in a container so we can keep the their position in the
// DOM before rect.overlay, to prevent the circles from receiving mouse
// events.
- textGroup = textGroup || elem.append('g')
- .attr('class', 'tooltip-text-group')
- .style('z-index', '-10000');
-
- const data = Object.values(mapValues(cursorPoints, (point, tsID) => {
- return {
- ...point,
- tsID
- };
- })).sort((a, b) => {
- // Order by tsID if tsKey is the same on both
- if (a.tsKey === b.tsKey) {
- if (a.tsKey < b.tsKey) {
- return -1;
- } else if (a.tsKey > b.tsKey) {
- return 1;
- } else {
- return 0;
- }
- }
- // Current year displayed first
- if (b.tsKey === 'current') {
- return 1;
- } else {
- return -1;
- }
- });
+ if (!textGroup) {
+ textGroup = elem.append('g')
+ .attr('class', 'tooltip-text-group');
+ textGroup.append('rect')
+ .attr('class', 'tooltip-text-group-background')
+ .attr('x', 0)
+ .attr('y', 0);
+ }
+
+ const data = Object.values(currentPoints).concat(Object.values(comparePoints));
const texts = textGroup
.selectAll('text')
.data(data);
@@ -154,6 +136,12 @@ const createTooltipTextGroup = function (elem, {cursorPoints, qualifiers, unitCo
})
.classed('estimated', datum => classesForPoint(datum).estimated);
+ // Size the background rect to the size of textGroup
+ const bBox = textGroup.node().getBBox();
+ textGroup.select('.tooltip-text-group-background')
+ .attr('width', bBox.width)
+ .attr('height', bBox.height);
+
return textGroup;
};
@@ -164,7 +152,8 @@ const createTooltipTextGroup = function (elem, {cursorPoints, qualifiers, unitCo
*/
const createTooltipText = function (elem) {
elem.call(link(createTooltipTextGroup, createStructuredSelector({
- cursorPoints: allTsCursorPointsSelector,
+ currentPoints: tsCursorPointsSelector('current'),
+ comparePoints: tsCursorPointsSelector('compare'),
qualifiers: qualifiersSelector,
unitCode: unitCodeSelector
})));
diff --git a/assets/src/styles/components/_hydrograph.scss b/assets/src/styles/components/_hydrograph.scss
index f8eb8f03147e84753e379e9aa31bb27b313d0a61..6a6963c7c2c4ba634ce502179b8788f0f9365c73 100644
--- a/assets/src/styles/components/_hydrograph.scss
+++ b/assets/src/styles/components/_hydrograph.scss
@@ -111,6 +111,9 @@ $highlight: $color-gray-lightest;
}
.tooltip-text-group {
+ .tooltip-text-group-background {
+ fill: white;
+ }
.current-tooltip-text {
font-weight: bold;
}