Mercurial > gemma

changeset 2824:d7c4169516fa

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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)