Mercurial > gemma
changeset 2824:d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Tooltips now also respect the top and bottom boundary of the diagram and will be positioned
above or below the chart accordingly.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 27 Mar 2019 12:19:14 +0100 |
parents | b150e5b37afe |
children | d6c90d2c8c8d |
files | client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue |
diffstat | 2 files changed, 10 insertions(+), 4 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue Wed Mar 27 12:12:12 2019 +0100 +++ b/client/src/components/gauge/HydrologicalConditions.vue Wed Mar 27 12:19:14 2019 +0100 @@ -686,8 +686,11 @@ diagramPadding, Math.min(coords.x - (textBBox.width + tooltipPadding * 2) / 2, xMax) ); - const tooltipY = - coords.y - (textBBox.height + tooltipPadding * 2) - 10; + let tooltipY = coords.y - (textBBox.height + tooltipPadding * 2) - 10; + if (coords.y < textBBox.height + tooltipPadding * 2) { + tooltipY = coords.y + 10; + } + this.diagram .select(".chart-tooltip") .style("opacity", 1)
--- a/client/src/components/gauge/Waterlevel.vue Wed Mar 27 12:12:12 2019 +0100 +++ b/client/src/components/gauge/Waterlevel.vue Wed Mar 27 12:19:14 2019 +0100 @@ -760,8 +760,11 @@ diagramPadding, Math.min(coords.x - (textBBox.width + tooltipPadding * 2) / 2, xMax) ); - const tooltipY = - coords.y - (textBBox.height + tooltipPadding * 2) - 10; + let tooltipY = coords.y - (textBBox.height + tooltipPadding * 2) - 10; + if (coords.y < textBBox.height + tooltipPadding * 2) { + tooltipY = coords.y + 10; + } + this.diagram .select(".chart-tooltip") .style("opacity", 1)