Mercurial > gemma
diff client/src/components/gauge/Waterlevel.vue @ 2819:53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 27 Mar 2019 10:53:55 +0100 |
parents | c02cebff3f16 |
children | d973d6f04eb6 |
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue Wed Mar 27 10:52:09 2019 +0100 +++ b/client/src/components/gauge/Waterlevel.vue Wed Mar 27 10:53:55 2019 +0100 @@ -103,8 +103,6 @@ text fill: #666 font-size: 12px - tspan:last-child - font-weight: bold </style> <script> @@ -649,17 +647,18 @@ // create container for the tooltip const tooltip = this.diagram.append("g").attr("class", "chart-tooltip"); - tooltip.append("rect"); - - const padding = 5; + tooltip + .append("rect") + .attr("rx", "0.25rem") + .attr("ry", "0.25rem"); // create container for multiple text rows const tooltipText = tooltip.append("text").attr("text-anchor", "middle"); - tooltipText.append("tspan").attr("alignment-baseline", "hanging"); - tooltipText - .append("tspan") - .attr("dy", 18) - .attr("alignment-baseline", "hanging"); + + // padding inside the tooltip box and diagram padding to determine left + // and right offset from the diagram boundaries for the tooltip position. + const tooltipPadding = 10; + const diagramPadding = 5; eventRect .on("mouseover", () => { @@ -691,44 +690,88 @@ .style("opacity", 1) .attr("transform", `translate(${coords.x}, ${coords.y})`); + // remove current texts + tooltipText.selectAll("tspan").remove(); + // write date - this.diagram.select(".chart-tooltip text tspan:first-child").text( - d.date.toLocaleString([], { - year: "2-digit", - month: "2-digit", - day: "2-digit", - hour: "2-digit", - minute: "2-digit" - }) - ); - // write waterlevel - this.diagram - .select(".chart-tooltip text tspan:last-child") - .text(d.waterlevel + " cm"); + tooltipText + .append("tspan") + .attr("alignment-baseline", "hanging") + .attr("text-anchor", "middle") + .text( + d.date.toLocaleString([], { + year: "2-digit", + month: "2-digit", + day: "2-digit", + hour: "2-digit", + minute: "2-digit" + }) + ); + + if (d.predicted) { + tooltipText + .append("tspan") + .attr("x", 0) + .attr("y", 0) + .attr("dy", "1.3rem") + .attr("alignment-baseline", "hanging") + .attr("text-anchor", "middle") + .text(d.max + " cm"); + tooltipText + .append("tspan") + .attr("x", 0) + .attr("y", 0) + .attr("dy", "2.3rem") + .attr("alignment-baseline", "hanging") + .attr("text-anchor", "middle") + .attr("class", "font-weight-bold") + .text(d.waterlevel + " cm"); + tooltipText + .append("tspan") + .attr("x", 0) + .attr("y", 0) + .attr("dy", "3.3rem") + .attr("alignment-baseline", "hanging") + .attr("text-anchor", "middle") + .text(d.min + " cm"); + } else { + tooltipText + .append("tspan") + .attr("x", 0) + .attr("y", 0) + .attr("dy", "1.3rem") + .attr("alignment-baseline", "hanging") + .attr("text-anchor", "middle") + .attr("class", "font-weight-bold") + .text(d.waterlevel + " cm"); + } // get text dimensions - const textBBox = this.diagram - .select(".chart-tooltip text") - .node() - .getBBox(); + const textBBox = tooltipText.node().getBBox(); + console.log(textBBox); this.diagram .selectAll(".chart-tooltip text tspan") - .attr("x", textBBox.width / 2 + padding) - .attr("y", padding); + .attr("x", textBBox.width / 2 + tooltipPadding) + .attr("y", tooltipPadding); // position and scale tooltip box - - let xMax = this.dimensions.width - textBBox.width; - let tooltipX = Math.min(coords.x - textBBox.width / 2, xMax); - let tooltipY = coords.y - textBBox.height * 2 + padding * 2; + const xMax = + this.dimensions.width - + (textBBox.width + diagramPadding + tooltipPadding * 2); + const tooltipX = Math.max( + diagramPadding, + Math.min(coords.x - (textBBox.width + tooltipPadding * 2) / 2, xMax) + ); + const tooltipY = + coords.y - (textBBox.height + tooltipPadding * 2) - 10; this.diagram .select(".chart-tooltip") .style("opacity", 1) .attr("transform", `translate(${tooltipX}, ${tooltipY})`) .select("rect") - .attr("width", textBBox.width + padding * 2) - .attr("height", textBBox.height + padding * 2); + .attr("width", textBBox.width + tooltipPadding * 2) + .attr("height", textBBox.height + tooltipPadding * 2); }); }, isNext(seconds) {