From 544a0abc43764eb138ea370e5c80fc565d5f843e Mon Sep 17 00:00:00 2001
From: Daniel Naab <dnaab@usgs.gov>
Date: Mon, 2 Apr 2018 10:22:50 -0500
Subject: [PATCH] Put tooltip text in a div so it wraps, rather than trying to
use the wraps(text) util function.
---
.../scripts/components/hydrograph/index.js | 4 +-
.../components/hydrograph/index.spec.js | 2 +-
.../scripts/components/hydrograph/layout.js | 2 +-
.../scripts/components/hydrograph/tooltip.js | 46 +++--------------
assets/src/styles/components/_hydrograph.scss | 50 ++++++++++---------
5 files changed, 36 insertions(+), 68 deletions(-)
diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index f819d73b9..f13bc2c3d 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -288,6 +288,7 @@ const timeSeriesGraph = function (elem) {
elem.append('div')
.attr('class', 'hydrograph-container')
.call(createTitle)
+ .call(createTooltipText)
.append('svg')
.call(link((elem, layout) => elem.attr('viewBox', `0 0 ${layout.width + layout.margin.left + layout.margin.right} ${layout.height + layout.margin.top + layout.margin.bottom}`), layoutSelector))
.call(link(addSVGAccessibility, createStructuredSelector({
@@ -323,8 +324,7 @@ const timeSeriesGraph = function (elem) {
variable: currentVariableSelector,
showLabel: (state) => state.showMedianStatsLabel
})));
- })
- .call(createTooltipText);
+ });
elem.call(link(plotSeriesSelectTable, createStructuredSelector({
availableTimeseries: availableTimeseriesSelector,
diff --git a/assets/src/scripts/components/hydrograph/index.spec.js b/assets/src/scripts/components/hydrograph/index.spec.js
index db6c1f293..a40fc7509 100644
--- a/assets/src/scripts/components/hydrograph/index.spec.js
+++ b/assets/src/scripts/components/hydrograph/index.spec.js
@@ -156,7 +156,7 @@ describe('Hydrograph charting module', () => {
.call(timeSeriesGraph);
let svgNodes = graphNode.getElementsByTagName('svg');
expect(svgNodes.length).toBe(3);
- expect(svgNodes[0].getAttribute('viewBox')).toContain('465 235');
+ expect(svgNodes[0].getAttribute('viewBox')).toContain('480 235');
expect(graphNode.innerHTML).toContain('hydrograph-container');
});
diff --git a/assets/src/scripts/components/hydrograph/layout.js b/assets/src/scripts/components/hydrograph/layout.js
index 579dbd97f..48a674e76 100644
--- a/assets/src/scripts/components/hydrograph/layout.js
+++ b/assets/src/scripts/components/hydrograph/layout.js
@@ -14,7 +14,7 @@ const MARGIN = {
top: 25,
right: 0,
bottom: 10,
- left: 65
+ left: 80
};
const MARGIN_SMALL_DEVICE = {
top: 25,
diff --git a/assets/src/scripts/components/hydrograph/tooltip.js b/assets/src/scripts/components/hydrograph/tooltip.js
index 9c197d67d..46c3c1606 100644
--- a/assets/src/scripts/components/hydrograph/tooltip.js
+++ b/assets/src/scripts/components/hydrograph/tooltip.js
@@ -100,20 +100,14 @@ const createTooltipTextGroup = function (elem, {currentPoints, comparePoints, qu
// 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.
- let resizeBackground = true;
if (!textGroup) {
- resizeBackground = false;
- textGroup = elem.append('g')
+ textGroup = elem.append('div')
.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('.series-text')
+ .selectAll('div')
.data(data);
// Remove old text labels after fading them out
@@ -124,48 +118,20 @@ const createTooltipTextGroup = function (elem, {currentPoints, comparePoints, qu
// Add new text labels
const newTexts = texts.enter()
- .append('g')
- .attr('class', 'series-text')
- .call(g => {
- g.append('rect')
- .attr('class', 'tooltip-text-background')
- .attr('width', 0)
- .attr('height', 0)
- .attr('x', tooltipPaddingPx);
- g.append('text')
- .attr('class', d => `${d.tsKey}-tooltip-text`)
- .attr('height', '1.1em')
- .attr('x', tooltipPaddingPx);
- });
+ .append('div')
+ .attr('class', d => `${d.tsKey}-tooltip-text`);
// Update the text and backgrounds of all tooltip labels
const merge = texts.merge(newTexts)
.interrupt()
.style('opacity', '1');
- merge.select('text')
- .attr('y', (d, i) => `${(i + 1) * 1.1}em`)
- .text(datum => {
- return getTooltipText(datum, qualifiers, unitCode);
- })
- .call(wrap, layout.width - (2 * tooltipPaddingPx))
+ merge
+ .text(datum => getTooltipText(datum, qualifiers, unitCode))
.each(function (datum) {
const classes = classesForPoint(datum);
const text = select(this);
text.classed('approved', classes.approved);
text.classed('estimated', classes.estimated);
- })
- .classed('approved', datum => {
- return classesForPoint(datum).approved;
- })
- .classed('estimated', datum => classesForPoint(datum).estimated);
- merge.select('text')
- .each(function (text) {
- const bBox = this.getBBox();
- select(this.parentNode)
- .select('.tooltip-text-background')
- .attr('y', bBox.y)
- .attr('width', bBox.width)
- .attr('height', bBox.height);
});
return textGroup;
diff --git a/assets/src/styles/components/_hydrograph.scss b/assets/src/styles/components/_hydrograph.scss
index 0c42ef479..5518d5220 100644
--- a/assets/src/styles/components/_hydrograph.scss
+++ b/assets/src/styles/components/_hydrograph.scss
@@ -84,6 +84,32 @@ $highlight: $color-gray-lightest;
text-align: center;
}
+ .tooltip-text-group {
+ pointer-events: none;
+ position: absolute;
+ background: rgba(255, 255, 255, 0.8);
+ margin: 0 0 0 40px;
+ font-size: 0.5em;
+ @include media($medium-screen) {
+ font-size: 0.75em;
+ }
+ @include media($site-max-width) {
+ margin-left: 80px;
+ }
+ .current-tooltip-text {
+ font-weight: bold;
+ }
+ .approved {
+ color: $approved;
+ }
+ .estimated {
+ color: $estimated;
+ }
+ .compare-tooltip-text {
+ font-weight: normal
+ }
+ }
+
svg {
.overlay {
fill: none;
@@ -102,30 +128,6 @@ $highlight: $color-gray-lightest;
}
}
- .tooltip-text-group {
- font-size: 0.7em;
- pointer-events: none;
- @include media($medium-screen) {
- font-size: 1em;
- }
-
- .tooltip-text-background {
- fill: white;
- fill-opacity: .8;
- }
- .current-tooltip-text {
- font-weight: bold;
- }
- .approved {
- fill: $approved;
- }
- .estimated {
- fill: $estimated;
- }
- .compare-tooltip-text {
- font-weight: normal
- }
- }
.line-segment {
fill: none;
stroke-width: 3px;
--
GitLab